@ovotech/element-native 5.4.3 → 5.5.0

package/dist/esm/components/SegmentedControls/SegmentedControls.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 Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
 import styled, { useTheme } from '../../styled.native';
@@ -7,7 +18,8 @@ const springSettings = {
     damping: 25,
     mass: 0.25,
 };
-export const SegmentedControls = ({ activeSegment, setActiveSegment, segments, inline = false, multipleRows, size = 'large', ...rest }) => {
+export const SegmentedControls = (_a) => {
+    var { activeSegment, setActiveSegment, segments, inline = false, multipleRows, size = 'large' } = _a, rest = __rest(_a, ["activeSegment", "setActiveSegment", "segments", "inline", "multipleRows", "size"]);
     const animatedX = useSharedValue(0);
     const animatedY = useSharedValue(0);
     const animatedHeight = useSharedValue(0);
@@ -22,18 +34,21 @@ export const SegmentedControls = ({ activeSegment, setActiveSegment, segments, i
         borderRadius: theme.border.radius['2xl'],
         backgroundColor: theme.color.surface.bright,
     }), [animatedX, animatedY, animatedWidth, animatedHeight]);
-    return (_jsxs(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, ...rest, children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(segment => (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: (x, y, width) => {
-                    animatedX.value = withSpring(x, springSettings);
-                    animatedY.value = withSpring(y, springSettings);
-                    animatedWidth.value = width;
-                }, onPress: () => setActiveSegment(segment), onLayout: (width, height, x, y) => {
-                    if (activeSegment.key === segment.key) {
-                        animatedX.value = x;
-                        animatedY.value = y;
-                        animatedHeight.value = height;
+    return (_jsxs(SegmentsContainer, Object.assign({ "$inline": inline, "$multipleRows": multipleRows }, rest, { children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(segment => {
+                var _a, _b;
+                return (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: (x, y, width) => {
+                        animatedX.value = withSpring(x, springSettings);
+                        animatedY.value = withSpring(y, springSettings);
                         animatedWidth.value = width;
-                    }
-                }, multipleRows: multipleRows, size: size, inline: inline, testID: `${rest.testID ?? 'segment'}-${segment.key}`, segmentCount: segments.length ?? 0 }, segment.key)))] }));
+                    }, onPress: () => setActiveSegment(segment), onLayout: (width, height, x, y) => {
+                        if (activeSegment.key === segment.key) {
+                            animatedX.value = x;
+                            animatedY.value = y;
+                            animatedHeight.value = height;
+                            animatedWidth.value = width;
+                        }
+                    }, multipleRows: multipleRows, size: size, inline: inline, testID: `${(_a = rest.testID) !== null && _a !== void 0 ? _a : 'segment'}-${segment.key}`, segmentCount: (_b = segments.length) !== null && _b !== void 0 ? _b : 0 }, segment.key));
+            })] })));
 };
 const SegmentsContainer = styled.View(({ theme, $inline, $multipleRows }) => `
   flex-direction: row;

package/dist/esm/components/SegmentedControls/components/SegmentButton.js

@@ -58,10 +58,10 @@ export const SegmentButton = ({ accessibilityLabel, accessibilityHint, inline, i
         }, style: {
             flexGrow: inline || multipleRows ? undefined : 1,
             width: inline || multipleRows ? 'auto' : `${100 / segmentCount}%`,
-        }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [_jsx(SSegmentText, { style: {
+        }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [_jsx(SSegmentText, Object.assign({ style: {
                         opacity: 0,
                         fontWeight: '900',
-                    }, "$isSelected": false, ...textSizeProps, children: label }), _jsx(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, ...textSizeProps, children: label }), _jsx(SSegmentText, { style: animatedStyleBold, "$isSelected": true, ...textSizeProps, children: label })] }) }));
+                    }, "$isSelected": false }, textSizeProps, { children: label })), _jsx(SSegmentText, Object.assign({ style: animatedStyleNormal, "$isSelected": false }, textSizeProps, { children: label })), _jsx(SSegmentText, Object.assign({ style: animatedStyleBold, "$isSelected": true }, textSizeProps, { children: label }))] }) }));
 };
 const SSegmentsWrapper = styled.View(({ theme, $size, multiline }) => `
   ${multiline

package/dist/esm/components/SelectField/SelectField.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, Fragment as _Fragment } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { Select } from './Select';
-export const SelectField = ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ref, ...rest }) => (_jsx(Field, { affixWidth: 20, error: error, ...rest, children: _jsx(_Fragment, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID, ref: ref }) }) }));
+export const SelectField = (_a) => {
+    var { error, options, onSelected, noOptionMessage, defaultSelected, testID, ref } = _a, rest = __rest(_a, ["error", "options", "onSelected", "noOptionMessage", "defaultSelected", "testID", "ref"]);
+    return (_jsx(Field, Object.assign({ affixWidth: 20, error: error }, rest, { children: _jsx(_Fragment, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID, ref: ref }) }) })));
+};

package/dist/esm/components/SkeletonAnimation/SkeletonAnimation.js

@@ -19,8 +19,6 @@ export const SkeletonAnimation = ({ children, animation = 'pulse', testID, }) =>
     }, []);
     return (_jsx(View, { accessible: false, accessibilityRole: "none", accessibilityLabel: "loading...", testID: testID, children: animation === 'pulse' ? (_jsx(Animated.View, { style: [
                 {
-                    height: '100%',
-                    width: '100%',
                     opacity: animationRef.current.interpolate({
                         inputRange: [0.25, 1, 2],
                         outputRange: [1, 0.25, 1],

package/dist/esm/components/SkeletonButton/SkeletonButton.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 styled from '../../styled.native';
@@ -9,4 +20,7 @@ const StyledSkeletonCTA = styled.View(({ theme, width }) => `
     height: ${numToPx(theme.space[1200])};
     border-radius: ${numToPx(theme.border.radius['3xl'])};
   `);
-export const SkeletonButton = ({ width = '250px', ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCTA, { as: P, width: width, ...rest }) }));
+export const SkeletonButton = (_a) => {
+    var { width = '250px' } = _a, rest = __rest(_a, ["width"]);
+    return (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCTA, Object.assign({ as: P, width: width }, rest)) }));
+};

package/dist/esm/components/SkeletonCircle/SkeletonCircle.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 { pxToNumber } from '@ovotech/element-core';
 import styled from '../../styled.native';
@@ -9,4 +20,7 @@ const StyledSkeletonCircle = styled.View(({ theme, width }) => `
     padding-bottom: 100%;
     border-radius: ${pxToNumber(width) / 2}px;
   `);
-export const SkeletonCircle = ({ width = '120px', ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCircleWrapper, { width: width, ...rest, children: _jsx(StyledSkeletonCircle, { width: width }) }) }));
+export const SkeletonCircle = (_a) => {
+    var { width = '120px' } = _a, rest = __rest(_a, ["width"]);
+    return (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCircleWrapper, Object.assign({ width: width }, rest, { children: _jsx(StyledSkeletonCircle, { width: width }) })) }));
+};

package/dist/esm/components/SkeletonHeading/SkeletonHeading.js

@@ -1,9 +1,25 @@
+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 from '../../styled.native';
 import { Heading3 } from '../Heading';
 import { SkeletonAnimation } from '../SkeletonAnimation';
 const StyledSkeletonHeading = styled.View(({ theme, size }) => `
     background-color: ${theme.color.surface.dim};
+    border-radius: ${numToPx(theme.border.radius.sm)};
     width: ${size};
   `);
-export const SkeletonHeading = ({ size = '70%', headingComponent: Heading = Heading3, ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonHeading, { "aria-hidden": "true", size: size, as: Heading, ...rest, children: "\u00A0" }) }));
+export const SkeletonHeading = (_a) => {
+    var { size = '70%', headingComponent: Heading = Heading3 } = _a, rest = __rest(_a, ["size", "headingComponent"]);
+    return (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonHeading, Object.assign({ "aria-hidden": "true", size: size, as: Heading }, rest, { children: "\u00A0" })) }));
+};

package/dist/esm/components/SkeletonText/SkeletonText.js

@@ -1,27 +1,41 @@
+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';
 import styled from '../../styled.native';
 import { P } from '../P';
 import { SkeletonAnimation } from '../SkeletonAnimation';
-const StyledSkeletonText = styled.View(({ theme, aboveSmallBreakpoint, short }) => {
+const StyledSkeletonText = styled.View(({ theme, aboveSmallBreakpoint, short, size, lines = 1 }) => {
     return `
     background-color: ${theme.color.surface.dim};
-    margin-bottom: ${numToPx(theme.space[200])};
+    margin-bottom: ${lines > 1 ? numToPx(theme.space[200]) : 0};
+    border-radius: ${numToPx(theme.border.radius.sm)};
     height: ${aboveSmallBreakpoint
         ? numToPx(theme.font.size.md.mediaQuery.lg)
         : numToPx(theme.font.size.md.mediaQuery.sm)};
-
+    width: ${size};
     ${short ? 'width: 50%' : ''};
   `;
 });
-export const SkeletonText = ({ lines = 1, ...rest }) => {
+export const SkeletonText = (_a) => {
+    var { lines = 1, size } = _a, rest = __rest(_a, ["lines", "size"]);
     const generatedLines = [];
     const { smallAndUp } = useBreakpoint();
+    const hasMultipleLines = lines > 1;
     for (let i = 1; i <= lines; i++) {
-        generatedLines.push(_jsx(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, `line-${i}`));
+        generatedLines.push(_jsx(StyledSkeletonText, { short: hasMultipleLines && i === lines, aboveSmallBreakpoint: smallAndUp, size: size }, `line-${i}`));
     }
     return (
     // @ts-ignore styled components stuff
-    _jsx(P, { as: SkeletonAnimation, ...rest, children: generatedLines }));
+    _jsx(P, Object.assign({ as: SkeletonAnimation }, rest, { children: generatedLines })));
 };

package/dist/esm/components/Stack/Stack.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 { View } from 'react-native';
@@ -8,11 +19,12 @@ import { responsiveStyle } from '../../utils';
 const StyledStack = styled(View)(({ gapStyle }) => `
   ${gapStyle}
 `);
-const Stack = ({ children, spaceBetween, ...rest }) => {
+const Stack = (_a) => {
+    var { children, spaceBetween } = _a, rest = __rest(_a, ["children", "spaceBetween"]);
     const breakpoints = useBreakpoint();
     const theme = useTheme();
     const formatter = (spaceKey) => numToPx(theme.space[String(spaceKey * 100)]);
     const gapStyle = responsiveStyle('gap', spaceBetween, breakpoints, formatter);
-    return (_jsx(StyledStack, { gapStyle: gapStyle, ...rest, children: children }));
+    return (_jsx(StyledStack, Object.assign({ gapStyle: gapStyle }, rest, { children: children })));
 };
 export { Stack };

package/dist/esm/components/Stretch/Stretch.js

@@ -9,5 +9,5 @@ const StyledStretch = styled.View(
   `);
 export const Stretch = (props) => {
     const { smallAndUp } = useBreakpoint();
-    return _jsx(StyledStretch, { smallAndUp: smallAndUp, ...props });
+    return _jsx(StyledStretch, Object.assign({ smallAndUp: smallAndUp }, props));
 };

package/dist/esm/components/Tabs/Tab.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';
@@ -28,7 +39,8 @@ const TabTouchable = styled.TouchableOpacity(({ active = false, stretch = false,
         : ''}
   `;
 });
-export const Tab = ({ active, fullWidth = false, children, ref, ...rest }) => {
+export const Tab = (_a) => {
+    var { active, fullWidth = false, children, ref } = _a, rest = __rest(_a, ["active", "fullWidth", "children", "ref"]);
     const breakpoints = useBreakpoint();
-    return (_jsx(TabTouchable, { accessible: true, accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref, ...rest, children: _jsx(TabText, { active: active, ...breakpoints, children: children }) }));
+    return (_jsx(TabTouchable, Object.assign({ accessible: true, accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref }, rest, { children: _jsx(TabText, Object.assign({ active: active }, breakpoints, { children: children })) })));
 };

package/dist/esm/components/Tabs/TabList.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 { Children, cloneElement } from 'react';
@@ -7,12 +18,13 @@ const StyledTabList = styled.View(({ theme }) => css `
     flex-direction: row;
     margin: -${numToPx(theme.border.width.sm)};
   `);
-export const TabList = ({ children, setActiveTab, activeTab, tabRefs, fullWidth, ...rest }) => {
+export const TabList = (_a) => {
+    var { children, setActiveTab, activeTab, tabRefs, fullWidth } = _a, rest = __rest(_a, ["children", "setActiveTab", "activeTab", "tabRefs", "fullWidth"]);
     const validChildren = getValidChildren(children);
-    return (_jsx(StyledTabList, { accessible: true, accessibilityRole: "tablist", ...rest, children: Children.map(validChildren, (child, i) => cloneElement(child, {
+    return (_jsx(StyledTabList, Object.assign({ accessible: true, accessibilityRole: "tablist" }, rest, { children: Children.map(validChildren, (child, i) => cloneElement(child, {
             onPress: callAll(() => setActiveTab && setActiveTab(i), child.props.onPress),
             active: activeTab === i,
             fullWidth,
-            ref: tabRefs?.[i],
-        })) }));
+            ref: tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs[i],
+        })) })));
 };

package/dist/esm/components/Tabs/TabPanel.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 styled, { css } from '../../styled.native';
@@ -8,6 +19,7 @@ const StyledView = styled.View(({ theme }) => css `
     border-color: ${theme.color.input.borderDim};
     z-index: -1;
   `);
-export const TabPanel = ({ ...rest }) => {
-    return _jsx(StyledView, { ...rest });
+export const TabPanel = (_a) => {
+    var rest = __rest(_a, []);
+    return _jsx(StyledView, Object.assign({}, rest));
 };

package/dist/esm/components/Tabs/Tabs.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 } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
 import { cloneElement, createRef, useEffect, useRef, useState, } from 'react';
@@ -11,7 +22,8 @@ const TabsCard = styled(Card)(({ theme }) => css `
     border: ${numToPx(theme.border.width.sm)} solid transparent;
     background: transparent;
   `);
-export const Tabs = ({ children, defaultSelected = 0, onSelected, fullWidth, ...rest }) => {
+export const Tabs = (_a) => {
+    var { children, defaultSelected = 0, onSelected, fullWidth } = _a, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth"]);
     const [activeTab, setActiveTab] = useState(defaultSelected);
     const tabList = filterChildrenByType(children, TabList);
     const tabPanels = filterChildrenByType(children, TabPanel);
@@ -25,7 +37,7 @@ export const Tabs = ({ children, defaultSelected = 0, onSelected, fullWidth, ...
             loaded.current = true;
         }
     }, [onSelected, activeTab]);
-    return (_jsxs(TabsCard, { ...rest, children: [tabList.map((child) => cloneElement(child, {
+    return (_jsxs(TabsCard, Object.assign({}, rest, { children: [tabList.map((child) => cloneElement(child, {
                 setActiveTab,
                 activeTab,
                 tabRefs,
@@ -34,5 +46,5 @@ export const Tabs = ({ children, defaultSelected = 0, onSelected, fullWidth, ...
                 .filter((_, index) => index === activeTab)
                 .map((child, index) => cloneElement(child, {
                 hidden: activeTab !== index,
-            }))] }));
+            }))] })));
 };

package/dist/esm/components/TextField/TextField.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 { Field } from '../Field';
 import { TextInput } from '../TextInput';
-export const TextField = ({ ref, ...props }) => {
-    return (_jsx(Field, { ...props, children: _jsx(TextInput, { ref: ref }) }));
+export const TextField = (_a) => {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    return (_jsx(Field, Object.assign({}, props, { children: _jsx(TextInput, { ref: ref }) })));
 };

package/dist/esm/components/TextInput/TextInput.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 TextInput = ({ ref, ...props }) => (_jsx(Input, { ...props, keyboardType: "default", ref: ref }));
+const TextInput = (_a) => {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    return (_jsx(Input, Object.assign({}, props, { keyboardType: "default", ref: ref })));
+};
 export { TextInput };

package/dist/esm/components/TextareaField/TextareaField.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 { Field } from '../Field';
 import { TextareaInput } from '../TextareaInput';
-export const TextareaField = ({ ref, ...props }) => {
-    return (_jsx(Field, { ...props, children: _jsx(TextareaInput, { ref: ref }) }));
+export const TextareaField = (_a) => {
+    var { ref } = _a, props = __rest(_a, ["ref"]);
+    return (_jsx(Field, Object.assign({}, props, { children: _jsx(TextareaInput, { ref: ref }) })));
 };

package/dist/esm/components/TextareaInput/TextareaInput.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 styled, { css } from '../../styled.native';
@@ -7,7 +18,8 @@ const StyledInput = styled(Input)(({ theme, rows }) => css `
     padding-top: ${numToPx(theme.space[300])};
     height: ${theme.space[800] * rows}px;
   `);
-const TextareaInput = ({ rows = 3, ref, ...rest }) => {
-    return (_jsx(StyledInput, { ...rest, keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref }));
+const TextareaInput = (_a) => {
+    var { rows = 3, ref } = _a, rest = __rest(_a, ["rows", "ref"]);
+    return (_jsx(StyledInput, Object.assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
 };
 export { TextareaInput };

package/dist/esm/components/Toast/Toast.js

@@ -45,14 +45,14 @@ export const showToast = ({ message, dismissible = false, action, actionTitle, v
             id: 'clipboard',
             position: ToastPosition.BOTTOM,
             disableShadow: true,
-            customToast: t => (_jsx(CustomToast, { ...t, dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }, message)),
+            customToast: t => (_jsx(CustomToast, Object.assign({}, t, { dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }), message)),
         })
         : toast(message, {
             id: 'clipboard',
             position: ToastPosition.BOTTOM,
             duration,
             disableShadow: true,
-            customToast: t => (_jsx(CustomToastWithTimeIndicator, { ...t, variant: variant }, message)),
+            customToast: t => (_jsx(CustomToastWithTimeIndicator, Object.assign({}, t, { variant: variant }), message)),
         });
 };
 const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) => {
@@ -79,7 +79,8 @@ const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) =>
             height: textHeight + toastPadding,
             flexWrap: 'wrap',
         }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
-                    textRef.current?.measureInWindow((_x, _y, _width, height) => {
+                    var _a;
+                    (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
                         setTextHeight(height);
                     });
                 }, children: message }), _jsx(View, { style: { position: 'absolute', bottom: 0 }, children: _jsx(StyledBorder, { variant: variant, style: style }) })] }));
@@ -107,11 +108,13 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
                     justifyContent: 'space-between',
                     flex: 1,
                 }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
-                            textRef.current?.measureInWindow((_x, _y, _width, height) => {
+                            var _a;
+                            (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
                                 setTextHeight(height);
                             });
                         }, children: message }), action && actionTitle ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, standalone: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
-                            actionRef.current?.measureInWindow((_x, _y, _width, height) => {
+                            var _a;
+                            (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
                                 setActionHeight(height);
                             });
                         }, children: actionTitle })) : null] }), dismissible ? (_jsx(StyledCloseIcon, { onPress: () => toast.dismiss(id), children: _jsx(Icon, { name: "cross", color: "#fff", size: 14 }) })) : null] }));

package/dist/esm/components/Toggle/Toggle.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 { useEffect, useRef } from 'react';
 import { Animated, View } from 'react-native';
@@ -5,7 +16,8 @@ import { useTheme } from '../../styled.native';
 import { HintText } from '../HintText/HintText';
 import { LabelText } from '../LabelText';
 import { StyledToggleDot, StyledToggleInput, StyledToggleInputWrapper, StyledWrapper, } from './styles';
-const Input = ({ checked, labelPosition, testID, ...rest }) => {
+const Input = (_a) => {
+    var { checked, labelPosition, testID } = _a, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
     const theme = useTheme();
     const leftVal = useRef(new Animated.Value(checked ? theme.space[600] : theme.space[100])).current;
     useEffect(() => {
@@ -15,11 +27,12 @@ const Input = ({ checked, labelPosition, testID, ...rest }) => {
             useNativeDriver: true,
         }).start();
     }, [checked]);
-    return (_jsx(StyledToggleInputWrapper, { labelPosition: labelPosition, ...rest, children: _jsx(StyledToggleInput, { checked: checked, testID: testID, children: _jsx(StyledToggleDot, { style: {
+    return (_jsx(StyledToggleInputWrapper, Object.assign({ labelPosition: labelPosition }, rest, { children: _jsx(StyledToggleInput, { checked: checked, testID: testID, children: _jsx(StyledToggleDot, { style: {
                     transform: [{ translateX: leftVal }],
-                }, checked: checked }) }) }));
+                }, checked: checked }) }) })));
 };
-export const Toggle = ({ activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref, ...rest }) => {
+export const Toggle = (_a) => {
+    var { activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref } = _a, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID", "ref"]);
     const hasLabel = label !== undefined;
-    return (_jsxs(StyledWrapper, { ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline, ...rest, children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] }));
+    return (_jsxs(StyledWrapper, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
 };

package/dist/esm/components/index.js

@@ -37,8 +37,8 @@ export * from './PhoneInput';
 export * from './Pictogram';
 export * from './Radio';
 export * from './RadioCard';
-export * from './ScreenView';
 export * from './RemoteImage';
+export * from './ScreenView';
 export * from './SegmentedControls';
 export * from './SelectField';
 export * from './SkeletonButton';

package/dist/esm/providers/IconsProvider.js

@@ -117,10 +117,7 @@ function useIcons() {
 }
 function IconsProvider({ children, icons = {}, }) {
     const baseIcons = useContext(IconsContext) || defaultIcons;
-    const mergedIcons = {
-        ...baseIcons,
-        ...icons,
-    };
+    const mergedIcons = Object.assign(Object.assign({}, baseIcons), icons);
     return (_jsx(IconsContext.Provider, { value: mergedIcons, children: children }));
 }
 export { defaultIcons, IconsProvider, useIcons };

package/dist/esm/providers/PictogramsProvider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-import { AccountInCreditPositiveBalance, AccountInDebtNegativeBalance, AccousticGuitar, AddYourCar, Archive, AssistanceDog, Awards, Bag, Battery13, Battery23, Battery33, BatteryEmpty, Bicycle, Bill, Bin, Boiler, BoilerEngineer, BoilerHeating, BoilerReplacement, BoilerService, BoilerWorking, BritishSignLanguage, Bus, CableLengthLong, CableLengthMedium, CableLengthShort, Calendar, Camera, Car, ChargerChademo, ChargerCssCombo, ChargerType1, ChargerType2, Cloakroom, Clock, Comedy, Competition, Confirmation, ContactUs, Copy, CreatePaymentSchedule, CreditCard, Cursor, Customer, CustomerStar, DisbaledToilet, DownloadApp, Drink1, Drink2, Drink3, Drink4, EcoHome, Edit, Electric, ElectricCarEv, ElectricityWarning, Emergency, EnergyAdvice, EnergyExperts, EstimatedCharge, EstimatedCharge2, EstimatedRange, EvCharger, ExitFees, ExternalDrains, Fairness, Filter, FinalStatement, FlagIssue, Flats, Food, FossilFuels, Gas, GasWarning, GetInTouch, Global, GreenerEnergy, GuitarMusic, Heart, HeatPump, Help, HistoryPayment, Home, HomeMove, HomeMoving, HouseProtected, Information, InternalDrains, Key, Laptop, Lasers, Leaf, Letter, Lifts, LightMembership, Lightbulb, Like, List, LoadingAndFlexibility, Location, LogIn, LogOut, Lpg, Magnify, ManageMyAccount, Map, MensToilet, Merch, MeterReading, MeterTopUp1, MeterTopUp2, Microphone, Mobile, Money, Msg, Music, MyPaymentCards, Navigation, News, NoEntry, NoSmoking, Notification, NumberOfSeats, Oil, OpenLetter, Padlock, Parking, PayAsYouGo, PayByBankTransfer, PaygDrive, PaymentSchedule, Person, PingDriver, Placeholder, Planet, Play, Plug, PlugAndSocket, Plumbing, PowerMove, Present, Price, PriceCut, Queue, Radio, RealCharge, RealCharge2, Refund, Repair, Rocket, ScheduledTopUps, Screen1, Screen2, Seats, SecurityDog, SellingPowerBackElectricity, SellingPowerBackGas, SemiDetached, Send, Shield, SmartHome, SmartMeter, SmartThermostatA, SmartThermostatB, Smoke, SolarPanel, SpecialEffects, Sport, Star, StoreLocator, StrobeLights, StrobeLights2, Sun, Tado, TapsAndToilets, TentFront, TentSide, Terraced, TheGrid, ThumbsDown, ThumbsUp, Ticket, TimeRunningOut, Toilet, TopUp, TopUpCardOrKey, TopUpInPaypointShop, TopUpInStore, TopUpOnline, Torch, Train, Trees, Turbine, UnavailableCharger, Underground, Underground1, Usage, Wallet, WarmHome, WaterSupplyPipe, WindEnergy, WomensToilet, Wrench, } from './pictograms';
+import { AccountInCreditPositiveBalance, AccountInDebtNegativeBalance, AccousticGuitar, AddYourCar, Archive, AssistanceDog, Awards, Bag, Battery13, Battery23, Battery33, BatteryEmpty, Bicycle, Bill, Bin, Boiler, BoilerEngineer, BoilerHeating, BoilerReplacement, BoilerService, BoilerWorking, BritishSignLanguage, Bus, CableLengthLong, CableLengthMedium, CableLengthShort, Calendar, Camera, Car, ChargerChademo, ChargerCssCombo, ChargerType1, ChargerType2, Cloakroom, Clock, Comedy, Competition, Confirmation, ContactUs, Copy, CreatePaymentSchedule, CreditCard, Cursor, Customer, CustomerStar, DisbaledToilet, DownloadApp, Drink1, Drink2, Drink3, Drink4, EcoHome, Edit, Electric, ElectricCarEv, ElectricityWarning, Emergency, EnergyAdvice, EnergyExperts, EstimatedCharge, EstimatedCharge2, EstimatedRange, EvCharger, ExitFees, ExternalDrains, Fairness, Filter, FinalStatement, FlagIssue, Flats, Food, FossilFuels, Gas, GasWarning, GetInTouch, Global, GreenerEnergy, GuitarMusic, Heart, HeatPump, Help, HistoryPayment, Home, HomeMove, HomeMoving, HouseProtected, Information, InternalDrains, Key, Laptop, Lasers, Leaf, Letter, Lifts, Lightbulb, LightMembership, Like, List, LoadingAndFlexibility, Location, LogIn, LogOut, Lpg, Magnify, ManageMyAccount, Map, MensToilet, Merch, MeterReading, MeterTopUp1, MeterTopUp2, Microphone, Mobile, Money, Msg, Music, MyPaymentCards, Navigation, News, NoEntry, NoSmoking, Notification, NumberOfSeats, Oil, OpenLetter, Padlock, Parking, PayAsYouGo, PayByBankTransfer, PaygDrive, PaymentSchedule, Person, PingDriver, Placeholder, Planet, Play, Plug, PlugAndSocket, Plumbing, PowerMove, Present, Price, PriceCut, Queue, Radio, RealCharge, RealCharge2, Refund, Repair, Rocket, ScheduledTopUps, Screen1, Screen2, Seats, SecurityDog, SellingPowerBackElectricity, SellingPowerBackGas, SemiDetached, Send, Shield, SmartHome, SmartMeter, SmartThermostatA, SmartThermostatB, Smoke, SolarPanel, SpecialEffects, Sport, Star, StoreLocator, StrobeLights, StrobeLights2, Sun, Tado, TapsAndToilets, TentFront, TentSide, Terraced, TheGrid, ThumbsDown, ThumbsUp, Ticket, TimeRunningOut, Toilet, TopUp, TopUpCardOrKey, TopUpInPaypointShop, TopUpInStore, TopUpOnline, Torch, Train, Trees, Turbine, UnavailableCharger, Underground, Underground1, Usage, Wallet, WarmHome, WaterSupplyPipe, WindEnergy, WomensToilet, Wrench, } from './pictograms';
 const defaultPictograms = {
     'account-in-credit-positive-balance': AccountInCreditPositiveBalance,
     'account-in-debt-negative-balance': AccountInDebtNegativeBalance,
@@ -213,10 +213,7 @@ function usePictograms() {
 }
 function PictogramsProvider({ children, pictograms = {}, }) {
     const basePictograms = useContext(PictogramsContext) || defaultPictograms;
-    const mergedPictograms = {
-        ...basePictograms,
-        ...pictograms,
-    };
+    const mergedPictograms = Object.assign(Object.assign({}, basePictograms), pictograms);
     return (_jsx(PictogramsContext.Provider, { value: mergedPictograms, children: children }));
 }
 export { defaultPictograms, PictogramsProvider, usePictograms };