import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import React, { useState } from 'react';
import { InView } from 'react-intersection-observer';
import { createIntlCache, createIntl, useIntl, FormattedMessage } from 'react-intl';
import { getLangFromLocale, Info, InfoPresentation, Size, Chevron, Position, Link, Button, ControlType, Priority } from '@transferwise/components';
import { parse, toSeconds, toDays, toHours, toMinutes } from 'duration-fns';
import { S as SpeedMessages } from './index-ddcc57a9.js';
import { R as REVOLUT_WITH_DISCLAIMER } from './ProviderWithDisclaimer-def85c48.js';
import { W as WISE_ALIAS } from './provider-constants-b35398f2.js';
import { n as trackFeePopoverClicked, o as trackExpandRowClicked, e as trackClickToSeeAvailableComparison, l as trackTableViewed, m as getTrackingTriggerIndex } from './tracking-6183d916.js';
import { getRateInAllFormats, formatMoney, formatRate, formatPercentage } from '@transferwise/formatting';
import { ArrowRight, Check, Clock } from '@transferwise/icons';
import { P as ProviderLogo } from './ProviderLogo-fe09335a.js';
import { u as useComparisonTableHeroV2TableTrackingContext, c as clsx, g as getFastestProviders } from './ComparisonTableHeroV2TrackingContext-3f2aabac.js';
import { i as isConsideredMidmarketRate } from './isConsideredMidmarketRate-4f12041d.js';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';

const cache = createIntlCache();
/*
  Rounding Values
    20 seconds
    10 minutes
    3 hours
*/
const SECONDS_ROUNDING_LIMIT = 20;
const MINUTES_ROUNDING_LIMIT = 10;
const HOURS_ROUNDING_LIMIT = 3;
var TranslationKeys;
(function (TranslationKeys) {
    TranslationKeys["Unavailable"] = "unavailable";
    TranslationKeys["SameDay"] = "same-day";
    TranslationKeys["Day"] = "day";
    TranslationKeys["Hour"] = "hour";
    TranslationKeys["Minute"] = "minute";
    TranslationKeys["Second"] = "second";
    TranslationKeys["Within"] = "within";
    TranslationKeys["Instant"] = "instant";
})(TranslationKeys || (TranslationKeys = {}));
const TimeUnitTranslationKeyMap = {
    days: TranslationKeys.Day,
    hours: TranslationKeys.Hour,
    minutes: TranslationKeys.Minute,
    seconds: TranslationKeys.Second,
};
const getSpeedLabel = (isoMin, isoMax, locale) => {
    try {
        isoMin && parse(isoMin);
        isoMax && parse(isoMax);
    }
    catch (error) {
        // eslint-disable-next-line no-console
        console.error('Invalid ISO duration format. Please provide a valid ISO duration.', error);
        return translateSpeedLabel(TranslationKeys.Unavailable, locale);
    }
    if (!isoMin && !isoMax) {
        // If both min and isoMax are empty
        return translateSpeedLabel(TranslationKeys.Unavailable, locale);
    }
    else if (!isoMin && isoMax) {
        // If isoMin is empty and isoMax has value
        return withMaxAndNoMin(isoMax, locale);
    }
    else if (isoMin && !isoMax) {
        // If isoMin has value and isoMax is empty
        return withMinAndNoMax(isoMin, locale);
    }
    else if (isoMin && isoMax) {
        // If both isoMin and isoMax have values
        return withMinAndMax(isoMin, isoMax, locale);
    }
    return translateSpeedLabel(TranslationKeys.Unavailable, locale);
};
const withMaxAndNoMin = (isoMax, locale) => {
    if (isoMax === 'P0D') {
        return translateSpeedLabel(TranslationKeys.SameDay, locale);
    }
    if (isoMax === 'PT0S') {
        return translateSpeedLabel(TranslationKeys.Instant, locale);
    }
    const durationToSeconds = Math.floor(toSeconds(isoMax));
    const durationInDays = Math.floor(toDays(isoMax));
    const durationInHours = Math.floor(toHours(isoMax));
    const durationInMinutes = Math.floor(toMinutes(isoMax));
    if (durationToSeconds <= 20) {
        return `${translateSpeedLabel(TranslationKeys.Within, locale)} ${translateSpeedLabel(TranslationKeys.Second, locale, {
            seconds: '',
        })}`;
    }
    const timeUnits = [
        {
            value: durationInDays,
            label: translateSpeedLabel(TranslationKeys.Day, locale, {
                days: durationInDays,
            }),
            limit: 0,
        },
        {
            value: durationInHours,
            label: translateSpeedLabel(TranslationKeys.Hour, locale, {
                hours: durationInHours <= HOURS_ROUNDING_LIMIT ? '' : durationInHours,
            }),
        },
        {
            value: durationInMinutes,
            label: translateSpeedLabel(TranslationKeys.Minute, locale, {
                minutes: durationInMinutes <= MINUTES_ROUNDING_LIMIT ? '' : durationInMinutes,
            }),
            limit: MINUTES_ROUNDING_LIMIT,
        },
        {
            value: durationToSeconds,
            label: translateSpeedLabel(TranslationKeys.Second, locale, {
                seconds: durationToSeconds <= SECONDS_ROUNDING_LIMIT ? '' : durationToSeconds,
            }),
            limit: SECONDS_ROUNDING_LIMIT,
        },
    ];
    for (const unit of timeUnits) {
        if (unit.value >= 1) {
            return `${translateSpeedLabel(TranslationKeys.Within, locale)} ${unit.label}`;
        }
    }
    return translateSpeedLabel(TranslationKeys.Unavailable, locale);
};
const withMinAndNoMax = (isoMin, locale) => {
    const durationInDays = Math.floor(toDays(isoMin));
    const durationInHours = Math.floor(toHours(isoMin));
    const durationInMinutes = Math.floor(toMinutes(isoMin));
    const durationToSeconds = Math.floor(toSeconds(isoMin));
    const timeUnits = [
        {
            value: durationInDays,
            lable: translateSpeedLabel(TranslationKeys.Day, locale, { days: '' }),
        },
        {
            value: durationInHours,
            lable: translateSpeedLabel(TranslationKeys.Hour, locale, { hours: '' }),
        },
        {
            value: durationInMinutes,
            lable: translateSpeedLabel(TranslationKeys.Minute, locale, {
                minutes: '',
            }),
        },
        {
            value: durationToSeconds,
            lable: translateSpeedLabel(TranslationKeys.Second, locale, {
                seconds: '',
            }),
        },
    ];
    for (const unit of timeUnits) {
        if (unit.value >= 1) {
            return `${unit.value}+ ${unit.lable}`;
        }
    }
    return translateSpeedLabel(TranslationKeys.Unavailable, locale);
};
const withMinAndMax = (isoMin, isoMax, locale) => {
    const minDurationInSeconds = Math.floor(toSeconds(isoMin));
    const maxDurationInSeconds = Math.floor(toSeconds(isoMax));
    if (minDurationInSeconds > maxDurationInSeconds) {
        return translateSpeedLabel(TranslationKeys.Unavailable, locale);
    }
    if (minDurationInSeconds === 0 && maxDurationInSeconds === 0) {
        return translateSpeedLabel(TranslationKeys.Instant, locale);
    }
    if (maxDurationInSeconds < 20) {
        return `${translateSpeedLabel(TranslationKeys.Within, locale)} ${translateSpeedLabel(TranslationKeys.Second, locale, {
            seconds: '',
        })}`;
    }
    const parsedMin = parseDuration(isoMin);
    const parsedMax = parseDuration(isoMax);
    // if they are the equal
    if (minDurationInSeconds === maxDurationInSeconds) {
        return translateSpeedLabel(TimeUnitTranslationKeyMap[parsedMax.unit], locale, {
            [parsedMax.unit]: `${parsedMax.val}`,
        });
    }
    if (parsedMin.unit === parsedMax.unit) {
        return translateSpeedLabel(TimeUnitTranslationKeyMap[parsedMax.unit], locale, {
            [parsedMax.unit]: `${parsedMin.val}-${parsedMax.val}`,
        });
        // if not equal and have the same unit
    }
    else {
        // if not equal and doesn't have the same unit
        return `${translateSpeedLabel(TranslationKeys.Within, locale)} ${translateSpeedLabel(TimeUnitTranslationKeyMap[parsedMax.unit], locale, {
            [parsedMax.unit]: `${parsedMax.val}`,
        })}`;
    }
};
function parseDuration(isoDuration) {
    const durationInDays = Math.floor(toDays(isoDuration));
    const durationInHours = Math.floor(toHours(isoDuration));
    const durationInMinutes = Math.floor(toMinutes(isoDuration));
    const durationToSeconds = Math.floor(toSeconds(isoDuration));
    if (durationInDays >= 1) {
        return {
            val: durationInDays,
            unit: 'days',
        };
    }
    else if (durationInHours >= 1) {
        return {
            val: durationInHours,
            unit: 'hours',
        };
    }
    else if (durationInMinutes >= 1) {
        return {
            val: durationInMinutes,
            unit: 'minutes',
        };
    }
    else {
        return {
            val: durationToSeconds,
            unit: 'seconds',
        };
    }
}
function translateSpeedLabel(key, locale, options) {
    const lang = getLangFromLocale(locale) === 'zh'
        ? locale
        : getLangFromLocale(locale) || 'en';
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const { formatMessage } = createIntl({
        locale: lang,
        messages: Object.assign(Object.assign({}, SpeedMessages.en), SpeedMessages[lang]) || SpeedMessages.en,
    }, cache);
    const formattedMessage = options
        ? formatMessage({ id: key }, options).trim()
        : formatMessage({ id: key });
    return formattedMessage.toLowerCase();
}

var css_248z$6 = ".cc_infoContainer_1579418673 {\n  min-width: 317px;\n  padding-top: var(--size-16);\n  padding-right: var(--size-24);\n  padding-bottom: var(--size-16);\n  padding-left: var(--size-16);\n  border-radius: var(--size-8);\n}\n@media (max-width: 575px) {\n  .cc_infoContainer_1579418673 {\n    padding-right: var(--size-24);\n  }\n}\n@media (max-width: 480px) {\n  .cc_infoContainer_1579418673 {\n    max-width: 89%;\n    margin-left: var(--size-16);\n  }\n}\n@media screen and (max-width: 399px) {\n  .cc_infoContainer_1579418673 {\n    min-width: 95%;\n    margin: 0%;\n  }\n}\n.cc_infoContainer_1579418673 .cc_exchangeRateRow_1579418673 {\n  display: flex;\n  align-items: center;\n}\n.cc_infoContainer_1579418673 .cc_exchangeRateRow_1579418673 .cc_labels_1579418673 {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.cc_infoContainer_1579418673 .cc_exchangeRateRow_1579418673 .cc_labels_1579418673 .cc_currencies_1579418673 {\n  display: flex;\n  align-items: center;\n  font-size: var(--font-size-12);\n  gap: 2px;\n}\n.cc_infoContainer_1579418673 .cc_exchangeRateRow_1579418673 .cc_labels_1579418673 .cc_currencies_1579418673 .cc_currenciesArrow_1579418673 svg {\n  width: var(--size-12);\n  height: var(--size-12);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLWhlcm8tdjIvQ29tcGFyaXNvblRhYmxlSGVyb1YySW5mby9Db21wYXJpc29uVGFibGVIZXJvVjJJbmZvLm1vZHVsZS5sZXNzIiwiQ29tcGFyaXNvblRhYmxlSGVyb1YySW5mby5tb2R1bGUubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFLGdCQUFBO0VBQ0EsMkJBQUE7RUFDQSw2QkFBQTtFQUNBLDhCQUFBO0VBQ0EsNEJBQUE7RUFDQSw0QkFBQTtBQ0RGO0FER0U7RUFBQTtJQUNFLDZCQUFBO0VDQUY7QUFDRjtBREVFO0VBQUE7SUFDRSxjQUFBO0lBQ0EsMkJBQUE7RUNDRjtBQUNGO0FEQ0U7RUFBQTtJQUNFLGNBQUE7SUFDQSxVQUFBO0VDRUY7QUFDRjtBRHRCQTtFQXVCSSxhQUFBO0VBQ0EsbUJBQUE7QUNFSjtBRDFCQTtFQTJCTSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxRQUFBO0FDRU47QUQvQkE7RUFnQ1EsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsOEJBQUE7RUFDQSxRQUFBO0FDRVI7QURyQ0E7RUF1Q1kscUJBQUE7RUFDQSxzQkFBQTtBQ0NaIiwiZmlsZSI6IkNvbXBhcmlzb25UYWJsZUhlcm9WMkluZm8ubW9kdWxlLmxlc3MifQ== */";
var styles$2 = {"infoContainer":"cc_infoContainer_1579418673","exchangeRateRow":"cc_exchangeRateRow_1579418673","labels":"cc_labels_1579418673","currencies":"cc_currencies_1579418673","currenciesArrow":"cc_currenciesArrow_1579418673"};
styleInject(css_248z$6);

const getInfoContent = (exchangeRateMarkup, midMarketRate, exchangeRate, sourceCurrency, targetCurrency, locale, formattedExchangeRateEquation) => {
    var _a;
    const isInvertedRate = formattedExchangeRateEquation.reference === 'target';
    const formattedExchangeRate = isInvertedRate
        ? formattedExchangeRateEquation.calculationInDecimal
        : formatRate(exchangeRate, {}, locale);
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const formattedMidMarketRate = isInvertedRate
        ? // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
            (_a = getRateInAllFormats(midMarketRate, sourceCurrency, targetCurrency, {}, locale).formats
                .equation) === null || _a === void 0 ? void 0 : _a.calculationInDecimal
        : formatRate(midMarketRate, {}, locale);
    if (isConsideredMidmarketRate(exchangeRate, midMarketRate, 0.01)) {
        return (jsxs(Fragment, { children: [jsx(FormattedMessage, { tagName: "p", id: "cthv2-row-info-popover-details", values: {
                        rate: jsx("span", Object.assign({ className: "text-positive" }, { children: formattedExchangeRate })),
                        rateDetails: (jsx(FormattedMessage, { id: "cthv2-row-info-popover-same-rate-details", values: {
                                midMarketRate: jsx("span", Object.assign({ className: "text-positive" }, { children: formattedMidMarketRate })),
                            } })),
                    } }), jsx(FormattedMessage, { id: "cthv2-row-info-popover-conclusion-same", tagName: "p" })] }));
    }
    else if (midMarketRate > exchangeRate) {
        const percentageDifference = (midMarketRate - exchangeRate) / midMarketRate;
        return (jsxs(Fragment, { children: [jsx(FormattedMessage, { tagName: "p", id: "cthv2-row-info-popover-details", values: {
                        rate: jsx("span", Object.assign({ className: "text-negative" }, { children: formattedExchangeRate })),
                        rateDetails: (jsx(FormattedMessage, { id: "cthv2-row-info-popover-worse-rate-details", values: {
                                percentage: `${formatPercentage(percentageDifference)}`,
                                midMarketRate: jsx("span", Object.assign({ className: "text-positive" }, { children: formattedMidMarketRate })),
                            } })),
                    } }), jsx(FormattedMessage, { id: "cthv2-row-info-popover-conclusion-worse", values: {
                        additionalFees: formatMoney(exchangeRateMarkup, sourceCurrency, locale),
                    }, tagName: "p" })] }));
    }
    else {
        return (jsxs(Fragment, { children: [jsx(FormattedMessage, { tagName: "p", id: "cthv2-row-info-popover-details", values: {
                        rate: jsx("span", Object.assign({ className: "text-positive" }, { children: formattedExchangeRate })),
                        rateDetails: (jsx(FormattedMessage, { id: "cthv2-row-info-popover-better-rate-details", values: {
                                midMarketRate: jsx("span", Object.assign({ className: "text-positive" }, { children: formattedMidMarketRate })),
                            } })),
                    } }), jsx(FormattedMessage, { id: "cthv2-row-info-popover-conclusion-better", tagName: "p" })] }));
    }
};
const ComparisonTableHeroV2Info = ({ sourceCurrency, targetCurrency, providerName, transferFee, exchangeRate, midMarketRate, valuesClassName, sendMoneyValue, showIncludeInTotalLabel = false, }) => {
    var _a;
    const { formatMessage, locale } = useIntl();
    const { trackingContext, trackEvent } = useComparisonTableHeroV2TableTrackingContext();
    const exchangeRateInAllFormats = exchangeRate
        ? getRateInAllFormats(exchangeRate, sourceCurrency, targetCurrency, {}, locale)
        : null;
    const formattedExchangeRateEquation = (_a = exchangeRateInAllFormats === null || exchangeRateInAllFormats === void 0 ? void 0 : exchangeRateInAllFormats.formats) === null || _a === void 0 ? void 0 : _a.equation;
    const exchangeRateMarkup = exchangeRate
        ? ((midMarketRate - exchangeRate) * sendMoneyValue) / midMarketRate
        : null;
    const costOfTransfer = exchangeRateMarkup !== null && transferFee ? exchangeRateMarkup + transferFee : null;
    return (jsxs("div", Object.assign({ className: `container_fluid bg-neutral ${styles$2['infoContainer']}` }, { children: [transferFee && (jsxs("div", Object.assign({ className: "row p-b-1 text-primary np-text-body-default" }, { children: [jsx("div", Object.assign({ className: "col-xs-6 text-xs-left " }, { children: formatMessage({ id: 'cthv2-row-info-transfer-fee' }) })), jsx("div", Object.assign({ className: `col-xs-6 text-xs-right ${valuesClassName}` }, { children: formatMoney(transferFee, sourceCurrency, locale) }))] }))), exchangeRate && (jsxs("div", Object.assign({ className: `row p-b-1  text-primary np-text-body-default ${styles$2['exchangeRateRow']}` }, { children: [jsxs("div", Object.assign({ className: `col-xs-6 text-xs-left  ${styles$2['labels']}` }, { children: [formatMessage({ id: 'cthv2-row-info-exchange-rate' }), formattedExchangeRateEquation.reference === 'target' ? (jsxs("span", Object.assign({ className: `text-secondary ${styles$2['currencies']}` }, { children: ["(1 ", targetCurrency, " ", jsx(ArrowRight, { className: `${styles$2['currenciesArrow']}` }), sourceCurrency, ")"] }))) : (jsxs("span", Object.assign({ className: `text-secondary ${styles$2['currencies']}` }, { children: ["(1 ", sourceCurrency, " ", jsx(ArrowRight, { className: `${styles$2['currenciesArrow']}` }), targetCurrency, ")"] })))] })), jsx("div", Object.assign({ className: `col-xs-6 text-xs-right ${valuesClassName}` }, { children: formattedExchangeRateEquation.calculationInDecimal }))] }))), exchangeRateMarkup !== null && exchangeRate && (jsxs("div", Object.assign({ className: "row p-b-1 text-primary np-text-body-default" }, { children: [jsxs("div", Object.assign({ className: "col-xs-8 col-sm-6 text-xs-left" }, { children: [formatMessage({ id: 'cthv2-row-info-exchange-rate-markup' }), ' ', jsx(Info, { title: formatMessage({ id: 'cthv2-row-info-popover-title' }), content: getInfoContent(exchangeRateMarkup, midMarketRate, exchangeRate, sourceCurrency, targetCurrency, locale, formattedExchangeRateEquation), presentation: InfoPresentation.POPOVER, size: Size.SMALL, "aria-label": formatMessage({ id: 'cthv2-row-info-popover-title' }), onClick: () => {
                                    const popOverTrackingContext = Object.assign(Object.assign({}, trackingContext), { providerName });
                                    trackFeePopoverClicked(popOverTrackingContext, trackEvent);
                                } })] })), jsx("div", Object.assign({ className: clsx('col-xs-4 col-md-6 text-xs-right', valuesClassName) }, { children: formatMoney(exchangeRateMarkup, sourceCurrency, locale) }))] }))), costOfTransfer && (jsxs(Fragment, { children: [jsx("hr", { className: "m-a-0" }), jsxs("div", Object.assign({ className: "row p-t-1" }, { children: [jsxs("div", Object.assign({ className: "col-xs-6 text-xs-left np-text-body-default-bold text-primary" }, { children: [' ', formatMessage({ id: 'cthv2-row-info-cost-of-transfer' }), showIncludeInTotalLabel ? (jsxs("span", Object.assign({ className: "np-text-body-default" }, { children: [jsx("br", {}), formatMessage({ id: 'cthv2-row-info-included-in-total' })] }))) : ('')] })), jsx("div", Object.assign({ className: `col-xs-6 text-xs-right np-text-body-default text-primary ${showIncludeInTotalLabel ? 'p-a-1' : ''} ${valuesClassName}` }, { children: formatMoney(costOfTransfer, sourceCurrency, locale) }))] }))] }))] })));
};

var css_248z$5 = ".cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673.cc___vertical_align_middle_1579418673 {\n  vertical-align: middle;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673.cc___vertical_align_bottom_1579418673 {\n  vertical-align: bottom;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673.cc___vertical_align_baseline_1579418673 {\n  vertical-align: baseline;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673.cc___vertical_align_extra_labels_1579418673 {\n  vertical-align: middle;\n}\n@media (min-width: 768px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673.cc___vertical_align_extra_labels_1579418673 {\n    vertical-align: inherit;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673.cc___vertical_align_extra_labels_1579418673 .cc_chevron_1579418673 {\n  padding-top: var(--size-32);\n}\n@media (min-width: 768px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673.cc___vertical_align_extra_labels_1579418673 .cc_chevron_1579418673 {\n    padding-bottom: var(--size-4);\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673.cc___vertical_align_less_labels_1579418673 {\n  vertical-align: middle;\n}\n@media (min-width: 768px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673.cc___vertical_align_less_labels_1579418673 {\n    vertical-align: sub;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td {\n  padding-top: 24px;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td.cc_logo_1579418673 {\n  padding-left: var(--size-48);\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td.cc_logo_1579418673.cc___with_flags_1579418673 {\n  position: absolute;\n  padding-top: 38px;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td.cc_logo_1579418673 > .cc_providerLogo_1579418673 {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    width: fit-content;\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td.cc_logo_1579418673 > .cc_providerLogo_1579418673 img {\n    width: 100px;\n    height: 24px;\n    margin: 0;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td > .cc_cheapestLabel_1579418673 {\n  display: block;\n  position: absolute;\n  z-index: 1;\n  top: var(--size-8);\n  right: unset;\n  bottom: unset;\n  left: calc(-1 * var(--size-16));\n  padding: var(--size-4) var(--size-8);\n  border-radius: 0 calc(var(--size-4) - 1px) calc(var(--size-4) - 1px) 0;\n  background: var(--color-content-positive);\n  color: var(--color-white);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: 1;\n  white-space: nowrap;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td > .cc_cheapestLabel_1579418673.cc___with_tmi_1579418673 {\n  top: 2px;\n}\n@media (min-width: 768px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td > .cc_cheapestLabel_1579418673 {\n    z-index: 1;\n    top: var(--size-8);\n    right: unset;\n    left: calc(-1 * var(--size-16));\n    border-radius: calc(var(--size-4) - 1px);\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td > .cc_cheapestLabel_1579418673.cc___with_tmi_1579418673 {\n    top: var(--size-8);\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td > .cc_cheapestLabel_1579418673 > .cc_cheapestLabelTick_1579418673 {\n  display: inline-block;\n  height: var(--size-16);\n  margin-right: var(--size-8);\n  vertical-align: bottom;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td.cc_amount_1579418673 {\n  padding-right: var(--size-24);\n  text-align: start;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td.cc_speed_1579418673 {\n  padding-right: var(--size-24);\n  text-align: start;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td.cc_chevron_1579418673 {\n  padding-right: 22px;\n  text-align: end;\n  vertical-align: bottom;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td {\n    padding-top: var(--size-24);\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td.cc_logo_1579418673 {\n    padding-left: 20px;\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td.cc_amount_1579418673 {\n    padding-right: 0%;\n    text-align: end;\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td.cc_speed_1579418673 {\n    padding-right: 0%;\n    text-align: end;\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_1579418673 td.cc_chevron_1579418673 {\n    padding-right: var(--size-10);\n    text-align: end;\n    vertical-align: middle;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__amount_1579418673 {\n  display: flex;\n  flex-direction: column;\n  color: var(--color-content-primary);\n  text-align: start;\n  gap: var(--size-4);\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__amount_1579418673 .cc_saving-amount_1579418673 .cc_currency-block_1579418673 {\n  white-space: nowrap;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__amount_1579418673 .cc_difference-amount_1579418673 {\n  color: var(--color-sentiment-negative);\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__amount_1579418673 .cc_difference-arrow_1579418673 {\n  display: inline-block;\n  margin-right: 6px;\n  border-top: var(--size-8) solid var(--color-sentiment-negative);\n  border-right: 5px solid transparent;\n  border-left: 5px solid transparent;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__amount_1579418673 .cc_speed-content_1579418673 {\n  display: none;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__amount_1579418673 {\n    display: inline-flex;\n    padding-right: var(--size-16);\n    text-align: end;\n    gap: var(--size-8);\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__amount_1579418673 .cc_speed-content_1579418673 {\n    display: block;\n    color: var(--color-content-primary);\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__amount_1579418673 > .cc_send-amount_1579418673 {\n    font-size: var(--font-size-18);\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__speed_1579418673 {\n  display: flex;\n  margin-top: var(--size-14);\n  text-align: start;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__speed_1579418673 {\n    display: none;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__border_1579418673 {\n  display: table-row;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__border_1579418673 td {\n  padding-top: 26px;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__border_1579418673 td {\n    padding-top: var(--size-24);\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__border_1579418673 td .cc___row__border-line_1579418673 {\n  max-width: 95%;\n  margin: 0 auto;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row__border_1579418673:last-child td .cc___row__border-line_1579418673 {\n  max-width: 100%;\n  margin: 0 auto;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_info_1579418673 {\n  display: none;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_info_expanded_1579418673 {\n  padding-top: var(--size-16);\n  padding-right: var(--size-64);\n  padding-left: 38%;\n  animation: cc_fade-in_1579418673 0.3s ease-out;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_info_expanded_1579418673 {\n    padding-right: 0;\n    padding-left: 0;\n    animation: none;\n  }\n}\n@media screen and (max-width: 399px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_info_expanded_1579418673 {\n    display: flex;\n    justify-content: center;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_info_expanded_1579418673 .cc___value_1579418673 {\n  padding-left: 20px !important;\n  font-size: 16px;\n  text-align: start;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_info_expanded_1579418673 .cc___value_1579418673 {\n    font-size: 14px;\n    text-align: end;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_info_expanded_1579418673.cc_last-row_1579418673 {\n  padding-bottom: var(--size-16);\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row_info_expanded_1579418673.cc_last-row_1579418673 {\n    padding-bottom: var(--size-32);\n  }\n}\n@keyframes cc_fade-in_1579418673 {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    display: block;\n    opacity: 1;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___row-chevron_1579418673 {\n  padding: var(--size-4);\n  border-radius: var(--size-16);\n  background: var(--color-background-neutral);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLWhlcm8tdjIvQ29tcGFyaXNvblRhYmxlSGVyb1YyUm93L1dpdGhTcGVlZC9Sb3dXaXRoU3BlZWQubW9kdWxlLmxlc3MiLCJSb3dXaXRoU3BlZWQubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS0k7RUFDRSxzQkFBQTtBQ0pOO0FET0k7RUFDRSxzQkFBQTtBQ0xOO0FEUUk7RUFDRSx3QkFBQTtBQ05OO0FEU0k7RUFDRSxzQkFBQTtBQ1BOO0FEU007RUFBQTtJQUNFLHVCQUFBO0VDTk47QUFDRjtBRENJO0VBUUksMkJBQUE7QUNOUjtBRFFRO0VBQUE7SUFDRSw2QkFBQTtFQ0xSO0FBQ0Y7QURTSTtFQUNFLHNCQUFBO0FDUE47QURTTTtFQUFBO0lBQ0UsbUJBQUE7RUNOTjtBQUNGO0FEN0JBO0VBdUNNLGlCQUFBO0FDUE47QURTTTtFQU1FLDRCQUFBO0FDWlI7QURPUTtFQUNFLGtCQUFBO0VBQ0EsaUJBQUE7QUNMVjtBRFVRO0VBQ0U7SUFDRSxhQUFBO0lBQ0Esc0JBQUE7SUFDQSx1QkFBQTtJQUNBLGtCQUFBO0VDUlY7RURJUTtJQU9JLFlBQUE7SUFDQSxZQUFBO0lBQ0EsU0FBQTtFQ1JaO0FBQ0Y7QURhTTtFQUNFLGNBQUE7RUFDQSxrQkFBQTtFQUNBLFVBQUE7RUFDQSxrQkFBQTtFQUNBLFlBQUE7RUFDQSxhQUFBO0VBQ0EsK0JBQUE7RUFDQSxvQ0FBQTtFQUNBLHNFQUFBO0VBQ0EseUNBQUE7RUFDQSx5QkFBQTtFQUNBLDhCQUFBO0VBQ0EseUNBQUE7RUFDQSxjQUFBO0VBQ0EsbUJBQUE7QUNYUjtBRGFRO0VBQ0UsUUFBQTtBQ1hWO0FEY1E7RUFBQTtJQUNFLFVBQUE7SUFDQSxrQkFBQTtJQUNBLFlBQUE7SUFDQSwrQkFBQTtJQUNBLHdDQUFBO0VDWFI7RURhUTtJQUNFLGtCQUFBO0VDWFY7QUFDRjtBRGNRO0VBQ0UscUJBQUE7RUFDQSxzQkFBQTtFQUNBLDJCQUFBO0VBQ0Esc0JBQUE7QUNaVjtBRGdCTTtFQUNFLDZCQUFBO0VBQ0EsaUJBQUE7QUNkUjtBRGlCTTtFQUNFLDZCQUFBO0VBQ0EsaUJBQUE7QUNmUjtBRGtCTTtFQUNFLG1CQUFBO0VBQ0EsZUFBQTtFQUNBLHNCQUFBO0FDaEJSO0FEb0JJO0VBQUE7SUFFSSwyQkFBQTtFQ2xCTjtFRG9CTTtJQUNFLGtCQUFBO0VDbEJSO0VEcUJNO0lBQ0UsaUJBQUE7SUFDQSxlQUFBO0VDbkJSO0VEc0JNO0lBQ0UsaUJBQUE7SUFDQSxlQUFBO0VDcEJSO0VEdUJNO0lBQ0UsNkJBQUE7SUFDQSxlQUFBO0lBQ0Esc0JBQUE7RUNyQlI7QUFDRjtBRDVIQTtFQXVKSSxhQUFBO0VBQ0Esc0JBQUE7RUFDQSxtQ0FBQTtFQUNBLGlCQUFBO0VBQ0Esa0JBQUE7QUN4Qko7QURuSUE7RUErSlEsbUJBQUE7QUN6QlI7QUR0SUE7RUFvS00sc0NBQUE7QUMzQk47QUR6SUE7RUF3S00scUJBQUE7RUFDQSxpQkFBQTtFQUNBLCtEQUFBO0VBQ0EsbUNBQUE7RUFDQSxrQ0FBQTtBQzVCTjtBRGhKQTtFQWdMTSxhQUFBO0FDN0JOO0FEZ0NJO0VBQUE7SUFDRSxvQkFBQTtJQUNBLDZCQUFBO0lBQ0EsZUFBQTtJQUNBLGtCQUFBO0VDN0JKO0VEeUJFO0lBT0ksY0FBQTtJQUNBLG1DQUFBO0VDN0JOO0VEZ0NJO0lBQ0UsOEJBQUE7RUM5Qk47QUFDRjtBRGxLQTtFQXFNSSxhQUFBO0VBQ0EsMEJBQUE7RUFDQSxpQkFBQTtBQ2hDSjtBRGtDSTtFQUFBO0lBQ0UsYUFBQTtFQy9CSjtBQUNGO0FENUtBO0VBK01JLGtCQUFBO0FDaENKO0FEL0tBO0VBa05NLGlCQUFBO0FDaENOO0FEa0NNO0VBQUE7SUFDRSwyQkFBQTtFQy9CTjtBQUNGO0FEdkxBO0VBeU5RLGNBQUE7RUFDQSxjQUFBO0FDL0JSO0FEbUNJO0VBR00sZUFBQTtFQUNBLGNBQUE7QUNuQ1Y7QUQvTEE7RUF5T0ksYUFBQTtBQ3ZDSjtBRGxNQTtFQTZPSSwyQkFBQTtFQUNBLDZCQUFBO0VBQ0EsaUJBQUE7RUFDQSw4Q0FBQTtBQ3hDSjtBRDBDSTtFQUFBO0lBQ0UsZ0JBQUE7SUFDQSxlQUFBO0lBQ0EsZUFBQTtFQ3ZDSjtBQUNGO0FEeUNJO0VBQUE7SUFDRSxhQUFBO0lBQ0EsdUJBQUE7RUN0Q0o7QUFDRjtBRHJOQTtFQThQTSw2QkFBQTtFQUNBLGVBQUE7RUFDQSxpQkFBQTtBQ3RDTjtBRHdDTTtFQUFBO0lBQ0UsZUFBQTtJQUNBLGVBQUE7RUNyQ047QUFDRjtBRHdDSTtFQUNFLDhCQUFBO0FDdENOO0FEd0NNO0VBQUE7SUFDRSw4QkFBQTtFQ3JDTjtBQUNGO0FEeUNFO0VBQ0U7SUFDRSxVQUFBO0VDdkNKO0VEMENFO0lBQ0UsY0FBQTtJQUNBLFVBQUE7RUN4Q0o7QUFDRjtBRGpQQTtFQTZSSSxzQkFBQTtFQUNBLDZCQUFBO0VBQ0EsMkNBQUE7QUN6Q0oiLCJmaWxlIjoiUm93V2l0aFNwZWVkLm1vZHVsZS5sZXNzIn0= */";
var stylesWithSpeed$1 = {"comparison-hero-v2__table":"cc_comparison-hero-v2__table_1579418673","comparisonHeroV2__table":"cc_comparison-hero-v2__table_1579418673","with-speed":"cc_with-speed_1579418673","withSpeed":"cc_with-speed_1579418673","__row":"cc___row_1579418673","__vertical_align_middle":"cc___vertical_align_middle_1579418673","__vertical_align_bottom":"cc___vertical_align_bottom_1579418673","__vertical_align_baseline":"cc___vertical_align_baseline_1579418673","__vertical_align_extra_labels":"cc___vertical_align_extra_labels_1579418673","chevron":"cc_chevron_1579418673","__vertical_align_less_labels":"cc___vertical_align_less_labels_1579418673","logo":"cc_logo_1579418673","__with_flags":"cc___with_flags_1579418673","providerLogo":"cc_providerLogo_1579418673","cheapestLabel":"cc_cheapestLabel_1579418673","__with_tmi":"cc___with_tmi_1579418673","cheapestLabelTick":"cc_cheapestLabelTick_1579418673","amount":"cc_amount_1579418673","speed":"cc_speed_1579418673","__row__amount":"cc___row__amount_1579418673","saving-amount":"cc_saving-amount_1579418673","savingAmount":"cc_saving-amount_1579418673","currency-block":"cc_currency-block_1579418673","currencyBlock":"cc_currency-block_1579418673","difference-amount":"cc_difference-amount_1579418673","differenceAmount":"cc_difference-amount_1579418673","difference-arrow":"cc_difference-arrow_1579418673","differenceArrow":"cc_difference-arrow_1579418673","speed-content":"cc_speed-content_1579418673","speedContent":"cc_speed-content_1579418673","send-amount":"cc_send-amount_1579418673","sendAmount":"cc_send-amount_1579418673","__row__speed":"cc___row__speed_1579418673","__row__border":"cc___row__border_1579418673","__row__border-line":"cc___row__border-line_1579418673","__row__borderLine":"cc___row__border-line_1579418673","__row_info":"cc___row_info_1579418673","__row_info_expanded":"cc___row_info_expanded_1579418673","fade-in":"cc_fade-in_1579418673","fadeIn":"cc_fade-in_1579418673","__value":"cc___value_1579418673","last-row":"cc_last-row_1579418673","lastRow":"cc_last-row_1579418673","__row-chevron":"cc___row-chevron_1579418673","__rowChevron":"cc___row-chevron_1579418673"};
styleInject(css_248z$5);

const SPEED_CLASS$1 = 'with-speed';
const FEE_BREAKDOWN_MESSAGE$1 = {
    id: 'cthv2-row-fee-breakdown',
    defaultMessage: 'Fee breakdown',
};
const WithSpeed$1 = ({ logoUrl, logoAltText, providerName, alias, sendMoney, receiveMoney, midMarketRate, exchangeRate, fee, showSpeedColumn = false, speedInfo, savingAmount, differenceAmount, isPartner = false, reference, isFooterHidden = false, showFastestFlag = false, showCheapestFlag = false, providersWithDisclaimers, }) => {
    const { trackingContext, trackEvent } = useComparisonTableHeroV2TableTrackingContext();
    const { formatMessage, locale } = useIntl();
    const [isExpanded, setIsExpanded] = useState(false);
    const onExpandRowClicked = () => {
        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
        trackExpandRowClicked(Object.assign(Object.assign({}, trackingContext), { isRowExpanded: !isExpanded, providerName: providerName }), trackEvent);
        setIsExpanded(!isExpanded);
    };
    const haveSavingOrDifference = (savingAmount && !differenceAmount) || (!savingAmount && differenceAmount);
    return (jsxs(Fragment, { children: [jsxs("tr", Object.assign({ ref: reference, className: `${stylesWithSpeed$1['__row']} ${haveSavingOrDifference
                    ? stylesWithSpeed$1['__vertical_align_extra_labels']
                    : stylesWithSpeed$1['__vertical_align_less_labels']} ${showFastestFlag || showCheapestFlag
                    ? haveSavingOrDifference
                        ? stylesWithSpeed$1['__vertical_align_middle']
                        : stylesWithSpeed$1['__vertical_align_bottom']
                    : ''}` }, { children: [jsxs("td", Object.assign({ className: `${stylesWithSpeed$1['logo']} ${stylesWithSpeed$1[SPEED_CLASS$1]} ${showFastestFlag || showCheapestFlag ? stylesWithSpeed$1['__with_flags'] : ''}` }, { children: [showCheapestFlag && !showFastestFlag && (jsxs("span", Object.assign({ className: `${stylesWithSpeed$1['cheapestLabel']}` }, { children: [jsx(Check, { className: `${stylesWithSpeed$1['cheapestLabelTick']}` }), jsx(FormattedMessage, { id: "cheapest" })] }))), !showCheapestFlag && showFastestFlag && (jsxs("span", Object.assign({ className: `${stylesWithSpeed$1['cheapestLabel']}` }, { children: [jsx(Clock, { className: `${stylesWithSpeed$1['cheapestLabelTick']}` }), jsx(FormattedMessage, { id: "fastest" })] }))), showCheapestFlag && showFastestFlag && (jsxs("span", Object.assign({ className: `${stylesWithSpeed$1['cheapestLabel']} ${stylesWithSpeed$1['__with_tmi']}` }, { children: [jsx(Check, { className: `${stylesWithSpeed$1['cheapestLabelTick']}` }), jsx(FormattedMessage, { id: "cheapest-and-fastest" })] }))), jsx(ProviderLogo, { logo: logoUrl, altText: logoAltText, isPartner: isPartner, alias: alias, styles: {
                                    logoContainer: stylesWithSpeed$1['providerLogo'],
                                }, providersWithDisclaimers: providersWithDisclaimers })] })), jsx("td", Object.assign({ className: `${stylesWithSpeed$1['amount']} ${stylesWithSpeed$1[SPEED_CLASS$1]}` }, { children: jsxs("div", Object.assign({ className: `${stylesWithSpeed$1['__row__amount']} ${stylesWithSpeed$1[SPEED_CLASS$1]}` }, { children: [jsx("span", Object.assign({ className: `np-text-title-subsection ${stylesWithSpeed$1['send-amount']}` }, { children: formatMoney(receiveMoney.value, receiveMoney.currency, locale) })), savingAmount && !differenceAmount ? (jsx("span", Object.assign({ className: `np-text-body-default ${stylesWithSpeed$1['saving-amount']}` }, { children: jsx(FormattedMessage, { id: "cthv2-row-save-up-to", values: {
                                            savings: React.createElement('span', {
                                                className: `${stylesWithSpeed$1['currency-block']}`,
                                            }, formatMoney(savingAmount, receiveMoney.currency, locale)),
                                        } }) }))) : null, differenceAmount && !savingAmount ? (jsxs("span", Object.assign({ className: `np-text-body-default ${stylesWithSpeed$1['difference-amount']}` }, { children: [jsx("span", { className: stylesWithSpeed$1['difference-arrow'] }), `- ${formatMoney(differenceAmount, receiveMoney.currency, locale)}`] }))) : null, jsx("span", Object.assign({ className: `np-text-body-default ${stylesWithSpeed$1['speed-content']}` }, { children: speedInfo }))] })) })), jsx("td", Object.assign({ className: `${stylesWithSpeed$1['speed']}  ${stylesWithSpeed$1[SPEED_CLASS$1]}` }, { children: jsx("div", Object.assign({ className: `np-text-body-large ${stylesWithSpeed$1['__row__speed']}` }, { children: jsx("span", { children: speedInfo }) })) })), jsx("td", Object.assign({ className: `${stylesWithSpeed$1['chevron']} ${stylesWithSpeed$1[SPEED_CLASS$1]}` }, { children: jsx("div", Object.assign({ onClick: onExpandRowClicked, onKeyUp: (event_) => {
                                if (event_.key === 'Enter') {
                                    onExpandRowClicked();
                                }
                            }, role: "button", tabIndex: 0, "aria-label": formatMessage(FEE_BREAKDOWN_MESSAGE$1), title: formatMessage(FEE_BREAKDOWN_MESSAGE$1) }, { children: jsx(Chevron, { className: stylesWithSpeed$1['__row-chevron'], orientation: isExpanded ? Position.TOP : Position.BOTTOM, size: Size.SMALL }) })) }))] })), jsx("tr", { children: jsx("td", Object.assign({ colSpan: 12 }, { children: jsx("div", Object.assign({ className: `np-text-body-default ${isExpanded ? stylesWithSpeed$1[`__row_info_expanded`] : stylesWithSpeed$1['__row_info']} ${isFooterHidden ? stylesWithSpeed$1['last-row'] : ''}` }, { children: jsx(ComparisonTableHeroV2Info, { providerName: providerName, transferFee: fee, exchangeRate: exchangeRate, midMarketRate: midMarketRate, sourceCurrency: sendMoney.currency, targetCurrency: receiveMoney.currency, sendMoneyValue: sendMoney.value, valuesClassName: stylesWithSpeed$1['__value'] }) })) })) }), jsx("tr", Object.assign({ className: stylesWithSpeed$1['__row__border'] }, { children: showSpeedColumn && !isExpanded && (jsx("td", Object.assign({ colSpan: 4 }, { children: !isFooterHidden && jsx("hr", { className: stylesWithSpeed$1['__row__border-line'] }) }))) }))] }));
};

var css_248z$4 = ".cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673.cc___vertical_align_middle_1579418673 {\n  vertical-align: middle;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673.cc___vertical_align_bottom_1579418673 {\n  vertical-align: bottom;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673.cc___vertical_align_baseline_1579418673 {\n  vertical-align: baseline;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673.cc___vertical_align_extra_labels_1579418673 {\n  vertical-align: middle;\n}\n@media (min-width: 768px) {\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673.cc___vertical_align_extra_labels_1579418673 {\n    vertical-align: inherit;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673.cc___vertical_align_extra_labels_1579418673 .cc_chevron_1579418673 {\n  padding-top: var(--size-32);\n}\n@media (min-width: 768px) {\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673.cc___vertical_align_extra_labels_1579418673 .cc_chevron_1579418673 {\n    padding-bottom: var(--size-4);\n  }\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673.cc___vertical_align_less_labels_1579418673 {\n  vertical-align: middle;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td {\n  padding-top: 24px;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td.cc_logo_1579418673 {\n  padding-left: var(--size-48);\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td.cc_logo_1579418673.cc___with_flags_1579418673 {\n  position: absolute;\n  padding-top: 38px;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td.cc_logo_1579418673 > .cc_providerLogo_1579418673 {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    width: fit-content;\n  }\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td.cc_logo_1579418673 > .cc_providerLogo_1579418673 img {\n    width: 100px;\n    height: 24px;\n    margin: 0;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td > .cc_cheapestLabel_1579418673 {\n  display: block;\n  position: absolute;\n  z-index: 1;\n  top: var(--size-8);\n  right: unset;\n  bottom: unset;\n  left: calc(-1 * var(--size-16));\n  padding: var(--size-4) var(--size-8);\n  border-radius: 0 calc(var(--size-4) - 1px) calc(var(--size-4) - 1px) 0;\n  background: var(--color-content-positive);\n  color: var(--color-white);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: 1;\n  white-space: nowrap;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td > .cc_cheapestLabel_1579418673.cc___with_tmi_1579418673 {\n  top: 2px;\n}\n@media (min-width: 768px) {\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td > .cc_cheapestLabel_1579418673 {\n    z-index: 1;\n    top: var(--size-8);\n    right: unset;\n    left: calc(-1 * var(--size-16));\n    border-radius: calc(var(--size-4) - 1px);\n  }\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td > .cc_cheapestLabel_1579418673.cc___with_tmi_1579418673 {\n    top: var(--size-8);\n  }\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td > .cc_cheapestLabel_1579418673 > .cc_cheapestLabelTick_1579418673 {\n  display: inline-block;\n  height: var(--size-16);\n  margin-right: var(--size-8);\n  vertical-align: bottom;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td.cc_amount_1579418673 {\n  padding-right: var(--size-24);\n  text-align: start;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td.cc_chevron_1579418673 {\n  padding-right: 22px;\n  text-align: end;\n  vertical-align: bottom;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td {\n    padding-top: var(--size-24);\n  }\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td.cc_logo_1579418673 {\n    padding-left: 20px;\n  }\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td.cc_amount_1579418673 {\n    padding-right: 0%;\n    text-align: end;\n  }\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_1579418673 td.cc_chevron_1579418673 {\n    padding-right: var(--size-10);\n    text-align: end;\n    vertical-align: bottom;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__amount_1579418673 {\n  display: flex;\n  flex-direction: column;\n  text-align: end;\n  gap: var(--size-4);\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__amount_1579418673.cc_with-speed_1579418673 {\n  text-align: start;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__amount_1579418673.cc_with-speed_1579418673 {\n    text-align: end;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__amount_1579418673 .cc_saving-amount_1579418673 .cc_currency-block_1579418673 {\n  white-space: nowrap;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__amount_1579418673 .cc_difference-amount_1579418673 {\n  color: var(--color-sentiment-negative);\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__amount_1579418673 .cc_difference-arrow_1579418673 {\n  display: inline-block;\n  margin-right: 6px;\n  border-top: var(--size-8) solid var(--color-sentiment-negative);\n  border-right: 5px solid transparent;\n  border-left: 5px solid transparent;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__amount_1579418673 {\n    display: inline-flex;\n    padding-right: var(--size-16);\n  }\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__amount_1579418673 > .cc_send-amount_1579418673 {\n    font-size: var(--font-size-18);\n  }\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__border-line_1579418673 {\n  max-width: 90%;\n  margin: 0 auto;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__border_1579418673 {\n  display: table-row;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__border_1579418673 td {\n  padding-top: 26px;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row__border_1579418673 td {\n    padding-top: var(--size-24);\n  }\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_info_1579418673 {\n  display: none;\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_info_expanded_1579418673 {\n  padding-top: var(--size-16);\n  padding-right: var(--size-64);\n  padding-left: var(--size-40);\n  animation: cc_fade-in_1579418673 0.3s ease-out;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_info_expanded_1579418673 {\n    padding-right: 0;\n    padding-left: 0;\n    animation: none;\n  }\n}\n@media screen and (max-width: 399px) {\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_info_expanded_1579418673 {\n    display: flex;\n    justify-content: center;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_info_expanded_1579418673.cc_last-row_1579418673 {\n  padding-bottom: var(--size-16);\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row_info_expanded_1579418673.cc_last-row_1579418673 {\n    padding-bottom: var(--size-32);\n  }\n}\n@keyframes cc_fade-in_1579418673 {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    display: block;\n    opacity: 1;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673 .cc_comparison-hero-v2__row-chevron_1579418673 {\n  padding: var(--size-4);\n  border-radius: var(--size-16);\n  background: var(--color-background-neutral);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLWhlcm8tdjIvQ29tcGFyaXNvblRhYmxlSGVyb1YyUm93L1dpdGhvdXRTcGVlZC9Sb3dXaXRob3V0U3BlZWQubW9kdWxlLmxlc3MiLCJSb3dXaXRob3V0U3BlZWQubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS0k7RUFDRSxzQkFBQTtBQ0pOO0FET0k7RUFDRSxzQkFBQTtBQ0xOO0FEUUk7RUFDRSx3QkFBQTtBQ05OO0FEU0k7RUFDRSxzQkFBQTtBQ1BOO0FEU007RUFBQTtJQUNFLHVCQUFBO0VDTk47QUFDRjtBRENJO0VBUUksMkJBQUE7QUNOUjtBRFFRO0VBQUE7SUFDRSw2QkFBQTtFQ0xSO0FBQ0Y7QURTSTtFQUNFLHNCQUFBO0FDUE47QUR4QkE7RUFtQ00saUJBQUE7QUNSTjtBRFVNO0VBTUUsNEJBQUE7QUNiUjtBRFFRO0VBQ0Usa0JBQUE7RUFDQSxpQkFBQTtBQ05WO0FEV1E7RUFDRTtJQUNFLGFBQUE7SUFDQSxzQkFBQTtJQUNBLHVCQUFBO0lBQ0Esa0JBQUE7RUNUVjtFREtRO0lBT0ksWUFBQTtJQUNBLFlBQUE7SUFDQSxTQUFBO0VDVFo7QUFDRjtBRGNNO0VBQ0UsY0FBQTtFQUNBLGtCQUFBO0VBQ0EsVUFBQTtFQUNBLGtCQUFBO0VBQ0EsWUFBQTtFQUNBLGFBQUE7RUFDQSwrQkFBQTtFQUNBLG9DQUFBO0VBQ0Esc0VBQUE7RUFDQSx5Q0FBQTtFQUNBLHlCQUFBO0VBQ0EsOEJBQUE7RUFDQSx5Q0FBQTtFQUNBLGNBQUE7RUFDQSxtQkFBQTtBQ1pSO0FEY1E7RUFDRSxRQUFBO0FDWlY7QURlUTtFQUFBO0lBQ0UsVUFBQTtJQUNBLGtCQUFBO0lBQ0EsWUFBQTtJQUNBLCtCQUFBO0lBQ0Esd0NBQUE7RUNaUjtFRGNRO0lBQ0Usa0JBQUE7RUNaVjtBQUNGO0FEZVE7RUFDRSxxQkFBQTtFQUNBLHNCQUFBO0VBQ0EsMkJBQUE7RUFDQSxzQkFBQTtBQ2JWO0FEaUJNO0VBQ0UsNkJBQUE7RUFDQSxpQkFBQTtBQ2ZSO0FEa0JNO0VBQ0UsbUJBQUE7RUFDQSxlQUFBO0VBQ0Esc0JBQUE7QUNoQlI7QURvQkk7RUFBQTtJQUVJLDJCQUFBO0VDbEJOO0VEb0JNO0lBQ0Usa0JBQUE7RUNsQlI7RURxQk07SUFDRSxpQkFBQTtJQUNBLGVBQUE7RUNuQlI7RURzQk07SUFDRSw2QkFBQTtJQUNBLGVBQUE7SUFDQSxzQkFBQTtFQ3BCUjtBQUNGO0FEL0dBO0VBeUlJLGFBQUE7RUFDQSxzQkFBQTtFQUNBLGVBQUE7RUFDQSxrQkFBQTtBQ3ZCSjtBRHlCSTtFQUNFLGlCQUFBO0FDdkJOO0FEeUJNO0VBQUE7SUFDRSxlQUFBO0VDdEJOO0FBQ0Y7QUQ3SEE7RUF3SlEsbUJBQUE7QUN4QlI7QURoSUE7RUE2Sk0sc0NBQUE7QUMxQk47QURuSUE7RUFpS00scUJBQUE7RUFDQSxpQkFBQTtFQUNBLCtEQUFBO0VBQ0EsbUNBQUE7RUFDQSxrQ0FBQTtBQzNCTjtBRDhCSTtFQUFBO0lBQ0Usb0JBQUE7SUFDQSw2QkFBQTtFQzNCSjtFRDZCSTtJQUNFLDhCQUFBO0VDM0JOO0FBQ0Y7QURuSkE7RUFtTEksY0FBQTtFQUNBLGNBQUE7QUM3Qko7QUR2SkE7RUF3TEksa0JBQUE7QUM5Qko7QUQxSkE7RUEyTE0saUJBQUE7QUM5Qk47QURnQ007RUFBQTtJQUNFLDJCQUFBO0VDN0JOO0FBQ0Y7QURsS0E7RUFvTUksYUFBQTtBQy9CSjtBRHJLQTtFQXdNSSwyQkFBQTtFQUNBLDZCQUFBO0VBQ0EsNEJBQUE7RUFDQSw4Q0FBQTtBQ2hDSjtBRGtDSTtFQUFBO0lBQ0UsZ0JBQUE7SUFDQSxlQUFBO0lBQ0EsZUFBQTtFQy9CSjtBQUNGO0FEaUNJO0VBQUE7SUFDRSxhQUFBO0lBQ0EsdUJBQUE7RUM5Qko7QUFDRjtBRGdDSTtFQUNFLDhCQUFBO0FDOUJOO0FEZ0NNO0VBQUE7SUFDRSw4QkFBQTtFQzdCTjtBQUNGO0FEaUNFO0VBQ0U7SUFDRSxVQUFBO0VDL0JKO0VEa0NFO0lBQ0UsY0FBQTtJQUNBLFVBQUE7RUNoQ0o7QUFDRjtBRHpNQTtFQTZPSSxzQkFBQTtFQUNBLDZCQUFBO0VBQ0EsMkNBQUE7QUNqQ0oiLCJmaWxlIjoiUm93V2l0aG91dFNwZWVkLm1vZHVsZS5sZXNzIn0= */";
var stylesWithoutSpeed$1 = {"comparison-hero-v2__table":"cc_comparison-hero-v2__table_1579418673","comparisonHeroV2__table":"cc_comparison-hero-v2__table_1579418673","comparison-hero-v2__row":"cc_comparison-hero-v2__row_1579418673","comparisonHeroV2__row":"cc_comparison-hero-v2__row_1579418673","__vertical_align_middle":"cc___vertical_align_middle_1579418673","__vertical_align_bottom":"cc___vertical_align_bottom_1579418673","__vertical_align_baseline":"cc___vertical_align_baseline_1579418673","__vertical_align_extra_labels":"cc___vertical_align_extra_labels_1579418673","chevron":"cc_chevron_1579418673","__vertical_align_less_labels":"cc___vertical_align_less_labels_1579418673","logo":"cc_logo_1579418673","__with_flags":"cc___with_flags_1579418673","providerLogo":"cc_providerLogo_1579418673","cheapestLabel":"cc_cheapestLabel_1579418673","__with_tmi":"cc___with_tmi_1579418673","cheapestLabelTick":"cc_cheapestLabelTick_1579418673","amount":"cc_amount_1579418673","comparison-hero-v2__row__amount":"cc_comparison-hero-v2__row__amount_1579418673","comparisonHeroV2__row__amount":"cc_comparison-hero-v2__row__amount_1579418673","with-speed":"cc_with-speed_1579418673","withSpeed":"cc_with-speed_1579418673","saving-amount":"cc_saving-amount_1579418673","savingAmount":"cc_saving-amount_1579418673","currency-block":"cc_currency-block_1579418673","currencyBlock":"cc_currency-block_1579418673","difference-amount":"cc_difference-amount_1579418673","differenceAmount":"cc_difference-amount_1579418673","difference-arrow":"cc_difference-arrow_1579418673","differenceArrow":"cc_difference-arrow_1579418673","send-amount":"cc_send-amount_1579418673","sendAmount":"cc_send-amount_1579418673","comparison-hero-v2__row__border-line":"cc_comparison-hero-v2__row__border-line_1579418673","comparisonHeroV2__row__borderLine":"cc_comparison-hero-v2__row__border-line_1579418673","comparison-hero-v2__row__border":"cc_comparison-hero-v2__row__border_1579418673","comparisonHeroV2__row__border":"cc_comparison-hero-v2__row__border_1579418673","comparison-hero-v2__row_info":"cc_comparison-hero-v2__row_info_1579418673","comparisonHeroV2__row_info":"cc_comparison-hero-v2__row_info_1579418673","comparison-hero-v2__row_info_expanded":"cc_comparison-hero-v2__row_info_expanded_1579418673","comparisonHeroV2__row_info_expanded":"cc_comparison-hero-v2__row_info_expanded_1579418673","fade-in":"cc_fade-in_1579418673","fadeIn":"cc_fade-in_1579418673","last-row":"cc_last-row_1579418673","lastRow":"cc_last-row_1579418673","comparison-hero-v2__row-chevron":"cc_comparison-hero-v2__row-chevron_1579418673","comparisonHeroV2__rowChevron":"cc_comparison-hero-v2__row-chevron_1579418673"};
styleInject(css_248z$4);

const FEE_BREAKDOWN_MESSAGE = {
    id: 'cthv2-row-fee-breakdown',
    defaultMessage: 'Fee breakdown',
};
const WithoutSpeed$1 = ({ logoUrl, logoAltText, providerName, alias, sendMoney, receiveMoney, midMarketRate, exchangeRate, fee, showSpeedColumn = false, savingAmount, differenceAmount, isPartner = false, reference, isFooterHidden = false, showCheapestFlag = false, disableDropdown = false, providersWithDisclaimers, }) => {
    const { trackingContext, trackEvent } = useComparisonTableHeroV2TableTrackingContext();
    const { formatMessage, locale } = useIntl();
    const [isExpanded, setIsExpanded] = useState(false);
    const onExpandRowClicked = () => {
        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
        trackExpandRowClicked(Object.assign(Object.assign({}, trackingContext), { isRowExpanded: !isExpanded, providerName: providerName }), trackEvent);
        setIsExpanded(!isExpanded);
    };
    const haveSavingOrDifference = (savingAmount && !differenceAmount) || (!savingAmount && differenceAmount);
    return (jsxs(Fragment, { children: [jsxs("tr", Object.assign({ ref: reference, className: `${stylesWithoutSpeed$1['comparison-hero-v2__row']} ${haveSavingOrDifference
                    ? stylesWithoutSpeed$1['__vertical_align_extra_labels']
                    : stylesWithoutSpeed$1['__vertical_align_less_labels']} ${showCheapestFlag
                    ? haveSavingOrDifference
                        ? stylesWithoutSpeed$1['__vertical_align_middle']
                        : stylesWithoutSpeed$1['__vertical_align_bottom']
                    : ''}` }, { children: [jsxs("td", Object.assign({ className: `${stylesWithoutSpeed$1['logo']} ${showCheapestFlag ? stylesWithoutSpeed$1['__with_flags'] : ''}` }, { children: [showCheapestFlag && (jsxs("span", Object.assign({ className: `${stylesWithoutSpeed$1['cheapestLabel']}` }, { children: [jsx(Check, { className: `${stylesWithoutSpeed$1['cheapestLabelTick']}` }), jsx(FormattedMessage, { id: "cheapest" })] }))), logoUrl ? (jsx(ProviderLogo, { logo: logoUrl, altText: logoAltText, isPartner: isPartner, alias: alias, styles: {
                                    logoContainer: stylesWithoutSpeed$1['providerLogo'],
                                }, providersWithDisclaimers: providersWithDisclaimers })) : (jsx("h4", { children: providerName }))] })), jsx("td", Object.assign({ className: `${stylesWithoutSpeed$1['amount']}` }, { children: jsxs("div", Object.assign({ className: `${stylesWithoutSpeed$1['comparison-hero-v2__row__amount']}` }, { children: [jsx("span", Object.assign({ className: `np-text-title-subsection ${stylesWithoutSpeed$1['send-amount']}` }, { children: formatMoney(receiveMoney.value, receiveMoney.currency, locale) })), savingAmount && !differenceAmount ? (jsx("span", Object.assign({ className: `np-text-body-default ${stylesWithoutSpeed$1['saving-amount']}` }, { children: jsx(FormattedMessage, { id: "cthv2-row-save-up-to", values: {
                                            savings: React.createElement('span', {
                                                className: `${stylesWithoutSpeed$1['currency-block']}`,
                                            }, formatMoney(savingAmount, receiveMoney.currency, locale)),
                                        } }) }))) : null, differenceAmount && !savingAmount ? (jsxs("span", Object.assign({ className: `np-text-body-default ${stylesWithoutSpeed$1['difference-amount']}` }, { children: [jsx("span", { className: stylesWithoutSpeed$1['difference-arrow'] }), `- ${formatMoney(differenceAmount, receiveMoney.currency, locale)}`] }))) : null] })) })), !disableDropdown && (jsx("td", Object.assign({ className: `${stylesWithoutSpeed$1['chevron']}` }, { children: jsx("div", Object.assign({ onClick: onExpandRowClicked, onKeyUp: (event_) => {
                                if (event_.key === 'Enter') {
                                    onExpandRowClicked();
                                }
                            }, role: "button", tabIndex: 0, "aria-label": formatMessage(FEE_BREAKDOWN_MESSAGE), title: formatMessage(FEE_BREAKDOWN_MESSAGE) }, { children: jsx(Chevron, { className: stylesWithoutSpeed$1['comparison-hero-v2__row-chevron'], orientation: isExpanded ? Position.TOP : Position.BOTTOM, size: Size.SMALL }) })) })))] })), jsx("tr", { children: jsx("td", Object.assign({ colSpan: 12 }, { children: jsx("div", Object.assign({ className: `np-text-body-default ${isExpanded
                            ? stylesWithoutSpeed$1[`comparison-hero-v2__row_info_expanded`]
                            : stylesWithoutSpeed$1['comparison-hero-v2__row_info']} ${isFooterHidden ? stylesWithoutSpeed$1['last-row'] : ''}` }, { children: jsx(ComparisonTableHeroV2Info, { providerName: providerName, transferFee: fee, exchangeRate: exchangeRate, midMarketRate: midMarketRate, sendMoneyValue: sendMoney.value, sourceCurrency: sendMoney.currency, targetCurrency: receiveMoney.currency }) })) })) }), jsx("tr", Object.assign({ className: stylesWithoutSpeed$1['comparison-hero-v2__row__border'] }, { children: !isExpanded && (jsx("td", Object.assign({ colSpan: 4 }, { children: !isFooterHidden && (jsx("hr", { className: stylesWithoutSpeed$1['comparison-hero-v2__row__border-line'] })) }))) }))] }));
};

const ComparisonTableHeroV2Row = (props) => {
    const { showSpeedColumn } = props;
    return showSpeedColumn ? jsx(WithSpeed$1, Object.assign({}, props)) : jsx(WithoutSpeed$1, Object.assign({}, props));
};

const getCheapestProviders = (quotes) => {
    // sort quotes receivedAmount
    // then take the first one, and if there are more that are equal to the first one, also take them
    const sortedQuotes = quotes.sort((a, b) => b.receivedAmount.value - a.receivedAmount.value);
    const cheapestProviders = sortedQuotes.filter((quote) => quote.receivedAmount.value === sortedQuotes[0].receivedAmount.value);
    return cheapestProviders.map((quote) => quote.provider.alias);
};

var css_248z$3 = ".cc_comparison-hero-v2__table_1579418673 {\n  width: 100%;\n  margin-bottom: 0;\n  table-layout: auto;\n  border-radius: var(--size-40);\n  box-shadow: 0 0 40px rgba(0, 0, 0, 0.125);\n}\n@media (min-width: 480px) {\n  .cc_comparison-hero-v2__table_1579418673 {\n    max-width: 567px;\n    overflow: hidden;\n    table-layout: auto;\n    border-collapse: collapse;\n    border-radius: var(--size-40);\n    box-shadow: 0 0 40px rgba(0, 0, 0, 0.125);\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 {\n    max-width: 844px;\n    table-layout: auto;\n  }\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLWhlcm8tdjIvQ29tcGFyaXNvblRhYmxlSGVyb1YyVGFibGUvQ29tcGFyaXNvblRhYmxlSGVyb1YyVGFibGUubW9kdWxlLmxlc3MiLCJDb21wYXJpc29uVGFibGVIZXJvVjJUYWJsZS5tb2R1bGUubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQTtFQUNFLFdBQUE7RUFDQSxnQkFBQTtFQUNBLGtCQUFBO0VBQ0EsNkJBQUE7RUFDQSx5Q0FBQTtBQ0ZGO0FESUU7RUFBQTtJQUNFLGdCQUFBO0lBQ0EsZ0JBQUE7SUFDQSxrQkFBQTtJQUNBLHlCQUFBO0lBQ0EsNkJBQUE7SUFDQSx5Q0FBQTtFQ0RGO0VER0U7SUFDRSxnQkFBQTtJQUNBLGtCQUFBO0VDREo7QUFDRiIsImZpbGUiOiJDb21wYXJpc29uVGFibGVIZXJvVjJUYWJsZS5tb2R1bGUubGVzcyJ9 */";
var styles$1 = {"comparison-hero-v2__table":"cc_comparison-hero-v2__table_1579418673","comparisonHeroV2__table":"cc_comparison-hero-v2__table_1579418673","with-speed":"cc_with-speed_1579418673","withSpeed":"cc_with-speed_1579418673"};
styleInject(css_248z$3);

var css_248z$2 = ".cc_comparison-hero-v2__table__tfooter_1579418673 {\n  height: var(--size-60);\n}\n.cc_comparison-hero-v2__table__tfooter_1579418673.cc_with-speed_1579418673 {\n  height: var(--size-80);\n}\n.cc_comparison-hero-v2__table__tfooter_1579418673 .cc_show-more-text_1579418673 {\n  margin-bottom: var(--space-small);\n  border-bottom-right-radius: var(--size-40);\n  border-bottom-left-radius: var(--size-40);\n  background-color: var(--color-background-screen);\n  color: var(--color-content-secondary);\n}\n@media (min-width: 576px) {\n  .cc_comparison-hero-v2__table__tfooter_1579418673 .cc_show-more-text_1579418673 {\n    margin-bottom: var(--size-24);\n  }\n}\n@media (min-width: 992px) {\n  .cc_comparison-hero-v2__table__tfooter_1579418673 .cc_show-more-text_1579418673 {\n    margin-bottom: var(--size-32);\n  }\n}\n.cc_comparison-hero-v2__table__tfooter_1579418673 .cc_footer-chevron_1579418673 {\n  padding: var(--size-4);\n  border-radius: var(--size-16);\n  background: var(--color-background-neutral);\n}\n.cc_comparison-hero-v2__table__tfooter_1579418673 .cc_footer-cta_1579418673 {\n  gap: var(--size-12);\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLWhlcm8tdjIvQ29tcGFyaXNvblRhYmxlSGVyb1YyVGFibGUvZWxlbWVudHMvRm9vdGVyL0Zvb3Rlci5tb2R1bGUubGVzcyIsIkZvb3Rlci5tb2R1bGUubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJRTtFQUNFLHNCQUFBO0FDSEo7QURLSTtFQUNFLHNCQUFBO0FDSE47QURERTtFQVFJLGlDQUFBO0VBQ0EsMENBQUE7RUFDQSx5Q0FBQTtFQUNBLGdEQUFBO0VBQ0EscUNBQUE7QUNKTjtBRE1NO0VBQUE7SUFDRSw2QkFBQTtFQ0hOO0FBQ0Y7QURLTTtFQUFBO0lBQ0UsNkJBQUE7RUNGTjtBQUNGO0FEbEJFO0VBd0JJLHNCQUFBO0VBQ0EsNkJBQUE7RUFDQSwyQ0FBQTtBQ0hOO0FEdkJFO0VBOEJJLG1CQUFBO0FDSk4iLCJmaWxlIjoiRm9vdGVyLm1vZHVsZS5sZXNzIn0= */";
var styles = {"comparison-hero-v2__table__tfooter":"cc_comparison-hero-v2__table__tfooter_1579418673","comparisonHeroV2__table__tfooter":"cc_comparison-hero-v2__table__tfooter_1579418673","with-speed":"cc_with-speed_1579418673","withSpeed":"cc_with-speed_1579418673","show-more-text":"cc_show-more-text_1579418673","showMoreText":"cc_show-more-text_1579418673","footer-chevron":"cc_footer-chevron_1579418673","footerChevron":"cc_footer-chevron_1579418673","footer-cta":"cc_footer-cta_1579418673","footerCta":"cc_footer-cta_1579418673"};
styleInject(css_248z$2);

const SPEED_CLASS = 'with-speed';
const Footer = ({ sendAmount, ctaType, showSpeedColumn, onShowMoreProviders, redirectUrl, }) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const { trackingContext, trackEvent } = useComparisonTableHeroV2TableTrackingContext();
    return (jsx("tfoot", Object.assign({ className: `${styles['comparison-hero-v2__table__tfooter']} ${showSpeedColumn ? styles[SPEED_CLASS] : ''}` }, { children: jsx("tr", { children: jsx("td", Object.assign({ className: styles['show-more-text'], colSpan: 4 }, { children: jsx("div", Object.assign({ className: "text-xs-center np-text-body-default-bold" }, { children: ctaType === 'link' && redirectUrl ? (jsx(Link, Object.assign({ href: redirectUrl, onClick: () => {
                            trackClickToSeeAvailableComparison(sendAmount, trackingContext, trackEvent);
                        } }, { children: jsx(FormattedMessage, { id: "cthv2-footer-more-providers" }) }))) : (jsxs(Button, Object.assign({ size: Size.SMALL, type: ControlType.ACCENT, priority: Priority.TERTIARY, onClick: () => {
                            onShowMoreProviders();
                            setIsExpanded(!isExpanded);
                        }, className: `container-fluid d-flex justify-content-center ${styles['footer-cta']}` }, { children: [jsx(Chevron, { className: styles['footer-chevron'], orientation: isExpanded ? Position.TOP : Position.BOTTOM, size: Size.SMALL }), isExpanded ? (jsx(FormattedMessage, { id: "cthv2-footer-fewer-providers" })) : (jsx(FormattedMessage, { id: "cthv2-footer-more-providers" }))] }))) })) })) }) })));
};

var css_248z$1 = ".cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead_1579418673 {\n  background-color: var(--color-forest-green);\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead_1579418673 {\n    min-height: 110px;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673 {\n  padding: var(--size-24) var(--size-16);\n  border: 0;\n  color: var(--color-white);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n  vertical-align: middle;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673 {\n    padding: var(--size-24) var(--size-16);\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_providerCol_1579418673 {\n  padding-left: var(--size-48);\n  border-radius: var(--size-40) 0% 0% 0%;\n  text-align: left;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_providerCol_1579418673 .cc_sending_with_1579418673 {\n  display: block;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_providerCol_1579418673 .cc_sending_with_1579418673 .cc_currencyBlock_1579418673 {\n  white-space: nowrap;\n}\n@media (max-width: 480px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_providerCol_1579418673 {\n    max-width: 40%;\n    padding-left: var(--size-24);\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_recipientGetsCol_1579418673 {\n  padding-right: var(--size-24);\n  padding-left: 0;\n  text-align: start;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_recipientGetsCol_1579418673 {\n    width: 48%;\n    padding-right: var(--size-16);\n    text-align: end;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_speedCol_1579418673 {\n  padding-left: 0;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_speedCol_1579418673 {\n    padding: 0;\n  }\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_speedCol_1579418673 .cc___content_1579418673 {\n    display: none;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_speedCol_1579418673 .cc___content_1579418673 .cc_speedHeaderPopover_1579418673 {\n  padding-left: var(--size-8);\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_speedCol_1579418673 .cc___content_1579418673 .cc_speedHeaderPopover_1579418673 button:focus {\n  outline: var(--color-white) solid var(--ring-outline-width);\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_expandCol_1579418673 .cc_show-info_1579418673 {\n  display: block;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_expandCol_1579418673 .cc_show-info_1579418673 button:focus {\n  outline: var(--color-white) solid var(--ring-outline-width);\n}\n@media (min-width: 480px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_expandCol_1579418673 {\n    padding-left: var(--size-8);\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673.cc_expandCol_1579418673 .cc_show-info_1579418673 {\n    display: none;\n  }\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th_1579418673:last-child {\n  border-radius: 0 var(--size-40) 0 0;\n  text-align: left;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th--small_1579418673 {\n  display: block;\n  color: var(--color-white);\n  font-size: var(--font-size-12);\n  font-weight: var(--font-weight-regular);\n  white-space: unset;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th--small_1579418673 .cc_speed-label_1579418673 {\n  display: none;\n}\n.cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th--small_1579418673 .cc_fee-label_1579418673 {\n  display: none;\n}\n@media (min-width: 480px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th--small_1579418673 .cc_fee-label_1579418673 {\n    display: block;\n  }\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th--small_1579418673 .cc_fee-label_1579418673 {\n    display: none;\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th--small_1579418673 .cc_speed-label_1579418673 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--size-4);\n    justify-content: flex-end;\n    margin-right: -20px;\n    white-space: pre;\n  }\n  .cc_comparison-hero-v2__table_1579418673.cc_with-speed_1579418673 .cc___thead__th--small_1579418673 .cc_speed-label_1579418673 .cc_show-info_1579418673 button:focus {\n    outline: var(--color-white) solid var(--ring-outline-width);\n  }\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLWhlcm8tdjIvQ29tcGFyaXNvblRhYmxlSGVyb1YyVGFibGUvZWxlbWVudHMvSGVhZGVyL1dpdGhTcGVlZC9IZWFkZXJXaXRoU3BlZWQubW9kdWxlLmxlc3MiLCJIZWFkZXJXaXRoU3BlZWQubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSUE7RUFFSSwyQ0FBQTtBQ0pKO0FETUk7RUFBQTtJQUNFLGlCQUFBO0VDSEo7QUFDRjtBREtJO0VBQ0Usc0NBQUE7RUFDQSxTQUFBO0VBQ0EseUJBQUE7RUFDQSw4QkFBQTtFQUNBLHlDQUFBO0VBQ0Esc0JBQUE7QUNITjtBREtNO0VBQUE7SUFDRSxzQ0FBQTtFQ0ZOO0FBQ0Y7QURJTTtFQUNFLDRCQUFBO0VBQ0Esc0NBQUE7RUFDQSxnQkFBQTtBQ0ZSO0FERE07RUFNSSxjQUFBO0FDRlY7QURKTTtFQVNNLG1CQUFBO0FDRlo7QURNUTtFQUFBO0lBQ0UsY0FBQTtJQUNBLDRCQUFBO0VDSFI7QUFDRjtBRE1NO0VBQ0UsNkJBQUE7RUFDQSxlQUFBO0VBQ0EsaUJBQUE7QUNKUjtBRE1RO0VBQUE7SUFDRSxVQUFBO0lBQ0EsNkJBQUE7SUFDQSxlQUFBO0VDSFI7QUFDRjtBRE1NO0VBQ0UsZUFBQTtBQ0pSO0FETVE7RUFBQTtJQUNFLFVBQUE7RUNIUjtBQUNGO0FETVU7RUFBQTtJQUNFLGFBQUE7RUNIVjtBQUNGO0FEUE07RUFhTSwyQkFBQTtBQ0haO0FEVk07RUFnQlEsMkRBQUE7QUNIZDtBRFNNO0VBRUksY0FBQTtBQ1JWO0FETU07RUFLTSwyREFBQTtBQ1JaO0FEWVE7RUFBQTtJQUNFLDJCQUFBO0VDVFI7RURRTTtJQUlJLGFBQUE7RUNUVjtBQUNGO0FEYU07RUFDRSxtQ0FBQTtFQUNBLGdCQUFBO0FDWFI7QURjTTtFQUNFLGNBQUE7RUFDQSx5QkFBQTtFQUNBLDhCQUFBO0VBQ0EsdUNBQUE7RUFDQSxrQkFBQTtBQ1pSO0FET007RUFRSSxhQUFBO0FDWlY7QURJTTtFQVlJLGFBQUE7QUNiVjtBRGdCUTtFQUFBO0lBRUksY0FBQTtFQ2RWO0FBQ0Y7QURpQlE7RUFBQTtJQUVJLGFBQUE7RUNmVjtFRGFNO0lBTUksYUFBQTtJQUNBLG1CQUFBO0lBQ0EsbUJBQUE7SUFDQSxrQkFBQTtJQUNBLHlCQUFBO0lBQ0EsbUJBQUE7SUFDQSxnQkFBQTtFQ2hCVjtFRElNO0lBZ0JRLDJEQUFBO0VDakJkO0FBQ0YiLCJmaWxlIjoiSGVhZGVyV2l0aFNwZWVkLm1vZHVsZS5sZXNzIn0= */";
var stylesWithSpeed = {"comparison-hero-v2__table":"cc_comparison-hero-v2__table_1579418673","comparisonHeroV2__table":"cc_comparison-hero-v2__table_1579418673","with-speed":"cc_with-speed_1579418673","withSpeed":"cc_with-speed_1579418673","__thead":"cc___thead_1579418673","__thead__th":"cc___thead__th_1579418673","providerCol":"cc_providerCol_1579418673","sending_with":"cc_sending_with_1579418673","currencyBlock":"cc_currencyBlock_1579418673","recipientGetsCol":"cc_recipientGetsCol_1579418673","speedCol":"cc_speedCol_1579418673","__content":"cc___content_1579418673","speedHeaderPopover":"cc_speedHeaderPopover_1579418673","expandCol":"cc_expandCol_1579418673","show-info":"cc_show-info_1579418673","showInfo":"cc_show-info_1579418673","__thead__th--small":"cc___thead__th--small_1579418673","__thead__thSmall":"cc___thead__th--small_1579418673","speed-label":"cc_speed-label_1579418673","speedLabel":"cc_speed-label_1579418673","fee-label":"cc_fee-label_1579418673","feeLabel":"cc_fee-label_1579418673"};
styleInject(css_248z$1);

const SpeedPopoverContent = () => {
    return (jsxs(Fragment, { children: [jsx(FormattedMessage, { id: "estimated-time", tagName: "p" }), jsx(FormattedMessage, { id: "information-from", tagName: "p" }), jsx(FormattedMessage, { id: "different-payment-methods", tagName: "p" })] }));
};
const TABLE_PLAIN_TH$1 = '__thead__th';
const WithSpeed = ({ sendMoney }) => {
    const { formatMessage, locale } = useIntl();
    const money = formatMoney(sendMoney.value, sendMoney.currency, locale);
    const INFO_TITLE_ID = 'transfer-speed';
    const content = SpeedPopoverContent();
    return (jsx("thead", Object.assign({ className: stylesWithSpeed['__thead'] }, { children: jsxs("tr", Object.assign({ className: stylesWithSpeed['__thead__tr'] }, { children: [jsx("th", Object.assign({ className: `${stylesWithSpeed[TABLE_PLAIN_TH$1]} ${stylesWithSpeed['providerCol']}` }, { children: jsx("span", Object.assign({ className: `${stylesWithSpeed['sending_with']}` }, { children: jsx(FormattedMessage, { id: "cthv2-header-sending-with", values: {
                                money: React.createElement('span', {
                                    className: `${stylesWithSpeed['currencyBlock']}`,
                                }, money),
                            } }) })) })), jsxs("th", Object.assign({ className: `${stylesWithSpeed[TABLE_PLAIN_TH$1]} ${stylesWithSpeed['recipientGetsCol']}` }, { children: [jsx(FormattedMessage, { id: "cthv2-header-recipient-gets" }), jsxs("span", Object.assign({ className: `${stylesWithSpeed['__thead__th--small']} ${stylesWithSpeed['recipientGetsCol']}` }, { children: [jsx("span", Object.assign({ className: `${stylesWithSpeed['fee-label']}` }, { children: formatMessage({ id: 'cthv2-header-total-after-fees' }) })), jsxs("span", Object.assign({ className: `${stylesWithSpeed['speed-label']}` }, { children: [formatMessage({ id: 'cthv2-header-transfer-speed' }), jsx(Info, { "tab-index": 0, title: formatMessage({ id: INFO_TITLE_ID }), content: content, presentation: InfoPresentation.POPOVER, size: Size.SMALL, "aria-label": formatMessage({ id: INFO_TITLE_ID }), className: `np-theme-personal--dark ${stylesWithSpeed['show-info']}` })] }))] }))] })), jsx("th", Object.assign({ className: `${stylesWithSpeed[TABLE_PLAIN_TH$1]} ${stylesWithSpeed['speedCol']}` }, { children: jsxs("span", Object.assign({ className: `${stylesWithSpeed['__content']}` }, { children: [jsx(FormattedMessage, { id: "cthv2-header-transfer-speed-popover-title" }), jsx(Info, { "tab-index": 0, title: formatMessage({ id: INFO_TITLE_ID }), content: content, presentation: InfoPresentation.POPOVER, size: Size.SMALL, "aria-label": formatMessage({ id: INFO_TITLE_ID }), className: `np-theme-personal--dark ${stylesWithSpeed['speedHeaderPopover']}` })] })) })), jsx("th", { className: `${stylesWithSpeed[TABLE_PLAIN_TH$1]} ${stylesWithSpeed['expandCol']}` })] })) })));
};

var css_248z = ".cc_comparison-hero-v2__table__thead_1579418673 {\n  background-color: var(--color-forest-green);\n}\n.cc_comparison-hero-v2__table__thead_1579418673.cc_inverseHeader_1579418673 {\n  background-color: var(--color-white);\n}\n.cc_comparison-hero-v2__table__thead_1579418673.cc_inverseHeader_1579418673 hr {\n  max-width: 90%;\n  margin: 0 auto;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table__thead_1579418673 {\n    min-height: 110px;\n  }\n}\n.cc_comparison-hero-v2__table__thead__th_1579418673 {\n  padding: var(--size-24) var(--size-16);\n  border: 0;\n  color: var(--color-white);\n  font-size: var(--font-size-14);\n  font-weight: var(--font-weight-semi-bold);\n  vertical-align: middle;\n}\n.cc_inverseHeader_1579418673 .cc_comparison-hero-v2__table__thead__th_1579418673 span {\n  color: var(--color-content-secondary);\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table__thead__th_1579418673 {\n    padding: var(--size-24) var(--size-16);\n  }\n}\n.cc_comparison-hero-v2__table__thead__th_1579418673.cc_providerCol_1579418673 {\n  padding-left: var(--size-48);\n  border-radius: var(--size-40) 0% 0% 0%;\n  text-align: left;\n}\n.cc_comparison-hero-v2__table__thead__th_1579418673.cc_providerCol_1579418673 .cc_sending_with_1579418673 {\n  display: block;\n}\n.cc_comparison-hero-v2__table__thead__th_1579418673.cc_providerCol_1579418673 .cc_sending_with_1579418673 .cc_currencyBlock_1579418673 {\n  white-space: nowrap;\n}\n@media (max-width: 480px) {\n  .cc_comparison-hero-v2__table__thead__th_1579418673.cc_providerCol_1579418673 {\n    max-width: 40%;\n    padding-left: var(--size-24);\n  }\n}\n.cc_comparison-hero-v2__table__thead__th_1579418673.cc_recipientGetsCol_1579418673 {\n  padding-right: var(--size-24);\n  text-align: end;\n}\n@media (max-width: 575px) {\n  .cc_comparison-hero-v2__table__thead__th_1579418673.cc_recipientGetsCol_1579418673 {\n    width: 48%;\n    padding-right: var(--size-16);\n    text-align: end;\n  }\n}\n.cc_comparison-hero-v2__table__thead__th_1579418673.cc_expandCol_1579418673 .cc_show-info_1579418673 {\n  display: block;\n}\n@media (min-width: 480px) {\n  .cc_comparison-hero-v2__table__thead__th_1579418673.cc_expandCol_1579418673 {\n    padding-left: var(--size-8);\n  }\n  .cc_comparison-hero-v2__table__thead__th_1579418673.cc_expandCol_1579418673 .cc_show-info_1579418673 {\n    display: none;\n  }\n}\n.cc_comparison-hero-v2__table__thead__th_1579418673:last-child {\n  border-radius: 0 var(--size-40) 0 0;\n  text-align: left;\n}\n.cc_comparison-hero-v2__table__thead__th--small_1579418673 {\n  display: none;\n  color: var(--color-white);\n  font-size: var(--font-size-12);\n  font-weight: var(--font-weight-regular);\n  white-space: unset;\n}\n@media (min-width: 480px) {\n  .cc_comparison-hero-v2__table__thead__th--small_1579418673 {\n    display: block;\n  }\n}\n@media (max-width: 480px) {\n  .cc_comparison-hero-v2__table__thead__th--small_1579418673 {\n    display: block;\n  }\n}\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9jb21wYXJpc29uLXRhYmxlLWhlcm8tdjIvQ29tcGFyaXNvblRhYmxlSGVyb1YyVGFibGUvZWxlbWVudHMvSGVhZGVyL1dpdGhvdXRTcGVlZC9IZWFkZXJXaXRob3V0U3BlZWQubW9kdWxlLmxlc3MiLCJIZWFkZXJXaXRob3V0U3BlZWQubW9kdWxlLmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSUU7RUFDRSwyQ0FBQTtBQ0hKO0FES0k7RUFDRSxvQ0FBQTtBQ0hOO0FERUk7RUFJSSxjQUFBO0VBQ0EsY0FBQTtBQ0hSO0FET0k7RUFBQTtJQUNFLGlCQUFBO0VDSko7QUFDRjtBRE1JO0VBQ0Usc0NBQUE7RUFDQSxTQUFBO0VBQ0EseUJBQUE7RUFDQSw4QkFBQTtFQUNBLHlDQUFBO0VBQ0Esc0JBQUE7QUNKTjtBRE1NO0VBRUkscUNBQUE7QUNMVjtBRFNNO0VBQUE7SUFDRSxzQ0FBQTtFQ05OO0FBQ0Y7QURRTTtFQUNFLDRCQUFBO0VBQ0Esc0NBQUE7RUFDQSxnQkFBQTtBQ05SO0FER007RUFNSSxjQUFBO0FDTlY7QURBTTtFQVNNLG1CQUFBO0FDTlo7QURVUTtFQUFBO0lBQ0UsY0FBQTtJQUNBLDRCQUFBO0VDUFI7QUFDRjtBRFVNO0VBQ0UsNkJBQUE7RUFDQSxlQUFBO0FDUlI7QURVUTtFQUFBO0lBQ0UsVUFBQTtJQUNBLDZCQUFBO0lBQ0EsZUFBQTtFQ1BSO0FBQ0Y7QURVTTtFQUVJLGNBQUE7QUNUVjtBRFlRO0VBQUE7SUFDRSwyQkFBQTtFQ1RSO0VEUU07SUFJSSxhQUFBO0VDVFY7QUFDRjtBRGFNO0VBQ0UsbUNBQUE7RUFDQSxnQkFBQTtBQ1hSO0FEY007RUFDRSxhQUFBO0VBQ0EseUJBQUE7RUFDQSw4QkFBQTtFQUNBLHVDQUFBO0VBQ0Esa0JBQUE7QUNaUjtBRGNRO0VBQUE7SUFDRSxjQUFBO0VDWFI7QUFDRjtBRGFRO0VBQUE7SUFDRSxjQUFBO0VDVlI7QUFDRiIsImZpbGUiOiJIZWFkZXJXaXRob3V0U3BlZWQubW9kdWxlLmxlc3MifQ== */";
var stylesWithoutSpeed = {"comparison-hero-v2__table__thead":"cc_comparison-hero-v2__table__thead_1579418673","comparisonHeroV2__table__thead":"cc_comparison-hero-v2__table__thead_1579418673","inverseHeader":"cc_inverseHeader_1579418673","comparison-hero-v2__table__thead__th":"cc_comparison-hero-v2__table__thead__th_1579418673","comparisonHeroV2__table__thead__th":"cc_comparison-hero-v2__table__thead__th_1579418673","providerCol":"cc_providerCol_1579418673","sending_with":"cc_sending_with_1579418673","currencyBlock":"cc_currencyBlock_1579418673","recipientGetsCol":"cc_recipientGetsCol_1579418673","expandCol":"cc_expandCol_1579418673","show-info":"cc_show-info_1579418673","showInfo":"cc_show-info_1579418673","comparison-hero-v2__table__thead__th--small":"cc_comparison-hero-v2__table__thead__th--small_1579418673","comparisonHeroV2__table__thead__thSmall":"cc_comparison-hero-v2__table__thead__th--small_1579418673"};
styleInject(css_248z);

const TABLE_PLAIN_TH = 'comparison-hero-v2__table__thead__th';
const WithoutSpeed = ({ sendMoney, inverseHeader, }) => {
    const { formatMessage, locale } = useIntl();
    const money = formatMoney(sendMoney.value, sendMoney.currency, locale);
    return (jsxs("thead", Object.assign({ className: `${stylesWithoutSpeed['comparison-hero-v2__table__thead']} ${inverseHeader ? stylesWithoutSpeed['inverseHeader'] : ''}` }, { children: [jsxs("tr", Object.assign({ className: stylesWithoutSpeed['comparison-hero-v2__table__thead__tr'] }, { children: [jsx("th", Object.assign({ className: `${stylesWithoutSpeed[TABLE_PLAIN_TH]} ${stylesWithoutSpeed['providerCol']}` }, { children: jsx("span", Object.assign({ className: `${stylesWithoutSpeed['sending_with']}` }, { children: jsx(FormattedMessage, { id: "cthv2-header-sending-with", values: {
                                    money: React.createElement('span', {
                                        className: `${stylesWithoutSpeed['currencyBlock']}`,
                                    }, money),
                                } }) })) })), jsxs("th", Object.assign({ className: `${stylesWithoutSpeed[TABLE_PLAIN_TH]} ${stylesWithoutSpeed['recipientGetsCol']}` }, { children: [jsx("span", { children: jsx(FormattedMessage, { id: "cthv2-header-recipient-gets" }) }), jsx("span", Object.assign({ className: `${stylesWithoutSpeed['comparison-hero-v2__table__thead__th--small']} ${stylesWithoutSpeed['recipientGetsCol']}` }, { children: jsx("span", { children: formatMessage({ id: 'cthv2-header-total-after-fees' }) }) }))] })), jsx("th", { className: `${stylesWithoutSpeed[TABLE_PLAIN_TH]} ${stylesWithoutSpeed['expandCol']}` })] })), inverseHeader && (jsx("tr", { children: jsx("th", Object.assign({ colSpan: 3 }, { children: jsx("hr", {}) })) }))] })));
};

const Header = ({ sendMoney, showSpeedColumn, inverseHeader, }) => {
    return showSpeedColumn ? (jsx(WithSpeed, { sendMoney: sendMoney })) : (jsx(WithoutSpeed, { sendMoney: sendMoney, inverseHeader: inverseHeader }));
};

const ComparisonTableHeroV2Table = ({ sendMoney, quotes, midMarketRate, footerCTAType = 'button', showSpeedColumn = false, hideFooter = false, maxVisibleProviders = 4, footerRedirectUrl, showFastestFlag = false, showCheapestFlag = false, inverseHeader = false, }) => {
    const [isCentreProviderViewed, setIsCentreProviderViewed] = useState(false);
    const { trackingContext, trackEvent } = useComparisonTableHeroV2TableTrackingContext();
    const [visibleProviders, setVisibleProviders] = useState(maxVisibleProviders);
    const onShowMoreProviders = () => {
        setVisibleProviders(visibleProviders === quotes.length ? maxVisibleProviders : quotes.length);
    };
    const fastestProviders = showFastestFlag && showSpeedColumn ? getFastestProviders(quotes) : [];
    const cheapestProviders = showCheapestFlag ? getCheapestProviders(quotes) : [];
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
    const centreProviderIndex = getTrackingTriggerIndex(visibleProviders);
    const renderedProviders = quotes.slice(0, visibleProviders);
    const { locale } = useIntl();
    const PROVIDERS_WITH_DISCLAIMERS = [REVOLUT_WITH_DISCLAIMER];
    return (jsx(Fragment, { children: jsxs("table", Object.assign({ className: `${styles$1['comparison-hero-v2__table']} ${showSpeedColumn ? styles$1['with-speed'] : ''}` }, { children: [jsx(Header, { showSpeedColumn: showSpeedColumn, sendMoney: sendMoney, inverseHeader: inverseHeader }), jsx("tbody", { children: renderedProviders.map((quote, index) => {
                        const ProviderRow = React.forwardRef((props, reference) => {
                            var _a, _b, _c, _d, _e;
                            return (jsx(ComparisonTableHeroV2Row, { alias: quote.provider.alias, providerName: quote.provider.name, logoUrl: quote.provider.logoUrl, logoAltText: quote.provider.logoAltText ? quote.provider.logoAltText : quote.provider.name, showSpeedColumn: showSpeedColumn, midMarketRate: midMarketRate, differenceAmount: quotes[0].receivedAmount.value - quote.receivedAmount.value, savingAmount: quote.provider.alias === WISE_ALIAS &&
                                    cheapestProviders.includes(quote.provider.alias) &&
                                    quotes.length > 1
                                    ? quote.receivedAmount.value - quotes[quotes.length - 1].receivedAmount.value
                                    : undefined, fee: ((_a = quote.fee) === null || _a === void 0 ? void 0 : _a.value) || null, exchangeRate: quote.rate, reference: reference, sendMoney: sendMoney, receiveMoney: quote.receivedAmount, isFooterHidden: hideFooter && index === renderedProviders.length - 1, showFastestFlag: fastestProviders.includes(quote.provider.alias), showCheapestFlag: cheapestProviders.includes(quote.provider.alias), speedInfo: getSpeedLabel(((_c = (_b = quote.deliveryEstimation) === null || _b === void 0 ? void 0 : _b.duration) === null || _c === void 0 ? void 0 : _c.min) || null, ((_e = (_d = quote.deliveryEstimation) === null || _d === void 0 ? void 0 : _d.duration) === null || _e === void 0 ? void 0 : _e.max) || null, locale), disableDropdown: quote.disableAdditionalInfo, providersWithDisclaimers: PROVIDERS_WITH_DISCLAIMERS }));
                        });
                        return !isCentreProviderViewed && index === centreProviderIndex ? (jsx(InView, Object.assign({ onChange: (inView, _) => {
                                if (!inView) {
                                    return;
                                }
                                setIsCentreProviderViewed(true);
                                trackTableViewed(trackingContext, trackEvent);
                            }, threshold: 1, triggerOnce: true }, { children: ({ ref }) => {
                                return jsx(ProviderRow, { ref: ref }, quote.provider.alias);
                            } }), quote.provider.alias)) : (jsx(ProviderRow, {}, quote.provider.alias));
                    }) }), !hideFooter && (jsx(Footer, { ctaType: footerCTAType, sendAmount: sendMoney.value, redirectUrl: footerRedirectUrl, showSpeedColumn: showSpeedColumn, onShowMoreProviders: onShowMoreProviders }))] })) }));
};

export { ComparisonTableHeroV2Table as C };
//# sourceMappingURL=ComparisonTableHeroV2Table-8283c4cd.js.map
