@ovotech/element-native 4.4.8 → 4.5.0

package/dist/components/Em/Em.d.ts

@@ -215,9 +215,9 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
             large: number;
         };
         customMediaQuery: {
-            'small-and-up': number;
-            'medium-and-up': number;
-            'large-and-up': number;
+            "small-and-up": number;
+            "medium-and-up": number;
+            "large-and-up": number;
         };
         opacity: {
             solid: number;
@@ -231,22 +231,22 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
             max: number;
         };
         space: {
-            '0': number;
-            '1': number;
-            '2': number;
-            '3': number;
-            '4': number;
-            '5': number;
-            '6': number;
-            '7': number;
-            '8': number;
-            '9': number;
-            '10': number;
-            '11': number;
-            '12': number;
-            '13': number;
-            '14': number;
-            '15': number;
+            "0": number;
+            "1": number;
+            "2": number;
+            "3": number;
+            "4": number;
+            "5": number;
+            "6": number;
+            "7": number;
+            "8": number;
+            "9": number;
+            "10": number;
+            "11": number;
+            "12": number;
+            "13": number;
+            "14": number;
+            "15": number;
         };
         transition: {
             slow: number;
@@ -302,22 +302,22 @@ export declare const Em: import("styled-components").StyledComponent<typeof impo
         };
         data: {
             branded: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             electric: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
             gas: {
-                '1': string;
-                '2': string;
-                '3': string;
-                '4': string;
+                "1": string;
+                "2": string;
+                "3": string;
+                "4": string;
             };
         };
         focus: {

package/dist/components/Em/Em.js

@@ -1,13 +1,6 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Em = void 0;
-var styled_native_1 = __importDefault(require("../../styled.native"));
-exports.Em = styled_native_1.default.Text(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: 'System font';\n  font-style: italic;\n"], ["\n  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */\n  font-family: 'System font';\n  font-style: italic;\n"])));
-var templateObject_1;
+import styled from '../../styled.native';
+export const Em = styled.Text `
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: 'System font';
+  font-style: italic;
+`;

package/dist/components/Em/index.js

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

package/dist/components/EmailField/EmailField.d.ts

@@ -1,10 +1,5 @@
-/// <reference types="react" />
-import { TextInput as NativeTextInput } from 'react-native';
 import { FieldProps } from '../Field';
-export declare const EmailField: import("react").ForwardRefExoticComponent<Omit<FieldProps, "children"> & import("react-native").TextInputProps & {
-    invalid?: boolean | undefined;
-    stretch?: boolean | undefined;
-    iconLeft?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
-    rightSlot?: import("react").ReactNode;
-} & import("react").RefAttributes<NativeTextInput>>;
+import { InputProps } from '../Input/Input';
+type Props = Omit<FieldProps, 'children'> & InputProps;
+export declare const EmailField: ({ ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EmailField/EmailField.js

@@ -1,33 +1,6 @@
-"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);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmailInput } from '../EmailInput';
+import { Field } from '../Field';
+export const EmailField = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(EmailInput, { ref: ref }) }));
 };
-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.EmailField = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var EmailInput_1 = require("../EmailInput");
-var Field_1 = require("../Field");
-exports.EmailField = (0, react_1.forwardRef)(function (_a, ref) {
-    var rest = __rest(_a, []);
-    return ((0, jsx_runtime_1.jsx)(Field_1.Field, __assign({}, rest, { ref: ref, children: (0, jsx_runtime_1.jsx)(EmailInput_1.EmailInput, {}) })));
-});

package/dist/components/EmailField/index.js

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

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

@@ -1,10 +1,3 @@
-/// <reference types="react" />
-import { TextInput } from 'react-native';
-declare const EmailInput: import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
-    invalid?: boolean | undefined;
-    stretch?: boolean | undefined;
-    iconLeft?: import("../../providers").IconNameExtended | undefined;
-    iconRight?: import("../../providers").IconNameExtended | undefined;
-    rightSlot?: import("react").ReactNode;
-} & import("react").RefAttributes<TextInput>>;
+import { InputProps } from '../Input/Input';
+declare const EmailInput: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
 export { EmailInput };

package/dist/components/EmailInput/EmailInput.js

@@ -1,19 +1,4 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmailInput = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Input_1 = require("../Input/Input");
-var EmailInput = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(Input_1.Input, __assign({}, props, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
-exports.EmailInput = EmailInput;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../Input/Input';
+const EmailInput = (props) => (_jsx(Input, { keyboardType: "email-address", autoCapitalize: "none", autoCorrect: false, ...props }));
+export { EmailInput };

package/dist/components/EmailInput/index.js

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

package/dist/components/ErrorSummaryNotification/ErrorSummaryNotification.d.ts

@@ -8,7 +8,7 @@ type Props = {
     title: string;
     noMargin?: boolean;
     errors: ErrorSummaryList;
-    scrollViewRef: RefObject<ScrollView>;
+    scrollViewRef: RefObject<ScrollView | null>;
     scrollPos?: {
         x: number;
         y: number;

package/dist/components/ErrorSummaryNotification/ErrorSummaryNotification.js

@@ -1,52 +1,23 @@
-"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 __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.ErrorSummaryNotification = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var List_1 = require("../List");
-var Notification_1 = require("../Notification");
-var P_1 = require("../P");
-var ErrorSummaryNotification = function (_a) {
-    var errors = _a.errors, scrollViewRef = _a.scrollViewRef, _b = _a.scrollPos, scrollPos = _b === void 0 ? { x: 0, y: 0 } : _b, rest = __rest(_a, ["errors", "scrollViewRef", "scrollPos"]);
-    var ref = (0, react_1.createRef)();
-    (0, react_1.useEffect)(function () {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef, useEffect } from 'react';
+import { findNodeHandle, AccessibilityInfo, } from 'react-native';
+import { Ul, Li } from '../List';
+import { ErrorNotification } from '../Notification';
+import { P } from '../P';
+const ErrorSummaryNotification = ({ errors, scrollViewRef, scrollPos = { x: 0, y: 0 }, ...rest }) => {
+    const ref = createRef();
+    useEffect(() => {
         if (errors.length && scrollViewRef.current && ref.current) {
             scrollViewRef.current.scrollTo(scrollPos);
             // Timeout ensures element receives focus after current action.
-            setTimeout(function () {
-                var node = (0, react_native_1.findNodeHandle)(ref.current);
-                node && react_native_1.AccessibilityInfo.setAccessibilityFocus(node);
+            setTimeout(() => {
+                const node = findNodeHandle(ref.current);
+                node && AccessibilityInfo.setAccessibilityFocus(node);
             }, 200);
         }
         // This means that errors needs to have referential integrity otherwise the notification
         // will be focused all the time.
     }, [errors, scrollViewRef.current, ref.current]);
-    return ((0, jsx_runtime_1.jsx)(Notification_1.ErrorNotification, __assign({ ref: ref }, rest, { children: errors.length === 0 ? null : ((0, jsx_runtime_1.jsx)(List_1.Ul, { children: errors.map(function (_a) {
-                var message = _a.message, fieldId = _a.id;
-                return ((0, jsx_runtime_1.jsx)(List_1.Li, { children: (0, jsx_runtime_1.jsx)(P_1.P, { children: message }) }, fieldId));
-            }) })) })));
+    return (_jsx(ErrorNotification, { ref: ref, ...rest, children: errors.length === 0 ? null : (_jsx(Ul, { children: errors.map(({ message, id: fieldId }) => (_jsx(Li, { children: _jsx(P, { children: message }) }, fieldId))) })) }));
 };
-exports.ErrorSummaryNotification = ErrorSummaryNotification;
+export { ErrorSummaryNotification };

package/dist/components/ErrorSummaryNotification/index.js

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

package/dist/components/ErrorText/ErrorText.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
-import { Text } from 'react-native';
-declare const ErrorText: import("react").ForwardRefExoticComponent<Omit<Omit<{
+declare const ErrorText: (props: Omit<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
@@ -222,9 +220,9 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 large: number;
             };
             customMediaQuery: {
-                'small-and-up': number;
-                'medium-and-up': number;
-                'large-and-up': number;
+                "small-and-up": number;
+                "medium-and-up": number;
+                "large-and-up": number;
             };
             opacity: {
                 solid: number;
@@ -238,22 +236,22 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Omit<Omit<{
                 max: number;
             };
             space: {
-                '0': number;
-                '1': number;
-                '2': number;
-                '3': number;
-                '4': number;
-                '5': number;
-                '6': number;
-                '7': number;
-                '8': number;
-                '9': number;
-                '10': number;
-                '11': number;
-                '12': number;
-                '13': number;
-                '14': number;
-                '15': number;
+                "0": number;
+                "1": number;
+                "2": number;
+                "3": number;
+                "4": number;
+                "5": number;
+                "6": number;
+                "7": number;
+                "8": number;
+                "9": number;
+                "10": number;
+                "11": number;
+                "12": number;
+                "13": number;
+                "14": number;
+                "15": number;
             };
             transition: {
                 slow: number;
@@ -309,22 +307,22 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Omit<Omit<{
             };
             data: {
                 branded: {
-                    '1': string;
-                    '2': string;
-                    '3': string;
-                    '4': string;
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
                 };
                 electric: {
-                    '1': string;
-                    '2': string;
-                    '3': string;
-                    '4': string;
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
                 };
                 gas: {
-                    '1': string;
-                    '2': string;
-                    '3': string;
-                    '4': string;
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
                 };
             };
             focus: {
@@ -573,5 +571,5 @@ declare const ErrorText: import("react").ForwardRefExoticComponent<Omit<Omit<{
 } & {
     as?: string | import("react").ComponentType<any> | undefined;
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, "ref"> & import("react").RefAttributes<Text>>;
+}, import("../../hooks").BreakpointNames> & object) => import("react/jsx-runtime").JSX.Element;
 export { ErrorText };

package/dist/components/ErrorText/ErrorText.js

@@ -1,43 +1,18 @@
-"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.ErrorText = void 0;
-var element_core_1 = require("@ovotech/element-core");
-var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
-var StyledErrorText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    var fontSize = smallAndUp
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledErrorText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
         ? core.fontSize.body.large
         : core.fontSize.body.small;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), (0, element_core_1.numToPx)(core.space[1]), (0, element_core_1.numToPx)(core.space[1]), core.fontFamily.body.native, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), semantic.message.error);
+    return css `
+      margin-top: ${numToPx(core.space[1])};
+      margin-bottom: ${numToPx(core.space[1])};
+      font-family: ${core.fontFamily.body.native};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small)};
+      color: ${semantic.message.error};
+    `;
 });
-var ErrorText = (0, utils_1.styledComponentWithBreakpoints)(StyledErrorText);
-exports.ErrorText = ErrorText;
-var templateObject_1;
+const ErrorText = styledComponentWithBreakpoints(StyledErrorText);
+export { ErrorText };

package/dist/components/ErrorText/index.js

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

package/dist/components/Field/Field.d.ts

@@ -1,13 +1,14 @@
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 import { TextInput } from 'react-native';
 export type FieldProps = {
-    label: string;
-    optional?: boolean;
-    hint?: ReactNode;
-    error?: ReactNode;
-    fullWidth?: boolean;
-    characters?: number;
     affixWidth?: number;
+    characters?: number;
     children: ReactNode;
+    error?: ReactNode;
+    fullWidth?: boolean;
+    hint?: ReactNode;
+    label: string;
+    optional?: boolean;
+    ref?: Ref<TextInput>;
 };
-export declare const Field: import("react").ForwardRefExoticComponent<FieldProps & import("react").RefAttributes<TextInput>>;
+export declare const Field: ({ children, label, optional, hint, error, fullWidth, characters, affixWidth, ref, ...rest }: FieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Field/Field.js

@@ -1,47 +1,21 @@
-"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 __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.Field = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_native_1 = require("react-native");
-var utils_1 = require("../../utils");
-var ErrorText_1 = require("../ErrorText");
-var FormGroup_1 = require("../FormGroup");
-var HintText_1 = require("../HintText");
-var LabelText_1 = require("../LabelText");
-var Stack_1 = require("../Stack");
-var Stretch_1 = require("../Stretch");
-exports.Field = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, label = _a.label, _b = _a.optional, optional = _b === void 0 ? false : _b, hint = _a.hint, error = _a.error, fullWidth = _a.fullWidth, _c = _a.characters, characters = _c === void 0 ? 25 : _c, _d = _a.affixWidth, affixWidth = _d === void 0 ? 0 : _d, rest = __rest(_a, ["children", "label", "optional", "hint", "error", "fullWidth", "characters", "affixWidth"]);
-    var hasError = !!error;
-    var inputRef = (0, react_1.createRef)();
-    var labelText = optional ? "".concat(label, " (optional)") : label;
-    var accessibilityLabel = [labelText, (0, utils_1.getText)(hint), (0, utils_1.getText)(error)]
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, createRef, } from 'react';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import { getText, mergeRefs } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+import { Stretch } from '../Stretch';
+export const Field = ({ children, label, optional = false, hint, error, fullWidth, characters = 25, affixWidth = 0, ref, ...rest }) => {
+    const hasError = !!error;
+    const inputRef = createRef();
+    const labelText = optional ? `${label} (optional)` : label;
+    const accessibilityLabel = [labelText, getText(hint), getText(error)]
         .filter(Boolean)
         .join(', ');
-    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, { error: hasError || undefined, testID: "nb-field-form-group", children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: function () {
+    return (_jsx(FormGroup, { error: hasError || undefined, testID: "nb-field-form-group", children: _jsxs(Stack, { spaceBetween: 1, children: [_jsx(TouchableWithoutFeedback, { onPress: () => {
                         if (inputRef.current) {
                             // @ts-ignore. Toggle picker if this is a select menu.
                             if (inputRef.current.togglePicker) {
@@ -53,9 +27,12 @@ exports.Field = (0, react_1.forwardRef)(function (_a, ref) {
                                 inputRef.current.focus();
                             }
                         }
-                    }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }) }), (0, jsx_runtime_1.jsx)(Stretch_1.Stretch, { defaultWidth: "".concat(Math.ceil(characters * 0.8 * 16) + affixWidth, "px"), fullWidth: fullWidth, children: react_1.Children.map(children, function (child) {
-                        return (0, react_1.isValidElement)(child)
-                            ? (0, react_1.cloneElement)(child, __assign({ invalid: hasError || undefined, ref: (0, utils_1.mergeRefs)(inputRef, ref), accessibilityLabel: accessibilityLabel }, rest))
-                            : child;
-                    }) })] }) }));
-});
+                    }, children: _jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }) }), _jsx(Stretch, { defaultWidth: `${Math.ceil(characters * 0.8 * 16) + affixWidth}px`, fullWidth: fullWidth, children: Children.map(children, child => isValidElement(child)
+                        ? cloneElement(child, {
+                            invalid: hasError || undefined,
+                            ref: mergeRefs(inputRef, ref),
+                            accessibilityLabel,
+                            ...rest,
+                        })
+                        : child) })] }) }));
+};

package/dist/components/Field/index.js

@@ -1,17 +1 @@
-"use strict";
-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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Field"), exports);
+export * from './Field';