@ovotech/element-native 5.4.3 → 5.6.0

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/Divider/Divider.js

@@ -5,7 +5,9 @@ const StyledDivider = styled.View(({ theme, type = 'default', width = '100%' })
       height: 1px;
       background: ${type === 'default'
         ? theme.color.surface.border
-        : theme.color.surface.borderDim};
+        : type === 'brand'
+            ? theme.color.green[70]
+            : theme.color.surface.borderDim};
       width: ${width};
     `;
 });

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,34 @@
+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 { useEffect, useMemo, useState } from 'react';
 import { Input } from '../Input/Input';
-const EmailInput = ({ ref, ...rest }) => (_jsx(Input, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref, ...rest }));
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const EmailInput = (_a) => {
+    var { onChangeText, onSubmitEditing, value, invalid, onValidityChange } = _a, rest = __rest(_a, ["onChangeText", "onSubmitEditing", "value", "invalid", "onValidityChange"]);
+    const textValue = typeof value === 'string' ? value : '';
+    const isValid = useMemo(() => textValue.length > 0 && EMAIL_REGEX.test(textValue), [textValue]);
+    const [hasUserInput, setHasUserInput] = useState(false);
+    useEffect(() => {
+        onValidityChange === null || onValidityChange === void 0 ? void 0 : onValidityChange(isValid);
+    }, [isValid, onValidityChange]);
+    return (_jsx(Input, Object.assign({ keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, value: value, invalid: invalid !== null && invalid !== void 0 ? invalid : (hasUserInput && !isValid), onChangeText: text => {
+            if (!hasUserInput)
+                setHasUserInput(true);
+            onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
+        }, onSubmitEditing: e => {
+            if (!isValid)
+                return;
+            onSubmitEditing === null || onSubmitEditing === void 0 ? void 0 : onSubmitEditing(e);
+        } }, rest)));
+};
 export { EmailInput };

package/dist/esm/components/EmptyState/EmptyState.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePictograms } from '../../providers';
+import { useTheme } from '../../styled.native';
+import { Heading4 } from '../Heading';
+import { Pictogram } from '../Pictogram';
+import { RemoteImage } from '../RemoteImage';
+import { StyledCard, TextContainer } from './styles';
+export const EmptyState = ({ backgroundStyle = 'filled', children, illustration, heading, pictogramName, }) => {
+    const pictograms = usePictograms();
+    const theme = useTheme();
+    const isFilledBackground = backgroundStyle === 'filled';
+    return (_jsxs(StyledCard, { testID: "empty-state-card", background: isFilledBackground ? theme.color.surface.bright : 'transparent', children: [(illustration === null || illustration === void 0 ? void 0 : illustration.uri) ? (_jsx(RemoteImage, Object.assign({ testID: "empty-state-illustration", resizeMode: "contain" }, illustration))) : null, pictogramName && pictograms[pictogramName] ? (_jsx(Pictogram, { testID: "empty-state-pictogram", size: 64, name: pictogramName })) : null, _jsxs(TextContainer, { children: [_jsx(Heading4, { style: { color: theme.color.surface.onSurface }, children: heading }), children] })] }));
+};

package/dist/esm/components/EmptyState/EmptyState.test.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'react-native';
+import { render } from '../../test/utils';
+import { EmptyState } from './EmptyState';
+jest.mock('../../providers', () => (Object.assign(Object.assign({}, jest.requireActual('../../providers')), { usePictograms: () => ({
+        'test-pictogram': 'test-pictogram-data',
+    }) })));
+const mockIllustration = {
+    uri: 'https://example.com/image.png',
+    width: 100,
+    height: 100,
+};
+const setup = (props) => {
+    return render(_jsx(EmptyState, Object.assign({}, props)));
+};
+describe('EmptyState', () => {
+    it('should render the heading and children', () => {
+        const { getByText } = setup({
+            heading: 'Default Heading',
+            children: _jsx(Text, { children: "Default Children" }),
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByText('Default Heading')).toBeDefined();
+        expect(getByText('Default Children')).toBeDefined();
+    });
+    it('should have a filled background by default', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        const card = getByTestId('empty-state-card');
+        expect(card.props.style.backgroundColor).not.toBe('transparent');
+    });
+    it("should have a transparent background when backgroundStyle is 'transparent'", () => {
+        const { getByTestId } = setup({
+            backgroundStyle: 'transparent',
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        const card = getByTestId('empty-state-card');
+        expect(card.props.style.backgroundColor).toBe('transparent');
+    });
+    it('should render an illustration if provided', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            illustration: mockIllustration,
+        });
+        const image = getByTestId('empty-state-illustration');
+        expect(image).toBeDefined();
+        expect(image.props.source.uri).toBe(mockIllustration.uri);
+    });
+    it('should not render an illustration if uri is not provided', () => {
+        const { queryByTestId } = setup({
+            heading: 'Default Heading',
+            // @ts-expect-error - we are intentionally providing an illustration without a valid uri to test rendering logic
+            illustration: { height: 100, width: 100 },
+        });
+        expect(queryByTestId('empty-state-illustration')).toBeNull();
+    });
+    it('should render a pictogram if a valid pictogramName is provided', () => {
+        const { getByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByTestId('empty-state-pictogram')).toBeDefined();
+    });
+    it('should not render a pictogram if pictogramName is invalid', () => {
+        const { queryByTestId } = setup({
+            heading: 'Default Heading',
+            pictogramName: 'invalid-pictogram',
+        });
+        expect(queryByTestId('empty-state-pictogram')).toBeNull();
+    });
+    it('should render custom children', () => {
+        const { getByText } = render(_jsx(EmptyState, { heading: "Custom Heading", pictogramName: "test-pictogram", children: _jsx(Text, { children: "My Custom Child" }) }));
+        expect(getByText('My Custom Child')).toBeDefined();
+    });
+    it('should only render illustration when both illustration and pictogramName are provided', () => {
+        // According to the EmptyStateProps, only one of them should be present.
+        // However, if a user passes both, the component's internal logic will prioritize illustration.
+        // @ts-expect-error - we are intentionally passing both props to test runtime behavior
+        const { getByTestId, queryByTestId } = setup({
+            heading: 'Default Heading',
+            illustration: mockIllustration,
+            pictogramName: 'test-pictogram',
+        });
+        expect(getByTestId('empty-state-illustration')).toBeDefined();
+        expect(queryByTestId('empty-state-pictogram')).toBeNull();
+    });
+});

package/dist/esm/components/EmptyState/index.js

@@ -0,0 +1 @@
+export * from './EmptyState';

package/dist/esm/components/EmptyState/styles.js

@@ -0,0 +1,17 @@
+import styled from '../../styled.native';
+import { Card } from '../Card';
+export const StyledCard = styled(Card)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.space[100],
+}));
+export const TextContainer = styled.View(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    gap: theme.space[50],
+    paddingLeft: theme.space[400],
+    paddingRight: theme.space[400],
+    alignItems: 'center',
+}));

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

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

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, selected } = _a, rest = __rest(_a, ["children", "label", "optional", "hint", "error", "fullWidth", "characters", "affixWidth", "ref", "selected"]);
     const hasError = !!error;
     const inputRef = createRef();
     const labelText = optional ? `${label} (optional)` : label;
@@ -27,11 +39,7 @@ 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,
+                            selected }, 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,27 +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, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
 import { useState } from 'react';
 import { useBreakpoint } from '../../hooks';
-import styled, { css } from '../../styled.native';
-import { Icon } from '../Icon/Icon';
-const StyledIcon = styled(Icon)(({ theme, side, focused }) => {
-    const focusCompensation = focused ? theme.space[50] : 0;
-    return css `
-    position: absolute;
-    z-index: 1;
-    top: ${numToPx(theme.space[350] + focusCompensation)};
-    ${side === 'left'
-        ? `left: ${numToPx(theme.space[200] + focusCompensation)}`
-        : ''};
-    ${side === 'right'
-        ? `right: ${numToPx(theme.space[200] + focusCompensation)}`
-        : ''};
-  `;
-});
-const Input = ({ onFocus, onBlur, style, iconLeft, iconRight, rightSlot, ref, ...rest }) => {
+import { useTheme } from '../../styled.native';
+import { ICON_SIZE, StyledIcon, StyledInput, StyledInputWrapper, } from './styled';
+const Input = (_a) => {
+    var { onFocus, onBlur, style, iconLeft, iconRight, invalid, rightSlot, ref, selected } = _a, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "invalid", "rightSlot", "ref", "selected"]);
     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) => {
+    const theme = useTheme();
+    return (_jsxs(StyledInputWrapper, { focused: focused, hasError: invalid, isSelected: selected, children: [iconLeft ? (_jsx(StyledIcon, { name: iconLeft, size: ICON_SIZE, pointerEvents: "none", side: "left" })) : null, _jsx(StyledInput, Object.assign({}, rest, breakpoints, { hasRightSlot: !!rightSlot, iconLeft: !!iconLeft, iconRight: !!iconRight, invalid: invalid, placeholderTextColor: theme.color.surface.onSurfaceVariant, ref: ref, style: style, onFocus: (event) => {
                     setFocused(true);
                     if (onFocus) {
                         onFocus(event);
@@ -31,50 +29,6 @@ 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: ICON_SIZE, pointerEvents: "none", side: "right" })) : null, rightSlot] }));
 };
-const InputWrapper = styled.View(({ theme, focused }) => css `
-    align-self: stretch;
-    border-radius: ${numToPx(theme.border.radius.md)};
-    border-width: 0;
-    border-style: solid;
-    border-color: ${theme.input.color.border};
-    flex-direction: row;
-
-    ${focused
-    ? `
-      border-width: ${numToPx(theme.border.width.md)};
-      border-color: ${theme.color.outline.outer};
-      padding: 2px;
-      margin: -4px;`
-    : null}
-  `);
-const StyledInput = styled.TextInput(({ theme, invalid, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
-    const fontSize = smallAndUp
-        ? theme.font.size.md.mediaQuery.lg
-        : theme.font.size.md.mediaQuery.sm;
-    const errorStyles = invalid
-        ? `
-        border-color: ${theme.color.alert.error};
-      `
-        : '';
-    return css `
-    font-family: ${theme.native.font.family.book};
-    color: ${theme.color.surface.onSurface};
-    font-size: ${numToPx(fontSize)};
-    height: ${numToPx(theme.space[1100])};
-    line-height: 18px; /* Corrects for responsive line height in fixed height input */
-    border: ${numToPx(theme.border.width.md)} solid ${theme.input.color.border};
-    border-radius: ${numToPx(theme.border.radius.sm)};
-    padding: ${numToPx(theme.space[200])};
-    flex: 1;
-
-    ${iconLeft ? `padding-left: ${numToPx(theme.space[800])};` : ''}
-    ${iconRight || hasRightSlot
-        ? `padding-right: ${numToPx(theme.space[800])};`
-        : ''}
-
-          ${errorStyles}
-  `;
-});
 export { Input };

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

@@ -0,0 +1,60 @@
+import styled, { css } from '../../styled.native';
+import { numToPx } from '../../theme';
+import { getShadowCSS } from '../../utils';
+import { Icon } from '../Icon';
+export const ICON_SIZE = 20;
+export const StyledInputWrapper = styled.View(({ theme, focused, hasError, isSelected }) => {
+    let borderColor = 'transparent';
+    /* prioritise error and selected states for border, even when focused */
+    if (hasError) {
+        borderColor = theme.color.alert.error;
+    }
+    else if (isSelected) {
+        borderColor = theme.color.surface.onSurface;
+    }
+    else if (focused) {
+        borderColor = theme.color.outline.outer;
+    }
+    return css `
+    align-self: stretch;
+    background-color: ${theme.color.surface.bright};
+    border-radius: ${numToPx(theme.border.radius.md)};
+    border-width: ${numToPx(theme.border.width.md)};
+    border-style: solid;
+    border-color: ${borderColor};
+    flex-direction: row;
+    ${getShadowCSS({ theme })}
+  `;
+});
+export const StyledInput = styled.TextInput(({ theme, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return css `
+    position: relative;
+    flex: 1;
+    padding: ${numToPx(theme.space[400])};
+    border-radius: ${numToPx(theme.border.radius.lg)};
+    color: ${theme.color.surface.onSurface};
+    font-family: ${theme.native.font.family.book};
+    font-size: ${numToPx(fontSize)};
+
+    /* NOTE: height being queried with design, subject to change */
+    min-height: ${numToPx(theme.space[1600])};
+
+    ${iconLeft ? `padding-left: ${numToPx(theme.space[800])};` : ''}
+    ${iconRight || hasRightSlot
+        ? `padding-right: ${numToPx(theme.space[800])};`
+        : ''}
+  `;
+});
+export const StyledIcon = styled(Icon)(({ theme, side }) => {
+    return css `
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    margin-top: -${ICON_SIZE / 2}px;
+    ${side === 'left' ? `left: ${numToPx(theme.space[200])}` : ''};
+    ${side === 'right' ? `right: ${numToPx(theme.space[200])}` : ''};
+  `;
+});