@ovotech/element-native 5.3.0 → 5.4.1

package/dist/esm/components/Display3/Display3.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+const StyledDisplay3 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.display3.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.display3.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.display3.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
+      color: ${inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded};
+    `;
+});
+export const Display3 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledDisplay3, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
+};

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

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

package/dist/esm/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: { semantic }, type = 'default', width = '100%' }) => {
+    return css `
+      height: 1px;
+      background: ${type === 'default'
+        ? semantic.border.graphic
+        : semantic.border.differentiated};
+      width: ${width};
+    `;
+});
+export const Divider = ({ type, width }) => {
+    return _jsx(StyledDivider, { type: type, width: width });
+};

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

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

package/dist/esm/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';
+  font-style: italic;
+`;

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

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

package/dist/esm/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 = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(EmailInput, { ref: ref }) }));
+};

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

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

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../Input/Input';
+const EmailInput = (props) => (_jsx(Input, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ...props }));
+export { EmailInput };

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

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

package/dist/esm/components/ErrorSummaryNotification/ErrorSummaryNotification.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef, useEffect } from 'react';
+import { findNodeHandle, AccessibilityInfo, } from 'react-native';
+import { Ul, Li } from '../List';
+import { ErrorNotification } from '../Notification';
+import { P } from '../P';
+const ErrorSummaryNotification = ({ errors, scrollViewRef, scrollPos = { x: 0, y: 0 }, ...rest }) => {
+    const ref = createRef();
+    useEffect(() => {
+        if (errors.length && scrollViewRef.current && ref.current) {
+            scrollViewRef.current.scrollTo(scrollPos);
+            // Timeout ensures element receives focus after current action.
+            setTimeout(() => {
+                const node = findNodeHandle(ref.current);
+                node && AccessibilityInfo.setAccessibilityFocus(node);
+            }, 200);
+        }
+        // This means that errors needs to have referential integrity otherwise the notification
+        // will be focused all the time.
+    }, [errors, scrollViewRef.current, ref.current]);
+    return (_jsx(ErrorNotification, { ref: ref, ...rest, children: errors.length === 0 ? null : (_jsx(Ul, { children: errors.map(({ message, id: fieldId }) => (_jsx(Li, { children: _jsx(P, { children: message }) }, fieldId))) })) }));
+};
+export { ErrorSummaryNotification };

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

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

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

@@ -0,0 +1,18 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledErrorText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    return css `
+      margin-top: ${numToPx(core.space[1])};
+      margin-bottom: ${numToPx(core.space[1])};
+      font-family: ${core.fontFamily.body.native};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small)};
+      color: ${semantic.message.error};
+    `;
+});
+const ErrorText = styledComponentWithBreakpoints(StyledErrorText);
+export { ErrorText };

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

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

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

@@ -0,0 +1,38 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, createRef, } 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: 1, 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 {
+                                // @ts-ignore
+                                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/components/Field/index.js

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

package/dist/esm/components/FilterSelect/FilterSelect.js

@@ -0,0 +1,67 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { Fragment, useRef, useState } from 'react';
+import { Dimensions, Modal, ScrollView, TouchableWithoutFeedback, View, } from 'react-native';
+import styled, { css, useTheme } from '../../styled.native';
+import { Divider } from '../Divider';
+import { Icon } from '../Icon';
+import { Margin } from '../Margin';
+import { P } from '../P';
+import { Strong } from '../Strong';
+const SelectInput = styled.TouchableOpacity(({ theme: { core } }) => {
+    return css `
+    flex-direction: row;
+    align-items: center;
+    background-color: ${core.color.brand.white};
+    border-radius: ${numToPx(core.radius.max)};
+    padding-left: ${numToPx(core.space[2])};
+    padding-right: ${numToPx(core.space[1])};
+  `;
+});
+const DropdownWrapper = styled.View(({ theme: { core } }) => css `
+    width: 100%;
+    height: 100%;
+
+    /* 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
+    background-color: ${core.color.neutral.darkest}40;
+  `);
+const DropdownContainer = styled.View(({ theme: { core } }) => css `
+    flex: 1;
+    min-width: 25%;
+    max-height: 100%;
+    border-radius: ${numToPx(core.radius.large)};
+    background-color: ${core.color.brand.white};
+    position: absolute;
+  `);
+const SelectOption = styled.TouchableOpacity(({ theme: { core } }) => css `
+    flex-direction: row;
+    align-items: center;
+    padding: 0 ${numToPx(core.space[2])};
+  `);
+export const FilterSelect = ({ options = [], defaultSelected = { label: '', value: 'default' }, onSelected = () => null, testID = 'select', rightText, leftText, dropdownDirection = 'right', accessibilityHint, }) => {
+    const theme = useTheme();
+    const selectRef = useRef(null);
+    const [isOpen, setOpen] = useState(false);
+    const [selected, setSelected] = useState(defaultSelected);
+    const [measure, setMeasure] = useState(null);
+    const handleOptionPress = (val) => {
+        onSelected(val);
+        setOpen(false);
+        setSelected(val);
+    };
+    return (_jsxs(View, { style: { flexDirection: 'row' }, children: [leftText ? _jsxs(P, { children: [leftText, " "] }) : null, _jsxs(SelectInput, { ref: selectRef, testID: testID, onPress: () => setOpen(!isOpen), onLayout: () => {
+                    selectRef.current?.measureInWindow((x, y, width) => {
+                        setMeasure({
+                            top: y - theme.core.space[3],
+                            left: x,
+                            right: Dimensions.get('window').width - (x + width),
+                        });
+                    });
+                }, accessible: true, accessibilityRole: "combobox", accessibilityHint: accessibilityHint, children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
+                                ? ''
+                                : selected.collapsedLabel ?? selected.label }) }), _jsx(Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? _jsxs(P, { children: [" ", rightText] }) : null, _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(TouchableWithoutFeedback, { onPress: () => setOpen(false), children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: {
+                                top: measure?.top,
+                                left: dropdownDirection === 'right' ? measure?.left : undefined,
+                                right: dropdownDirection === 'left' ? measure?.right : undefined,
+                            }, children: _jsx(ScrollView, { nestedScrollEnabled: true, children: options.map((option, i) => (_jsxs(Fragment, { children: [_jsx(SelectOption, { accessible: true, accessibilityRole: "button", onPress: () => handleOptionPress(option), children: _jsx(Margin, { vertical: 3, children: _jsx(P, { children: _jsx(Strong, { children: option.label }) }) }) }), i === options.length - 1 ? null : (_jsx(Divider, { type: "differentiated" }))] }, option.label))) }) }) }) }) })] }));
+};

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

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

package/dist/esm/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/components/FormGroup/index.js

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

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

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

package/dist/esm/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: { core }, isNested, smallAndUp }) => {
+    const gutter = [core.space[4], core.space[8]];
+    const halfGutter = gutter.map(g => g / 2);
+    const smallScreen = !smallAndUp;
+    return css `
+      padding-left: ${numToPx(smallScreen ? halfGutter[0] : halfGutter[1])};
+      padding-right: ${numToPx(smallScreen ? halfGutter[0] : halfGutter[1])};
+      margin: 0 auto;
+      width: ${core.breakpoint.large}px;
+      max-width: 100%;
+      margin-bottom: -${numToPx(smallScreen ? gutter[0] : gutter[1])};
+
+      ${isNested
+        ? `
+      margin-left: -${numToPx(smallScreen ? gutter[0] : gutter[1])};
+      margin-right: -${numToPx(smallScreen ? gutter[0] : gutter[1])};
+      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/components/Grid/index.js

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

package/dist/esm/components/Heading1/Heading1.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+const StyledHeading1 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.heading1.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.heading1.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.heading1.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
+      color: ${inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded};
+    `;
+});
+export const Heading1 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledHeading1, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
+};

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

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

package/dist/esm/components/Heading2/Heading2.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+const StyledHeading2 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.heading2.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.heading2.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.heading2.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.extraCompressed)};
+      color: ${inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded};
+    `;
+});
+export const Heading2 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledHeading2, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
+};

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

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

package/dist/esm/components/Heading3/Heading3.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+const StyledHeading3 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.heading3.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.heading3.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.heading3.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.compressed)};
+      color: ${inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded};
+    `;
+});
+export const Heading3 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledHeading3, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
+};

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

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

package/dist/esm/components/Heading4/Heading4.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber, numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const calculateLetterSpacing = (fontSize, letterSpacing) => {
+    return numToPx(pxToNumber(fontSize) * letterSpacing);
+};
+const StyledHeading4 = styled.Text(({ theme: { core, semantic, component }, smallAndUp, inverted }) => {
+    const fontSize = component.heading4.fontSize[smallAndUp ? 'large' : 'small'];
+    return css `
+      font-family: ${component.heading4.fontFamily};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(component.heading4.lineHeight[smallAndUp ? 'large' : 'small'])};
+      letter-spacing: ${calculateLetterSpacing(String(fontSize), core.letterSpacing.compressed)};
+      color: ${inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded};
+    `;
+});
+export const Heading4 = ({ accessibilityRole = 'header', ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledHeading4, { accessible: true, accessibilityRole: accessibilityRole, ...breakpoints, ...rest }));
+};

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

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

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

@@ -0,0 +1,18 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledHintText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    return css `
+      margin-top: ${numToPx(core.space[1])};
+      margin-bottom: ${numToPx(core.space[1])};
+      font-family: ${core.fontFamily.body.native};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small)};
+      color: ${semantic.border.functional};
+    `;
+});
+const HintText = styledComponentWithBreakpoints(StyledHintText);
+export { HintText };

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

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

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

@@ -0,0 +1,13 @@
+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, color, testID, ...rest }) => {
+    const icons = useIcons();
+    const { semantic } = useContext(ThemeContext);
+    // @ts-ignore to support additional icons.
+    const Svg = name && icons[name];
+    return Svg ? (_jsx(Svg, { testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, 
+        // @ts-ignore this is valid.
+        color: color ?? semantic.message.base, width: size, height: size, ...rest })) : null;
+};

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

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

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

@@ -0,0 +1,78 @@
+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: { core }, side, focused }) => {
+    return css `
+    position: absolute;
+    z-index: 1;
+    top: ${focused ? '16px' : '14px'};
+    ${side === 'left' ? `left: ${numToPx(core.space[2])}` : ''};
+    ${side === 'right' ? `right: ${numToPx(core.space[2])}` : ''};
+  `;
+});
+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, 
+                // @ts-ignore
+                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: { core, semantic }, focused }) => css `
+    align-self: stretch;
+    border-radius: ${numToPx(core.radius.small)};
+    border-width: 0;
+    border-style: solid;
+    border-color: ${semantic.border.functional};
+    flex-direction: row;
+
+    ${focused
+    ? `
+      border-width: ${numToPx(core.borderWidth.small)};
+      border-color: ${semantic.focus.outline};
+      padding: 2px;
+      margin: -4px;`
+    : null}
+  `);
+const StyledInput = styled.TextInput(({ theme: { core, semantic }, invalid, smallAndUp, iconLeft, iconRight, hasRightSlot, }) => {
+    const fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    const errorStyles = invalid
+        ? `
+        border-color: ${semantic.message.error};
+      `
+        : '';
+    return css `
+      font-family: ${core.fontFamily.body.native};
+      color: ${semantic.message.base};
+      font-size: ${numToPx(fontSize)};
+      height: ${numToPx(core.space[11])};
+      line-height: 18px; /* Corrects for responsive line height in fixed height input */
+      border: ${numToPx(core.borderWidth.small)} solid
+        ${semantic.border.functional};
+      border-radius: ${numToPx(core.radius.small)};
+      padding: 0 ${numToPx(core.space[2])};
+      flex: 1;
+
+      ${iconLeft ? `padding-left: ${numToPx(core.space[8])};` : ''}
+      ${iconRight || hasRightSlot
+        ? `padding-right: ${numToPx(core.space[8])};`
+        : ''}
+
+          ${errorStyles}
+    `;
+});
+export { Input };

package/dist/esm/components/Label/Label.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+const StyledLabel = styled.Text(({ theme: { semantic, component }, smallAndUp, inverted }) => css `
+    font-family: ${component.label.fontFamily};
+    font-size: ${numToPx(component.label.fontSize[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(component.label.lineHeight[smallAndUp ? 'large' : 'small'])};
+    color: ${inverted ? semantic.inverted.message.base : semantic.message.base};
+  `);
+export const Label = ({ ref, ...props }) => (_jsx(StyledLabel, { ...props, ref: ref }));

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

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

package/dist/esm/components/LabelText/LabelText.js

@@ -0,0 +1,16 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledLabelText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    return css `
+      font-family: ${core.fontFamily.bodyBold.native};
+      line-height: ${numToPx(core.lineHeight.body.small)};
+      color: ${semantic.message.base};
+      font-size: ${numToPx(fontSize)};
+    `;
+});
+const LabelText = styledComponentWithBreakpoints(StyledLabelText);
+export { LabelText };

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

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

package/dist/esm/components/Lead/Lead.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+const StyledLead = styled.Text(({ theme: { semantic, component }, smallAndUp, inverted }) => css `
+    font-family: ${component.lead.fontFamily};
+    font-size: ${numToPx(component.lead.fontSize[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(component.lead.lineHeight[smallAndUp ? 'large' : 'small'])};
+    color: ${inverted
+    ? semantic.inverted.message.link
+    : semantic.message.branded};
+  `);
+export const Lead = ({ ref, ...props }) => (_jsx(StyledLead, { ...props, ref: ref }));

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

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

package/dist/esm/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/components/LineThrough/index.js

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