@wise/dynamic-flow-client 0.1.1 → 0.1.3

package/build/formControl/FormControl.d.ts

@@ -0,0 +1,86 @@
+import { RadioGroupRadios } from '@transferwise/components/build/types/radioGroup/RadioGroup';
+import { PureComponent } from 'react';
+import { FormControlProps, FormControlState, FormControlOption } from './types';
+export default class FormControl extends PureComponent<FormControlProps, FormControlState> {
+    static Type: {
+        RADIO: string;
+        CHECKBOX: string;
+        SELECT: string;
+        FILE: string;
+        DATE: string;
+        DATETIME: string;
+        DATELOOKUP: string;
+        TEL: string;
+        NUMBER: string;
+        HIDDEN: string;
+        PASSWORD: string;
+        TEXT: string;
+        TEXTAREA: string;
+        UPLOAD: string;
+        TAB: string;
+    };
+    static Size: {
+        EXTRA_SMALL: string;
+        SMALL: string;
+        MEDIUM: string;
+        LARGE: string;
+        EXTRA_LARGE: string;
+    };
+    static MonthFormat: {
+        SHORT: string;
+        LONG: string;
+    };
+    static DateMode: {
+        DAY_MONTH_YEAR: string;
+        MONTH_YEAR: string;
+    };
+    constructor(props: FormControlProps);
+    static getDerivedStateFromProps(nextProps: FormControlProps, previousState: FormControlState): {
+        prevValue: string | number | boolean | Date | null;
+        value: string | number | boolean | Date | null;
+    } | null;
+    /**
+     * autocomplete hides our form help so we need to disable it when help text
+     * is present. Chrome ignores autocomplete=off, the only way to disable it is
+     * to provide an 'invalid' value, for which 'disabled' serves.
+     */
+    getAutocompleteStatus: () => "on" | "disabled";
+    handleOnChange: (value: string | number | boolean | null) => void;
+    handleInputOnChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    handleOnFocus: () => void;
+    handleOnBlur: () => void;
+    getSelectedOption: (options: FormControlOption[]) => FormControlOption | undefined;
+    mapOption: (option: FormControlOption) => RadioGroupRadios;
+    render(): JSX.Element;
+    static defaultProps: {
+        autoComplete: boolean;
+        countryCode: null;
+        disabled: boolean;
+        displayPattern: null;
+        id: null;
+        label: string;
+        max: null;
+        maxDate: null;
+        maxLength: null;
+        min: null;
+        minDate: null;
+        minLength: null;
+        mode: string;
+        monthFormat: string;
+        onBlur: null;
+        onFocus: null;
+        onSearchChange: null;
+        options: never[];
+        placeholder: null;
+        readOnly: boolean;
+        required: boolean;
+        searchPlaceholder: null;
+        searchValue: string;
+        selectedOption: null;
+        size: string;
+        step: number;
+        type: string;
+        uploadProps: {};
+        value: null;
+    };
+}

package/build/formControl/FormControl.js

@@ -0,0 +1,241 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 } from "react/jsx-runtime";
+import { Checkbox, DateInput, DateLookup, InputWithDisplayFormat, PhoneNumberInput, RadioGroup, Select, Tabs, TextareaWithDisplayFormat, Upload, } from '@transferwise/components';
+import { isNumber, isString } from '@transferwise/neptune-validation';
+import { PureComponent } from 'react';
+import { DateMode, FormControlType, MonthFormat, Size } from '../common';
+import { dateToDateString } from '../common/general';
+import { getSafeStringOrNumberValue, getSafeDateOrStringValue, getSafeDateStringValue, getSafeStringValue, getSafeBooleanValue, } from './value-utils';
+var FormControl = /** @class */ (function (_super) {
+    __extends(FormControl, _super);
+    function FormControl(props) {
+        var _this = _super.call(this, props) || this;
+        /**
+         * autocomplete hides our form help so we need to disable it when help text
+         * is present. Chrome ignores autocomplete=off, the only way to disable it is
+         * to provide an 'invalid' value, for which 'disabled' serves.
+         */
+        _this.getAutocompleteStatus = function () { return (_this.props.autoComplete ? 'on' : 'disabled'); };
+        _this.handleOnChange = function (value) {
+            _this.props.onChange(value);
+        };
+        _this.handleInputOnChange = function (event) {
+            _this.props.onChange(event.target.value);
+        };
+        _this.handleOnFocus = function () {
+            var _a, _b;
+            (_b = (_a = _this.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        _this.handleOnBlur = function () {
+            var _a, _b;
+            (_b = (_a = _this.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+        _this.getSelectedOption = function (options) {
+            if (_this.state.selectedOption !== null && typeof _this.state.selectedOption !== 'undefined') {
+                return options.find(function (option) { var _a; return ((_a = _this.state.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === option.value; });
+            }
+            if (_this.props.value !== null && typeof _this.props.value !== 'undefined') {
+                return options.find(function (option) { return _this.props.value === option.value; });
+            }
+            return undefined;
+        };
+        _this.mapOption = function (option) {
+            return __assign(__assign({}, option), { value: isNumber(option.value) || isString(option.value) ? option.value : undefined, disabled: option.disabled || _this.props.disabled, readOnly: _this.props.readOnly });
+        };
+        _this.state = {
+            selectedOption: props.selectedOption,
+            touched: false,
+            prevValue: props.value
+        };
+        return _this;
+    }
+    FormControl.getDerivedStateFromProps = function (nextProps, previousState) {
+        if (previousState.prevValue !== nextProps.value) {
+            return { prevValue: nextProps.value, value: nextProps.value };
+        }
+        return null;
+    };
+    FormControl.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var _b = this.props, name = _b.name, placeholder = _b.placeholder, step = _b.step, countryCode = _b.countryCode, type = _b.type, options = _b.options, disabled = _b.disabled, readOnly = _b.readOnly, required = _b.required, minLength = _b.minLength, maxLength = _b.maxLength, min = _b.min, max = _b.max, searchPlaceholder = _b.searchPlaceholder, searchValue = _b.searchValue, onSearchChange = _b.onSearchChange, size = _b.size, uploadProps = _b.uploadProps, label = _b.label, monthFormat = _b.monthFormat, 
+        // FIXME pass id to all components that accept it
+        id = _b.id, minDate = _b.minDate, maxDate = _b.maxDate, value = _b.value, mode = _b.mode;
+        switch (type) {
+            case FormControlType.RADIO:
+                return (_jsx(RadioGroup, { radios: options.map(this.mapOption), name: name, selectedValue: getSafeStringOrNumberValue(value, { coerceValue: true }), onChange: this.handleOnChange }));
+            case FormControlType.CHECKBOX:
+                return (_jsx(Checkbox, { checked: getSafeBooleanValue(value, { coerceValue: true }), disabled: disabled, label: label, required: required, readOnly: readOnly, onChange: this.handleOnChange, onBlur: this.handleOnBlur, onFocus: this.handleOnFocus }));
+            case FormControlType.SELECT: {
+                var search = options.length >= 20;
+                return (_jsx(Select, { id: id, selected: this.getSelectedOption(options), options: options, search: search, required: required, disabled: disabled, placeholder: placeholder, searchPlaceholder: searchPlaceholder, searchValue: searchValue, onChange: function (option) {
+                        var _a;
+                        _this.setState({ selectedOption: option !== null && option !== void 0 ? option : undefined });
+                        _this.props.onChange((_a = option === null || option === void 0 ? void 0 : option.value) !== null && _a !== void 0 ? _a : null);
+                    }, onFocus: this.handleOnFocus, onBlur: this.handleOnBlur, onSearchChange: search ? onSearchChange : undefined }));
+            }
+            case FormControlType.TAB:
+                return (_jsx(Tabs, { selected: (((_a = this.getSelectedOption(options)) === null || _a === void 0 ? void 0 : _a.value) || 0), tabs: options.map(function (option) { return ({
+                        title: option.label,
+                        content: _jsx(_Fragment, {}),
+                        disabled: option.disabled || false
+                    }); }), name: id, onTabSelect: function (index) {
+                        var hasSelectedOption = !!_this.state.selectedOption;
+                        _this.setState({
+                            selectedOption: options.find(function (option) { return option.value === index; })
+                        });
+                        _this.props.onChange(index, hasSelectedOption ? 'user' : 'init');
+                    } }));
+            case FormControlType.NUMBER:
+                return (_jsx("input", { autoComplete: this.getAutocompleteStatus(), className: "form-control", disabled: disabled, id: id, max: max, min: min, placeholder: placeholder, readOnly: readOnly, required: required, step: step, type: "number", value: getSafeStringOrNumberValue(value, { coerceValue: true }), onBlur: this.handleOnBlur, onChange: function (event) {
+                        // Input type number target value is a string and needs to be a number
+                        _this.props.onChange(parseFloat(event.target.value));
+                        // FIXME: maybe this parsing should be done outside of this component in SchemaFormControl,
+                        // where we know what schema we're working with?
+                    }, onFocus: this.handleOnFocus, onWheel: function (event) {
+                        if (event.target instanceof HTMLElement) {
+                            // To prevent values being changed when input is focussed and user scrolls
+                            event.target.blur();
+                        }
+                    } }));
+            case FormControlType.HIDDEN:
+                return (_jsx("input", { type: "hidden", name: name, value: getSafeStringValue(value, { coerceValue: true }), id: id }));
+            case FormControlType.PASSWORD:
+                return (_jsx("input", { autoComplete: this.getAutocompleteStatus(), className: "form-control", disabled: disabled, id: id, placeholder: placeholder, readOnly: readOnly, required: required, type: "password", value: getSafeStringValue(value, { coerceValue: true }), onBlur: this.handleOnBlur, onChange: this.handleInputOnChange, onFocus: this.handleOnFocus }));
+            case FormControlType.DATE:
+            case FormControlType.DATETIME:
+                return (_jsx(DateInput, { disabled: disabled, size: size, value: getSafeDateOrStringValue(value), mode: mode, monthFormat: monthFormat, onBlur: this.handleOnBlur, onChange: this.handleOnChange, onFocus: this.handleOnFocus }));
+            case FormControlType.DATELOOKUP: {
+                return (_jsx(DateLookup
+                // DateLookup handles null values perfectly well, it's just typed incorrectly
+                , { 
+                    // DateLookup handles null values perfectly well, it's just typed incorrectly
+                    value: getSafeDateStringValue(value), min: minDate, max: maxDate, placeholder: placeholder, monthFormat: monthFormat, disabled: disabled, onChange: function (date) {
+                        // FIXME We need types for DateLookup
+                        _this.handleOnChange(dateToDateString(date));
+                    }, onBlur: this.handleOnBlur, onFocus: this.handleOnFocus }));
+            }
+            case FormControlType.TEL:
+                return (_jsx(PhoneNumberInput, { disabled: disabled, countryCode: countryCode, placeholder: placeholder, required: required, searchPlaceholder: searchPlaceholder, size: size, initialValue: getSafeStringValue(value), onBlur: this.handleOnBlur, onChange: this.handleOnChange, onFocus: this.handleOnFocus }));
+            case FormControlType.TEXTAREA: {
+                var textareaProps = {
+                    className: 'form-control tw-form-control',
+                    id: id,
+                    name: name,
+                    placeholder: placeholder,
+                    value: getSafeStringValue(value, { coerceValue: true }),
+                    readOnly: readOnly,
+                    required: required,
+                    minLength: minLength,
+                    maxLength: maxLength,
+                    onFocus: this.handleOnFocus,
+                    onBlur: this.handleOnBlur,
+                    disabled: disabled,
+                    autoComplete: this.getAutocompleteStatus()
+                };
+                if (this.props.displayPattern) {
+                    return (_jsx(TextareaWithDisplayFormat, __assign({ displayPattern: this.props.displayPattern }, textareaProps, { onChange: this.handleOnChange })));
+                }
+                return _jsx("textarea", __assign({}, textareaProps, { onChange: this.handleInputOnChange }));
+            }
+            case FormControlType.FILE:
+            case FormControlType.UPLOAD: {
+                return (
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error - TODO: Remove this once Upload is migrated to TypeScript
+                _jsx(Upload, __assign({}, uploadProps, { usAccept: uploadProps.usAccept || '*', usDisabled: uploadProps.usDisabled || disabled, onSuccess: function (base64url) {
+                        _this.handleOnChange(base64url);
+                    }, onFailure: function () {
+                        _this.handleOnChange(null);
+                    }, onCancel: function () {
+                        _this.handleOnChange(null);
+                    } })));
+            }
+            case FormControlType.TEXT:
+            default: {
+                var inputProps = {
+                    type: 'text',
+                    className: 'form-control',
+                    id: id,
+                    name: name,
+                    placeholder: placeholder,
+                    value: getSafeStringValue(value, { coerceValue: true }),
+                    readOnly: readOnly,
+                    required: required,
+                    minLength: minLength,
+                    maxLength: maxLength,
+                    onFocus: this.handleOnFocus,
+                    onBlur: this.handleOnBlur,
+                    disabled: disabled,
+                    autoComplete: this.getAutocompleteStatus()
+                };
+                if (this.props.displayPattern) {
+                    return (_jsx(InputWithDisplayFormat, __assign({ displayPattern: this.props.displayPattern }, inputProps, { onChange: this.handleOnChange })));
+                }
+                return _jsx("input", __assign({}, inputProps, { onChange: this.handleInputOnChange }));
+            }
+        }
+    };
+    FormControl.Type = FormControlType;
+    FormControl.Size = Size;
+    FormControl.MonthFormat = MonthFormat;
+    FormControl.DateMode = DateMode;
+    FormControl.defaultProps = {
+        autoComplete: true,
+        countryCode: null,
+        disabled: false,
+        displayPattern: null,
+        id: null,
+        label: '',
+        max: null,
+        maxDate: null,
+        maxLength: null,
+        min: null,
+        minDate: null,
+        minLength: null,
+        mode: FormControl.DateMode.DAY_MONTH_YEAR,
+        monthFormat: FormControl.MonthFormat.LONG,
+        onBlur: null,
+        onFocus: null,
+        onSearchChange: null,
+        options: [],
+        placeholder: null,
+        readOnly: false,
+        required: false,
+        searchPlaceholder: null,
+        searchValue: '',
+        selectedOption: null,
+        size: FormControl.Size.MEDIUM,
+        step: 1,
+        type: FormControl.Type.TEXT,
+        uploadProps: {},
+        value: null
+    };
+    return FormControl;
+}(PureComponent));
+export default FormControl;

package/build/formControl/index.d.ts

@@ -0,0 +1 @@
+export { default } from './FormControl';

package/build/formControl/index.js

@@ -0,0 +1 @@
+export { default } from './FormControl';

package/build/formControl/types.d.ts

@@ -0,0 +1,57 @@
+import { UploadProps } from '@transferwise/components/build/types/upload/Upload';
+import { ReactNode } from 'react';
+import { FormControlType } from '../common';
+export type FormControlOption = {
+    value: number | string | boolean;
+    label: string;
+    disabled?: boolean;
+    note?: string;
+    secondary?: string;
+};
+type FormControlSelectedOption = {
+    value: number | string | boolean;
+    label: string;
+    icon?: ReactNode;
+    currency?: string;
+    note?: ReactNode;
+    secondary?: ReactNode;
+};
+export type FormControlProps = {
+    name: string;
+    onChange: (value: string | number | boolean | null, type?: 'init' | 'user') => void;
+    autoComplete?: boolean;
+    countryCode?: string;
+    disabled?: boolean;
+    displayPattern?: string;
+    id: string;
+    label?: string;
+    max?: number;
+    maxDate?: Date;
+    maxLength?: number;
+    min?: number;
+    minDate?: Date;
+    minLength?: number;
+    mode?: 'day-month-year' | 'month-year';
+    monthFormat?: 'long' | 'short';
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onSearchChange?: (searchValue: string) => void;
+    options: Array<FormControlOption>;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    searchPlaceholder?: string;
+    searchValue?: string;
+    selectedOption?: FormControlSelectedOption;
+    size?: 'sm' | 'md' | 'lg';
+    step?: number;
+    type?: (typeof FormControlType)[keyof typeof FormControlType];
+    uploadProps: UploadProps;
+    value: Date | string | number | boolean | null;
+};
+export type FormControlState = {
+    prevValue: FormControlProps['value'];
+    selectedOption: FormControlSelectedOption | undefined;
+    touched: boolean;
+};
+export {};

package/build/formControl/types.js

@@ -0,0 +1 @@
+export {};

package/build/formControl/value-utils.d.ts

@@ -0,0 +1,9 @@
+type GetValueOptions = {
+    coerceValue?: boolean;
+};
+export declare const getSafeStringValue: (value: unknown, options?: GetValueOptions) => string | undefined;
+export declare const getSafeStringOrNumberValue: (value: unknown, options?: GetValueOptions) => string | number | undefined;
+export declare const getSafeBooleanValue: (value: unknown, options?: GetValueOptions) => boolean | undefined;
+export declare const getSafeDateOrStringValue: (value: unknown) => string | Date | undefined;
+export declare const getSafeDateStringValue: (value: unknown) => Date | null;
+export {};

package/build/formControl/value-utils.js

@@ -0,0 +1,108 @@
+/* eslint-disable no-console */
+import { isBoolean, isNull, isNumber, isObject, isString } from '@transferwise/neptune-validation';
+import { dateStringToDate } from '../common/general';
+export var getSafeStringValue = function (value, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.coerceValue, coerceValue = _a === void 0 ? false : _a;
+    if (isNull(value)) {
+        return undefined;
+    }
+    if (isObject(value)) {
+        logInvalidTypeFallbackWarning({ received: 'object', expected: 'string' });
+        return undefined;
+    }
+    if (!isString(value)) {
+        if (coerceValue) {
+            // TODO: Remove this coercion once we're sure everyone has had a chance to address warnings
+            logInvalidTypeCoercedWarning({ received: typeof value, expected: 'string' });
+            return String(value);
+        }
+        else {
+            logInvalidTypeFallbackWarning({ received: typeof value, expected: 'string' });
+            return undefined;
+        }
+    }
+    return value;
+};
+export var getSafeStringOrNumberValue = function (value, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.coerceValue, coerceValue = _a === void 0 ? false : _a;
+    if (isNull(value)) {
+        return undefined;
+    }
+    if (isNumber(value)) {
+        return value;
+    }
+    var logProps = { received: typeof value, expected: 'string or number' };
+    if (isObject(value)) {
+        logInvalidTypeFallbackWarning(logProps);
+        return undefined;
+    }
+    if (!isString(value)) {
+        if (coerceValue) {
+            // TODO: Remove this coercion once we're sure everyone has had a chance to address warnings
+            logInvalidTypeCoercedWarning(logProps);
+            return String(value);
+        }
+        else {
+            logInvalidTypeFallbackWarning(logProps);
+            return undefined;
+        }
+    }
+    return value;
+};
+export var getSafeBooleanValue = function (value, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.coerceValue, coerceValue = _a === void 0 ? false : _a;
+    if (isNull(value)) {
+        return false;
+    }
+    if (!isBoolean(value)) {
+        if (coerceValue) {
+            // TODO: Remove this coercion once we're sure everyone has had a chance to address warnings
+            logInvalidTypeCoercedWarning({ received: typeof value, expected: 'boolean' });
+            return Boolean(value);
+        }
+        else {
+            logInvalidTypeFallbackWarning({ received: typeof value, expected: 'boolean' });
+            return undefined;
+        }
+    }
+    return value;
+};
+export var getSafeDateOrStringValue = function (value) {
+    if (isNull(value)) {
+        return undefined;
+    }
+    if (!(value instanceof Date) && !isString(value)) {
+        logInvalidTypeFallbackWarning({ received: typeof value, expected: 'string or Date' });
+        return undefined;
+    }
+    return value;
+};
+export var getSafeDateStringValue = function (value) {
+    if (isNull(value)) {
+        return null;
+    }
+    if (!isString(value)) {
+        logInvalidTypeFallbackWarning({
+            received: typeof value,
+            expected: 'string',
+            fallback: 'null'
+        });
+        return null;
+    }
+    var date = dateStringToDate(value);
+    if (date === null) {
+        console.warn('Incorrectly formatted date string. Falling back to null.');
+    }
+    return date;
+};
+var logInvalidTypeCoercedWarning = function (_a) {
+    var received = _a.received, expected = _a.expected;
+    console.warn("Value with type ".concat(received, " passed to control that only accepts type ").concat(expected, ". Type will be coerced, but this behaviour will change in the future, so please fix your code."));
+};
+var logInvalidTypeFallbackWarning = function (_a) {
+    var received = _a.received, expected = _a.expected, _b = _a.fallback, fallback = _b === void 0 ? 'undefined' : _b;
+    console.warn("Value with type ".concat(received, " passed to control that only accepts type ").concat(expected, ". Falling back to ").concat(fallback));
+};

package/build/i18n/cs.json

@@ -0,0 +1,8 @@
+{
+  "dynamicFlows.ErrorBoundary.errorAlert": "Ups! Něco se pokazilo...",
+  "dynamicFlows.ErrorBoundary.retry": "Zkusit znovu",
+  "dynamicFlows.Help.ariaLabel": "Pro více informací klikněte sem.",
+  "dynamicFlows.PersistAsyncSchema.genericError": "Něco se pokazilo, zkuste to prosím později!",
+  "dynamicFlows.ReadOnlySchema.no": "Ne",
+  "dynamicFlows.ReadOnlySchema.yes": "Ano"
+}

package/build/i18n/de.json

@@ -0,0 +1,34 @@
+{
+  "dynamicFlows.ArraySchema.maxItemsError": "Bitte füge {maxItems} oder weniger hinzu.",
+  "dynamicFlows.ArraySchema.minItemsError": "Bitte füge mindestens {minItems} hinzu.",
+  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "Der von dir verwendete Browser unterstützt keine Kameras. Bitte verwende einen anderen Browser oder ein anderes Gerät, oder lade unsere App herunter",
+  "dynamicFlows.CameraCapture.CameraNotSupported.title": "Kamera wird nicht unterstützt",
+  "dynamicFlows.CameraCapture.NoCameraAccess.action": "Kamerazugriff genehmigen",
+  "dynamicFlows.CameraCapture.NoCameraAccess.paragraph": "Aktiviere den Kamerazugriff in den Einstellungen deines Browsers, um weitermachen zu können.",
+  "dynamicFlows.CameraCapture.NoCameraAccess.title": "Wir können nicht auf deine Kamera zugreifen",
+  "dynamicFlows.CameraCapture.reviewInstructions": "Ist das aufgenommene Bild deutlich erkennbar und vollständig?",
+  "dynamicFlows.CameraCapture.reviewRetry": "Nein, erneut versuchen",
+  "dynamicFlows.CameraCapture.reviewSubmit": "Ja, senden",
+  "dynamicFlows.ControlFeedback.maxLength": "Bitte gib nicht mehr als {maxLength} Zeichen ein.",
+  "dynamicFlows.ControlFeedback.maximum": "Bitte gib eine Zahl ein, die {maximum} oder weniger beträgt.",
+  "dynamicFlows.ControlFeedback.maximumDate": "Bitte gib ein Datum ein, das am oder vor dem {maximum} liegt.",
+  "dynamicFlows.ControlFeedback.minLength": "Bitte gib mindestens {minLength} Zeichen ein.",
+  "dynamicFlows.ControlFeedback.minimum": "Bitte gib eine Zahl ein, die {minimum} oder mehr beträgt.",
+  "dynamicFlows.ControlFeedback.minimumDate": "Bitte gib ein Datum ein, das am oder nach dem {minimum} liegt.",
+  "dynamicFlows.ControlFeedback.pattern": "Falsches Format",
+  "dynamicFlows.ControlFeedback.patternDate": "Bitte gib ein Datum im richtigen Format ein.",
+  "dynamicFlows.ControlFeedback.required": "Bitte fülle dieses Feld aus.",
+  "dynamicFlows.ControlFeedback.type": "Falscher Typ",
+  "dynamicFlows.DynamicExternal.retryTitle": "Fenster erneut öffnen",
+  "dynamicFlows.DynamicParagraph.copied": "In Zwischenablage kopiert",
+  "dynamicFlows.DynamicParagraph.copy": "Kopieren",
+  "dynamicFlows.ErrorBoundary.errorAlert": "Hoppla – da ist was schiefgelaufen...",
+  "dynamicFlows.ErrorBoundary.retry": "Erneut versuchen",
+  "dynamicFlows.Help.ariaLabel": "Klicke hier für mehr Informationen.",
+  "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Diese Datei ist leider zu groß. Bitte lade eine kleinere Datei hoch.",
+  "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "Bitte lade {maxItems} oder weniger Dateien hoch.",
+  "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Bitte lade mindestens {minItems} Datei(en) hoch.",
+  "dynamicFlows.PersistAsyncSchema.genericError": "Da ist etwas schiefgelaufen. Probiere es bitte später noch einmal.",
+  "dynamicFlows.ReadOnlySchema.no": "Nein",
+  "dynamicFlows.ReadOnlySchema.yes": "Ja"
+}

package/build/i18n/en.json

@@ -0,0 +1,38 @@
+{
+  "dynamicFlows.ArraySchema.maxItemsError": "Please add {maxItems} or fewer.",
+  "dynamicFlows.ArraySchema.minItemsError": "Please add at least {minItems}.",
+  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "The browser you're using doesn't have support for a camera. Try a different browser, device, or download our mobile app.",
+  "dynamicFlows.CameraCapture.CameraNotSupported.title": "Camera not supported",
+  "dynamicFlows.CameraCapture.NoCameraAccess.action": "Enable camera access",
+  "dynamicFlows.CameraCapture.NoCameraAccess.paragraph": "Enable camera access in your browser's settings to get going again.",
+  "dynamicFlows.CameraCapture.NoCameraAccess.title": "We can't access your camera",
+  "dynamicFlows.CameraCapture.reviewInstructions": "Is your picture clear, readable and complete?",
+  "dynamicFlows.CameraCapture.reviewRetry": "No, try again",
+  "dynamicFlows.CameraCapture.reviewSubmit": "Yes, submit",
+  "dynamicFlows.ControlFeedback.maxLength": "Please enter {maxLength} or fewer characters.",
+  "dynamicFlows.ControlFeedback.maximum": "Please enter a number that's {maximum} or less.",
+  "dynamicFlows.ControlFeedback.maximumDate": "Please enter a date that's on or before {maximum}.",
+  "dynamicFlows.ControlFeedback.minLength": "Please enter at least {minLength} characters.",
+  "dynamicFlows.ControlFeedback.minimum": "Please enter a number that's {minimum} or more.",
+  "dynamicFlows.ControlFeedback.minimumDate": "Please enter a date that's on or after {minimum}.",
+  "dynamicFlows.ControlFeedback.pattern": "Please enter this in the correct format.",
+  "dynamicFlows.ControlFeedback.patternDate": "Please enter a date in the corrrect format.",
+  "dynamicFlows.ControlFeedback.required": "Please fill out this field.",
+  "dynamicFlows.ControlFeedback.type": "Incorrect type",
+  "dynamicFlows.DynamicExternal.retryTitle": "Reopen window",
+  "dynamicFlows.DynamicParagraph.copied": "Copied to clipboard",
+  "dynamicFlows.DynamicParagraph.copy": "Copy",
+  "dynamicFlows.ErrorBoundary.errorAlert": "Oops. Something went wrong...",
+  "dynamicFlows.ErrorBoundary.retry": "Retry",
+  "dynamicFlows.ExternalConfirmation.cancel": "Cancel",
+  "dynamicFlows.ExternalConfirmation.description": "Please confirm you want to open **{origin}** in a new browser tab.",
+  "dynamicFlows.ExternalConfirmation.open": "Open in new tab",
+  "dynamicFlows.ExternalConfirmation.title": "Please confirm",
+  "dynamicFlows.Help.ariaLabel": "Click here for more info.",
+  "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Sorry, that file is too big. Please upload a smaller file.",
+  "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "Please upload {maxItems} or fewer files.",
+  "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Please upload at least {minItems} file(s).",
+  "dynamicFlows.PersistAsyncSchema.genericError": "Something went wrong, please try again later!",
+  "dynamicFlows.ReadOnlySchema.no": "No",
+  "dynamicFlows.ReadOnlySchema.yes": "Yes"
+}

package/build/i18n/es.json

@@ -0,0 +1,34 @@
+{
+  "dynamicFlows.ArraySchema.maxItemsError": "Añade {maxItems} o menos.",
+  "dynamicFlows.ArraySchema.minItemsError": "Añade al menos {minItems}.",
+  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "El navegador que estás utilizando no es compatible con una cámara. Prueba con otro navegador o dispositivo o descarga nuestra aplicación móvil.",
+  "dynamicFlows.CameraCapture.CameraNotSupported.title": "Cámara no compatible",
+  "dynamicFlows.CameraCapture.NoCameraAccess.action": "Permitir acceso a la cámara",
+  "dynamicFlows.CameraCapture.NoCameraAccess.paragraph": "Habilita el acceso a la cámara en la configuración de tu navegador para volver a activarla.",
+  "dynamicFlows.CameraCapture.NoCameraAccess.title": "No podemos acceder a tu cámara",
+  "dynamicFlows.CameraCapture.reviewInstructions": "¿Tu foto es clara, legible y completa?",
+  "dynamicFlows.CameraCapture.reviewRetry": "No, intentar de nuevo",
+  "dynamicFlows.CameraCapture.reviewSubmit": "Sí, enviar",
+  "dynamicFlows.ControlFeedback.maxLength": "Introduce {maxLength} caracteres o menos.",
+  "dynamicFlows.ControlFeedback.maximum": "Introduce una cifra igual o inferior a {maximum}.",
+  "dynamicFlows.ControlFeedback.maximumDate": "Introduce una fecha que sea igual o anterior al {maximum}.",
+  "dynamicFlows.ControlFeedback.minLength": "Introduce al menos {minLength} caracteres.",
+  "dynamicFlows.ControlFeedback.minimum": "Introduce una cifra igual o inferior a {minimum}.",
+  "dynamicFlows.ControlFeedback.minimumDate": "Introduce una fecha que sea igual o posterior al {minimum}.",
+  "dynamicFlows.ControlFeedback.pattern": "Utiliza el formato correcto.",
+  "dynamicFlows.ControlFeedback.patternDate": "Introduce la fecha en un formato correcto.",
+  "dynamicFlows.ControlFeedback.required": "Completa este campo.",
+  "dynamicFlows.ControlFeedback.type": "Tipo incorrecto",
+  "dynamicFlows.DynamicExternal.retryTitle": "Reabrir ventana",
+  "dynamicFlows.DynamicParagraph.copied": "Copiado al portapapeles",
+  "dynamicFlows.DynamicParagraph.copy": "Copiar",
+  "dynamicFlows.ErrorBoundary.errorAlert": "Vaya. Algo ha salido mal...",
+  "dynamicFlows.ErrorBoundary.retry": "Reintentar",
+  "dynamicFlows.Help.ariaLabel": "Haz clic aquí para obtener más información.",
+  "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Lo sentimos, el archivo pesa demasiado. Sube uno más pequeño.",
+  "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "Sube {maxItems} o menos archivos.",
+  "dynamicFlows.MultipleFileUploadSchema.minItemsError": "Sube al menos {minItems} archivo(s).",
+  "dynamicFlows.PersistAsyncSchema.genericError": "Algo ha ido mal. Vuelve a intentarlo más tarde.",
+  "dynamicFlows.ReadOnlySchema.no": "No",
+  "dynamicFlows.ReadOnlySchema.yes": "Sí"
+}