@ovotech/element-native 5.2.1 → 5.3.0-canary-9e22bfd-413

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

@@ -0,0 +1,68 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useRef } from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { getText, mergeRefs } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+import { NumberInput } from '../NumberInput';
+import { Stack } from '../Stack';
+import { SubLabelText } from '../SubLabelText';
+const InlineFields = styled.View(({ stretch, theme }) => {
+    const margin = numToPx(theme.space[100]);
+    return css `
+    margin-left: -${margin};
+    margin-right: -${margin};
+    flex-direction: row;
+    ${stretch ? '' : `width: 265px;`}
+  `;
+});
+const SubField = styled(Stack)(({ theme }) => {
+    const padding = numToPx(theme.space[100]);
+    return css `
+    padding-right: ${padding};
+    padding-left: ${padding};
+  `;
+});
+const DayField = styled(SubField) `
+  width: 25%;
+`;
+const MonthField = styled(SubField) `
+  width: 25%;
+`;
+const YearField = styled(SubField) `
+  width: 50%;
+`;
+export const DateField = ({ label, hint, error, optional = false, fullWidth = false, onChange, value, testID, editable = true, autoFocusNext = true, ref, }) => {
+    const hasError = !!error;
+    const dayRef = useRef(null);
+    const monthRef = useRef(null);
+    const yearRef = useRef(null);
+    const nextFieldRef = {
+        day: monthRef,
+        month: yearRef,
+    };
+    const handleChange = (key) => (datePartValue) => {
+        onChange &&
+            onChange({
+                ...value,
+                [key]: datePartValue,
+            });
+        if (key !== 'year' && autoFocusNext) {
+            const nextField = nextFieldRef[key].current;
+            if (nextField && datePartValue.length === 2) {
+                nextField.focus();
+            }
+        }
+    };
+    const accessibilityLabel = (labelText) => [labelText, getText(hint), getText(error)].filter(Boolean).join(', ');
+    const focusRef = (internalRef) => () => {
+        if (internalRef.current) {
+            internalRef.current.focus();
+        }
+    };
+    return (_jsx(FormGroup, { error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsxs(InlineFields, { stretch: fullWidth, children: [_jsxs(DayField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(dayRef), accessible: false, children: _jsx(SubLabelText, { children: "Day" }) }), _jsx(NumberInput, { ref: mergeRefs(dayRef, ref), accessibilityLabel: accessibilityLabel('Day'), invalid: hasError, value: value.day, onChangeText: handleChange('day'), testID: testID, stretch: true, editable: editable, maxLength: 2 })] }), _jsxs(MonthField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(monthRef), accessible: false, children: _jsx(SubLabelText, { children: "Month" }) }), _jsx(NumberInput, { ref: monthRef, accessibilityLabel: accessibilityLabel('Month'), invalid: hasError, value: value.month, onChangeText: handleChange('month'), testID: `${testID}-month`, stretch: true, editable: editable, maxLength: 2 })] }), _jsxs(YearField, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: focusRef(yearRef), accessible: false, children: _jsx(SubLabelText, { children: "Year" }) }), _jsx(NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: `${testID}-year`, stretch: true, editable: editable, maxLength: 4 })] })] })] }) }));
+};

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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';
+const DisclosureButton = styled.TouchableOpacity(() => css `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  `);
+const DisclosureButtonIcon = styled(Icon)(({ theme, expanded, smallAndUp }) => css `
+    transform: ${expanded ? 'rotate(0deg)' : 'rotate(-90deg)'};
+    margin-right: ${numToPx(theme.space[smallAndUp ? 200 : 100])};
+    color: ${theme.color.surface.link};
+  `);
+const DisclosureButtonText = styled.Text(({ theme, smallAndUp }) => css `
+    font-family: ${theme.native.font.family.book};
+    font-size: ${numToPx(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+    text-decoration: underline;
+    text-decoration-color: ${theme.color.surface.link};
+    color: ${theme.color.surface.link};
+    padding-left: ${numToPx(theme.space[200])};
+  `);
+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 }) => {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const breakpoints = useBreakpoint();
+    return (_jsxs(_Fragment, { children: [_jsxs(DisclosureButton, { 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 }))] }));
+};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const StyledDisplay = styled.Text(({ theme, smallAndUp, inverted, level, variant }) => {
+    const tokenKey = `d${level}`;
+    const fontSize = numToPx(theme.font.size[tokenKey].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    const lineHeight = numToPx(theme.font.lineHeight[tokenKey].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    const letterSpacing = numToPx(theme.font.letterSpacing[tokenKey].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    const color = inverted
+        ? theme.color.brand.onBrand
+        : variant === 'surface'
+            ? theme.color.surface.onSurface
+            : theme.color.brand.brand;
+    return css `
+      font-family: ${theme.native.font.family.black};
+      font-size: ${fontSize};
+      line-height: ${lineHeight};
+      letter-spacing: ${letterSpacing};
+      color: ${color};
+    `;
+});
+export const Display = ({ accessibilityRole = 'header', level, variant = 'brand', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay, { 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" });

package/dist/esm/src/components/Divider/Divider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from '../../styled.native';
+const StyledDivider = styled.View(({ theme, type = 'default', width = '100%' }) => {
+    return css `
+      height: 1px;
+      background: ${type === 'default'
+        ? theme.color.surface.border
+        : theme.color.surface.borderDim};
+      width: ${width};
+    `;
+});
+export const Divider = ({ type, width }) => {
+    return _jsx(StyledDivider, { type: type, width: width });
+};

package/dist/esm/src/components/Em/Em.js

@@ -0,0 +1,6 @@
+import styled from '../../styled.native';
+export const Em = styled.Text `
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: System;
+  font-style: italic;
+`;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmailInput } from '../EmailInput';
+import { Field } from '../Field';
+export const EmailField = ({ ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(EmailInput, {}) }));
+};

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

@@ -0,0 +1,4 @@
+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 }));
+export { EmailInput };

package/dist/esm/src/components/ErrorText/ErrorText.js

@@ -0,0 +1,20 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledErrorText = styled.Text(({ theme, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return css `
+    margin-top: ${numToPx(theme.space[100])};
+    margin-bottom: ${numToPx(theme.space[100])};
+    font-family: ${theme.native.font.family.bold};
+    font-size: ${numToPx(fontSize)};
+    line-height: ${numToPx(smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm)};
+    color: ${theme.color.alert.error};
+  `;
+});
+const ErrorText = styledComponentWithBreakpoints(StyledErrorText);
+export { ErrorText };

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '../../styled.native';
+import { Card } from '../Card';
+import { Heading4 } from '../Heading';
+import { Icon } from '../Icon';
+import { P } from '../P';
+import { RemoteImage } from '../RemoteImage';
+import { Stack } from '../Stack';
+import { errorsConfig } from './config';
+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 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 })] })] }) }));
+};
+export default ErrorFallback;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useImperativeHandle, useRef } from 'react';
+import ErrorBoundary from 'react-native-error-boundary';
+import ErrorFallback from './ErrorFallback';
+const defaultErrorLogger = (error, stackTrace) => {
+    // send error to DataDog?
+    console.error(error, stackTrace);
+};
+const ErrorWrapper = ({ children, customErrorLogger, fallbackComponent, hideOnError = true, ref, ...rest }) => {
+    const errorBoundaryRef = useRef(null);
+    const FallbackComponent = fallbackComponent || ErrorFallback;
+    useImperativeHandle(ref, () => ({
+        reset: () => {
+            errorBoundaryRef.current?.resetError();
+        },
+    }));
+    return (_jsx(ErrorBoundary, { ref: errorBoundaryRef, FallbackComponent: ({ error, resetError }) => {
+            const shouldHide = hideOnError && !fallbackComponent;
+            return shouldHide ? null : (_jsx(FallbackComponent, { error: error, resetError: resetError }));
+        }, onError: customErrorLogger || defaultErrorLogger, ...rest, children: children }));
+};
+export { ErrorWrapper };

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

@@ -0,0 +1,21 @@
+export const errorsConfig = {
+    generic: {
+        title: 'Something went wrong',
+        body: 'Please try again later.',
+        icon: 'info',
+    },
+    user: {
+        title: "We can't connect right now",
+        body: 'Check your internet and try again.',
+        icon: 'smart-home',
+    },
+    ovo: {
+        title: err => `We've run into ${err ?? 'an unknown'} error`,
+        body: 'Please try again later.',
+        icon: 'smart-home',
+    },
+    balance: {
+        title: "We couldn't load your balance",
+        body: "We're fixing it and it'll be back soon.",
+    },
+};

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

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

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,7 @@
+export var ErrorType;
+(function (ErrorType) {
+    ErrorType["GENERIC"] = "generic";
+    ErrorType["USER"] = "user";
+    ErrorType["OVO"] = "ovo";
+    ErrorType["BALANCE"] = "balance";
+})(ErrorType || (ErrorType = {}));

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

@@ -0,0 +1,37 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, createRef, isValidElement, } from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import { getText, mergeRefs } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+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 }) => {
+    const hasError = !!error;
+    const inputRef = createRef();
+    const labelText = optional ? `${label} (optional)` : label;
+    const accessibilityLabel = [labelText, getText(hint), getText(error)]
+        .filter(Boolean)
+        .join(', ');
+    return (_jsx(FormGroup, { error: hasError || undefined, testID: "nb-field-form-group", children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(TouchableWithoutFeedback, { onPress: () => {
+                        if (inputRef.current) {
+                            // @ts-ignore. Toggle picker if this is a select menu.
+                            if (inputRef.current.togglePicker) {
+                                // @ts-ignore
+                                inputRef.current.togglePicker();
+                            }
+                            else {
+                                inputRef.current.focus();
+                            }
+                        }
+                    }, 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,
+                        })
+                        : child) })] }) }));
+};

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import styled from '../../styled.native';
+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 }) }));
+export { FormGroup };

package/dist/esm/src/components/Grid/Col.js

@@ -0,0 +1,28 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledCol = styled.View(({ theme, span = 12, small, medium, large, smallAndUp, mediumAndUp, largeAndUp, }) => {
+    const COLS = 12;
+    const gutter = mediumAndUp ? theme.space[800] : theme.space[400];
+    const percentage = (span / COLS) * 100;
+    const smallPercentage = small ? (small / COLS) * 100 : percentage;
+    const mediumPercentage = medium ? (medium / COLS) * 100 : smallPercentage;
+    const largePercentage = large ? (large / COLS) * 100 : mediumPercentage;
+    const maxWidth = largeAndUp
+        ? largePercentage
+        : mediumAndUp
+            ? mediumPercentage
+            : smallAndUp
+                ? smallPercentage
+                : percentage;
+    return css `
+      flex: 0 0 auto;
+      padding-left: ${numToPx(gutter / 2)};
+      padding-right: ${numToPx(gutter / 2)};
+      margin-bottom: ${numToPx(gutter)};
+      max-width: ${maxWidth}%;
+      width: 100%;
+    `;
+});
+const Col = styledComponentWithBreakpoints(StyledCol);
+export { Col };

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledRow = styled.View(({ theme, isNested, smallAndUp, mediumAndUp }) => {
+    const gutter = mediumAndUp ? theme.space[800] : theme.space[400];
+    const margin = smallAndUp ? theme.space[800] : theme.space[400];
+    /* We need to make up for the half gutter that is added to the left and right of a column, between the small and medium breakpoints */
+    const additionalMargin = smallAndUp ? (margin - gutter) / 2 : 0;
+    return css `
+      padding-left: ${numToPx(margin / 2 + additionalMargin)};
+      padding-right: ${numToPx(margin / 2 + additionalMargin)};
+      margin: 0 auto;
+      max-width: ${theme.breakpoint.large + margin}px;
+      width: 100%;
+
+      ${isNested
+        ? `
+      margin-left: -${numToPx(margin / 2)};
+      margin-right: -${numToPx(margin / 2)};
+      width: auto;
+      max-width: 200%; /* max width none not supported in RN */
+    `
+        : null}
+    `;
+});
+const WidthRow = styledComponentWithBreakpoints(StyledRow);
+const RowInner = styled.View `
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
+const Row = ({ children, ...rest }) => (_jsx(WidthRow, { ...rest, children: _jsx(RowInner, { children: children }) }));
+export { Row };

package/dist/esm/src/components/Grid/index.js

@@ -0,0 +1,2 @@
+export { Col } from './Col';
+export { Row } from './Row';

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const StyledHeading = styled.Text(({ theme, smallAndUp, inverted, level, variant }) => {
+    const fontSize = theme.font.size[level].mediaQuery[smallAndUp ? 'lg' : 'sm'];
+    const lineHeight = numToPx(theme.font.lineHeight[level].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    const letterSpacing = numToPx(theme.font.letterSpacing[level].mediaQuery[smallAndUp ? 'lg' : 'sm']);
+    const color = inverted
+        ? theme.color.brand.onBrand
+        : variant === 'surface'
+            ? theme.color.surface.onSurface
+            : theme.color.brand.brand;
+    // H1 & H2 are black, others bold
+    const family = level === 'xl' || level === '2xl' ? 'bold' : 'black';
+    return css `
+      font-family: ${theme.native.font.family[family]};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${lineHeight};
+      letter-spacing: ${letterSpacing};
+      color: ${color};
+    `;
+});
+const Heading = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledHeading, { 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" });

package/dist/esm/src/components/HintText/HintText.js

@@ -0,0 +1,20 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledHintText = styled.Text(({ theme, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return css `
+    margin-top: ${numToPx(theme.space[100])};
+    margin-bottom: ${numToPx(theme.space[100])};
+    font-family: ${theme.native.font.family.book};
+    font-size: ${numToPx(fontSize)};
+    line-height: ${numToPx(smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm)};
+    color: ${theme.color.surface.onSurfaceVariant};
+  `;
+});
+const HintText = styledComponentWithBreakpoints(StyledHintText);
+export { HintText };

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

@@ -0,0 +1,11 @@
+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 }) => {
+    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;
+};

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

@@ -0,0 +1,80 @@
+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 }) => {
+    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) => {
+                    setFocused(true);
+                    if (onFocus) {
+                        onFocus(event);
+                    }
+                }, onBlur: (event) => {
+                    setFocused(false);
+                    if (onBlur) {
+                        onBlur(event);
+                    }
+                } }), 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;
+    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/src/components/LabelText/LabelText.js

@@ -0,0 +1,19 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledLabelText = styled.Text(({ theme, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    const lineHeight = smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm;
+    return css `
+    font-family: ${theme.native.font.family.bold};
+    line-height: ${numToPx(lineHeight)};
+    color: ${theme.color.surface.onSurface};
+    font-size: ${numToPx(fontSize)};
+  `;
+});
+const LabelText = styledComponentWithBreakpoints(StyledLabelText);
+export { LabelText };

package/dist/esm/src/components/LineThrough/LineThrough.js

@@ -0,0 +1,4 @@
+import styled from '../../styled.native';
+export const LineThrough = styled.Text `
+  text-decoration: line-through;
+`;

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

@@ -0,0 +1,24 @@
+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 StyledText = styled.Text(({ theme }) => css `
+    font-family: ${theme.native.font.family.book};
+    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
+    color: ${theme.color.surface.link};
+    text-decoration: underline;
+    text-decoration-color: ${theme.color.surface.link};
+  `);
+const StyledIcon = styled(Icon)(({ theme }) => css `
+    color: ${theme.color.surface.link};
+  `);
+const TextLink = ({ children, opensInNewWindow = false, accessibilityLabel, ref, ...rest }) => {
+    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" })] }))] }));
+};
+export { Link, TextLink };

package/dist/esm/src/components/List/List.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from 'react';
+import { View } from 'react-native';
+import { getValidChildren } from '../../utils';
+import { Margin } from '../Margin';
+import { Stack } from '../Stack';
+import { FlexRow, LiContent, SquareBullet, TextBullet } from './styled';
+const ListItem = ({ children, showBullets = true, prefix, }) => {
+    return (_jsxs(FlexRow, { children: [prefix ? (_jsx(TextBullet, { children: prefix })) : (_jsx(SquareBullet, { visible: showBullets })), _jsx(LiContent, { children: children })] }));
+};
+const renderList = ({ children, listType, showBullets, }) => {
+    const validChildren = getValidChildren(children);
+    return Children.map(validChildren, (child, index) => (_jsx(ListItem, { prefix: listType === 'ol' ? `${index + 1}.` : undefined, showBullets: showBullets, children: child })));
+};
+const Li = ({ children }) => {
+    return _jsx(View, { style: { flexDirection: 'column' }, children: children });
+};
+const Ul = (props) => {
+    const { children, showBullets } = props;
+    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ul', showBullets }) }) }));
+};
+const Ol = (props) => {
+    const { children } = props;
+    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ol' }) }) }));
+};
+export { Li, Ol, Ul };

package/dist/esm/src/components/List/index.js

@@ -0,0 +1 @@
+export { Li, Ol, Ul } from './List';