@ovotech/element-native 2.0.0 → 2.0.2

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

@@ -0,0 +1,15 @@
+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, { css } from '../../styled.native';
+import { calculateLineHeight } from '../../theme';
+import { styledComponentWithBreakpoints } from '../../utils';
+var StyledHintText = styled.Text(function (_a) {
+    var field = _a.theme.field, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), field.fontFamily, field.hint.fontWeight, fontSize, calculateLineHeight(fontSize, field.lineHeight), field.hint.color);
+});
+var HintText = styledComponentWithBreakpoints(StyledHintText);
+export { HintText };
+var templateObject_1;

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

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

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

@@ -0,0 +1,35 @@
+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 React, { useContext } from 'react';
+import { useIcons } from '../../providers';
+import { ThemeContext } from '../../styled.native';
+export var Icon = function (_a) {
+    var name = _a.name, size = _a.size, color = _a.color, testID = _a.testID, rest = __rest(_a, ["name", "size", "color", "testID"]);
+    var icons = useIcons();
+    var colors = useContext(ThemeContext).colors;
+    // @ts-ignore to support additional icons.
+    var Svg = name && icons[name];
+    return Svg ? (React.createElement(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), 
+        // @ts-ignore this is valid.
+        color: color !== null && color !== void 0 ? color : colors.body, 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/CurrencyInput.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);
+};
+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 React, { forwardRef, createRef } from 'react';
+import { mergeRefs } from '../../utils';
+import { NumberInput } from './NumberInput';
+var CurrencyInput = forwardRef(function (_a, ref) {
+    var _b = _a.currency, currency = _b === void 0 ? 'GBP' : _b, invalid = _a.invalid, _c = _a.accessibilityLabel, accessibilityLabel = _c === void 0 ? '' : _c, rest = __rest(_a, ["currency", "invalid", "accessibilityLabel"]);
+    var inputRef = createRef();
+    var updatedAccessibilityLabel = "".concat(accessibilityLabel, " ").concat(currency === 'GBP' ? 'pounds' : currency === 'EUR' ? 'euro' : 'dollar').trim();
+    var iconName = currency === 'GBP' ? 'pound' : currency === 'EUR' ? 'euro' : 'dollar';
+    return (React.createElement(NumberInput, __assign({}, rest, { invalid: invalid, accessibilityLabel: updatedAccessibilityLabel, ref: mergeRefs(ref, inputRef), iconLeft: iconName })));
+});
+export { CurrencyInput };

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

@@ -0,0 +1,15 @@
+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 React, { forwardRef } from 'react';
+import { Input } from './Input';
+var EmailInput = forwardRef(function (props, ref) { return (React.createElement(Input, __assign({}, props, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+export { EmailInput };

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

@@ -0,0 +1,76 @@
+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 React, { useState, forwardRef, useContext } from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled, { css, ThemeContext } from '../../styled.native';
+import { pxToNumber } from '../../utils';
+import { Icon } from '../Icon/Icon';
+var StyledIcon = styled(Icon)(function (_a) {
+    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, side = _a.side, focused = _a.focused;
+    var distance = (pxToNumber(input.height) - pxToNumber(input.icon.size)) / 2 +
+        (focused ? pxToNumber(focusRing.distance) : 0);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", "px;\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    width: ", ";\n    z-index: 1;\n    top: ", "px;\n    ", ";\n    ", ";\n  "])), input.icon.size, distance, side === 'left' ? "left: ".concat(distance, "px") : '', side === 'right' ? "right: ".concat(distance, "px") : '');
+});
+var Input = forwardRef(function (_a, ref) {
+    var onFocus = _a.onFocus, onBlur = _a.onBlur, style = _a.style, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight"]);
+    var _b = useState(false), focused = _b[0], setFocused = _b[1];
+    var breakpoints = useBreakpoint();
+    var input = useContext(ThemeContext).input;
+    return (React.createElement(InputWrapper, { focused: focused },
+        iconLeft ? (React.createElement(StyledIcon, { name: iconLeft, size: pxToNumber(input.icon.size), focused: focused, pointerEvents: "none", side: "left" })) : null,
+        React.createElement(StyledInput, __assign({}, rest, breakpoints, { iconLeft: !!iconLeft, iconRight: !!iconRight, style: style, 
+            // @ts-ignore
+            ref: ref, onFocus: function (event) {
+                setFocused(true);
+                if (onFocus) {
+                    onFocus(event);
+                }
+            }, onBlur: function (event) {
+                setFocused(false);
+                if (onBlur) {
+                    onBlur(event);
+                }
+            } })),
+        iconRight ? (React.createElement(StyledIcon, { name: iconRight, size: pxToNumber(input.icon.size), focused: focused, pointerEvents: "none", side: "right" })) : null));
+});
+var InputWrapper = styled.View(function (_a) {
+    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, focused = _a.focused;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 0px;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 0px;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), input.background, input.borderRadius, focusRing.color, focused
+        ? "\n      border-width: ".concat(focusRing.width, ";\n      padding: ").concat(focusRing.distance, ";\n      margin: -").concat(pxToNumber(focusRing.width) +
+            pxToNumber(focusRing.distance), "px;")
+        : null);
+});
+var StyledInput = styled.TextInput(function (_a) {
+    var input = _a.theme.input, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight;
+    var fontSize = smallAndUp ? input.fontSize[1] : input.fontSize[0];
+    var errorStyles = invalid
+        ? "\n        border-width: ".concat(input.error.borderWidth, ";\n        border-color: ").concat(input.error.color, ";\n      ")
+        : '';
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid ", ";\n      background: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n      ", "\n    "], ["\n      font-family: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid ", ";\n      background: ", ";\n      border-radius: ", ";\n      padding: ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n      ", "\n    "])), input.fontFamily, input.fontWeight, input.color, fontSize, input.height, input.borderWidth, input.borderColor, input.background, input.borderRadius, input.padding, iconLeft ? "padding-left: ".concat(input.height, ";") : '', iconRight ? "padding-right: ".concat(input.height, ";") : '', errorStyles);
+});
+export { Input };
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,15 @@
+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 React, { forwardRef } from 'react';
+import { Input } from './Input';
+var NumberInput = forwardRef(function (props, ref) { return (React.createElement(Input, __assign({}, props, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+export { NumberInput };

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

@@ -0,0 +1,29 @@
+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 React, { forwardRef } from 'react';
+import { Input } from './Input';
+var PasswordInput = forwardRef(function (_a, ref) {
+    var _b = _a.secureTextEntry, secureTextEntry = _b === void 0 ? true : _b, props = __rest(_a, ["secureTextEntry"]);
+    return (React.createElement(Input, __assign({}, props, { keyboardType: "default", autoCapitalize: "none", autoCorrect: false, secureTextEntry: secureTextEntry, ref: ref })));
+});
+export { PasswordInput };

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

@@ -0,0 +1,15 @@
+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 React, { forwardRef } from 'react';
+import { Input } from './Input';
+var TelInput = forwardRef(function (props, ref) { return (React.createElement(Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+export { TelInput };

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

@@ -0,0 +1,15 @@
+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 React, { forwardRef } from 'react';
+import { Input } from './Input';
+var TextInput = forwardRef(function (props, ref) { return (React.createElement(Input, __assign({}, props, { keyboardType: "default", ref: ref }))); });
+export { TextInput };

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

@@ -0,0 +1,38 @@
+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 React, { forwardRef } from 'react';
+import { useBreakpoint } from '../../hooks';
+import { useTheme } from '../../styled.native';
+import { calculateLineHeight } from '../../theme';
+import { pxToNumber } from '../../utils';
+import { Input } from './Input';
+var TextareaInput = forwardRef(function (_a, ref) {
+    var _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["rows"]);
+    var input = useTheme().input;
+    var smallAndUp = useBreakpoint().smallAndUp;
+    var height = pxToNumber(input.padding) * 2 +
+        pxToNumber(calculateLineHeight(smallAndUp ? input.fontSize[1] : input.fontSize[0], input.lineHeight)) *
+            rows;
+    return (React.createElement(Input, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", style: { height: height }, ref: ref })));
+});
+export { TextareaInput };

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

@@ -0,0 +1,7 @@
+export { CurrencyInput } from './CurrencyInput';
+export { EmailInput } from './EmailInput';
+export { NumberInput } from './NumberInput';
+export { TelInput } from './TelInput';
+export { TextInput } from './TextInput';
+export { PasswordInput } from './PasswordInput';
+export { TextareaInput } from './TextareaInput';

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

@@ -0,0 +1,15 @@
+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, { css } from '../../styled.native';
+import { calculateLineHeight } from '../../theme';
+import { styledComponentWithBreakpoints } from '../../utils';
+var StyledLabelText = styled.Text(function (_a) {
+    var field = _a.theme.field, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.label.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.label.fontWeight, field.label.color, fontSize);
+});
+var LabelText = styledComponentWithBreakpoints(StyledLabelText);
+export { LabelText };
+var templateObject_1;

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

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

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

@@ -0,0 +1,138 @@
+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 React, { Children, useContext, } from 'react';
+import { View } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import styled, { css, ThemeContext } from '../../styled.native';
+import { pxToNumber, styledComponentWithBreakpoints } from '../../utils';
+import { Stack } from '../Stack';
+var UlBullet = styled.View(function (_a) {
+    var _b = _a.theme, colors = _b.colors, list = _b.list, _c = _a.visible, visible = _c === void 0 ? true : _c, smallAndUp = _a.smallAndUp;
+    var lineHeight = smallAndUp
+        ? list.listItem.lineHeight[1]
+        : list.listItem.lineHeight[0];
+    var topMargin = (pxToNumber(lineHeight) - pxToNumber(list.listItem.bulletWidth)) / 2;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-right: ", ";\n      margin-top: ", "px;\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n    "], ["\n      margin-right: ", ";\n      margin-top: ", "px;\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n    "])), list.listItem.bulletGap, topMargin, list.listItem.bulletWidth, list.listItem.bulletWidth, visible ? colors.body : 'transparent');
+});
+var StyledBullet = styled.Text(function (_a) {
+    var _b = _a.theme, text = _b.text, list = _b.list, space = _b.space, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? list.listItem.fontSize[1]
+        : list.listItem.fontSize[0];
+    var lineHeight = smallAndUp
+        ? list.listItem.lineHeight[1]
+        : list.listItem.lineHeight[0];
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-right: ", ";\n      width: ", ";\n      text-align: right;\n    "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize, list.listItem.bulletGap, space[4]);
+});
+var StyledUlItem = styled.View(function () { return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: top;\n    justify-content: center;\n  "], ["\n    flex-direction: row;\n    align-items: top;\n    justify-content: center;\n  "]))); });
+var Bullet = styledComponentWithBreakpoints(StyledBullet);
+var ListBulletItem = function (_a) {
+    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b;
+    return (React.createElement(StyledUlItem, null,
+        React.createElement(UlBullet, { visible: showBullets }),
+        children));
+};
+var ListNumberedItem = function (_a) {
+    var children = _a.children, prefix = _a.prefix;
+    return (React.createElement(View, { style: { flexDirection: 'row' } },
+        React.createElement(Bullet, null, prefix),
+        children));
+};
+var StyledList = styled.View(function (_a) {
+    var list = _a.theme.list, smallAndUp = _a.smallAndUp;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), smallAndUp ? list.marginTop[1] : list.marginTop[0], smallAndUp ? list.marginBottom[1] : list.marginBottom[0]);
+});
+var ListWrapper = styledComponentWithBreakpoints(StyledList);
+var Ul = function (_a) {
+    var children = _a.children, _b = _a.showBullets, showBullets = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "showBullets"]);
+    var list = useContext(ThemeContext).list;
+    return (React.createElement(ListWrapper, __assign({}, rest),
+        React.createElement(Stack, { spaceBetween: list.listItem.marginVertical }, Children.map(children, function (child) { return (React.createElement(ListBulletItem, { showBullets: showBullets }, child)); }))));
+};
+var Ol = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    var list = useContext(ThemeContext).list;
+    return (React.createElement(ListWrapper, __assign({}, rest),
+        React.createElement(Stack, { spaceBetween: list.listItem.marginVertical }, Children.map(children, function (child, index) { return (React.createElement(ListNumberedItem, { prefix: index + 1 + '.' }, child)); }))));
+};
+var StyledLi = styled.Text(function (_a) {
+    var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? list.listItem.fontSize[1]
+        : list.listItem.fontSize[0];
+    var lineHeight = smallAndUp
+        ? list.listItem.lineHeight[1]
+        : list.listItem.lineHeight[0];
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize);
+});
+var Li = styledComponentWithBreakpoints(StyledLi);
+var Dl = ListWrapper;
+var StyledDtText = styled.Text(function (_a) {
+    var list = _a.theme.list, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? list.listItem.fontSize[1]
+        : list.listItem.fontSize[0];
+    var lineHeight = smallAndUp
+        ? list.listItem.lineHeight[1]
+        : list.listItem.lineHeight[0];
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      font-family: ", ";\n      font-weight: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      font-weight: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), list.descriptionTerm.fontFamily, list.descriptionTerm.fontWeight, lineHeight, list.descriptionTerm.color, fontSize);
+});
+var DtText = styledComponentWithBreakpoints(StyledDtText);
+var StyledDtItem = styled.View(function (_a) {
+    var list = _a.theme.list, smallAndUp = _a.smallAndUp;
+    var marginTop = smallAndUp
+        ? list.descriptionTerm.marginTop[1]
+        : list.descriptionTerm.marginTop[0];
+    var marginBottom = smallAndUp
+        ? list.descriptionTerm.marginBottom[1]
+        : list.descriptionTerm.marginBottom[0];
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      flex-direction: row;\n    "])), marginTop, marginBottom);
+});
+var DtItem = styledComponentWithBreakpoints(StyledDtItem);
+var Dt = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React.createElement(DtItem, __assign({}, rest),
+        React.createElement(DtText, null, children)));
+};
+var StyledDdText = styled.Text(function (_a) {
+    var _b = _a.theme, text = _b.text, list = _b.list, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? list.listItem.fontSize[1]
+        : list.listItem.fontSize[0];
+    var lineHeight = smallAndUp
+        ? list.listItem.lineHeight[1]
+        : list.listItem.lineHeight[0];
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      flex: 1;\n    "])), text.fontFamily, lineHeight, text.fontWeight, text.color, fontSize);
+});
+var Dd = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    var breakpoints = useBreakpoint();
+    return (React.createElement(View, __assign({ style: { flexDirection: 'row' } }, rest),
+        React.createElement(StyledDdText, __assign({}, breakpoints), children)));
+};
+export { Ul, Ol, Li, Dl, Dt, Dd };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

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

package/dist/esm/components/Margin/Margin.js

@@ -0,0 +1,47 @@
+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 React from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+import { responsiveStyle } from '../../utils';
+var StyledMargin = styled.View(function (_a) {
+    var space = _a.theme.space, mTop = _a.mTop, mBottom = _a.mBottom, mLeft = _a.mLeft, mRight = _a.mRight, horizontal = _a.horizontal, vertical = _a.vertical, all = _a.all, breakpoints = _a.breakpoints;
+    var formatter = function (spaceKey) {
+        return spaceKey === 0 ? '0' : space[spaceKey];
+    };
+    return "\n    ".concat(horizontal
+        ? "\n            ".concat(responsiveStyle('margin-left', horizontal, breakpoints, formatter), "\n            ").concat(responsiveStyle('margin-right', horizontal, breakpoints, formatter), "\n          ")
+        : '', "\n    ").concat(vertical
+        ? "\n            ".concat(responsiveStyle('margin-top', vertical, breakpoints, formatter), "\n            ").concat(responsiveStyle('margin-bottom', vertical, breakpoints, formatter), "\n          ")
+        : '', "\n    ").concat(mTop ? responsiveStyle('margin-top', mTop, breakpoints, formatter) : '', "\n    ").concat(mBottom
+        ? responsiveStyle('margin-bottom', mBottom, breakpoints, formatter)
+        : '', "\n    ").concat(mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : '', "\n    ").concat(mRight
+        ? responsiveStyle('margin-right', mRight, breakpoints, formatter)
+        : '', "\n    ").concat(all ? responsiveStyle('margin', all, breakpoints, formatter) : '', "\n  ");
+});
+var Margin = function (_a) {
+    var top = _a.top, bottom = _a.bottom, left = _a.left, right = _a.right, rest = __rest(_a, ["top", "bottom", "left", "right"]);
+    var breakpoints = useBreakpoint();
+    return (React.createElement(StyledMargin, __assign({}, rest, { breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right })));
+};
+export { Margin };

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

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

package/dist/esm/components/NavHeader/NavHeader.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;
+};
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
+import { Path, Svg } from 'react-native-svg';
+import styled, { css } from '../../styled.native';
+import { Heading3, Heading4 } from '../Heading';
+var BackIcon = function () {
+    return (React.createElement(Svg, { width: "10", height: "16", viewBox: "0 0 10 16" },
+        React.createElement(Path, { d: "M0.579956 8L8.57996 16L9.99996 14.58L3.41996 8L9.99996 1.42L8.57996 0L0.579956 8Z", fill: "white" })));
+};
+var StyledText = styled.Text(function (_a) {
+    var _b = _a.theme, colors = _b.colors, fonts = _b.fonts, fontWeights = _b.fontWeights, fontSizes = _b.fontSizes;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n  "], ["\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n  "])), colors.primaryContrast, fontSizes[1], fontWeights.normal, fonts.body);
+});
+var LeftHeaderText = styled(StyledText)(function (_a) {
+    var space = _a.theme.space;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), space[2]);
+});
+var FeedbackText = styled(StyledText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-align: right;\n"], ["\n  text-align: right;\n"])));
+var HeadlineView = styled(Animated.View)(function (_a) {
+    var space = _a.theme.space;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    padding: 0 ", " ", ";\n  "], ["\n    padding: 0 ", " ", ";\n  "])), space[3], space[3]);
+});
+var RootView = styled.View(function (_a) {
+    var colors = _a.theme.colors;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    background-color: ", ";\n    overflow: hidden;\n  "], ["\n    background-color: ", ";\n    overflow: hidden;\n  "])), colors.primary);
+});
+var StyledView = styled(Animated.View)(function (_a) {
+    var space = _a.theme.space, marginTop = _a.marginTop;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "], ["\n    padding: ", ";\n    padding-bottom: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    margin-top: ", ";\n  "])), space[3], space[2], marginTop !== null && marginTop !== void 0 ? marginTop : 0);
+});
+var StyledHeading4 = styled(Heading4)(function (_a) {
+    var _b = _a.theme, fonts = _b.fonts, fontWeights = _b.fontWeights, colors = _b.colors, textAlign = _a.textAlign;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "], ["\n    font-family: ", ";\n    font-weight: ", ";\n    margin-top: 0;\n    margin-bottom: 0;\n    color: ", ";\n    text-align: ", ";\n  "])), fonts.bold, fontWeights.bold, colors.primaryContrast, textAlign);
+});
+var StyledHeading3 = styled(Heading3)(function (_a) {
+    var colors = _a.theme.colors;
+    return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "], ["\n    margin-top: 0;\n    margin-bottom: 0;\n    padding-top: 0;\n    color: ", ";\n    text-align: left;\n  "])), colors.primaryContrast);
+});
+export var NavHeader = function (_a) {
+    var options = _a.options, headline = _a.headline;
+    return (React.createElement(RootView, { layout: Layout.duration(150) },
+        React.createElement(StyledView, { marginTop: options === null || options === void 0 ? void 0 : options.statusBarHeight },
+            (options === null || options === void 0 ? void 0 : options.headerLeft) ? (options === null || options === void 0 ? void 0 : options.headerLeft()) : (options === null || options === void 0 ? void 0 : options.canGoBack()) ? (React.createElement(TouchableOpacity, { style: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    flex: 1,
+                    flexGrow: 1,
+                    flexShrink: 1,
+                }, onPress: options === null || options === void 0 ? void 0 : options.goBack },
+                React.createElement(BackIcon, null),
+                React.createElement(LeftHeaderText, null, "Back"))) : null,
+            React.createElement(Animated.View, { entering: FadeIn, exiting: FadeOut, style: { flex: 1, flexGrow: 3, flexShrink: 1 } },
+                React.createElement(StyledHeading4, { textAlign: (options === null || options === void 0 ? void 0 : options.canGoBack()) ? 'center' : 'left', numberOfLines: 1 }, !headline ? options === null || options === void 0 ? void 0 : options.title : ' ')),
+            React.createElement(TouchableOpacity, { style: { flex: 1, flexGrow: 1, flexShrink: 1 } },
+                React.createElement(FeedbackText, null, "Feedback"))),
+        headline ? (React.createElement(HeadlineView, { entering: FadeIn, exiting: FadeOut }, (options === null || options === void 0 ? void 0 : options.title) ? (React.createElement(StyledHeading3, null, options.title)) : null)) : null));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

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