@ovotech/element-native 3.8.1 → 4.0.0-canary-a872093-246

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

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isElement as isReactElement } from 'react-is';
+import { Dimensions } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import { CellText, RowHeading, TableCell, TableHeaderText, TableRow as StyledTableRow, SeparatorRowText, StyledSeparatorRow, } from './styles';
+export var TableRow = function (_a) {
+    var data = _a.data, index = _a.index, striped = _a.striped, rowHeadings = _a.rowHeadings, columnWidths = _a.columnWidths;
+    var breakpoints = useBreakpoint();
+    var cells = data.map(function (cellData, i) {
+        if (typeof cellData === 'object' &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('isSeparator')) &&
+            (cellData === null || cellData === void 0 ? void 0 : cellData.hasOwnProperty('content'))) {
+            return (_jsx(StyledSeparatorRow, { testID: "separatorRow", width: Dimensions.get('window').width, children: _jsx(SeparatorRowText, __assign({}, breakpoints, { children: cellData === null || cellData === void 0 ? void 0 : cellData.content })) }, i));
+        }
+        if (rowHeadings && i === 0) {
+            return (_createElement(RowHeading, __assign({}, breakpoints, { key: i, testID: "rowHeader", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(TableHeaderText, __assign({}, breakpoints, { children: cellData })))));
+        }
+        return (_createElement(TableCell, __assign({}, breakpoints, { key: i, testID: "cell", cellWidth: columnWidths[i] }), isReactElement(cellData) ? (cellData) : (_jsx(CellText, __assign({}, breakpoints, { children: cellData })))));
+    });
+    return (_jsx(StyledTableRow, { stripe: striped && index % 2 === 0, children: cells }));
+};

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

@@ -0,0 +1,3 @@
+export { DataTable } from './DataTable';
+export * from './styles';
+export * from './types';

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

@@ -0,0 +1,61 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export var StyledTableContainer = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), numToPx(core.borderWidth.small), semantic.border.differentiated);
+});
+export var TableHeader = styled.View(function (_a) {
+    var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[1]), numToPx(core.space[1]), cellWidth === 'auto' ? 1 : 0, cellWidth);
+});
+export var TableHeaderText = styled.Text(function (_a) {
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core, smallAndUp = _a.smallAndUp;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "])), core.fontFamily.bodyBold.native, numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small']), numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']), semantic.message.base);
+});
+export var TableCaptionText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "])), core.fontFamily.bodyBold.native, numToPx(core.fontSize.heading4[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.heading4[smallAndUp ? 'large' : 'small']), semantic.message.branded);
+});
+export var CellText = styled.Text(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), core.fontFamily.body.native, numToPx(core.lineHeight.body.large), numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']));
+});
+export var TableCaption = styled.View(function (_a) {
+    var core = _a.theme.core;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), numToPx(core.space[4]), numToPx(core.space[2]));
+});
+export var TableRow = styled.View(function (_a) {
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core, stripe = _a.stripe;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), stripe
+        ? semantic.surface.cutout
+        : semantic.surface.base, stripe ? '0px' : numToPx(core.borderWidth.small), stripe
+        ? 'transparent'
+        : "".concat(semantic.border.differentiated));
+});
+export var TableRowHeading = styled.View(function (_a) {
+    var _b = _a.theme, semantic = _b.semantic, core = _b.core;
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "], ["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "])), semantic.surface.base, numToPx(core.borderWidth.small), semantic.border.functional);
+});
+export var TableBody = styled.View(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"], ["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"])));
+export var TableCell = styled.View(function (_a) {
+    var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[2]), numToPx(core.space[2]), cellWidth, cellWidth === 'auto' ? 1 : 0);
+});
+export var RowHeading = styled.View(function (_a) {
+    var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[2]), numToPx(core.space[2]), cellWidth, cellWidth === 'auto' ? 1 : 0);
+});
+export var StyledSeparatorRow = styled.View(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, width = _a.width;
+    var minWidth = width ? "".concat(width - core.space[2] * 2, "px") : '100%';
+    return "\n      min-width: ".concat(minWidth, ";\n      flex: 1;\n      flex-direction: row;\n      background-color: ").concat(semantic.surface.elevated, ";\n      padding: ").concat(numToPx(core.space[1]), " ").concat(numToPx(core.space[2]), ";\n    ");
+});
+export var SeparatorRowText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return "\n  flex: 1;\n  font-family: ".concat(core.fontFamily.body.native, ";\n  font-size: ").concat(numToPx(core.fontSize.small[smallAndUp ? 'large' : 'small']), ";\n  line-height: ").concat(numToPx(core.lineHeight.small[smallAndUp ? 'large' : 'small']), ";\n  color: ").concat(semantic.message.secondary, ";\n");
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

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

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

@@ -0,0 +1,63 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef, createRef } from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { mergeRefs, getText } 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';
+var InlineFields = styled.View(function (_a) {
+    var stretch = _a.stretch, core = _a.theme.core;
+    var margin = numToPx(core.space[1]);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-left: -", ";\n      margin-right: -", ";\n      flex-direction: row;\n      ", "\n    "], ["\n      margin-left: -", ";\n      margin-right: -", ";\n      flex-direction: row;\n      ", "\n    "])), margin, margin, stretch ? '' : "width: 265px;");
+});
+var SubField = styled(Stack)(function (_a) {
+    var core = _a.theme.core;
+    var padding = numToPx(core.space[1]);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-right: ", ";\n    padding-left: ", ";\n  "], ["\n    padding-right: ", ";\n    padding-left: ", ";\n  "])), padding, padding);
+});
+var DayField = styled(SubField)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 25%;\n"], ["\n  width: 25%;\n"])));
+var MonthField = styled(SubField)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 25%;\n"], ["\n  width: 25%;\n"])));
+var YearField = styled(SubField)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 50%;\n"], ["\n  width: 50%;\n"])));
+export var DateField = forwardRef(function (_a, ref) {
+    var label = _a.label, hint = _a.hint, error = _a.error, _b = _a.optional, optional = _b === void 0 ? false : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, onChange = _a.onChange, value = _a.value, testID = _a.testID, _d = _a.editable, editable = _d === void 0 ? false : _d;
+    var hasError = !!error;
+    var handleChange = function (key) { return function (datePartValue) {
+        var _a;
+        onChange &&
+            onChange(__assign(__assign({}, value), (_a = {}, _a[key] = datePartValue, _a)));
+    }; };
+    var dayRef = createRef();
+    var monthRef = createRef();
+    var yearRef = createRef();
+    var accessibilityLabel = function (labelText) {
+        return [labelText, getText(hint), getText(error)].filter(Boolean).join(', ');
+    };
+    var focusRef = function (internalRef) { return function () {
+        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 })] }), _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: "".concat(testID, "-month"), stretch: true, editable: editable })] }), _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: "".concat(testID, "-year"), stretch: true, editable: editable })] })] })] }) }));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

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

package/dist/esm/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import { getValidChildren } from '../../utils';
+import { Dd, Dl, Dt } from './styled';
+var DescriptionList = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    var validChildren = getValidChildren(children);
+    return (_jsx(Dl, __assign({}, rest, { children: Children.map(validChildren, function (child, index) {
+            return cloneElement(child, {
+                index: index,
+            });
+        }) })));
+};
+var DescriptionItem = function (_a) {
+    var label = _a.label, children = _a.children, index = _a.index, rest = __rest(_a, ["label", "children", "index"]);
+    return (_jsxs(_Fragment, { children: [_jsx(Dt, { style: index === 0 ? { marginTop: 0 } : undefined, children: label }), _jsx(Dd, __assign({}, rest, { children: children }))] }));
+};
+export { DescriptionList, DescriptionItem };

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

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

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

@@ -0,0 +1,58 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+export var Dl = styled.View(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return "\n  flex-direction: column;\n  flex: 1;\n  margin-vertical: ".concat(smallAndUp ? numToPx(core.space[3]) : numToPx(core.space[2]), ";\n");
+});
+var StyledDtText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    flex: 1;\n  "])), core.fontFamily.bodyBold.native, numToPx(core.lineHeight.body.small), numToPx(core.fontSize.body.small), semantic.message.base);
+});
+var DtText = styledComponentWithBreakpoints(StyledDtText);
+var StyledDtItem = styled.View(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: ", ";\n    flex-direction: row;\n  "], ["\n    margin-top: ", ";\n    flex-direction: row;\n  "])), numToPx(core.space[smallAndUp ? 4 : 3]));
+});
+var DtItem = styledComponentWithBreakpoints(StyledDtItem);
+export var Dt = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (_jsx(DtItem, __assign({}, rest, { children: _jsx(DtText, { children: children }) })));
+};
+var StyledDdText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    font-size: ", ";\n    flex: 1;\n  "])), core.fontFamily.body.native, numToPx(core.lineHeight.body.small), semantic.message.secondary, numToPx(core.fontSize.body.small));
+});
+export var Dd = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (_jsx(View, __assign({ style: { flexDirection: 'row' } }, rest, { children: _jsx(StyledDdText, { children: children }) })));
+};
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,55 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { forwardRef, useState } from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon';
+var DisclosureButton = styled.TouchableOpacity(function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "]))); });
+var DisclosureButtonIcon = styled(Icon)(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, expanded = _a.expanded, smallAndUp = _a.smallAndUp;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "])), expanded ? 'rotate(0deg)' : 'rotate(-90deg)', numToPx(core.space[smallAndUp ? 2 : 1]), semantic.message.link);
+});
+var DisclosureButtonText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small']), numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small']), semantic.message.link, semantic.message.link);
+});
+var DisclosurePanel = styled.View(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", ";\n  "], ["\n    margin-top: ", ";\n    padding-left: ", ";\n  "])), numToPx(core.space[smallAndUp ? 3 : 2]), numToPx(core.space[smallAndUp ? 2 : 1]));
+});
+export var Disclosure = forwardRef(function (_a, ref) {
+    var children = _a.children, title = _a.title, _b = _a.expanded, expanded = _b === void 0 ? false : _b, onToggle = _a.onToggle, rest = __rest(_a, ["children", "title", "expanded", "onToggle"]);
+    var _c = useState(expanded), isExpanded = _c[0], setIsExpanded = _c[1];
+    var breakpoints = useBreakpoint();
+    return (_jsxs(_Fragment, { children: [_jsxs(DisclosureButton, __assign({ onPress: function () {
+                    setIsExpanded(!isExpanded);
+                    onToggle && onToggle(!isExpanded);
+                }, ref: ref, accessibilityState: { expanded: isExpanded } }, rest, { children: [_jsx(DisclosureButtonIcon, __assign({ name: "caret-down" }, breakpoints, { size: 14, expanded: isExpanded })), _jsx(DisclosureButtonText, __assign({}, breakpoints, { children: title }))] })), isExpanded && (_jsx(DisclosurePanel, __assign({}, breakpoints, { children: children })))] }));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

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

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from '../../styled.native';
+var StyledDivider = styled.View(function (_a) {
+    var semantic = _a.theme.semantic, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "], ["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "])), type === 'default'
+        ? semantic.border.graphic
+        : semantic.border.differentiated, width);
+});
+export var Divider = function (_a) {
+    var type = _a.type, width = _a.width;
+    return _jsx(StyledDivider, { type: type, width: width });
+};
+var templateObject_1;

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

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

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

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '../../styled.native';
+export var Em = styled.Text(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: 'System font';\n  font-style: italic;\n"], ["\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: 'System font';\n  font-style: italic;\n"])));
+var templateObject_1;

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

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

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

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { forwardRef } from 'react';
+import { Field } from '../Field';
+import { EmailInput } from '../EmailInput';
+export var EmailField = forwardRef(function (_a, ref) {
+    var rest = __rest(_a, []);
+    return (_jsx(Field, __assign({}, rest, { ref: ref, children: _jsx(EmailInput, {}) })));
+});

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

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

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

@@ -0,0 +1,16 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Input } from '../Input/Input';
+var EmailInput = forwardRef(function (props, ref) { return (_jsx(Input, __assign({}, props, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+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,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef, useEffect } from 'react';
+import { findNodeHandle, AccessibilityInfo, } from 'react-native';
+import { Ul, Li } from '../List';
+import { ErrorNotification } from '../Notification';
+import { P } from '../P';
+var ErrorSummaryNotification = function (_a) {
+    var errors = _a.errors, scrollViewRef = _a.scrollViewRef, _b = _a.scrollPos, scrollPos = _b === void 0 ? { x: 0, y: 0 } : _b, rest = __rest(_a, ["errors", "scrollViewRef", "scrollPos"]);
+    var ref = createRef();
+    useEffect(function () {
+        if (errors.length && scrollViewRef.current && ref.current) {
+            scrollViewRef.current.scrollTo(scrollPos);
+            // Timeout ensures element receives focus after current action.
+            setTimeout(function () {
+                var 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, __assign({ ref: ref }, rest, { children: errors.length === 0 ? null : (_jsx(Ul, { children: errors.map(function (_a) {
+                var message = _a.message, fieldId = _a.id;
+                return (_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,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+var StyledErrorText = styled.Text(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n    "])), core.fontFamily.body.native, numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), numToPx(fontSize), semantic.message.error);
+});
+var ErrorText = styledComponentWithBreakpoints(StyledErrorText);
+export { ErrorText };
+var templateObject_1;

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

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

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

@@ -0,0 +1,58 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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, isValidElement, createRef, forwardRef, } 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 var Field = forwardRef(function (_a, ref) {
+    var children = _a.children, label = _a.label, _b = _a.optional, optional = _b === void 0 ? false : _b, hint = _a.hint, error = _a.error, fullWidth = _a.fullWidth, _c = _a.characters, characters = _c === void 0 ? 25 : _c, _d = _a.affixWidth, affixWidth = _d === void 0 ? 0 : _d, rest = __rest(_a, ["children", "label", "optional", "hint", "error", "fullWidth", "characters", "affixWidth"]);
+    var hasError = !!error;
+    var inputRef = createRef();
+    var labelText = optional ? "".concat(label, " (optional)") : label;
+    var 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: function () {
+                        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: "".concat(Math.ceil(characters * 0.8 * 16) + affixWidth, "px"), fullWidth: fullWidth, children: Children.map(children, function (child) {
+                        return isValidElement(child)
+                            ? cloneElement(child, __assign({ invalid: hasError || undefined, ref: mergeRefs(inputRef, ref), accessibilityLabel: accessibilityLabel }, rest))
+                            : child;
+                    }) })] }) }));
+});

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

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