@ovotech/element-native 5.4.3 → 5.5.0

package/dist/esm/components/CurrencyField/CurrencyField.js

@@ -1,6 +1,18 @@
+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 { CurrencyInput } from '../CurrencyInput';
 import { Field } from '../Field';
-export const CurrencyField = ({ ref, ...props }) => {
-    return (_jsx(Field, { affixWidth: 40, ...props, children: _jsx(CurrencyInput, { ref: ref }) }));
+export const CurrencyField = (_a) => {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    return (_jsx(Field, Object.assign({ affixWidth: 40 }, props, { children: _jsx(CurrencyInput, { ref: ref }) })));
 };

package/dist/esm/components/CurrencyInput/CurrencyInput.js

@@ -1,11 +1,23 @@
+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 { createRef } from 'react';
 import { mergeRefs } from '../../utils';
 import { NumberInput } from '../NumberInput';
-const CurrencyInput = ({ currency = 'GBP', invalid, accessibilityLabel = '', ref, ...rest }) => {
+const CurrencyInput = (_a) => {
+    var { currency = 'GBP', invalid, accessibilityLabel = '', ref } = _a, rest = __rest(_a, ["currency", "invalid", "accessibilityLabel", "ref"]);
     const inputRef = createRef();
     const updatedAccessibilityLabel = `${accessibilityLabel} ${currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euro' : 'dollar'}`.trim();
     const iconName = currency === 'GBP' ? 'pound' : currency === 'EUR' ? 'euro' : 'dollar';
-    return (_jsx(NumberInput, { accessibilityLabel: updatedAccessibilityLabel, invalid: invalid, iconLeft: iconName, ref: mergeRefs(ref, inputRef), ...rest }));
+    return (_jsx(NumberInput, Object.assign({ accessibilityLabel: updatedAccessibilityLabel, invalid: invalid, iconLeft: iconName, ref: mergeRefs(ref, inputRef) }, rest)));
 };
 export { CurrencyInput };

package/dist/esm/components/DataTable/DataTable.js

@@ -1,3 +1,14 @@
+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 { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isElement as isReactElement } from 'react-is';
@@ -6,7 +17,8 @@ import { useBreakpoint } from '../../hooks';
 import { getText } from '../../utils';
 import { TableRow } from './TableRow';
 import { StyledTableContainer, TableBody, TableCaption, TableCaptionText, TableHeader, TableHeaderText, TableRowHeading, } from './styles';
-export const DataTable = ({ items, columnHeadings, caption, rowHeadings, columnWidths, striped = true, ref, ...rest }) => {
+export const DataTable = (_a) => {
+    var { items, columnHeadings, caption, rowHeadings, columnWidths, striped = true, ref } = _a, rest = __rest(_a, ["items", "columnHeadings", "caption", "rowHeadings", "columnWidths", "striped", "ref"]);
     const breakpoints = useBreakpoint();
     const columnLabel = columnHeadings
         ? ` ${columnHeadings.length} columns,`
@@ -15,5 +27,5 @@ export const DataTable = ({ items, columnHeadings, caption, rowHeadings, columnW
         ? getText(caption)
         : caption;
     const accessibilityLabel = `data table,${columnLabel} ${items.length} rows, ${accessibilityLabelText}`;
-    return (_jsx(ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 }, children: _jsxs(StyledTableContainer, { ...rest, ref: ref, children: [caption ? (_jsx(TableCaption, { ...breakpoints, children: isReactElement(caption) ? (caption) : (_jsx(TableCaptionText, { ...breakpoints, accessibilityLabel: accessibilityLabel, children: caption })) })) : null, columnHeadings ? (_jsx(TableRowHeading, { children: columnHeadings.map((columnHeading, index) => (_createElement(TableHeader, { ...breakpoints, key: index, cellWidth: columnWidths[index] }, isReactElement(columnHeading) ? (columnHeading) : (_jsx(TableHeaderText, { ...breakpoints, children: columnHeading }))))) })) : null, _jsx(TableBody, { children: items.map((rowData, index) => (_jsx(TableRow, { data: rowData, index: index, rowHeadings: rowHeadings, columnWidths: columnWidths, striped: striped }, index))) })] }) }));
+    return (_jsx(ScrollView, { horizontal: true, alwaysBounceHorizontal: false, contentContainerStyle: { flexGrow: 1 }, children: _jsxs(StyledTableContainer, Object.assign({}, rest, { ref: ref, children: [caption ? (_jsx(TableCaption, Object.assign({}, breakpoints, { children: isReactElement(caption) ? (caption) : (_jsx(TableCaptionText, Object.assign({}, breakpoints, { accessibilityLabel: accessibilityLabel, children: caption }))) }))) : null, columnHeadings ? (_jsx(TableRowHeading, { children: columnHeadings.map((columnHeading, index) => (_createElement(TableHeader, Object.assign({}, breakpoints, { key: index, cellWidth: columnWidths[index] }), isReactElement(columnHeading) ? (columnHeading) : (_jsx(TableHeaderText, Object.assign({}, breakpoints, { children: columnHeading })))))) })) : null, _jsx(TableBody, { children: items.map((rowData, index) => (_jsx(TableRow, { data: rowData, index: index, rowHeadings: rowHeadings, columnWidths: columnWidths, striped: striped }, index))) })] })) }));
 };

package/dist/esm/components/DataTable/TableRow.js

@@ -8,14 +8,14 @@ export const TableRow = ({ data, index, striped, rowHeadings, columnWidths, }) =
     const breakpoints = useBreakpoint();
     const cells = data.map((cellData, i) => {
         if (typeof cellData === 'object' &&
-            cellData?.hasOwnProperty('isSeparator') &&
-            cellData?.hasOwnProperty('content')) {
-            return (_jsx(StyledSeparatorRow, { testID: "separatorRow", width: Dimensions.get('window').width, children: _jsx(SeparatorRowText, { ...breakpoints, children: cellData?.content }) }, i));
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('isSeparator')) &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('content'))) {
+            return (_jsx(StyledSeparatorRow, { testID: "separatorRow", width: Dimensions.get('window').width, children: _jsx(SeparatorRowText, Object.assign({}, breakpoints, { children: cellData === null || cellData === void 0 ? void 0 : cellData.content })) }, i));
         }
         if (rowHeadings && i === 0) {
-            return (_createElement(RowHeading, { ...breakpoints, key: i, testID: "rowHeader", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, { ...breakpoints, children: cellData }))));
+            return (_createElement(RowHeading, Object.assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, Object.assign({}, breakpoints, { children: cellData })))));
         }
-        return (_createElement(TableCell, { ...breakpoints, key: i, testID: "cell", cellWidth: columnWidths[i] }, isReactElement(cellData) ? (cellData) : (_jsx(CellText, { ...breakpoints, children: cellData }))));
+        return (_createElement(TableCell, Object.assign({}, breakpoints, { key: i, testID: "cell", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(CellText, Object.assign({}, breakpoints, { children: cellData })))));
     });
     return (_jsx(StyledTableRow, { stripe: striped && index % 2 === 0, children: cells }));
 };

package/dist/esm/components/DateField/DateField.js

@@ -47,10 +47,7 @@ export const DateField = ({ label, hint, error, optional = false, fullWidth = fa
     };
     const handleChange = (key) => (datePartValue) => {
         onChange &&
-            onChange({
-                ...value,
-                [key]: datePartValue,
-            });
+            onChange(Object.assign(Object.assign({}, value), { [key]: datePartValue }));
         if (key !== 'year' && autoFocusNext) {
             const nextField = nextFieldRef[key].current;
             if (nextField && datePartValue.length === 2) {

package/dist/esm/components/Disclosure/Disclosure.js

@@ -1,3 +1,14 @@
+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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import { useState } from 'react';
@@ -27,11 +38,12 @@ const DisclosurePanel = styled.View(({ theme }) => css `
     margin-top: ${numToPx(theme.space[300])};
     padding-left: ${numToPx(theme.space[600])};
   `);
-export const Disclosure = ({ children, title, expanded = false, onToggle, ref, ...rest }) => {
+export const Disclosure = (_a) => {
+    var { children, title, expanded = false, onToggle, ref } = _a, rest = __rest(_a, ["children", "title", "expanded", "onToggle", "ref"]);
     const [isExpanded, setIsExpanded] = useState(expanded);
     const breakpoints = useBreakpoint();
-    return (_jsxs(_Fragment, { children: [_jsxs(DisclosureButton, { onPress: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(DisclosureButton, Object.assign({ onPress: () => {
                     setIsExpanded(!isExpanded);
                     onToggle && onToggle(!isExpanded);
-                }, ref: ref, accessibilityState: { expanded: isExpanded }, ...rest, children: [_jsx(DisclosureButtonIcon, { name: "caret-arrow-down", ...breakpoints, size: 14, expanded: isExpanded }), _jsx(DisclosureButtonText, { ...breakpoints, children: title })] }), isExpanded && (_jsx(DisclosurePanel, { ...breakpoints, children: children }))] }));
+                }, ref: ref, accessibilityState: { expanded: isExpanded } }, rest, { children: [_jsx(DisclosureButtonIcon, Object.assign({ name: "caret-arrow-down" }, breakpoints, { size: 14, expanded: isExpanded })), _jsx(DisclosureButtonText, Object.assign({}, breakpoints, { children: title }))] })), isExpanded && (_jsx(DisclosurePanel, Object.assign({}, breakpoints, { children: children })))] }));
 };

package/dist/esm/components/Display/Display.js

@@ -1,3 +1,14 @@
+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 { numToPx } from '@ovotech/element-core';
 import { useBreakpoint } from '../../hooks';
@@ -20,11 +31,12 @@ const StyledDisplay = styled.Text(({ theme, smallAndUp, inverted, level, variant
       color: ${color};
     `;
 });
-export const Display = ({ accessibilityRole = 'header', level, variant = 'brand', ...rest }) => {
+export const Display = (_a) => {
+    var { accessibilityRole = 'header', level, variant = 'brand' } = _a, rest = __rest(_a, ["accessibilityRole", "level", "variant"]);
     const breakpoints = useBreakpoint();
-    return (_jsx(StyledDisplay, { accessible: true, accessibilityRole: accessibilityRole, level: level, variant: variant, ...breakpoints, ...rest }));
+    return (_jsx(StyledDisplay, Object.assign({ accessible: true, accessibilityRole: accessibilityRole, level: level, variant: variant }, breakpoints, rest)));
 };
-export const Display1 = (props) => _jsx(Display, { ...props, level: "1" });
-export const Display2 = (props) => _jsx(Display, { ...props, level: "2" });
-export const Display3 = (props) => _jsx(Display, { ...props, level: "3" });
-export const Display4 = (props) => _jsx(Display, { ...props, level: "4" });
+export const Display1 = (props) => _jsx(Display, Object.assign({}, props, { level: "1" }));
+export const Display2 = (props) => _jsx(Display, Object.assign({}, props, { level: "2" }));
+export const Display3 = (props) => _jsx(Display, Object.assign({}, props, { level: "3" }));
+export const Display4 = (props) => _jsx(Display, Object.assign({}, props, { level: "4" }));

package/dist/esm/components/EmailField/EmailField.js

@@ -1,6 +1,18 @@
+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 { EmailInput } from '../EmailInput';
 import { Field } from '../Field';
-export const EmailField = ({ ref, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(EmailInput, { ref: ref }) }));
+export const EmailField = (_a) => {
+    var { ref } = _a, rest = __rest(_a, ["ref"]);
+    return (_jsx(Field, Object.assign({}, rest, { children: _jsx(EmailInput, { ref: ref }) })));
 };

package/dist/esm/components/EmailInput/EmailInput.js

@@ -1,4 +1,18 @@
+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 '../Input/Input';
-const EmailInput = ({ ref, ...rest }) => (_jsx(Input, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref, ...rest }));
+const EmailInput = (_a) => {
+    var { ref } = _a, rest = __rest(_a, ["ref"]);
+    return (_jsx(Input, Object.assign({ keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }, rest)));
+};
 export { EmailInput };

package/dist/esm/components/ErrorWrapper/ErrorFallback.js

@@ -1,3 +1,14 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '../../styled.native';
 import { Card } from '../Card';
@@ -11,11 +22,12 @@ import { ErrorType } from './types';
 const AIC = {
     alignItems: 'center',
 };
-const ErrorFallback = ({ errorType = ErrorType.GENERIC, ovoErrorMessage, title = errorsConfig[errorType].title, body = errorsConfig[errorType].body, icon = errorsConfig[errorType].icon, illustration, ...rest }) => {
+const ErrorFallback = (_a) => {
+    var { errorType = ErrorType.GENERIC, ovoErrorMessage, title = errorsConfig[errorType].title, body = errorsConfig[errorType].body, icon = errorsConfig[errorType].icon, illustration } = _a, rest = __rest(_a, ["errorType", "ovoErrorMessage", "title", "body", "icon", "illustration"]);
     const theme = useTheme();
     const titleNormalised = typeof title === 'function' ? title(ovoErrorMessage) : title;
     const bodyNormalised = body || errorsConfig[errorType].body;
     const iconNormalised = icon || errorsConfig[errorType].icon;
-    return (_jsx(Card, { ...rest, children: _jsxs(Stack, { spaceBetween: 2, style: AIC, children: [icon && !illustration ? (_jsx(Icon, { name: iconNormalised, size: theme.unit['1600'], color: theme.color.surface.borderDim })) : null, illustration?.uri ? _jsx(RemoteImage, { ...illustration }) : null, _jsxs(Stack, { spaceBetween: 1, style: AIC, children: [_jsx(Heading4, { style: { color: theme.color.surface.onSurface }, children: titleNormalised }), _jsx(P, { children: bodyNormalised })] })] }) }));
+    return (_jsx(Card, Object.assign({}, rest, { children: _jsxs(Stack, { spaceBetween: 2, style: AIC, children: [icon && !illustration ? (_jsx(Icon, { name: iconNormalised, size: theme.unit['1600'], color: theme.color.surface.borderDim })) : null, (illustration === null || illustration === void 0 ? void 0 : illustration.uri) ? _jsx(RemoteImage, Object.assign({}, illustration)) : null, _jsxs(Stack, { spaceBetween: 1, style: AIC, children: [_jsx(Heading4, { style: { color: theme.color.surface.onSurface }, children: titleNormalised }), _jsx(P, { children: bodyNormalised })] })] }) })));
 };
 export default ErrorFallback;

package/dist/esm/components/ErrorWrapper/ErrorWrapper.js

@@ -1,3 +1,14 @@
+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 { useImperativeHandle, useRef } from 'react';
 import ErrorBoundary from 'react-native-error-boundary';
@@ -6,17 +17,19 @@ const defaultErrorLogger = (error, stackTrace) => {
     // send error to DataDog?
     console.error(error, stackTrace);
 };
-const ErrorWrapper = ({ children, customErrorLogger, fallbackComponent, hideOnError = true, ref, ...rest }) => {
+const ErrorWrapper = (_a) => {
+    var { children, customErrorLogger, fallbackComponent, hideOnError = true, ref } = _a, rest = __rest(_a, ["children", "customErrorLogger", "fallbackComponent", "hideOnError", "ref"]);
     const errorBoundaryRef = useRef(null);
     const FallbackComponent = fallbackComponent || ErrorFallback;
     useImperativeHandle(ref, () => ({
         reset: () => {
-            errorBoundaryRef.current?.resetError();
+            var _a;
+            (_a = errorBoundaryRef.current) === null || _a === void 0 ? void 0 : _a.resetError();
         },
     }));
-    return (_jsx(ErrorBoundary, { ref: errorBoundaryRef, FallbackComponent: ({ error, resetError }) => {
+    return (_jsx(ErrorBoundary, Object.assign({ ref: errorBoundaryRef, FallbackComponent: ({ error, resetError }) => {
             const shouldHide = hideOnError && !fallbackComponent;
             return shouldHide ? null : (_jsx(FallbackComponent, { error: error, resetError: resetError }));
-        }, onError: customErrorLogger || defaultErrorLogger, ...rest, children: children }));
+        }, onError: customErrorLogger || defaultErrorLogger }, rest, { children: children })));
 };
 export { ErrorWrapper };

package/dist/esm/components/ErrorWrapper/config.js

@@ -10,7 +10,7 @@ export const errorsConfig = {
         icon: 'smart-home',
     },
     ovo: {
-        title: err => `We've run into ${err ?? 'an unknown'} error`,
+        title: err => `We've run into ${err !== null && err !== void 0 ? err : 'an unknown'} error`,
         body: 'Please try again later.',
         icon: 'smart-home',
     },

package/dist/esm/components/ErrorWrapper/types.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-shadow
 export var ErrorType;
 (function (ErrorType) {
     ErrorType["GENERIC"] = "generic";

package/dist/esm/components/Field/Field.js

@@ -1,3 +1,14 @@
+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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Children, cloneElement, createRef, isValidElement, } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
@@ -8,7 +19,8 @@ import { HintText } from '../HintText';
 import { LabelText } from '../LabelText';
 import { Stack } from '../Stack';
 import { Stretch } from '../Stretch';
-export const Field = ({ children, label, optional = false, hint, error, fullWidth, characters = 25, affixWidth = 0, ref, ...rest }) => {
+export const Field = (_a) => {
+    var { children, label, optional = false, hint, error, fullWidth, characters = 25, affixWidth = 0, ref } = _a, rest = __rest(_a, ["children", "label", "optional", "hint", "error", "fullWidth", "characters", "affixWidth", "ref"]);
     const hasError = !!error;
     const inputRef = createRef();
     const labelText = optional ? `${label} (optional)` : label;
@@ -27,11 +39,6 @@ export const Field = ({ children, label, optional = false, hint, error, fullWidt
                             }
                         }
                     }, children: _jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }) }), _jsx(Stretch, { defaultWidth: `${Math.ceil(characters * 0.8 * 16) + affixWidth}px`, fullWidth: fullWidth, children: Children.map(children, child => isValidElement(child)
-                        ? cloneElement(child, {
-                            invalid: hasError || undefined,
-                            ref: mergeRefs(inputRef, ref),
-                            accessibilityLabel,
-                            ...rest,
-                        })
+                        ? cloneElement(child, Object.assign({ invalid: hasError || undefined, ref: mergeRefs(inputRef, ref), accessibilityLabel }, rest))
                         : child) })] }) }));
 };

package/dist/esm/components/FormGroup/FormGroup.js

@@ -1,3 +1,14 @@
+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 { View } from 'react-native';
 import styled from '../../styled.native';
@@ -5,5 +16,8 @@ const FormGroupWrapper = styled.View `
   flex-direction: row;
 `;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const FormGroup = ({ children, error, ...rest }) => (_jsx(FormGroupWrapper, { ...rest, children: _jsx(View, { style: { flex: 1 }, children: children }) }));
+const FormGroup = (_a) => {
+    var { children, error } = _a, rest = __rest(_a, ["children", "error"]);
+    return (_jsx(FormGroupWrapper, Object.assign({}, rest, { children: _jsx(View, { style: { flex: 1 }, children: children }) })));
+};
 export { FormGroup };

package/dist/esm/components/Grid/Row.js

@@ -1,3 +1,14 @@
+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 { numToPx } from '../..';
 import styled, { css } from '../../styled.native';
@@ -27,5 +38,8 @@ const RowInner = styled.View `
   flex-direction: row;
   flex-wrap: wrap;
 `;
-const Row = ({ children, ...rest }) => (_jsx(WidthRow, { ...rest, children: _jsx(RowInner, { children: children }) }));
+const Row = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (_jsx(WidthRow, Object.assign({}, rest, { children: _jsx(RowInner, { children: children }) })));
+};
 export { Row };

package/dist/esm/components/Heading/Heading.js

@@ -1,3 +1,14 @@
+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 { numToPx } from '@ovotech/element-core';
 import { useBreakpoint } from '../../hooks';
@@ -21,11 +32,12 @@ const StyledHeading = styled.Text(({ theme, smallAndUp, inverted, level, variant
       color: ${color};
     `;
 });
-export const Heading = ({ accessibilityRole = 'header', ...rest }) => {
+export const Heading = (_a) => {
+    var { accessibilityRole = 'header' } = _a, rest = __rest(_a, ["accessibilityRole"]);
     const breakpoints = useBreakpoint();
-    return (_jsx(StyledHeading, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
+    return (_jsx(StyledHeading, Object.assign({ accessible: true, accessibilityRole: accessibilityRole }, breakpoints, rest)));
 };
-export const Heading1 = (props) => _jsx(Heading, { ...props, level: "4xl" });
-export const Heading2 = (props) => _jsx(Heading, { ...props, level: "3xl" });
-export const Heading3 = (props) => _jsx(Heading, { ...props, level: "2xl" });
-export const Heading4 = (props) => _jsx(Heading, { ...props, level: "xl" });
+export const Heading1 = (props) => _jsx(Heading, Object.assign({}, props, { level: "4xl" }));
+export const Heading2 = (props) => _jsx(Heading, Object.assign({}, props, { level: "3xl" }));
+export const Heading3 = (props) => _jsx(Heading, Object.assign({}, props, { level: "2xl" }));
+export const Heading4 = (props) => _jsx(Heading, Object.assign({}, props, { level: "xl" }));

package/dist/esm/components/Icon/Icon.js

@@ -1,11 +1,23 @@
+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 { useContext } from 'react';
 import { useIcons } from '../../providers';
 import { ThemeContext } from '../../styled.native';
-export const Icon = ({ name, size = '16', color, testID, ...rest }) => {
+export const Icon = (_a) => {
+    var { name, size = '16', color, testID } = _a, rest = __rest(_a, ["name", "size", "color", "testID"]);
     const icons = useIcons();
     const theme = useContext(ThemeContext);
     // @ts-ignore to support additional icons.
     const Svg = name && icons[name];
-    return Svg ? (_jsx(Svg, { testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, color: color ?? theme.color.surface.onSurface, width: size, height: size, ...rest })) : null;
+    return Svg ? (_jsx(Svg, Object.assign({ testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, color: color !== null && color !== void 0 ? color : theme.color.surface.onSurface, width: size, height: size }, rest))) : null;
 };

package/dist/esm/components/Input/Input.js

@@ -1,3 +1,14 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import { useState } from 'react';
@@ -18,10 +29,11 @@ const StyledIcon = styled(Icon)(({ theme, side, focused }) => {
         : ''};
   `;
 });
-const Input = ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ...rest }) => {
+const Input = (_a) => {
+    var { onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref } = _a, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot", "ref"]);
     const [focused, setFocused] = useState(false);
     const breakpoints = useBreakpoint();
-    return (_jsxs(InputWrapper, { focused: focused, children: [iconLeft ? (_jsx(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, _jsx(StyledInput, { ...rest, ...breakpoints, iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, ref: ref, onFocus: (event) => {
+    return (_jsxs(InputWrapper, { focused: focused, children: [iconLeft ? (_jsx(StyledIcon, { name: iconLeft, size: 16, focused: focused, pointerEvents: "none", side: "left" })) : null, _jsx(StyledInput, Object.assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, hasRightSlot: !!rightSlot, style: style, ref: ref, onFocus: (event) => {
                     setFocused(true);
                     if (onFocus) {
                         onFocus(event);
@@ -31,7 +43,7 @@ const Input = ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ..
                     if (onBlur) {
                         onBlur(event);
                     }
-                } }), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
+                } })), iconRight && !rightSlot ? (_jsx(StyledIcon, { name: iconRight, size: 16, focused: focused, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
 };
 const InputWrapper = styled.View(({ theme, focused }) => css `
     align-self: stretch;

package/dist/esm/components/Link/Link.js

@@ -1,10 +1,21 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import styled, { css } from '../../styled.native';
 import { getText } from '../../utils/utils';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
-const Link = (props) => _jsx(Button, { ...props, ref: props.ref });
+const Link = (props) => _jsx(Button, Object.assign({}, props, { ref: props.ref }));
 const StyledText = styled.Text(({ theme }) => css `
     font-family: ${theme.native.font.family.book};
     font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
@@ -15,10 +26,11 @@ const StyledText = styled.Text(({ theme }) => css `
 const StyledIcon = styled(Icon)(({ theme }) => css `
     color: ${theme.color.surface.link};
   `);
-const TextLink = ({ children, opensInNewWindow = false, accessibilityLabel, ref, ...rest }) => {
+const TextLink = (_a) => {
+    var { children, opensInNewWindow = false, accessibilityLabel, ref } = _a, rest = __rest(_a, ["children", "opensInNewWindow", "accessibilityLabel", "ref"]);
     const updatedAccessibilityLabel = opensInNewWindow
         ? `${accessibilityLabel ? accessibilityLabel : getText(children)} (opens in new window)`
         : accessibilityLabel;
-    return (_jsxs(StyledText, { ...rest, accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] }));
+    return (_jsxs(StyledText, Object.assign({}, rest, { accessibilityLabel: updatedAccessibilityLabel, ref: ref, children: [_jsx(StyledText, { children: children }), opensInNewWindow && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(StyledIcon, { size: 12, name: "new-window" })] }))] })));
 };
 export { Link, TextLink };

package/dist/esm/components/Margin/Margin.js

@@ -1,3 +1,14 @@
+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 { numToPx } from '@ovotech/element-core';
 import { useBreakpoint } from '../../hooks';
@@ -29,8 +40,9 @@ const StyledMargin = styled.View(({ theme, mTop, mBottom, mLeft, mRight, horizon
     ${all ? responsiveStyle('margin', all, breakpoints, formatter) : ''}
   `;
 });
-const Margin = ({ top, bottom, left, right, ...rest }) => {
+const Margin = (_a) => {
+    var { top, bottom, left, right } = _a, rest = __rest(_a, ["top", "bottom", "left", "right"]);
     const breakpoints = useBreakpoint();
-    return (_jsx(StyledMargin, { ...rest, breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right }));
+    return (_jsx(StyledMargin, Object.assign({}, rest, { breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right })));
 };
 export { Margin };

package/dist/esm/components/NavHeader/NavHeader.js

@@ -82,11 +82,7 @@ export const NavHeader = ({ layer, onBackPress, actionButtons, title, stepCounte
                                         },
                                     ],
                                 },
-                                initialValues: {
-                                    opacity: 1,
-                                    transform: [{ translateY: 0 }],
-                                    ...initialValues,
-                                },
+                                initialValues: Object.assign({ opacity: 1, transform: [{ translateY: 0 }] }, initialValues),
                                 callback,
                             };
                         };

package/dist/esm/components/NavHeader/NavHeaderComponents/ActionButtons.js

@@ -3,10 +3,11 @@ import { SkeletonNavButton } from '../NavHeader.styles';
 import { checkHasAccount } from '../utils';
 import { NavButton } from './NavButton';
 export const ActionButtons = (props) => {
+    var _a, _b;
     const variant = props.layer > 1 ? 'dim' : 'bright';
     const inverted = props.layer < 2;
     return (_jsxs(_Fragment, { children: [checkHasAccount(props) &&
-                props.actionButtons.account?.onPress &&
-                (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.account.onPress, iconLeft: props.actionButtons.account.icon || 'user' }))), !!props.actionButtons.help?.onPress &&
+                ((_a = props.actionButtons.account) === null || _a === void 0 ? void 0 : _a.onPress) &&
+                (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.account.onPress, iconLeft: props.actionButtons.account.icon || 'user' }))), !!((_b = props.actionButtons.help) === null || _b === void 0 ? void 0 : _b.onPress) &&
                 (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.help.onPress, iconLeft: props.actionButtons.help.icon || 'message' })))] }));
 };