@wise/dynamic-flow-client 3.11.3 → 3.11.4-experiment-node20-aa45bc2

package/build/revamp/wise/renderers/LoadingIndicatorRenderer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Loader } from '@transferwise/components';
+import { getMargin } from './utils/layout-utils';
+var LoadingIndicatorRenderer = {
+    canRenderType: 'loading-indicator',
+    render: function (_a) {
+        var margin = _a.margin, size = _a.size;
+        return (_jsx(Loader, { size: size, classNames: { 'tw-loader': "tw-loader m-x-auto ".concat(getMargin(margin)) }, "data-testid": "loading-indicator" }));
+    },
+};
+export default LoadingIndicatorRenderer;

package/build/revamp/wise/renderers/MarkdownRenderer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Markdown } from '@transferwise/components';
+import { getTextAlignmentAndMargin } from './utils/layout-utils';
+var MarkdownRenderer = {
+    canRenderType: 'markdown',
+    render: function (_a) {
+        var content = _a.content, align = _a.align, margin = _a.margin;
+        return (_jsx("div", { className: getTextAlignmentAndMargin({ align: align, margin: margin }), children: _jsx(Markdown, { config: { link: { target: '_blank' } }, children: content }) }));
+    },
+};
+export default MarkdownRenderer;

package/build/revamp/wise/renderers/ModalRenderer.js

@@ -0,0 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Modal } from '@transferwise/components';
+import { useState } from 'react';
+import { getMargin } from './utils/layout-utils';
+var ModalRenderer = {
+    canRenderType: 'modal',
+    render: function (props) { return _jsx(DFModal, __assign({}, props)); },
+};
+export default ModalRenderer;
+function DFModal(_a) {
+    var content = _a.content, margin = _a.margin, trigger = _a.trigger;
+    var _b = useState(false), visible = _b[0], setVisible = _b[1];
+    return (_jsxs("div", { className: getMargin(margin), children: [_jsx(Button, { priority: "tertiary", block: true, onClick: function () { return setVisible(true); }, children: trigger.title }), _jsx(Modal, { scroll: "content", open: visible, size: "lg", body: content.components, onClose: function () { return setVisible(false); } })] }));
+}

package/build/revamp/wise/renderers/MultiSelectInputRenderer.js

@@ -0,0 +1,84 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectInput, SelectInputOptionContent } from '@transferwise/components';
+import FieldInput from './components/FieldInput';
+import { OptionMedia } from './SelectInputRenderer/OptionMedia';
+import { useIntl } from 'react-intl';
+import messages from '../../../common/messages/multi-select.messages';
+import { useState } from 'react';
+var MultiSelectInputRenderer = {
+    canRenderType: 'input-multi-select',
+    render: function (props) { return _jsx(MultiSelectInputRendererComponent, __assign({}, props)); },
+};
+export function MultiSelectInputRendererComponent(props) {
+    var formatMessage = useIntl().formatMessage;
+    var _a = useState(), stagedIndices = _a[0], setStagedIndices = _a[1];
+    var id = props.id, description = props.description, disabled = props.disabled, label = props.label, help = props.help, error = props.error, options = props.options, placeholder = props.placeholder, selectedIndices = props.selectedIndices, onSelect = props.onSelect;
+    var mergedIndices = stagedIndices !== null && stagedIndices !== void 0 ? stagedIndices : selectedIndices;
+    var getFormattedMessage = function () {
+        if (mergedIndices.length > 0) {
+            if (mergedIndices.length > 1) {
+                return formatMessage(messages.summary, {
+                    first: options[mergedIndices[0]].title,
+                    count: mergedIndices.length - 1,
+                });
+            }
+            return options[mergedIndices[0]].title;
+        }
+        return undefined;
+    };
+    var renderValue = function (index, withinTrigger) {
+        var option = index >= 0 ? options[index] : null;
+        if (option === null) {
+            return null;
+        }
+        if (withinTrigger) {
+            return index === mergedIndices[0] ? getFormattedMessage() : undefined;
+        }
+        var contentProps = {
+            title: option.title,
+            description: option.description,
+            icon: _jsx(OptionMedia, { icon: option.icon, image: option.image }),
+        };
+        return _jsx(SelectInputOptionContent, __assign({}, contentProps));
+    };
+    return (_jsx(FieldInput, { id: id, label: label, help: help, description: description, error: error, children: _jsx(SelectInput, { id: id, items: options.map(function (option, index) {
+                var _a, _b, _c;
+                return ({
+                    type: 'option',
+                    value: index,
+                    filterMatchers: __spreadArray(__spreadArray([], ((_a = option.keywords) !== null && _a !== void 0 ? _a : []), true), [
+                        (_b = option.title) !== null && _b !== void 0 ? _b : '',
+                        (_c = option.description) !== null && _c !== void 0 ? _c : '',
+                    ], false),
+                    disabled: option.disabled,
+                });
+            }), disabled: disabled, placeholder: placeholder, value: mergedIndices, renderValue: renderValue, multiple: true, onChange: function (values) {
+                setStagedIndices(values);
+            }, onClose: function () {
+                if (stagedIndices) {
+                    onSelect(stagedIndices);
+                    setStagedIndices(undefined);
+                }
+            } }) }));
+}
+export default MultiSelectInputRenderer;

package/build/revamp/wise/renderers/MultiUploadInputRenderer.js

@@ -0,0 +1,63 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UploadInput } from '@transferwise/components';
+import UploadFieldInput from './components/UploadFieldInput';
+import { getAcceptsString, toKilobytes } from './utils/file-utils';
+import { getRandomId } from './utils/getRandomId';
+var MultiUploadInputRenderer = {
+    canRenderType: 'input-upload-multi',
+    render: function (props) {
+        var id = props.id, accepts = props.accepts, help = props.help, label = props.label, description = props.description, disabled = props.disabled, error = props.error, maxSize = props.maxSize, maxItems = props.maxItems, uploadLabel = props.uploadLabel, onUpload = props.onUpload, onDelete = props.onDelete;
+        var onUploadFile = function (formData) { return __awaiter(void 0, void 0, void 0, function () {
+            var file, fileId;
+            return __generator(this, function (_a) {
+                file = formData.get('file');
+                fileId = getRandomId();
+                return [2 /*return*/, onUpload(file, fileId).then(function () { return ({
+                        id: fileId,
+                    }); })];
+            });
+        }); };
+        var onDeleteFile = function (fileId) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+            return [2 /*return*/, onDelete(String(fileId))];
+        }); }); };
+        var descriptionId = description ? "".concat(id, "-description") : undefined;
+        return (_jsx(UploadFieldInput, { id: id, label: label, description: description, error: error, help: help, children: _jsx(UploadInput, { id: id, "aria-describedby": descriptionId, className: "form-control", description: description, disabled: disabled, fileTypes: getAcceptsString(accepts), maxFiles: maxItems, multiple: true, sizeLimit: maxSize ? toKilobytes(maxSize) : undefined, uploadButtonTitle: uploadLabel, onDeleteFile: onDeleteFile, onUploadFile: onUploadFile }) }));
+    },
+};
+export default MultiUploadInputRenderer;

package/build/revamp/wise/renderers/NumberInputRenderer.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '@transferwise/components';
+import { onWheel } from './utils/input-utils';
+import FieldInput from './components/FieldInput';
+var NumberInputRenderer = {
+    canRenderType: 'input-number',
+    render: function (props) {
+        var id = props.id, label = props.label, error = props.error, description = props.description, help = props.help, type = props.type, value = props.value, onChange = props.onChange, rest = __rest(props, ["id", "label", "error", "description", "help", "type", "value", "onChange"]);
+        return (_jsx(FieldInput, { id: id, label: label, description: description, error: error, help: help, children: _jsx(Input, __assign({ id: id, name: id, type: "number", value: value !== null && value !== void 0 ? value : '', onChange: function (_a) {
+                    var newValue = _a.target.value;
+                    var parsedValue = Number.parseFloat(newValue);
+                    onChange(Number.isNaN(parsedValue) ? null : parsedValue);
+                }, onWheel: onWheel }, rest)) }));
+    },
+};
+export default NumberInputRenderer;

package/build/revamp/wise/renderers/ParagraphRenderer.js

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from 'react-intl';
+import { getTextAlignmentAndMargin } from './utils/layout-utils';
+import { useSnackBarIfAvailable } from './hooks/useSnackBarIfAvailable';
+import { Button, Input } from '@transferwise/components';
+import classNames from 'classnames';
+import paragraphMessages from '../../../common/messages/paragraph.messages';
+var ParagraphRenderer = {
+    canRenderType: 'paragraph',
+    render: function (props) { return _jsx(Paragraph, __assign({}, props)); },
+};
+function Paragraph(_a) {
+    var align = _a.align, control = _a.control, margin = _a.margin, text = _a.text;
+    var className = getTextAlignmentAndMargin({ align: align, margin: margin });
+    return control === 'copyable' ? (_jsx(CopyableParagraph, { className: className, align: align, text: text })) : (_jsx(StandardParagraph, { className: className, text: text }));
+}
+function StandardParagraph(_a) {
+    var text = _a.text, className = _a.className;
+    return _jsx("p", { className: className, children: text });
+}
+function CopyableParagraph(_a) {
+    var text = _a.text, align = _a.align, className = _a.className;
+    var formatMessage = useIntl().formatMessage;
+    var createSnackbar = useSnackBarIfAvailable();
+    var copy = function () {
+        navigator.clipboard
+            .writeText(text)
+            .then(function () { return createSnackbar({ text: formatMessage(paragraphMessages.copied) }); })
+            .catch(function () { });
+    };
+    var inputAlignmentClasses = getTextAlignmentAndMargin({ align: align, margin: 'sm' });
+    return (_jsxs("div", { className: className, children: [_jsx(Input, { type: "text", value: text, readOnly: true, className: classNames('text-ellipsis', inputAlignmentClasses) }), _jsx(Button, { block: true, onClick: copy, children: formatMessage(paragraphMessages.copy) })] }));
+}
+export default ParagraphRenderer;

package/build/revamp/wise/renderers/RepeatableRenderer.js

@@ -0,0 +1,58 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Header, Modal, NavigationOption, InlineAlert } from '@transferwise/components';
+import { useState } from 'react';
+import { Plus } from '@transferwise/icons';
+import { useIntl } from 'react-intl';
+import messages from '../../../common/messages/repeatable.messages';
+import { NavigationOptionMedia } from './components/icon/NavigationOptionMedia';
+import classNames from 'classnames';
+var RepeatableRenderer = {
+    canRenderType: 'repeatable',
+    render: function (props) { return _jsx(Repeatable, __assign({}, props)); },
+};
+function Repeatable(props) {
+    var addItemTitle = props.addItemTitle, description = props.description, editableItem = props.editableItem, editItemTitle = props.editItemTitle, error = props.error, items = props.items, title = props.title, onEdit = props.onEdit, onAdd = props.onAdd, onSave = props.onSave, onRemove = props.onRemove;
+    var formatMessage = useIntl().formatMessage;
+    var _a = useState(null), openModalType = _a[0], setOpenModalType = _a[1];
+    var onAddItem = function () {
+        onAdd();
+        setOpenModalType('add');
+    };
+    var onEditItem = function (itemIndex) {
+        onEdit(itemIndex);
+        setOpenModalType('edit');
+    };
+    var onSaveItem = function () {
+        var saveSuccessful = onSave();
+        if (saveSuccessful) {
+            setOpenModalType(null);
+        }
+    };
+    var onRemoveItem = function () {
+        onRemove();
+        setOpenModalType(null);
+    };
+    var onCancelEdit = function () {
+        setOpenModalType(null);
+    };
+    return (_jsxs(_Fragment, { children: [title && _jsx(Header, { title: title }), description && _jsx("p", { children: description }), _jsxs("div", { className: classNames('form-group', {
+                    'has-error': error,
+                }), children: [items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(ItemSummaryOption, { item: item, onClick: function () { return onEditItem(index); } }, item.id)); }), _jsx(NavigationOption, { media: _jsx(Plus, {}), title: addItemTitle || formatMessage(messages.addItemTitle), showMediaAtAllSizes: true, onClick: function () { return onAddItem(); } }), error && _jsx(InlineAlert, { type: "negative", children: error })] }), _jsx(Modal, { open: openModalType !== null, title: (openModalType === 'add' ? addItemTitle : editItemTitle) ||
+                    formatMessage(messages.addItemTitle), body: _jsxs(_Fragment, { children: [_jsx("div", { className: "m-b-2", children: editableItem }), _jsxs("div", { children: [_jsx(Button, { priority: "primary", block: true, className: "m-b-2", onClick: function () { return onSaveItem(); }, children: formatMessage(messages.addItem) }), _jsx(Button, { priority: "secondary", type: "negative", block: true, onClick: function () { return onRemoveItem(); }, children: formatMessage(messages.removeItem) })] })] }), onClose: function () { return onCancelEdit(); } })] }));
+}
+function ItemSummaryOption(_a) {
+    var item = _a.item, onClick = _a.onClick;
+    return (_jsx(NavigationOption, { media: _jsx(NavigationOptionMedia, __assign({}, item)), title: item.title, content: item.description, showMediaAtAllSizes: true, onClick: onClick }));
+}
+export default RepeatableRenderer;

package/build/revamp/wise/renderers/ReviewRenderer.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DefinitionList, Header } from '@transferwise/components';
+import { getMargin } from './utils/layout-utils';
+import Help from './components/Help';
+var ReviewRenderer = {
+    canRenderType: 'review',
+    render: function (_a) {
+        var callToAction = _a.callToAction, control = _a.control, fields = _a.fields, margin = _a.margin, title = _a.title;
+        var orientation = mapControlToDefinitionListLayout(control);
+        var action = callToAction
+            ? {
+                text: callToAction.title,
+                onClick: function (event) {
+                    event.preventDefault();
+                    callToAction.onClick();
+                },
+            }
+            : undefined;
+        return (_jsxs("div", { className: getMargin(margin), children: [(title || callToAction) && _jsx(Header, { title: title !== null && title !== void 0 ? title : '', action: action }), _jsx("div", { className: margin, children: _jsx(DefinitionList, { layout: orientation, definitions: fields.map(function (_a, index) {
+                            var label = _a.label, value = _a.value, help = _a.help;
+                            return ({
+                                key: String(index),
+                                title: label,
+                                value: getFieldValue(value, help, orientation),
+                            });
+                        }) }) })] }));
+    },
+};
+export default ReviewRenderer;
+var mapControlToDefinitionListLayout = function (control) {
+    switch (control) {
+        case 'horizontal':
+        case 'horizontal-end-aligned':
+            return 'HORIZONTAL_RIGHT_ALIGNED';
+        case 'horizontal-start-aligned':
+            return 'HORIZONTAL_LEFT_ALIGNED';
+        case 'vertical-two-column':
+            return 'VERTICAL_TWO_COLUMN';
+        case 'vertical':
+        case 'vertical-one-column':
+        default:
+            return 'VERTICAL_ONE_COLUMN';
+    }
+};
+var getFieldValue = function (value, help, orientation) {
+    if (help) {
+        return orientation === 'HORIZONTAL_RIGHT_ALIGNED' ? (_jsxs(_Fragment, { children: [_jsx(Help, { help: help }), " ", value] })) : (_jsxs(_Fragment, { children: [value, " ", _jsx(Help, { help: help })] }));
+    }
+    return value;
+};

package/build/revamp/wise/renderers/SearchRenderer/BlockSearchRendererComponent.js

@@ -0,0 +1,59 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Markdown, NavigationOption, NavigationOptionsList } from '@transferwise/components';
+import { useTrackEvent } from '../step/StepRendererContext';
+import FieldInput from '../components/FieldInput';
+import { NavigationOptionMedia } from '../components/icon/NavigationOptionMedia';
+import { getMargin } from '../utils/layout-utils';
+import { ErrorResult } from './ErrorResult';
+import { useState } from 'react';
+function BlockSearchRendererComponent(_a) {
+    var id = _a.id, isLoading = _a.isLoading, margin = _a.margin, onChange = _a.onChange, query = _a.query, state = _a.state, title = _a.title;
+    var _b = useState(false), hasSearched = _b[0], setHasSearched = _b[1];
+    var trackEvent = useTrackEvent();
+    return (_jsxs("div", { className: getMargin(margin), children: [_jsx(FieldInput, { id: id, description: "", error: "", help: "", label: title, children: _jsx(Input, { id: id, name: id, type: "text", value: query, className: "m-t-1", onChange: function (_a) {
+                        var value = _a.currentTarget.value;
+                        if (!hasSearched) {
+                            setHasSearched(true);
+                            trackEvent('Search Started');
+                        }
+                        onChange(value);
+                    } }) }), isLoading ? _jsx(_Fragment, { children: "Loading..." }) : _jsx(SearchResultContent, { state: state, onChange: onChange })] }));
+}
+function SearchResultContent(_a) {
+    var state = _a.state, onChange = _a.onChange;
+    switch (state.type) {
+        case 'error':
+            return _jsx(ErrorResult, { state: state });
+        case 'results':
+            return _jsx(SearchResults, { state: state, onChange: onChange });
+        case 'noResults':
+            return _jsx(EmptySearchResult, { state: state });
+        case 'pending':
+        default:
+            return null;
+    }
+}
+function EmptySearchResult(_a) {
+    var state = _a.state;
+    return (_jsx(Markdown, { className: "m-t-2", config: { link: { target: '_blank' } }, children: state.message }));
+}
+export function SearchResults(_a) {
+    var state = _a.state;
+    var trackEvent = useTrackEvent();
+    return (_jsx(NavigationOptionsList, { children: state.results.map(function (result) { return (_jsx(NavigationOption, { title: result.title, content: result.description, media: _jsx(NavigationOptionMedia, __assign({}, result)), showMediaCircle: false, showMediaAtAllSizes: true, onClick: function () {
+                trackEvent('Search Result Selected', __assign({ type: result.type }, (result.type === 'action' ? { actionId: result.id } : {})));
+                result.onClick();
+            } }, JSON.stringify(result))); }) }));
+}
+export default BlockSearchRendererComponent;

package/build/revamp/wise/renderers/SearchRenderer/ErrorResult.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from 'react-intl';
+import messages from '../../../../common/messages/generic-error.messages';
+export function ErrorResult(_a) {
+    var state = _a.state;
+    var intl = useIntl();
+    return (_jsxs("p", { className: "m-t-2", children: [intl.formatMessage(messages.genericError), "\u00A0", _jsx("a", { href: "/", onClick: function (e) {
+                    e.preventDefault();
+                    state.onRetry();
+                }, children: intl.formatMessage(messages.retry) })] }));
+}

package/build/revamp/wise/renderers/SearchRenderer/InlineSearchRendererComponent.js

@@ -0,0 +1,63 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Markdown, Typeahead } from '@transferwise/components';
+import { Search } from '@transferwise/icons';
+import { useState } from 'react';
+import FieldInput from '../components/FieldInput';
+import { getMargin } from '../utils/layout-utils';
+import { ErrorResult } from './ErrorResult';
+import { useTrackEvent } from '../step/StepRendererContext';
+function InlineSearchRenderer(_a) {
+    var id = _a.id, isLoading = _a.isLoading, margin = _a.margin, onChange = _a.onChange, state = _a.state, title = _a.title;
+    var _b = useState(false), hasSearched = _b[0], setHasSearched = _b[1];
+    var trackEvent = useTrackEvent();
+    return (_jsx("div", { className: getMargin(margin), children: _jsxs(FieldInput, { id: id, description: "", error: "", help: "", label: title, children: [id, _jsx(Typeahead, { id: "typeahead-input-id", name: "typeahead-input-name", size: "md", maxHeight: 100, footer: _jsx(TypeaheadFooter, { state: state, isLoading: isLoading }), multiple: false, clearable: false, addon: _jsx(Search, { size: 24 }), options: state.type === 'results' ? state.results.map(mapResultToTypeaheadOption) : [], minQueryLength: 1, onChange: function (values) {
+                        if (values.length > 0) {
+                            var updatedValue = values[0];
+                            var result = updatedValue.value;
+                            if (result) {
+                                trackEvent('Search Result Selected', __assign({ type: result.type }, (result.type === 'action' ? { actionId: result.id } : {})));
+                                result.onClick();
+                            }
+                        }
+                    }, onInputChange: function (query) {
+                        if (!hasSearched) {
+                            setHasSearched(true);
+                            trackEvent('Search Started');
+                        }
+                        onChange(query);
+                    } })] }) }));
+}
+function mapResultToTypeaheadOption(result) {
+    return {
+        label: result.title,
+        secondary: result.description,
+        value: result,
+        clearQueryOnSelect: result.type === 'action',
+        keepFocusOnSelect: result.type === 'search',
+    };
+}
+function TypeaheadFooter(_a) {
+    var state = _a.state, isLoading = _a.isLoading;
+    if (state.type === 'noResults') {
+        return (_jsx(Markdown, { className: "m-t-2 m-x-2", config: { link: { target: '_blank' } }, children: state.message }));
+    }
+    if (state.type === 'error') {
+        return (_jsx("div", { className: "m-t-2 m-x-2", children: _jsx(ErrorResult, { state: state }) }));
+    }
+    if (state.type === 'pending' || isLoading) {
+        return _jsx("p", { className: "m-t-2 m-x-2", children: "Loading..." });
+    }
+    return null;
+}
+export default InlineSearchRenderer;

package/build/revamp/wise/renderers/SearchRenderer/SearchRenderer.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import BlockSearchRendererComponent from './BlockSearchRendererComponent';
+import InlineSearchRendererComponent from './InlineSearchRendererComponent';
+var SearchRenderer = {
+    canRenderType: 'search',
+    render: function (props) {
+        return props.control === 'inline' ? (_jsx(InlineSearchRendererComponent, __assign({}, props))) : (_jsx(BlockSearchRendererComponent, __assign({}, props)));
+    },
+};
+export default SearchRenderer;

package/build/revamp/wise/renderers/SelectInputRenderer/OptionMedia.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, AvatarType } from '@transferwise/components';
+import DynamicIcon from '../components/icon/DynamicIcon';
+export function OptionMedia(_a) {
+    var icon = _a.icon, image = _a.image;
+    if (image === null || image === void 0 ? void 0 : image.url) {
+        return _jsx("img", { src: image.url, alt: image.accessibilityDescription || '', width: "64px" });
+    }
+    if (icon && 'name' in icon) {
+        return (_jsx(Avatar, { type: AvatarType.ICON, children: _jsx(DynamicIcon, { name: icon.name }) }));
+    }
+    if (icon && 'text' in icon) {
+        return _jsx(Avatar, { type: AvatarType.INITIALS, children: icon.text });
+    }
+    return null;
+}

package/build/revamp/wise/renderers/SelectInputRenderer/RadioInputRendererComponent.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioGroup } from '@transferwise/components';
+import FieldInput from '../components/FieldInput';
+import { OptionMedia } from './OptionMedia';
+export function RadioInputRendererComponent(props) {
+    var id = props.id, children = props.children, description = props.description, disabled = props.disabled, error = props.error, help = props.help, label = props.label, options = props.options, selectedIndex = props.selectedIndex, onSelect = props.onSelect;
+    return (_jsxs(_Fragment, { children: [_jsx(FieldInput, { id: id, label: label, help: help, description: description, error: error, children: _jsx("span", { children: _jsx(RadioGroup, { name: id, radios: options.map(function (option, index) { return ({
+                            label: option.title,
+                            value: index,
+                            secondary: option.description,
+                            disabled: option.disabled || disabled,
+                            avatar: _jsx(OptionMedia, { icon: option.icon, image: option.image }),
+                        }); }), selectedValue: selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : undefined, onChange: onSelect }, "".concat(id, "-").concat(selectedIndex)) }) }), children] }));
+}