@ovotech/element-native 0.0.1 → 0.0.2

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

@@ -0,0 +1,95 @@
+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 from 'react';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+import { calculateLineHeight } from '../../theme';
+var StyledHeading1 = styled.Text(function (_a) {
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? heading.heading1.fontSize[1]
+        : heading.heading1.fontSize[0];
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "])), heading.fontFamily, calculateLineHeight(fontSize, heading.lineHeight), heading.heading1.fontWeight || heading.fontWeight, heading.color, fontSize, smallAndUp
+        ? heading.heading1.marginTop[1]
+        : heading.heading1.marginTop[0], smallAndUp
+        ? heading.heading1.marginBottom[1]
+        : heading.heading1.marginBottom[0]);
+});
+export var Heading1 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (React.createElement(StyledHeading1, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var StyledHeading2 = styled.Text(function (_a) {
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? heading.heading2.fontSize[1]
+        : heading.heading2.fontSize[0];
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "])), heading.fontFamily, calculateLineHeight(fontSize, heading.lineHeight), heading.heading2.fontWeight || heading.fontWeight, heading.color, fontSize, smallAndUp
+        ? heading.heading2.marginTop[1]
+        : heading.heading2.marginTop[0], smallAndUp
+        ? heading.heading2.marginBottom[1]
+        : heading.heading2.marginBottom[0]);
+});
+export var Heading2 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (React.createElement(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var StyledHeading3 = styled.Text(function (_a) {
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? heading.heading3.fontSize[1]
+        : heading.heading3.fontSize[0];
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "])), heading.fontFamily, calculateLineHeight(fontSize, heading.lineHeight), heading.heading3.fontWeight || heading.fontWeight, heading.color, fontSize, smallAndUp
+        ? heading.heading3.marginTop[1]
+        : heading.heading3.marginTop[0], smallAndUp
+        ? heading.heading3.marginBottom[1]
+        : heading.heading3.marginBottom[0]);
+});
+export var Heading3 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (React.createElement(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var StyledHeading4 = styled.Text(function (_a) {
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? heading.heading4.fontSize[1]
+        : heading.heading4.fontSize[0];
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n      margin-top: ", ";\n      margin-bottom: ", ";\n    "])), heading.fontFamily, calculateLineHeight(fontSize, heading.lineHeight), heading.heading4.fontWeight || heading.fontWeight, heading.color, fontSize, smallAndUp
+        ? heading.heading4.marginTop[1]
+        : heading.heading4.marginTop[0], smallAndUp
+        ? heading.heading4.marginBottom[1]
+        : heading.heading4.marginBottom[0]);
+});
+export var Heading4 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = useBreakpoint();
+    return (React.createElement(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1 @@
+export { Heading1, Heading2, Heading3, Heading4 } from './Heading';

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      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.fontFamily, calculateLineHeight(fontSize, field.lineHeight), field.hint.fontWeight, field.hint.color, fontSize);
+});
+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 : "nebula-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.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,118 @@
+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 { calculateLineHeight } from '../../theme';
+import { styledComponentWithBreakpoints } from '../../utils';
+import { Stack } from '../Stack';
+var StyledBullet = 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];
+    return css(templateObject_1 || (templateObject_1 = __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, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize, list.listItem.bulletGap, list.listItem.bulletWidth);
+});
+var Bullet = styledComponentWithBreakpoints(StyledBullet);
+var ListBulletItem = function (_a) {
+    var children = _a.children;
+    return (React.createElement(View, { style: { flexDirection: 'row' } },
+        React.createElement(Bullet, null, "\u2022"),
+        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_2 || (templateObject_2 = __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, 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) { return (React.createElement(ListBulletItem, null, 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];
+    return css(templateObject_3 || (templateObject_3 = __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, calculateLineHeight(fontSize, text.lineHeight), text.fontWeight, text.color, fontSize);
+});
+var Li = styledComponentWithBreakpoints(StyledLi);
+var Dl = ListWrapper;
+var StyledDtText = 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];
+    return css(templateObject_4 || (templateObject_4 = __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, calculateLineHeight(fontSize, text.lineHeight), list.descriptionTerm.fontWeight, 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_5 || (templateObject_5 = __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];
+    return css(templateObject_6 || (templateObject_6 = __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, calculateLineHeight(fontSize, text.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;

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,45 @@
+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 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';