@ovotech/element-native 0.0.1 → 0.0.2

package/dist/components/Heading/Heading.js

@@ -0,0 +1,128 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var theme_1 = require("../../theme");
+var StyledHeading1 = styled_native_1.default.Text(function (_a) {
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? heading.heading1.fontSize[1]
+        : heading.heading1.fontSize[0];
+    return (0, styled_native_1.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, (0, theme_1.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]);
+});
+var Heading1 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return (react_1.default.createElement(StyledHeading1, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+exports.Heading1 = Heading1;
+var StyledHeading2 = styled_native_1.default.Text(function (_a) {
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? heading.heading2.fontSize[1]
+        : heading.heading2.fontSize[0];
+    return (0, styled_native_1.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, (0, theme_1.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]);
+});
+var Heading2 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return (react_1.default.createElement(StyledHeading2, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+exports.Heading2 = Heading2;
+var StyledHeading3 = styled_native_1.default.Text(function (_a) {
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? heading.heading3.fontSize[1]
+        : heading.heading3.fontSize[0];
+    return (0, styled_native_1.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, (0, theme_1.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]);
+});
+var Heading3 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return (react_1.default.createElement(StyledHeading3, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+exports.Heading3 = Heading3;
+var StyledHeading4 = styled_native_1.default.Text(function (_a) {
+    var heading = _a.theme.heading, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp
+        ? heading.heading4.fontSize[1]
+        : heading.heading4.fontSize[0];
+    return (0, styled_native_1.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, (0, theme_1.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]);
+});
+var Heading4 = function (_a) {
+    var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    return (react_1.default.createElement(StyledHeading4, __assign({ accessibilityRole: accessibilityRole }, breakpoints, rest)));
+};
+exports.Heading4 = Heading4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Heading/index.d.ts

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

package/dist/components/Heading/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading4 = exports.Heading3 = exports.Heading2 = exports.Heading1 = void 0;
+var Heading_1 = require("./Heading");
+Object.defineProperty(exports, "Heading1", { enumerable: true, get: function () { return Heading_1.Heading1; } });
+Object.defineProperty(exports, "Heading2", { enumerable: true, get: function () { return Heading_1.Heading2; } });
+Object.defineProperty(exports, "Heading3", { enumerable: true, get: function () { return Heading_1.Heading3; } });
+Object.defineProperty(exports, "Heading4", { enumerable: true, get: function () { return Heading_1.Heading4; } });

package/dist/components/HintText/HintText.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Text } from 'react-native';
+declare const HintText: import("react").ForwardRefExoticComponent<Pick<Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("../../theme/theme").Theme | undefined;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<Text>>;
+export { HintText };

package/dist/components/HintText/HintText.js

@@ -0,0 +1,41 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HintText = void 0;
+var styled_native_1 = __importStar(require("../../styled.native"));
+var theme_1 = require("../../theme");
+var utils_1 = require("../../utils");
+var StyledHintText = styled_native_1.default.Text(function (_a) {
+    var field = _a.theme.field, smallAndUp = _a.smallAndUp;
+    var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
+    return (0, styled_native_1.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, (0, theme_1.calculateLineHeight)(fontSize, field.lineHeight), field.hint.fontWeight, field.hint.color, fontSize);
+});
+var HintText = (0, utils_1.styledComponentWithBreakpoints)(StyledHintText);
+exports.HintText = HintText;
+var templateObject_1;

package/dist/components/HintText/index.d.ts

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

package/dist/components/HintText/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HintText = void 0;
+var HintText_1 = require("./HintText");
+Object.defineProperty(exports, "HintText", { enumerable: true, get: function () { return HintText_1.HintText; } });

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SvgProps } from 'react-native-svg';
+export declare type IconName = 'caret-down' | 'caret-right' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevron-down' | 'cross' | 'new-window' | 'euro' | 'pound' | 'dollar' | 'check' | 'gas' | 'electricity' | 'link' | 'download' | 'plus' | 'minus';
+export declare type IconBase = React.FunctionComponent<SvgProps>;
+declare type Props = SvgProps & {
+    name: IconName | (string & {});
+    color?: string;
+    size: string | number;
+};
+export declare const Icon: ({ name, size, color, testID, ...rest }: Props) => JSX.Element | null;
+export {};

package/dist/components/Icon/Icon.js

@@ -0,0 +1,62 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+var react_1 = __importStar(require("react"));
+var providers_1 = require("../../providers");
+var styled_native_1 = require("../../styled.native");
+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 = (0, providers_1.useIcons)();
+    var colors = (0, react_1.useContext)(styled_native_1.ThemeContext).colors;
+    // @ts-ignore to support additional icons.
+    var Svg = name && icons[name];
+    return Svg ? (react_1.default.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;
+};
+exports.Icon = Icon;

package/dist/components/Icon/index.d.ts

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

package/dist/components/Icon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });

package/dist/components/Input/CurrencyInput.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+import { InputProps } from './Input';
+export declare type CurrencyInputProps = InputProps & {
+    currency?: 'GBP' | 'EUR' | 'AUD' | 'USD';
+};
+declare const CurrencyInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    invalid?: boolean | undefined;
+    stretch?: boolean | undefined;
+    iconLeft?: (string & {}) | import("../Icon/Icon").IconName | undefined;
+    iconRight?: (string & {}) | import("../Icon/Icon").IconName | undefined;
+} & {
+    currency?: "GBP" | "EUR" | "AUD" | "USD" | undefined;
+} & React.RefAttributes<TextInput>>;
+export { CurrencyInput };

package/dist/components/Input/CurrencyInput.js

@@ -0,0 +1,59 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrencyInput = void 0;
+var react_1 = __importStar(require("react"));
+var utils_1 = require("../../utils");
+var NumberInput_1 = require("./NumberInput");
+var CurrencyInput = (0, react_1.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 = (0, react_1.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_1.default.createElement(NumberInput_1.NumberInput, __assign({}, rest, { invalid: invalid, accessibilityLabel: updatedAccessibilityLabel, ref: (0, utils_1.mergeRefs)(ref, inputRef), iconLeft: iconName })));
+});
+exports.CurrencyInput = CurrencyInput;

package/dist/components/Input/EmailInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+declare const EmailInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    invalid?: boolean | undefined;
+    stretch?: boolean | undefined;
+    iconLeft?: (string & {}) | import("../Icon/Icon").IconName | undefined;
+    iconRight?: (string & {}) | import("../Icon/Icon").IconName | undefined;
+} & React.RefAttributes<TextInput>>;
+export { EmailInput };

package/dist/components/Input/EmailInput.js

@@ -0,0 +1,41 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmailInput = void 0;
+var react_1 = __importStar(require("react"));
+var Input_1 = require("./Input");
+var EmailInput = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+exports.EmailInput = EmailInput;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TextInputProps, TextInput } from 'react-native';
+import { IconName } from '../Icon/Icon';
+export declare type InputProps = TextInputProps & {
+    invalid?: boolean;
+    stretch?: boolean;
+    iconLeft?: IconName | (string & {});
+    iconRight?: IconName | (string & {});
+};
+declare const Input: React.ForwardRefExoticComponent<TextInputProps & {
+    invalid?: boolean | undefined;
+    stretch?: boolean | undefined;
+    iconLeft?: (string & {}) | IconName | undefined;
+    iconRight?: (string & {}) | IconName | undefined;
+} & React.RefAttributes<TextInput>>;
+export { Input };

package/dist/components/Input/Input.js

@@ -0,0 +1,102 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var Icon_1 = require("../Icon/Icon");
+var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
+    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, side = _a.side, focused = _a.focused;
+    var distance = ((0, utils_1.pxToNumber)(input.height) - (0, utils_1.pxToNumber)(input.icon.size)) / 2 +
+        (focused ? (0, utils_1.pxToNumber)(focusRing.distance) : 0);
+    return (0, styled_native_1.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 = (0, react_1.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 = (0, react_1.useState)(false), focused = _b[0], setFocused = _b[1];
+    var breakpoints = (0, hooks_1.useBreakpoint)();
+    var input = (0, react_1.useContext)(styled_native_1.ThemeContext).input;
+    return (react_1.default.createElement(InputWrapper, { focused: focused },
+        iconLeft ? (react_1.default.createElement(StyledIcon, { name: iconLeft, size: (0, utils_1.pxToNumber)(input.icon.size), focused: focused, pointerEvents: "none", side: "left" })) : null,
+        react_1.default.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_1.default.createElement(StyledIcon, { name: iconRight, size: (0, utils_1.pxToNumber)(input.icon.size), focused: focused, pointerEvents: "none", side: "right" })) : null));
+});
+exports.Input = Input;
+var InputWrapper = styled_native_1.default.View(function (_a) {
+    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, focused = _a.focused;
+    return (0, styled_native_1.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((0, utils_1.pxToNumber)(focusRing.width) +
+            (0, utils_1.pxToNumber)(focusRing.distance), "px;")
+        : null);
+});
+var StyledInput = styled_native_1.default.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 (0, styled_native_1.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);
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Input/NumberInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+declare const NumberInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    invalid?: boolean | undefined;
+    stretch?: boolean | undefined;
+    iconLeft?: (string & {}) | import("../Icon/Icon").IconName | undefined;
+    iconRight?: (string & {}) | import("../Icon/Icon").IconName | undefined;
+} & React.RefAttributes<RNTextInput>>;
+export { NumberInput };

package/dist/components/Input/NumberInput.js

@@ -0,0 +1,41 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInput = void 0;
+var react_1 = __importStar(require("react"));
+var Input_1 = require("./Input");
+var NumberInput = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+exports.NumberInput = NumberInput;

package/dist/components/Input/PasswordInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+declare const PasswordInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    invalid?: boolean | undefined;
+    stretch?: boolean | undefined;
+    iconLeft?: (string & {}) | import("../Icon/Icon").IconName | undefined;
+    iconRight?: (string & {}) | import("../Icon/Icon").IconName | undefined;
+} & React.RefAttributes<RNTextInput>>;
+export { PasswordInput };