@abihealth/goapp-react-native 1.13.22 → 1.14.0

package/dist/common/components/BackgroundPattern.js

@@ -6,9 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BackgroundPattern = void 0;
 var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
+var useCustomComponents_1 = require("../hooks/useCustomComponents");
+var useTheme_1 = require("../hooks/useTheme");
 var BackgroundPattern = function (_a) {
     var children = _a.children;
-    return (<react_native_1.ImageBackground source={require('../assets/background-pattern.png')} style={styles.container} imageStyle={styles.image} resizeMode="cover">
+    var palette = (0, useTheme_1.useTheme)().palette;
+    var Background = (0, useCustomComponents_1.useCustomComponents)().Background;
+    var noImage = (Background === null || Background === void 0 ? void 0 : Background.image) === null;
+    if (noImage)
+        return <react_native_1.View style={[styles.container, { backgroundColor: (Background === null || Background === void 0 ? void 0 : Background.backgroundColor) || palette.grey.light }]}>{children}</react_native_1.View>;
+    return (<react_native_1.ImageBackground source={Background === null || Background === void 0 ? void 0 : Background.image} style={[styles.container, { backgroundColor: Background === null || Background === void 0 ? void 0 : Background.backgroundColor }]} imageStyle={styles.image} resizeMode="cover">
       {children}
     </react_native_1.ImageBackground>);
 };

package/dist/common/components/Button.js

@@ -48,22 +48,25 @@ exports.Button = void 0;
 var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var LoadingHeart_1 = require("../animations/LoadingHeart");
+var useCustomComponents_1 = require("../hooks/useCustomComponents");
 var useForm_1 = require("../hooks/useForm");
 var useTheme_1 = require("../hooks/useTheme");
 var Text_1 = require("./Text");
 exports.Button = (0, react_1.forwardRef)(function (props, ref) {
+    var _a, _b;
     var theme = (0, useTheme_1.useTheme)();
     var styles = getStyles(theme);
-    var _a = (0, useForm_1.useForm)(), handleSubmit = _a.handleSubmit, formLoading = _a.loading;
-    var children = props.children, icon = props.icon, _b = props.variant, variant = _b === void 0 ? 'primary' : _b, _c = props.shadow, shadow = _c === void 0 ? true : _c, _d = props.radio, radio = _d === void 0 ? false : _d, style = props.style, submit = props.submit, rest = __rest(props, ["children", "icon", "variant", "shadow", "radio", "style", "submit"]);
+    var Button = (0, useCustomComponents_1.useCustomComponents)().Button;
+    var _c = (0, useForm_1.useForm)(), handleSubmit = _c.handleSubmit, formLoading = _c.loading;
+    var children = props.children, icon = props.icon, _d = props.variant, variant = _d === void 0 ? 'primary' : _d, _e = props.shadow, shadow = _e === void 0 ? true : _e, _f = props.radio, radio = _f === void 0 ? false : _f, style = props.style, submit = props.submit, rest = __rest(props, ["children", "icon", "variant", "shadow", "radio", "style", "submit"]);
     var backgroundColor = (0, react_1.useMemo)(function () {
         switch (variant) {
             case 'primary':
-                return theme.colors.primary;
+                return theme.palette.primary.base;
             case 'secondary':
-                return theme.colors.secondary;
+                return theme.palette.secondary;
             case 'tertiary':
-                return theme.colors.success;
+                return theme.palette.success;
         }
     }, [variant]);
     var textVariantStyle = (0, react_1.useMemo)(function () {
@@ -83,17 +86,31 @@ exports.Button = (0, react_1.forwardRef)(function (props, ref) {
         (_a = props.onPress) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
     var loading = props.loading || formLoading;
-    return (<react_native_1.TouchableOpacity {...rest} activeOpacity={0.6} ref={ref} style={[styles.buttonBase, { borderRadius: borderRadius }, { backgroundColor: backgroundColor }, shadow && theme.shadows.soft, style]} onPress={onPress} disabled={loading || props.disabled} accessibilityLabel={children} accessibilityState={{ disabled: loading || props.disabled }}>
+    return (<react_native_1.TouchableOpacity {...rest} activeOpacity={0.6} ref={ref} style={[
+            styles.buttonBase,
+            { borderRadius: borderRadius },
+            { backgroundColor: backgroundColor },
+            shadow && theme.shadows.soft,
+            style,
+            (_a = Button === null || Button === void 0 ? void 0 : Button[variant]) === null || _a === void 0 ? void 0 : _a.containerStyle
+        ]} onPress={onPress} disabled={loading || props.disabled} accessibilityLabel={children} accessibilityState={{ disabled: loading || props.disabled }}>
       {loading ? (<LoadingHeart_1.LoadingHeart />) : (<>
           {icon}
-          {children && (<Text_1.Text variant="button" style={textVariantStyle}>
+          {children && (<Text_1.Text style={[
+                    textVariantStyle,
+                    {
+                        textTransform: 'uppercase',
+                        fontWeight: 'bold'
+                    },
+                    (_b = Button === null || Button === void 0 ? void 0 : Button[variant]) === null || _b === void 0 ? void 0 : _b.textStyle
+                ]}>
               {children}
             </Text_1.Text>)}
         </>)}
     </react_native_1.TouchableOpacity>);
 });
 var getStyles = function (_a) {
-    var colors = _a.colors, spacing = _a.spacing;
+    var palette = _a.palette, spacing = _a.spacing;
     return react_native_1.StyleSheet.create({
         buttonBase: {
             width: '100%',
@@ -106,19 +123,19 @@ var getStyles = function (_a) {
             maxHeight: 53
         },
         buttonPrimary: {
-            backgroundColor: colors.primary
+            backgroundColor: palette.primary.base
         },
         buttonSecondary: {
-            backgroundColor: colors.white
+            backgroundColor: palette.white
         },
         buttonTertiary: {
-            backgroundColor: colors.success
+            backgroundColor: palette.success
         },
         textPrimary: {
-            color: colors.white
+            color: palette.white
         },
         textSecondary: {
-            color: colors.primary
+            color: palette.primary.base
         }
     });
 };

package/dist/common/components/Checkbox.js

@@ -31,8 +31,8 @@ var Checkbox = function (_a) {
     var err = formError || error;
     var innerBorderColor = (0, react_1.useMemo)(function () {
         if (localChecked)
-            return theme.colors.primary;
-        return err ? theme.colors.warning : theme.colors.gray;
+            return theme.palette.primary.base;
+        return err ? theme.palette.error : theme.palette.grey.base;
     }, [err, localChecked]);
     var formValue = data === null || data === void 0 ? void 0 : data[id];
     return (<react_native_1.View style={styles.container}>
@@ -42,15 +42,15 @@ var Checkbox = function (_a) {
             setLocalChecked(!checked);
             updateData === null || updateData === void 0 ? void 0 : updateData(id)(!checked);
             (_a = props.onPress) === null || _a === void 0 ? void 0 : _a.call(props, !checked);
-        }} useBuiltInState={false} size={30} textComponent={children} style={styles.style} iconStyle={styles.iconStyle} innerIconStyle={[{ borderColor: innerBorderColor }, styles.innerIconStyle]} iconImageStyle={styles.iconImageStyle} fillColor={theme.colors.primary} disabled={loading} accessibilityState={{ checked: formValue || localChecked }}/>
-      <Text_1.Text variant="sm" color={theme.colors.warning}>
+        }} useBuiltInState={false} size={30} textComponent={children} style={styles.style} iconStyle={styles.iconStyle} innerIconStyle={[{ borderColor: innerBorderColor }, styles.innerIconStyle]} iconImageStyle={styles.iconImageStyle} fillColor={theme.palette.primary.base} disabled={loading} accessibilityState={{ checked: formValue || localChecked }}/>
+      <Text_1.Text variant="sm" color={theme.palette.error} style={{ textAlign: 'auto' }}>
         {err}
       </Text_1.Text>
     </react_native_1.View>);
 };
 exports.Checkbox = Checkbox;
 var getStyles = function (_a) {
-    var spacing = _a.spacing, colors = _a.colors, borderRadius = _a.borderRadius;
+    var spacing = _a.spacing, borderRadius = _a.borderRadius;
     return react_native_1.StyleSheet.create({
         container: {
             columnGap: spacing.xxs,
@@ -61,7 +61,6 @@ var getStyles = function (_a) {
             width: '100%'
         },
         iconStyle: {
-            borderColor: colors.rating,
             borderRadius: borderRadius.sm
         },
         innerIconStyle: {

package/dist/common/components/DateInput.js

@@ -33,7 +33,7 @@ var DateInput = function (_a) {
     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.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.palette.grey.base}/>
 
         <react_native_1.Pressable onPress={onFocus}>
           <CalendarIcon_1.default />
@@ -52,25 +52,25 @@ var DateInput = function (_a) {
 exports.DateInput = DateInput;
 exports.default = exports.DateInput;
 var getStyles = function (_a) {
-    var spacing = _a.spacing, colors = _a.colors, borderRadius = _a.borderRadius, fontSize = _a.fontSize;
+    var spacing = _a.spacing, palette = _a.palette, borderRadius = _a.borderRadius, base = _a.font.base;
     return react_native_1.StyleSheet.create({
         inputContainer: {
             flexDirection: 'row',
             justifyContent: 'space-between',
             padding: spacing.sm,
             borderWidth: 1,
-            borderColor: colors.gray,
+            borderColor: palette.grey.base,
             borderRadius: borderRadius.md,
             width: '100%',
-            backgroundColor: colors.white
+            backgroundColor: palette.white
         },
         input: {
-            color: colors.black,
-            fontSize: fontSize.base,
+            color: palette.black,
+            fontSize: base.size,
             minWidth: '80%'
         },
         error: {
-            borderColor: colors.warning
+            borderColor: palette.error
         }
     });
 };

package/dist/common/components/DoctorProfileCard.js

@@ -49,52 +49,64 @@ 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 useCustomComponents_1 = require("../hooks/useCustomComponents");
 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 _b, _c, _d;
     var professional = _a.professional, description = _a.description;
     var t = (0, react_i18next_1.useTranslation)().t;
     var theme = (0, useTheme_1.useTheme)();
+    var DoctorProfileCard = (0, useCustomComponents_1.useCustomComponents)().DoctorProfileCard;
     var styles = getStyles(theme);
-    var _b = (0, react_1.useState)(false), showProfileModal = _b[0], setShowProfileModal = _b[1];
+    var _e = (0, react_1.useState)(false), showProfileModal = _e[0], setShowProfileModal = _e[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}>
+    return (<react_native_1.View style={[styles.container, DoctorProfileCard === null || DoctorProfileCard === void 0 ? void 0 : DoctorProfileCard.containerStyle]}>
       {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>
+        <Text_1.Text style={[styles.status, DoctorProfileCard === null || DoctorProfileCard === void 0 ? void 0 : DoctorProfileCard.statusTextStyle]} center>
           {description}
         </Text_1.Text>
       </react_native_1.View>
+      {(DoctorProfileCard === null || DoctorProfileCard === void 0 ? void 0 : DoctorProfileCard.LoadingAnimation) ? DoctorProfileCard.LoadingAnimation : <LoadingDotsAnimation_1.LoadingDotsAnimation color={theme.palette.primary.dark}/>}
 
-      <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 style={[styles.specialtiesContainer, DoctorProfileCard === null || DoctorProfileCard === void 0 ? void 0 : DoctorProfileCard.specialtiesContainerStyle]}>
+        {professional.specialties.map(function (specialty, index) {
+            var _a, _b, _c;
+            return ((_a = DoctorProfileCard === null || DoctorProfileCard === void 0 ? void 0 : DoctorProfileCard.SpecialtyBadge) === null || _a === void 0 ? void 0 : _a.customComponent) ? (<DoctorProfileCard.SpecialtyBadge.customComponent key={index} specialty={t("specialty_".concat(specialty))}/>) : (<react_native_1.View key={index} style={[styles.specialty, (_b = DoctorProfileCard === null || DoctorProfileCard === void 0 ? void 0 : DoctorProfileCard.SpecialtyBadge) === null || _b === void 0 ? void 0 : _b.containerStyle]}>
+              <Text_1.Text style={(_c = DoctorProfileCard === null || DoctorProfileCard === void 0 ? void 0 : DoctorProfileCard.SpecialtyBadge) === null || _c === void 0 ? void 0 : _c.textStyle}>{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>)}
+      {professional.profileUrl && ((_b = DoctorProfileCard === null || DoctorProfileCard === void 0 ? void 0 : DoctorProfileCard.ViewProfileButton) === null || _b === void 0 ? void 0 : _b.customComponent) ? (<DoctorProfileCard.ViewProfileButton.customComponent onPress={showModal}/>) : (<react_native_1.TouchableOpacity onPress={showModal} style={[styles.button, (_c = DoctorProfileCard === null || DoctorProfileCard === void 0 ? void 0 : DoctorProfileCard.ViewProfileButton) === null || _c === void 0 ? void 0 : _c.containerStyle]}>
+          <Text_1.Text style={[
+                {
+                    color: theme.palette.primary.base,
+                    fontWeight: 'bold'
+                },
+                (_d = DoctorProfileCard === null || DoctorProfileCard === void 0 ? void 0 : DoctorProfileCard.ViewProfileButton) === null || _d === void 0 ? void 0 : _d.textStyle
+            ]}>
+            {t('view_profile')}
+          </Text_1.Text>
+        </react_native_1.TouchableOpacity>)}
 
       <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;
+    var palette = _a.palette, 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),
+        container: __assign({ width: '100%', backgroundColor: palette.white, borderRadius: borderRadius.xl, padding: spacing.sm, alignItems: 'center', rowGap: spacing.sm }, shadows.soft),
         image: {
             width: 100,
             height: 100,
@@ -114,15 +126,16 @@ var getStyles = function (_a) {
             paddingVertical: spacing.xs,
             paddingHorizontal: spacing.sm,
             borderRadius: borderRadius.full,
-            backgroundColor: colors.background
+            backgroundColor: palette.grey.light
         },
         button: {
-            borderTopColor: colors.divider,
+            borderTopColor: palette.grey.base,
             borderTopWidth: 1,
             paddingTop: spacing.md,
             paddingBottom: spacing.sm - 8, // Hack for centering the button
             width: '100%',
-            alignItems: 'center'
+            alignItems: 'center',
+            backgroundColor: 'transparent'
         }
     });
 };

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

@@ -3,6 +3,7 @@ export interface FormControlProps {
     label?: string;
     error?: string;
     name?: string;
+    type?: 'input' | 'select';
 }
-export declare const FormControl: ({ label, error, name, children }: PropsWithChildren<FormControlProps>) => import("react").JSX.Element;
+export declare const FormControl: ({ label, error, name, type, children }: PropsWithChildren<FormControlProps>) => import("react").JSX.Element;
 export default FormControl;

package/dist/common/components/FormControl.js

@@ -2,18 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormControl = void 0;
 var react_native_1 = require("react-native");
+var useCustomComponents_1 = require("../hooks/useCustomComponents");
 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 label = _a.label, error = _a.error, name = _a.name, _b = _a.type, type = _b === void 0 ? 'input' : _b, children = _a.children;
     var theme = (0, useTheme_1.useTheme)();
     var styles = getStyles(theme);
+    var _c = (0, useCustomComponents_1.useCustomComponents)(), customInputStyle = _c.Input, customSelectStyle = _c.Select;
+    var customComponentStyle = type === 'input' ? customInputStyle : customSelectStyle;
     return (<react_native_1.View style={styles.formControl}>
-      {label && (<Text_1.Text style={styles.label} nativeID={name}>
+      {label && (<Text_1.Text style={[styles.label, customComponentStyle === null || customComponentStyle === void 0 ? void 0 : customComponentStyle.labelStyle]} nativeID={name}>
           {label}
         </Text_1.Text>)}
       {children}
-      <Text_1.Text variant="sm" color={theme.colors.warning} style={styles.error}>
+      <Text_1.Text variant="sm" color={theme.palette.error} style={[styles.error, customComponentStyle === null || customComponentStyle === void 0 ? void 0 : customComponentStyle.errorStyle]}>
         {error}
       </Text_1.Text>
     </react_native_1.View>);
@@ -21,20 +24,22 @@ var FormControl = function (_a) {
 exports.FormControl = FormControl;
 exports.default = exports.FormControl;
 var getStyles = function (_a) {
-    var spacing = _a.spacing, colors = _a.colors, fontSize = _a.fontSize, lineHeight = _a.lineHeight;
+    var spacing = _a.spacing, palette = _a.palette, sm = _a.font.sm;
     return react_native_1.StyleSheet.create({
         formControl: {
             rowGap: spacing.xxs,
             width: '100%'
         },
         label: {
-            color: colors.black,
-            fontSize: fontSize.sm,
-            lineHeight: lineHeight.sm,
-            fontWeight: 'bold'
+            color: palette.black,
+            fontSize: sm.size,
+            lineHeight: sm.lineHeight,
+            fontWeight: 'bold',
+            textAlign: 'auto'
         },
         error: {
-            minHeight: spacing.xs
+            minHeight: spacing.xs,
+            textAlign: 'auto'
         }
     });
 };

package/dist/common/components/Header.js

@@ -89,16 +89,16 @@ var Header = function (_a) {
 };
 exports.Header = Header;
 var getStyles = function (_a) {
-    var colors = _a.colors, spacing = _a.spacing, shadows = _a.shadows;
+    var palette = _a.palette, 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),
+        container: __assign({ width: '100%', paddingHorizontal: spacing.sm, backgroundColor: palette.primary.base, rowGap: spacing.xs }, shadows.soft),
         row: {
             flexDirection: 'row',
             alignItems: 'center',
             columnGap: spacing.sm
         },
         whiteText: {
-            color: colors.white
+            color: palette.white
         },
         iconWrapper: {
             minWidth: 26,

package/dist/common/components/Input.js

@@ -17,12 +17,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 var react_1 = require("react");
 var react_native_1 = require("react-native");
+var useCustomComponents_1 = require("../hooks/useCustomComponents");
 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 Input = (0, useCustomComponents_1.useCustomComponents)().Input;
     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];
@@ -46,29 +48,29 @@ var Input = function (_a) {
     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 }}/>
+      <react_native_1.TextInput {...props} id={id} style={[styles.input, focused && styles.focused, err && styles.error, props.style, Input === null || Input === void 0 ? void 0 : Input.containerStyle]} onFocus={onFocus} onBlur={onBlur} placeholderTextColor={Input === null || Input === void 0 ? void 0 : Input.placeholderTextColor} 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;
+    var palette = _a.palette, spacing = _a.spacing, base = _a.font.base, borderRadius = _a.borderRadius;
     return react_native_1.StyleSheet.create({
         input: {
-            color: colors.black,
-            fontSize: fontSize.base,
+            color: palette.black,
+            fontSize: base.size,
             padding: spacing.sm,
             borderWidth: 1,
-            borderColor: colors.gray,
+            borderColor: palette.grey.base,
             borderRadius: borderRadius.md,
             width: '100%',
-            backgroundColor: colors.white
+            backgroundColor: palette.white
         },
         focused: {
-            borderColor: colors.primary
+            borderColor: palette.primary.base
         },
         error: {
-            borderColor: colors.warning
+            borderColor: palette.error
         }
     });
 };

package/dist/common/components/Modal/AttachmentPreviewModal.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AttachmentPreviewModal = void 0;
 var react_1 = __importDefault(require("react"));
-var react_native_1 = require("react-native");
 var react_i18next_1 = require("react-i18next");
-var _1 = require(".");
+var react_native_1 = require("react-native");
 var useTheme_1 = require("../../hooks/useTheme");
 var TrashIcon_1 = require("../../icons/TrashIcon");
 var Button_1 = require("../Button");
+var _1 = require(".");
 var ModalHeader_1 = require("./ModalHeader");
 var AttachmentPreviewModal = function (_a) {
     var onCancel = _a.onCancel, onRemove = _a.onRemove, visible = _a.visible, attachment = _a.attachment;
@@ -43,10 +43,10 @@ var AttachmentPreviewModal = function (_a) {
 };
 exports.AttachmentPreviewModal = AttachmentPreviewModal;
 var getStyles = function (_a) {
-    var colors = _a.colors, spacing = _a.spacing, borderRadius = _a.borderRadius;
+    var palette = _a.palette, spacing = _a.spacing, borderRadius = _a.borderRadius;
     return react_native_1.StyleSheet.create({
         modal: {
-            backgroundColor: colors.background,
+            backgroundColor: palette.grey.light,
             rowGap: spacing.xs
         },
         main: {
@@ -55,13 +55,13 @@ var getStyles = function (_a) {
         container: {
             width: '100%',
             padding: spacing.xs,
-            backgroundColor: colors.white,
+            backgroundColor: palette.white,
             borderRadius: borderRadius.md,
             rowGap: spacing.xs
         },
         image: {
             width: '100%',
-            backgroundColor: colors.primaryLight,
+            backgroundColor: palette.primary.light,
             borderRadius: borderRadius.sm
         }
     });

package/dist/common/components/Modal/DoctorProfileModal.js

@@ -8,8 +8,8 @@ var react_1 = __importDefault(require("react"));
 var react_i18next_1 = require("react-i18next");
 var react_native_1 = require("react-native");
 var react_native_webview_1 = require("react-native-webview");
-var _1 = require(".");
 var useTheme_1 = require("../../hooks/useTheme");
+var _1 = require(".");
 var ModalHeader_1 = require("./ModalHeader");
 var DoctorProfileModal = function (_a) {
     var onCancel = _a.onCancel, visible = _a.visible, profileUrl = _a.profileUrl;
@@ -26,16 +26,16 @@ var DoctorProfileModal = function (_a) {
 };
 exports.DoctorProfileModal = DoctorProfileModal;
 var getStyles = function (_a) {
-    var colors = _a.colors, spacing = _a.spacing, borderRadius = _a.borderRadius;
+    var palette = _a.palette, spacing = _a.spacing, borderRadius = _a.borderRadius;
     return react_native_1.StyleSheet.create({
         modal: {
-            backgroundColor: colors.background,
+            backgroundColor: palette.grey.light,
             rowGap: spacing.xs,
             height: '80%',
             padding: spacing.xs
         },
         container: {
-            backgroundColor: colors.white,
+            backgroundColor: palette.white,
             borderRadius: borderRadius.md,
             overflow: 'hidden',
             flex: 1

package/dist/common/components/Modal/ModalHeader.js

@@ -6,25 +6,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalHeader = void 0;
 var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
+var useCustomComponents_1 = require("../../hooks/useCustomComponents");
 var useTheme_1 = require("../../hooks/useTheme");
 var CloseIcon_1 = require("../../icons/CloseIcon");
 var Text_1 = require("../Text");
 var ModalHeader = function (_a) {
+    var _b, _c, _d;
     var title = _a.title, onCancel = _a.onCancel;
     var theme = (0, useTheme_1.useTheme)();
     var styles = getStyles(theme);
-    return (<react_native_1.View style={styles.container}>
-      <Text_1.Text variant="h4" style={styles.title}>
+    var Modal = (0, useCustomComponents_1.useCustomComponents)().Modal;
+    if ((_b = Modal === null || Modal === void 0 ? void 0 : Modal.Header) === null || _b === void 0 ? void 0 : _b.customComponent)
+        return <Modal.Header.customComponent title={title} onCancel={onCancel}/>;
+    return (<react_native_1.View style={[styles.container, (_c = Modal === null || Modal === void 0 ? void 0 : Modal.Header) === null || _c === void 0 ? void 0 : _c.containerStyle]}>
+      <Text_1.Text variant="h4" style={[styles.title, (_d = Modal === null || Modal === void 0 ? void 0 : Modal.Header) === null || _d === void 0 ? void 0 : _d.titleStyle]}>
         {title}
       </Text_1.Text>
+
       <react_native_1.TouchableOpacity activeOpacity={0.6} onPress={onCancel}>
-        <CloseIcon_1.CloseIcon color={theme.colors.primary}/>
+        <CloseIcon_1.CloseIcon color={theme.palette.primary.base}/>
       </react_native_1.TouchableOpacity>
     </react_native_1.View>);
 };
 exports.ModalHeader = ModalHeader;
 var getStyles = function (_a) {
-    var colors = _a.colors, spacing = _a.spacing;
+    var palette = _a.palette, spacing = _a.spacing;
     return react_native_1.StyleSheet.create({
         container: {
             flexDirection: 'row',
@@ -34,7 +40,7 @@ var getStyles = function (_a) {
             paddingHorizontal: spacing.sm
         },
         title: {
-            color: colors.primary
+            color: palette.primary.base
         }
     });
 };

package/dist/common/components/Modal/index.js

@@ -28,30 +28,37 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
+var useCustomComponents_1 = require("../../hooks/useCustomComponents");
 var useTheme_1 = require("../../hooks/useTheme");
 var Modal = function (_a) {
     var children = _a.children, modalStyle = _a.modalStyle, props = __rest(_a, ["children", "modalStyle"]);
     var theme = (0, useTheme_1.useTheme)();
     var styles = getStyles(theme);
+    var Modal = (0, useCustomComponents_1.useCustomComponents)().Modal;
     return (<react_native_1.Modal {...props} transparent statusBarTranslucent animationType="fade">
-      <react_native_1.TouchableOpacity style={styles.container} onPress={props.onRequestClose}>
+      <react_native_1.TouchableOpacity style={[
+            styles.container,
+            {
+                backgroundColor: 'rgba(7, 30, 56, 0.55)'
+            },
+            Modal === null || Modal === void 0 ? void 0 : Modal.containerStyle
+        ]} onPress={props.onRequestClose}>
         <react_native_1.TouchableWithoutFeedback>
-          <react_native_1.View style={[styles.modal, modalStyle]}>{children}</react_native_1.View>
+          <react_native_1.View style={[styles.modal, modalStyle, Modal === null || Modal === void 0 ? void 0 : Modal.innerContainerStyle]}>{children}</react_native_1.View>
         </react_native_1.TouchableWithoutFeedback>
       </react_native_1.TouchableOpacity>
     </react_native_1.Modal>);
 };
 exports.Modal = Modal;
 var getStyles = function (_a) {
-    var colors = _a.colors, spacing = _a.spacing, shadows = _a.shadows, borderRadius = _a.borderRadius;
+    var palette = _a.palette, spacing = _a.spacing, shadows = _a.shadows, borderRadius = _a.borderRadius;
     return react_native_1.StyleSheet.create({
         container: {
             flex: 1,
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: colors.backdrop,
             padding: spacing.sm
         },
-        modal: __assign({ backgroundColor: colors.white, borderRadius: borderRadius.xl, width: '100%' }, shadows.soft)
+        modal: __assign({ backgroundColor: palette.white, borderRadius: borderRadius.xl, width: '100%' }, shadows.soft)
     });
 };

package/dist/common/components/PhoneInput.js

@@ -54,28 +54,28 @@ var PhoneInput = function (_a) {
 exports.PhoneInput = PhoneInput;
 exports.default = exports.PhoneInput;
 var getStyles = function (_a) {
-    var colors = _a.colors, spacing = _a.spacing, fontSize = _a.fontSize, borderRadius = _a.borderRadius;
+    var palette = _a.palette, spacing = _a.spacing, base = _a.font.base, borderRadius = _a.borderRadius;
     return react_native_1.StyleSheet.create({
         input: {
             padding: spacing.sm,
             borderWidth: 1,
-            borderColor: colors.gray,
+            borderColor: palette.grey.base,
             borderRadius: borderRadius.md,
             width: '100%',
-            backgroundColor: colors.white
+            backgroundColor: palette.white
         },
         focused: {
-            borderColor: colors.primary
+            borderColor: palette.primary.base
         },
         inputText: {
-            color: colors.black,
-            fontSize: fontSize.base,
+            color: palette.black,
+            fontSize: base.size,
             borderLeftWidth: 1,
-            borderLeftColor: colors.gray,
+            borderLeftColor: palette.grey.base,
             paddingLeft: spacing.xs
         },
         error: {
-            borderColor: colors.warning
+            borderColor: palette.error
         }
     });
 };