@abihealth/goapp-react-native 1.13.4

package/dist/common/components/DateInput.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateInput = void 0;
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_date_picker_1 = __importDefault(require("react-native-date-picker"));
+var useForm_1 = require("../hooks/useForm");
+var useTheme_1 = require("../hooks/useTheme");
+var CalendarIcon_1 = __importDefault(require("../icons/CalendarIcon"));
+var FormControl_1 = __importDefault(require("./FormControl"));
+var DateInput = function (_a) {
+    var _b;
+    var id = _a.id, label = _a.label, error = _a.error, initialValue = _a.initialValue, onConfirm = _a.onConfirm;
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    var _c = (0, useForm_1.useForm)(), errors = _c.errors, data = _c.data, clearError = _c.clearError, updateData = _c.updateData, loading = _c.loading;
+    var _d = (0, react_1.useState)(false), open = _d[0], setOpen = _d[1];
+    var initialDate = (0, react_1.useMemo)(function () { return (data === null || data === void 0 ? void 0 : data[id]) || initialValue; }, []);
+    var onFocus = function () {
+        if (loading)
+            return;
+        setOpen(true);
+        clearError === null || clearError === void 0 ? void 0 : clearError(id);
+    };
+    (0, react_1.useEffect)(function () {
+        updateData === null || updateData === void 0 ? void 0 : updateData(id)(initialDate);
+    }, [initialDate]);
+    var formError = errors === null || errors === void 0 ? void 0 : errors[id];
+    var formValue = (_b = data === null || data === void 0 ? void 0 : data[id]) === null || _b === void 0 ? void 0 : _b.toLocaleDateString();
+    var err = formError || error;
+    return (<FormControl_1.default label={label} error={err}>
+      <react_native_1.View style={[styles.inputContainer, err && styles.error]}>
+        <react_native_1.TextInput style={styles.input} value={formValue || (initialDate === null || initialDate === void 0 ? void 0 : initialDate.toLocaleDateString())} onFocus={onFocus} placeholder="dd/mm/yyyy" editable={!loading} placeholderTextColor={theme.colors.gray}/>
+
+        <react_native_1.Pressable onPress={onFocus}>
+          <CalendarIcon_1.default />
+        </react_native_1.Pressable>
+      </react_native_1.View>
+
+      <react_native_date_picker_1.default modal open={open} date={initialDate || new Date()} onConfirm={function (date) {
+            setOpen(false);
+            onConfirm(date);
+            updateData === null || updateData === void 0 ? void 0 : updateData(id)(date);
+        }} onCancel={function () {
+            setOpen(false);
+        }}/>
+    </FormControl_1.default>);
+};
+exports.DateInput = DateInput;
+exports.default = exports.DateInput;
+var getStyles = function (_a) {
+    var spacing = _a.spacing, colors = _a.colors, borderRadius = _a.borderRadius, fontSize = _a.fontSize;
+    return react_native_1.StyleSheet.create({
+        inputContainer: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            padding: spacing.sm,
+            borderWidth: 1,
+            borderColor: colors.gray,
+            borderRadius: borderRadius.md,
+            width: '100%',
+            backgroundColor: colors.white
+        },
+        input: {
+            color: colors.black,
+            fontSize: fontSize.base,
+            minWidth: '80%'
+        },
+        error: {
+            borderColor: colors.warning
+        }
+    });
+};

package/dist/common/components/DoctorProfileCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Professional } from '../types/professional';
+interface DoctorProfileCardProps {
+    professional: Professional;
+    description: string;
+}
+export declare const DoctorProfileCard: ({ professional, description }: DoctorProfileCardProps) => React.JSX.Element;
+export {};

package/dist/common/components/DoctorProfileCard.js

@@ -0,0 +1,128 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DoctorProfileCard = void 0;
+var react_1 = __importStar(require("react"));
+var react_i18next_1 = require("react-i18next");
+var react_native_1 = require("react-native");
+var LoadingDotsAnimation_1 = require("../animations/LoadingDotsAnimation");
+var useTheme_1 = require("../hooks/useTheme");
+var DoctorImagePlaceholderIcon_1 = require("../icons/DoctorImagePlaceholderIcon");
+var professional_1 = require("../utils/professional");
+var Button_1 = require("./Button");
+var DoctorProfileModal_1 = require("./Modal/DoctorProfileModal");
+var Text_1 = require("./Text");
+var DoctorProfileCard = function (_a) {
+    var professional = _a.professional, description = _a.description;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    var _b = (0, react_1.useState)(false), showProfileModal = _b[0], setShowProfileModal = _b[1];
+    var showModal = function () { return setShowProfileModal(true); };
+    var hideModal = function () { return setShowProfileModal(false); };
+    if (!professional)
+        return <Text_1.Text>Professional not found</Text_1.Text>;
+    return (<react_native_1.View style={styles.container}>
+      {professional.profileImage ? (<react_native_1.Image source={{ uri: professional.profileImage }} style={styles.image}/>) : (<DoctorImagePlaceholderIcon_1.DoctorImagePlaceholderIcon style={styles.image}/>)}
+
+      <react_native_1.View style={{ alignItems: 'center' }}>
+        <Text_1.Text variant="h2">{(0, professional_1.getProfessionalLabel)(professional)}</Text_1.Text>
+        <Text_1.Text style={styles.status} center>
+          {description}
+        </Text_1.Text>
+      </react_native_1.View>
+
+      <LoadingDotsAnimation_1.LoadingDotsAnimation color={theme.colors.primaryDark} size={64}/>
+
+      <react_native_1.View style={styles.specialtiesContainer}>
+        {professional.specialties.map(function (specialty, index) { return (<react_native_1.View key={index} style={styles.specialty}>
+            <Text_1.Text>{t("specialty_".concat(specialty))}</Text_1.Text>
+          </react_native_1.View>); })}
+      </react_native_1.View>
+
+      {professional.profileUrl && (<Button_1.Button variant="secondary" shadow={false} onPress={showModal} style={styles.button}>
+          {t('view_profile')}
+        </Button_1.Button>)}
+
+      <DoctorProfileModal_1.DoctorProfileModal profileUrl={professional.profileUrl} visible={showProfileModal} onCancel={hideModal}/>
+    </react_native_1.View>);
+};
+exports.DoctorProfileCard = DoctorProfileCard;
+var getStyles = function (_a) {
+    var colors = _a.colors, spacing = _a.spacing, borderRadius = _a.borderRadius, shadows = _a.shadows;
+    return react_native_1.StyleSheet.create({
+        container: __assign({ width: '100%', backgroundColor: colors.white, borderRadius: borderRadius.xl, padding: spacing.sm, alignItems: 'center', rowGap: spacing.sm }, shadows.soft),
+        image: {
+            width: 100,
+            height: 100,
+            borderRadius: borderRadius.full
+        },
+        status: {
+            maxWidth: '80%'
+        },
+        specialtiesContainer: {
+            flexDirection: 'row',
+            columnGap: spacing.xs,
+            rowGap: spacing.xs,
+            flexWrap: 'wrap',
+            justifyContent: 'center'
+        },
+        specialty: {
+            paddingVertical: spacing.xs,
+            paddingHorizontal: spacing.sm,
+            borderRadius: borderRadius.full,
+            backgroundColor: colors.background
+        },
+        button: {
+            borderTopColor: colors.divider,
+            borderTopWidth: 1,
+            paddingTop: spacing.md,
+            paddingBottom: spacing.sm - 8, // Hack for centering the button
+            width: '100%',
+            alignItems: 'center'
+        }
+    });
+};

package/dist/common/components/FadeIn.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface FadeInProps {
+    style?: StyleProp<ViewStyle>;
+    duration?: number;
+}
+export declare const FadeIn: ({ children, style, duration }: PropsWithChildren<FadeInProps>) => React.JSX.Element;
+export {};

package/dist/common/components/FadeIn.js

@@ -0,0 +1,66 @@
+"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 __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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FadeIn = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var DEFAULT_DURATION = 250;
+var FadeIn = function (_a) {
+    var children = _a.children, style = _a.style, _b = _a.duration, duration = _b === void 0 ? DEFAULT_DURATION : _b;
+    var fadeAnim = (0, react_native_1.useAnimatedValue)(0);
+    (0, react_1.useEffect)(function () {
+        fadeAnim.setValue(0);
+        react_native_1.Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: duration,
+            useNativeDriver: true
+        }).start();
+    }, [fadeAnim, duration]);
+    return (<react_native_1.Animated.View style={[
+            styles.wrapper,
+            {
+                opacity: fadeAnim
+            },
+            style
+        ]}>
+      {children}
+    </react_native_1.Animated.View>);
+};
+exports.FadeIn = FadeIn;
+var styles = react_native_1.StyleSheet.create({
+    wrapper: {
+        width: '100%'
+    }
+});

package/dist/common/components/FormControl.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+export interface FormControlProps {
+    label?: string;
+    error?: string;
+    name?: string;
+}
+export declare const FormControl: ({ label, error, name, children }: PropsWithChildren<FormControlProps>) => import("react").JSX.Element;
+export default FormControl;

package/dist/common/components/FormControl.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormControl = void 0;
+var react_native_1 = require("react-native");
+var useTheme_1 = require("../hooks/useTheme");
+var Text_1 = require("./Text");
+var FormControl = function (_a) {
+    var label = _a.label, error = _a.error, name = _a.name, children = _a.children;
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    return (<react_native_1.View style={styles.formControl}>
+      {label && (<Text_1.Text style={styles.label} nativeID={name}>
+          {label}
+        </Text_1.Text>)}
+      {children}
+      <Text_1.Text variant="sm" color={theme.colors.warning} style={styles.error}>
+        {error}
+      </Text_1.Text>
+    </react_native_1.View>);
+};
+exports.FormControl = FormControl;
+exports.default = exports.FormControl;
+var getStyles = function (_a) {
+    var spacing = _a.spacing, colors = _a.colors, fontSize = _a.fontSize, lineHeight = _a.lineHeight;
+    return react_native_1.StyleSheet.create({
+        formControl: {
+            rowGap: spacing.xxs,
+            width: '100%'
+        },
+        label: {
+            color: colors.black,
+            fontSize: fontSize.sm,
+            lineHeight: lineHeight.sm,
+            fontWeight: 'bold'
+        },
+        error: {
+            minHeight: spacing.xs
+        }
+    });
+};

package/dist/common/components/FormWrapper.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+import { z } from 'zod';
+import { HandleSubmitProps } from '../contexts/FormContext';
+type FormWrapperProps<T extends z.AnyZodObject> = {
+    schema: T;
+    initialValues?: Partial<z.infer<T>>;
+    onSubmit?: HandleSubmitProps<T>;
+    submitButton: React.ReactNode;
+};
+export declare const FormWrapper: <T extends z.AnyZodObject>({ children, schema, initialValues, onSubmit, submitButton }: PropsWithChildren<FormWrapperProps<T>>) => React.JSX.Element;
+export {};

package/dist/common/components/FormWrapper.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormWrapper = void 0;
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var FormContext_1 = require("../contexts/FormContext");
+var useForm_1 = require("../hooks/useForm");
+var useTheme_1 = require("../hooks/useTheme");
+var InputsWrapper = function (_a) {
+    var children = _a.children;
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    var loading = (0, useForm_1.useForm)().loading;
+    return <react_native_1.View style={[styles.inputsWrapper, loading && styles.loading]}>{children}</react_native_1.View>;
+};
+var FormWrapper = function (_a) {
+    var children = _a.children, schema = _a.schema, initialValues = _a.initialValues, onSubmit = _a.onSubmit, submitButton = _a.submitButton;
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    return (<FormContext_1.FormProvider schema={schema} initialValues={initialValues} onSubmit={onSubmit}>
+      <react_native_1.View style={styles.formWrapper}>
+        <InputsWrapper>{children}</InputsWrapper>
+        {submitButton}
+      </react_native_1.View>
+    </FormContext_1.FormProvider>);
+};
+exports.FormWrapper = FormWrapper;
+var getStyles = function (_a) {
+    var spacing = _a.spacing;
+    return react_native_1.StyleSheet.create({
+        formWrapper: {
+            width: '100%',
+            rowGap: spacing.xs
+        },
+        inputsWrapper: {
+            width: '100%',
+            rowGap: spacing.xs
+        },
+        loading: {
+            opacity: 0.5
+        }
+    });
+};

package/dist/common/components/Header.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type HeaderProps = {
+    leftIcon?: React.ReactNode;
+    centerIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    title?: string;
+    description?: string;
+};
+export declare const Header: ({ leftIcon, centerIcon, rightIcon, title, description }: HeaderProps) => React.JSX.Element;
+export {};

package/dist/common/components/Header.js

@@ -0,0 +1,109 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var useTheme_1 = require("../hooks/useTheme");
+var Text_1 = require("./Text");
+var ALIGNMENTS = {
+    left: 'flex-start',
+    right: 'flex-end',
+    center: 'center'
+};
+var IconWrapper = function (_a) {
+    var children = _a.children, align = _a.align;
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    return <react_native_1.View style={[styles.iconWrapper, { alignItems: ALIGNMENTS[align] }]}>{children}</react_native_1.View>;
+};
+var Header = function (_a) {
+    var leftIcon = _a.leftIcon, centerIcon = _a.centerIcon, rightIcon = _a.rightIcon, title = _a.title, description = _a.description;
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    var rowJustifyContent = (0, react_1.useMemo)(function () {
+        if (centerIcon)
+            return 'center';
+        if (!description)
+            return 'space-between';
+    }, [centerIcon, description]);
+    var containerPaddingVertical = centerIcon ? theme.spacing.sm : theme.spacing.md;
+    return (<react_native_1.View style={[styles.container, { paddingVertical: containerPaddingVertical }]}>
+      <react_native_1.View style={[styles.row, { justifyContent: rowJustifyContent }]}>
+        {centerIcon ? (<IconWrapper align="center">{centerIcon}</IconWrapper>) : (<>
+            <IconWrapper align="left">{leftIcon}</IconWrapper>
+            <Text_1.Text variant={description ? 'h3' : 'h4'} style={styles.whiteText}>
+              {title}
+            </Text_1.Text>
+            <IconWrapper align="right">{rightIcon}</IconWrapper>
+          </>)}
+      </react_native_1.View>
+
+      {description && (<Text_1.Text variant="sm" style={styles.whiteText}>
+          {description}
+        </Text_1.Text>)}
+    </react_native_1.View>);
+};
+exports.Header = Header;
+var getStyles = function (_a) {
+    var colors = _a.colors, spacing = _a.spacing, shadows = _a.shadows;
+    return react_native_1.StyleSheet.create({
+        container: __assign({ width: '100%', paddingHorizontal: spacing.sm, backgroundColor: colors.primary, rowGap: spacing.xs }, shadows.soft),
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            columnGap: spacing.sm
+        },
+        whiteText: {
+            color: colors.white
+        },
+        iconWrapper: {
+            minWidth: 26,
+            minHeight: 26,
+            justifyContent: 'center'
+        }
+    });
+};

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

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { TextInputProps } from 'react-native';
+interface InputProps extends TextInputProps {
+    label?: string;
+    error?: string;
+}
+export declare const Input: ({ label, error, id, ...props }: PropsWithChildren<InputProps>) => import("react").JSX.Element;
+export default Input;

package/dist/common/components/Input.js

@@ -0,0 +1,74 @@
+"use strict";
+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.Input = void 0;
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var useForm_1 = require("../hooks/useForm");
+var useTheme_1 = require("../hooks/useTheme");
+var FormControl_1 = __importDefault(require("./FormControl"));
+var Input = function (_a) {
+    var label = _a.label, error = _a.error, id = _a.id, props = __rest(_a, ["label", "error", "id"]);
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    var _b = (0, useForm_1.useForm)(), errors = _b.errors, data = _b.data, clearError = _b.clearError, updateData = _b.updateData, loading = _b.loading;
+    var _c = (0, react_1.useState)(false), focused = _c[0], setFocused = _c[1];
+    var onFocus = function (e) {
+        var _a;
+        setFocused(true);
+        clearError === null || clearError === void 0 ? void 0 : clearError(id);
+        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    var onBlur = function (e) {
+        var _a;
+        setFocused(false);
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    var onChangeText = function (text) {
+        var _a;
+        updateData === null || updateData === void 0 ? void 0 : updateData(id)(text);
+        (_a = props.onChangeText) === null || _a === void 0 ? void 0 : _a.call(props, text);
+    };
+    var formError = errors === null || errors === void 0 ? void 0 : errors[id];
+    var formValue = data === null || data === void 0 ? void 0 : data[id];
+    var err = formError || error;
+    return (<FormControl_1.default label={label} error={err} name={id}>
+      <react_native_1.TextInput {...props} id={id} style={[styles.input, focused && styles.focused, err && styles.error, props.style]} onFocus={onFocus} onBlur={onBlur} placeholderTextColor={theme.colors.gray} value={formValue || props.value} onChangeText={onChangeText} editable={!loading} accessibilityLabel="input" accessibilityLabelledBy={id} accessibilityState={{ busy: loading, disabled: loading }}/>
+    </FormControl_1.default>);
+};
+exports.Input = Input;
+exports.default = exports.Input;
+var getStyles = function (_a) {
+    var colors = _a.colors, spacing = _a.spacing, fontSize = _a.fontSize, borderRadius = _a.borderRadius;
+    return react_native_1.StyleSheet.create({
+        input: {
+            color: colors.black,
+            fontSize: fontSize.base,
+            padding: spacing.sm,
+            borderWidth: 1,
+            borderColor: colors.gray,
+            borderRadius: borderRadius.md,
+            width: '100%',
+            backgroundColor: colors.white
+        },
+        focused: {
+            borderColor: colors.primary
+        },
+        error: {
+            borderColor: colors.warning
+        }
+    });
+};

package/dist/common/components/Modal/AttachmentPreviewModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface AttachmentPreviewModalProps {
+    onCancel?: () => void;
+    onRemove?: () => void;
+    visible: boolean;
+    attachment: string;
+}
+export declare const AttachmentPreviewModal: ({ onCancel, onRemove, visible, attachment }: AttachmentPreviewModalProps) => React.JSX.Element;
+export {};