@wise/dynamic-flow-client 5.28.0 → 5.28.1

package/build/stories/spec/schemas/object/MoneyInput.story.js

@@ -1,240 +0,0 @@
-import { getMockHttpClient, respondWith } from '../../../../test-utils';
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../../utils/render-utils';
-const getHttpClient = () => getMockHttpClient({
-    '/submit': async (input, init) => {
-        // console.log(input, init && JSON.parse(init.body as string));
-        const step = getStep(`Submission Successful`, `The form was submitted with body: ${init === null || init === void 0 ? void 0 : init.body}`);
-        return respondWith(step);
-    },
-    '/refresh': async () => {
-        return respondWith(null, { status: 304 });
-    },
-});
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Schemas/Object/MoneyInput',
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-};
-export function Basic() {
-    return renderWithStep(getStep('Money Input', 'Basic money input: no placeholder, no default value, no model, no onChange.'), getHttpClient());
-}
-export function WithPlaceholder() {
-    const step = getStep('Money Input', 'Money input with placeholder in the amount.');
-    const schema = step.schemas[0];
-    schema.properties.amount.placeholder = '9.99';
-    return renderWithStep(step, getHttpClient());
-}
-export function WithDefaultValue() {
-    const step = getStep('Money Input', 'Money input with default value in the amount and currency.');
-    const schema = step.schemas[0];
-    schema.properties.amount.default = '49.99';
-    schema.properties.currency.default = 'GBP';
-    return renderWithStep(step, getHttpClient());
-}
-export function WithModel() {
-    const step = Object.assign(Object.assign({}, getStep('Money Input', 'Money input with model values for the amount and currency.')), { model: { currency: 'EUR', amount: '100.00' } });
-    return renderWithStep(step, getHttpClient());
-}
-export function WithOnChangeInTheAmount() {
-    const step = getStep('Money Input', 'Money input with onChange in the amount, which triggers a refresh after the debounce period.');
-    const schema = step.schemas[0];
-    schema.properties.amount.onChange = { type: 'refresh' };
-    return renderWithStep(step, getHttpClient());
-}
-export function WithOnChangeInTheCurrency() {
-    const step = getStep('Money Input', 'Money input with onChange in the currency, which triggers a refresh immediately.');
-    const schema = step.schemas[0];
-    schema.properties.currency.onChange = { type: 'refresh' };
-    return renderWithStep(step, getHttpClient());
-}
-export function WithExtraConstAndHiddenProperties() {
-    const step = getStep('Money Input', 'Money input with extra const and hidden properties in the object schema.');
-    const schema = step.schemas[0];
-    schema.properties.hiddenProp = {
-        type: 'string',
-        hidden: true,
-        const: 'hiddenValue',
-    };
-    schema.properties.constProp = {
-        const: 'constValue',
-    };
-    schema.properties.invalidSchema = {
-        type: 'number', // not hidden and not const, should be ignored
-    };
-    step.model = { amount: '99.99', currency: 'USD' };
-    return renderWithStep(step, getHttpClient());
-}
-export function WithValidationErrors() {
-    const step = getStep('Money Input', 'Money input with validation errors on the amount.');
-    step.model = { amount: '12', currency: 'EUR' };
-    step.errors = {
-        validation: {
-            amount: 'This error is in the step errors object.',
-        },
-    };
-    return renderWithStep(step, getHttpClient());
-}
-export function WithOnlyOneCurrencyOption() {
-    const step = getStep('Money Input', 'Money input with only one currency option, which should render as a const field.');
-    const schema = step.schemas[0];
-    schema.properties.currency = {
-        const: 'USD',
-        title: 'USD',
-        description: 'US Dollar',
-    };
-    step.model = { amount: '75.50', currency: 'USD' };
-    return renderWithStep(step, getHttpClient());
-}
-export function WithGroupingTags() {
-    const step = getStep('Money Input', 'Money input with grouping tags in the currency options.');
-    const schema = step.schemas[0];
-    const { oneOf } = schema.properties.currency;
-    oneOf.forEach((option, index) => {
-        const rnd = predictablyRandomNumbers[index];
-        const constSchemaOption = option;
-        constSchemaOption.tags = [];
-        if (rnd < 0.7)
-            return; // randomly skip some options
-        if (rnd >= 0.7 && rnd < 0.8) {
-            constSchemaOption.tags.push('recent');
-        }
-        if (rnd >= 0.75 && rnd < 0.85) {
-            constSchemaOption.tags.push('popular');
-        }
-        if (rnd >= 0.9) {
-            constSchemaOption.tags.push('currencies-with-account-details');
-        }
-    });
-    step.model = { amount: '150', currency: 'EUR' };
-    return renderWithStep(step, getHttpClient());
-}
-const getStep = (title, description) => ({
-    id: 'step',
-    title,
-    description,
-    layout: [
-        {
-            type: 'form',
-            schemaId: '#schema',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            control: 'primary',
-            action: {
-                url: '/submit',
-            },
-        },
-    ],
-    schemas: [
-        {
-            $id: '#schema',
-            type: 'object',
-            title: 'Money Input (object schema title)',
-            description: 'A money input with amount and currency (object schema description)',
-            format: 'money',
-            properties: {
-                currency: {
-                    oneOf: [
-                        {
-                            const: 'USD',
-                            title: 'USD',
-                            description: 'US Dollar',
-                            keywords: ['American Dollar'],
-                        },
-                        {
-                            const: 'EUR',
-                            title: 'EUR',
-                            description: 'Euro',
-                        },
-                        {
-                            const: 'AUD',
-                            title: 'AUD',
-                            description: 'Australian Dollar',
-                            keywords: ['Aussie Dollar'],
-                        },
-                        {
-                            const: 'GBP',
-                            title: 'GBP',
-                            description: 'British Pound',
-                            keywords: ['Blighty'],
-                        },
-                        {
-                            const: 'JPY',
-                            title: 'JPY',
-                            description: 'Japanese Yen',
-                            keywords: ['Nippon Yen'],
-                        },
-                        {
-                            const: 'CAD',
-                            title: 'CAD',
-                            description: 'Canadian Dollar',
-                            keywords: ['Loonie'],
-                        },
-                        { const: 'CHF', title: 'CHF', description: 'Swiss Franc', keywords: ['Swissie'] },
-                        { const: 'CNY', title: 'CNY', description: 'Chinese Yuan', keywords: ['Renminbi'] },
-                        { const: 'INR', title: 'INR', description: 'Indian Rupee', keywords: ['Rupee'] },
-                        { const: 'MXN', title: 'MXN', description: 'Mexican Peso', keywords: ['Peso'] },
-                        {
-                            const: 'NZD',
-                            title: 'NZD',
-                            description: 'New Zealand Dollar',
-                            keywords: ['Kiwi Dollar'],
-                        },
-                        { const: 'ZAR', title: 'ZAR', description: 'South African Rand', keywords: ['Rand'] },
-                        { const: 'SEK', title: 'SEK', description: 'Swedish Krona', keywords: ['Krona'] },
-                        { const: 'NOK', title: 'NOK', description: 'Norwegian Krone', keywords: ['Krone'] },
-                        { const: 'DKK', title: 'DKK', description: 'Danish Krone', keywords: ['Krone'] },
-                        { const: 'BRL', title: 'BRL', description: 'Brazilian Real', keywords: ['Real'] },
-                        {
-                            const: 'SGD',
-                            title: 'SGD',
-                            description: 'Singapore Dollar',
-                            keywords: ['Sing Dollar'],
-                        },
-                        {
-                            const: 'HKD',
-                            title: 'HKD',
-                            description: 'Hong Kong Dollar',
-                            keywords: ['HK Dollar'],
-                        },
-                        { const: 'KRW', title: 'KRW', description: 'South Korean Won', keywords: ['Won'] },
-                        { const: 'TRY', title: 'TRY', description: 'Turkish Lira', keywords: ['Lira'] },
-                        {
-                            const: 'IDR',
-                            title: 'IDR',
-                            description: 'Indonesian Rupiah',
-                            keywords: ['Rupiah'],
-                        },
-                        { const: 'SAR', title: 'SAR', description: 'Saudi Riyal', keywords: ['Riyal'] },
-                        { const: 'AED', title: 'AED', description: 'Emirati Dirham', keywords: ['Dirham'] },
-                        {
-                            const: 'PLN',
-                            title: 'PLN',
-                            description: 'Polish Zloty',
-                            keywords: ['Zloty'],
-                        },
-                        {
-                            const: 'THB',
-                            title: 'THB',
-                            description: 'Thai Baht',
-                            keywords: ['Baht'],
-                        },
-                    ],
-                },
-                amount: { type: 'string', format: 'numeric', minLength: 5 },
-            },
-            displayOrder: ['currency', 'amount'],
-            required: ['currency', 'amount'],
-        },
-    ],
-    refreshUrl: '/refresh',
-});
-const predictablyRandomNumbers = [
-    0.25, 0.7, 0.74, 0.81, 0.87, 0.53, 0.41, 0.19, 0.18, 0.2, 0.76, 0.66, 0.52, 0.1, 0.81, 0.19, 0.19,
-    0.59, 0.9, 0.19, 0.28, 0.44, 0.01, 0.37, 0.12, 0.62, 0.37, 0.71, 0.07, 0.67, 0.82, 0.35, 0.81,
-    0.8, 0.04, 0.88, 0.99, 0.29, 0.04, 0.21, 0.46, 0.84, 0.64, 0.2, 0.02, 0.34, 0.17, 0.1, 0.91, 0.83,
-];

package/build/stories/spec/schemas/oneOf/OneOfInitialisation.story.js

@@ -1,55 +0,0 @@
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { renderWithStep } from '../../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Schemas/OneOf',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-export function AllOfAndOneOfInitialisation() {
-    return renderWithStep(allOfAndOneOfStep);
-}
-const allOfAndOneOfStep = {
-    id: 'step-id',
-    title: 'Step Title',
-    schemas: [
-        {
-            $id: '#root',
-            allOf: [
-                {
-                    type: 'object',
-                    displayOrder: ['email'],
-                    properties: { email: { type: 'string', title: 'Email' } },
-                },
-                {
-                    control: 'radio',
-                    oneOf: [
-                        {
-                            title: 'Iban',
-                            type: 'object',
-                            displayOrder: ['iban', 'type'],
-                            properties: { iban: { type: 'string', title: 'IBAN' }, type: { const: 'IBAN' } },
-                        },
-                        {
-                            title: 'Bic',
-                            type: 'object',
-                            displayOrder: ['bic', 'type'],
-                            properties: { bic: { type: 'string', title: 'BIC' }, type: { const: 'BIC' } },
-                        },
-                    ],
-                },
-            ],
-        },
-    ],
-    layout: [
-        {
-            type: 'form',
-            schemaId: '#root',
-        },
-    ],
-    model: {
-        email: 'marty.mcfly@wise.com',
-        type: 'IBAN',
-    },
-};

package/build/stories/spec/schemas/oneOf/OneOfWithSingleOption.story.js

@@ -1,114 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getMockHttpClient, respondWith } from '../../../../test-utils';
-import DynamicFlowWise from '../../../../test-utils/DynamicFlowWise';
-import { renderWithStepAndOverrides } from '../../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Schemas/OneOf',
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const httpClient = getMockHttpClient({
-    '/submit': async () => respondWith({}, { status: 404 }),
-});
-export function SingleOptionOneOfs() {
-    const optionSchemasByType = {
-        object: {
-            type: 'object',
-            title: 'Object Schema Option',
-            displayOrder: ['accountId'],
-            properties: {
-                accountId: {
-                    title: 'Account Number',
-                    type: 'string',
-                    placeholder: '12345678',
-                },
-            },
-        },
-        const: {
-            title: 'Const Schema Option',
-            const: 'fixedValue',
-            layout: [
-                {
-                    type: 'alert',
-                    markdown: 'This is a const schema with a fixed value of "fixedValue"',
-                },
-            ],
-        },
-    };
-    const rootLevel = [true, false];
-    const withId = [true, false];
-    const required = [true, false];
-    const optionSchemaType = Object.keys(optionSchemasByType);
-    const examples = [];
-    rootLevel.forEach((isRootLevel) => {
-        withId.forEach((hasId) => {
-            required.forEach((isRequired) => {
-                optionSchemaType.forEach((optionType) => {
-                    const step = getStep(isRootLevel, isRequired, hasId, optionSchemasByType[optionType]);
-                    if (!isRequired && isRootLevel) {
-                        return null;
-                    }
-                    if (!hasId && isRootLevel) {
-                        return null;
-                    }
-                    examples.push(_jsx("div", { className: "m-b-3", children: _jsx(BeforeAndAfter, { step: step, configuration: _jsx(ConfigurationTable, { ordinal: examples.length + 1, step: step, configuration: {
-                                    isRootLevel,
-                                    isRequired,
-                                    withId: hasId,
-                                    optionType,
-                                } }) }) }, `${isRootLevel}-${isRequired}-${hasId}-${optionType}`));
-                });
-            });
-        });
-    });
-    return examples;
-}
-const getStep = (rootLevel, required, withId, singleOption) => {
-    const oneOfSchema = {
-        $id: withId && rootLevel ? '#oneOfSchemaId' : undefined,
-        title: 'One Of Schema Title',
-        placeholder: 'Select an option',
-        oneOf: [singleOption],
-        // control: 'tab',
-    };
-    const objectSchemaWrapper = {
-        type: 'object',
-        $id: '#objectSchemaWrapper',
-        title: 'Object Schema Wrapper Title',
-        displayOrder: ['childSchema'],
-        properties: {
-            childSchema: oneOfSchema,
-        },
-        required: required ? ['childSchema'] : [],
-    };
-    return {
-        id: 'step-id',
-        title: 'Step Title',
-        schemas: [rootLevel ? oneOfSchema : objectSchemaWrapper],
-        layout: [
-            {
-                type: 'form',
-                schemaId: rootLevel ? '#oneOfSchemaId' : '#objectSchemaWrapper',
-            },
-            {
-                type: 'button',
-                title: 'Submit',
-                behavior: { type: 'action', action: { url: '/submit' } },
-            },
-        ],
-    };
-};
-function ConfigurationTable({ configuration, ordinal, step, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("h4", { children: ["Configuration ", String(ordinal)] }), _jsxs("ul", { style: { paddingLeft: '16px', marginBottom: '4px' }, children: [_jsxs("li", { children: ["OneOf is at ", _jsxs("strong", { children: ["root level: ", configuration.isRootLevel ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["OneOf is ", _jsxs("strong", { children: ["required: ", configuration.isRequired ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["OneOf has ", _jsxs("strong", { children: ["$id: ", configuration.withId ? 'Yes' : 'No'] })] }), _jsxs("li", { children: ["Option Schema Type: ", _jsx("strong", { children: configuration.optionType })] })] }), _jsxs("details", { children: [_jsx("summary", { children: "Step JSON" }), _jsx("pre", { children: JSON.stringify(step, null, 2) })] })] }));
-}
-function BeforeAndAfter({ configuration, step }) {
-    return (_jsxs("div", { style: { display: 'flex', gap: '16px' }, children: [_jsx("div", { style: { flex: 1, padding: '8px' }, children: configuration }), _jsxs("div", { style: { flex: 2, border: '1px dashed #999', borderRadius: '8px', padding: '8px' }, children: [_jsx("strong", { children: "Before" }), _jsx("br", {}), renderWithStepAndOverrides(step, {
-                        httpClient,
-                        features: { bugfix: false },
-                    })] }), _jsxs("div", { style: { flex: 2, border: '1px dashed #999', borderRadius: '8px', padding: '8px' }, children: [_jsx("strong", { children: "After" }), _jsx("br", {}), renderWithStepAndOverrides(step, {
-                        httpClient,
-                        features: { bugfix: true },
-                    })] })] }));
-}

package/build/stories/spec/step/Controls.story.js

@@ -1,110 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FlowNavigation } from '@transferwise/components';
-import { ThemeProvider } from '@wise/components-theming';
-import { action } from 'storybook/actions';
-import { respondWith } from '../../../test-utils';
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Step/Controls',
-    parameters: {
-        layout: 'fullscreen',
-    },
-};
-export function Splash() {
-    return render('splash');
-}
-export function SplashCelebration() {
-    return render('splash-celebration');
-}
-export function SplashInteractive() {
-    return (_jsx(ThemeProvider, { theme: "personal", className: "animate-theme", children: _jsxs("div", { style: {
-                width: '100%',
-                height: '100vh',
-            }, children: [_jsx(FlowNavigation, { steps: [], onClose: () => { } }), _jsx("div", { style: {
-                        maxWidth: '546px',
-                        margin: 'auto',
-                        paddingTop: '48px',
-                    }, children: _jsx(DynamicFlowWise, { flowId: "splash", httpClient: async (input) => {
-                            if (input === '/continue') {
-                                return respondWith(step('splash-celebration'));
-                            }
-                            return respondWith({
-                                id: 'next',
-                                title: 'This is the step after the splash',
-                                description: 'The theme should be reset to personal',
-                                layout: [],
-                                schemas: [],
-                            });
-                        }, initialStep: {
-                            title: 'Click the button to continue',
-                            id: 'step',
-                            layout: [
-                                {
-                                    type: 'button',
-                                    title: 'Continue',
-                                    behavior: {
-                                        type: 'action',
-                                        action: {
-                                            url: '/continue',
-                                        },
-                                    },
-                                },
-                            ],
-                            schemas: [],
-                        }, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onError: (error) => {
-                            action('onError');
-                            console.error(error);
-                        }, onLog: action('onLog') }) })] }) }));
-}
-SplashInteractive.parameters = {
-    chromatic: { disableSnapshot: true },
-};
-const render = (control) => {
-    return (_jsx("div", { style: {
-            width: '60%',
-            margin: 'auto',
-        }, children: _jsx(DynamicFlowWise, { flowId: "splash", httpClient: fetch, initialStep: step(control), onCompletion: action('onCompletion'), onEvent: action('onEvent'), onError: (error) => {
-                action('onError');
-                console.error(error);
-            }, onLog: action('onLog') }) }));
-};
-const step = (control) => ({
-    id: 'splash',
-    title: 'Step title',
-    description: 'Step description',
-    layout: [
-        {
-            type: 'image',
-            content: {
-                accessibilityDescription: 'plane',
-                uri: 'urn:wise:illustrations:plane',
-            },
-        },
-        {
-            type: 'heading',
-            control: 'display',
-            text: 'Almost there',
-            align: 'center',
-            margin: 'lg',
-        },
-        {
-            type: 'markdown',
-            content: "Your money should arrive **by Wednesday**. We'll keep you posted.",
-            align: 'center',
-            margin: 'lg',
-        },
-        {
-            type: 'button',
-            title: 'Track your transfer',
-            behavior: {
-                type: 'action',
-                action: {
-                    url: '/submit',
-                },
-            },
-        },
-    ],
-    schemas: [],
-    control,
-});

package/build/stories/spec/step/DFModal.story.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Layout } from '@transferwise/navigation-ui';
-import { action } from 'storybook/actions';
-import { DynamicFlowWiseModal } from '../../../test-utils/DynamicFlowWiseModal';
-export default {
-    component: DynamicFlowWiseModal,
-    title: 'Spec/Step/DFModal',
-    parameters: {
-        layout: 'fullscreen',
-    },
-};
-const httpClient = async (input, init) => {
-    action('httpClient')(input, init);
-    const url = typeof input === 'string' ? input : '';
-    const match = /\/submit\/(\d+)/.exec(url);
-    if (!match) {
-        return new Response('Not Found', { status: 404 });
-    }
-    const index = match[1];
-    action('httpClient response index')(index);
-    return new Response(JSON.stringify(getStep(index)));
-};
-export function DFModalExample() {
-    return (_jsx(Layout, { children: _jsx(DynamicFlowWiseModal, { flowId: "df-modal-story", initialStep: getStep('1'), features: {
-                nativeBack: true,
-                hideStepTitle: false,
-            }, httpClient: httpClient, onCompletion: action('onCompletion'), onAnalytics: action('onAnalytics'), onCancellation: action('onCancellation'), onEvent: action('onEvent'), onError: (error) => {
-                action('onError');
-                console.error(error);
-            }, onLog: action('onLog') }) }));
-}
-const getStep = (index) => {
-    return {
-        id: 'step',
-        title: `Step title ${index}`,
-        description: 'This is a description of the step.',
-        schemas: [],
-        layout: [
-            {
-                type: 'markdown',
-                content: 'The title is now missing from the layout, and only visible in the modal header. This is because we are using the hideStepTitle to hide it.',
-                align: 'left',
-                margin: 'xl',
-            },
-            {
-                type: 'button',
-                title: 'Continue',
-                behavior: {
-                    type: 'action',
-                    action: {
-                        url: `/submit/${Number(index) + 1}`,
-                    },
-                },
-            },
-        ],
-        tags: ['root-screen'],
-    };
-};

package/build/stories/spec/step/Footer.story.js

@@ -1,90 +0,0 @@
-import DynamicFlowWise from '../../../test-utils/DynamicFlowWise';
-import { renderWithStepAndOverrides } from '../../utils/render-utils';
-export default {
-    component: DynamicFlowWise,
-    title: 'Spec/Step/Footer',
-    parameters: {
-        chromatic: { disableSnapshot: false },
-    },
-    globals: { viewport: { value: 'iphone6' } },
-};
-export const Basic = {
-    render: () => renderWithStepAndOverrides(getFooterStep(), { features: { pinnedButtons: true } }),
-};
-const getFooterStep = () => ({
-    id: 'step-footer',
-    title: 'Step Footer Demo',
-    description: 'This step demonstrates the step footer.',
-    layout: [
-        {
-            type: 'paragraph',
-            text: 'Pinned buttons like the one below are not pinned here because a footer layout is provided.',
-        },
-        {
-            type: 'button',
-            title: 'The pinOrder prop is ignored',
-            control: 'secondary',
-            pinOrder: 1,
-            behavior: {
-                type: 'copy',
-                content: 'Banana.',
-            },
-        },
-        {
-            type: 'image',
-            content: {
-                uri: 'urn:wise:illustrations:confetti',
-            },
-        },
-        {
-            type: 'form',
-            schemaId: '#body-schema',
-        },
-        {
-            type: 'paragraph',
-            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-        },
-    ],
-    schemas: [
-        {
-            $id: '#footer-schema',
-            type: 'boolean',
-            title: 'I accept the terms and conditions without having scrolled all the way down, thanks to the new footer layout.',
-        },
-        {
-            $id: '#body-schema',
-            type: 'object',
-            displayOrder: ['select'],
-            properties: {
-                select: {
-                    oneOf: [
-                        {
-                            title: 'Option 1',
-                            const: 'ABC',
-                        },
-                        {
-                            title: 'Option 2',
-                            const: 'DEF',
-                        },
-                    ],
-                },
-            },
-            title: 'Pick an option',
-        },
-    ],
-    footer: [
-        {
-            type: 'form',
-            schemaId: '#footer-schema',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            control: 'primary',
-            behavior: {
-                type: 'action',
-                action: { url: '/submit' },
-            },
-        },
-    ],
-});