@tap-payments/auth-jsconnect 2.5.22-test → 3.0.0-test

package/build/features/shared/UploadFile/FileUpload.d.ts

@@ -1,6 +1,11 @@
 import React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
+import { BoxProps } from '@mui/material/Box';
 import { FileInfo, FileRemoveType } from '../../../constants';
+interface InputContainerStyledProps extends BoxProps {
+    readOnly?: boolean;
+    hasError?: boolean;
+}
 export declare const InputContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
     children?: React.ReactNode;
     component?: React.ElementType<any> | undefined;
@@ -8,7 +13,7 @@ export declare const InputContainerStyled: import("@emotion/styled").StyledCompo
     sx?: SxProps<Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "component" | "ref" | "sx"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "component" | "ref" | "sx"> & import("@mui/system").MUIStyledCommonProps<Theme> & InputContainerStyledProps, {}, {}>;
 export declare type FileUploadProps = {
     key?: string;
     show: boolean;
@@ -27,6 +32,7 @@ export declare type FileUploadProps = {
     validFileFormats?: Array<string>;
     readOnly?: boolean;
     isVerified?: boolean;
+    label: string;
 };
-declare const FileUpload: ({ key, show, title, file, uploadedFile, onSuccess, onDelete, onUpdate, sx, purpose, isSubmitting, fileRemoveType, initialFileId, validFileFormats, readOnly, isVerified }: FileUploadProps) => JSX.Element;
+declare const FileUpload: ({ key, show, title, file, uploadedFile, onSuccess, onDelete, onUpdate, sx, purpose, isSubmitting, fileRemoveType, initialFileId, validFileFormats, readOnly, isVerified, label }: FileUploadProps) => JSX.Element;
 export default FileUpload;

package/build/features/shared/UploadFile/FileUpload.js

@@ -57,45 +57,71 @@ import { CircularProgress } from '../../../components/ProgressBar';
 import Text from '../../../components/Text';
 import Icon from '../../../components/Icon';
 import { maskFileName } from '../../../utils';
+import { ThemeMode } from '../../../@types';
 import API from '../../../api';
 import { DeleteFileStatus, FileStatus, ICONS_NAMES, MAX_FILE_SIZE_FOUR_MB, VALID_FILE_FORMATS, FileRemoveType } from '../../../constants';
 import CheckIcon from '../../shared/CheckIcon';
-var BoxStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'readOnly'; } })(function (_a) {
-    var theme = _a.theme, readOnly = _a.readOnly;
-    return (__assign(__assign(__assign({ direction: theme.direction }, theme.typography.subtitle2), { color: theme.palette.primary.main, fontWeight: theme.typography.fontWeightBold, background: theme.palette.background.default, padding: theme.spacing(0, 2.5, 0), width: '88%', wordBreak: 'break-all', display: 'flex', justifyContent: 'space-between' }), (readOnly && { opacity: '0.6' })));
+var BoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ direction: theme.direction }, theme.typography.subtitle2), { color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.success.dark, fontWeight: theme.typography.fontWeightRegular, width: '88%', wordBreak: 'break-all', display: 'flex', justifyContent: 'space-between', minHeight: theme.spacing(6.75) }));
 });
 var UploadBoxStyled = styled(Box, { shouldForwardProp: function (prop) { return !['uploading', 'readOnly'].includes(prop.toString()); } })(function (_a) {
     var theme = _a.theme, uploading = _a.uploading, readOnly = _a.readOnly;
-    return (__assign(__assign(__assign({}, theme.typography.caption), { background: theme.palette.primary.main, color: theme.palette.common.white, fontWeight: theme.typography.fontWeightRegular, cursor: 'pointer', width: '12%', display: 'flex', justifyContent: 'center', alignItems: 'center' }), ((readOnly || uploading) && { background: alpha(theme.palette.primary.main, 0.5), cursor: 'default' })));
+    return (__assign(__assign(__assign({}, theme.typography.caption), { color: theme.palette.common.white, fontWeight: theme.typography.fontWeightRegular, cursor: 'pointer', width: '12%', display: 'flex', justifyContent: 'center', alignItems: 'center' }), ((readOnly || uploading) && { background: alpha(theme.palette.info.light, 0.5), cursor: 'default' })));
 });
 var ClearIconStyled = styled(ClearIcon)(function (_a) {
     var theme = _a.theme;
     return ({
-        width: theme.spacing(3),
-        height: theme.spacing(3),
+        width: theme.spacing(2.25),
+        height: theme.spacing(2.25),
         cursor: 'pointer',
-        color: theme.palette.common.white
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary.main : theme.palette.primary.contrastText
     });
 });
-export var InputContainerStyled = styled(Box)(function () { return ({
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'center'
-}); });
+var LabelStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        fontSize: theme.spacing(1.375),
+        color: theme.palette.text.secondary,
+        fontWeight: theme.typography.fontWeightRegular,
+        marginTop: theme.spacing(1)
+    });
+});
+export var InputContainerStyled = styled(Box, {
+    shouldForwardProp: function (prop) { return !['readOnly', 'hasError'].includes(prop); }
+})(function (_a) {
+    var theme = _a.theme, readOnly = _a.readOnly, hasError = _a.hasError;
+    return (__assign(__assign({ display: 'flex', width: '100%', justifyContent: 'center', background: theme.palette.info.light, borderRadius: theme.spacing(1), border: "1px solid ".concat(alpha(theme.palette.text.secondary, 0.3)), paddingInlineStart: theme.spacing(1.25) }, (readOnly && { opacity: '0.6' })), (hasError && {
+        border: "1px solid ".concat(alpha(theme.palette.warning.main, 0.3)),
+        background: alpha(theme.palette.warning.main, 0.07)
+    })));
+});
 var ProgressBoxStyled = styled(Box)(function () { return ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center'
 }); });
-var WarningIconStyled = styled(Icon)(function (_a) {
+var FileContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        width: theme.spacing(1.625),
-        height: theme.spacing(1.625),
-        marginInline: theme.spacing(0.5)
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing(1, 0, 0),
+        width: '100%'
     });
 });
-var ErrorIconStyled = styled(Icon)(function (_a) {
+var FileNameBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'row',
+        marginInlineStart: theme.spacing(-0.25),
+        img: __assign({}, (theme.palette.mode === ThemeMode.DARK && {
+            filter: 'brightness(0) invert(1)'
+        }))
+    });
+});
+var WarningIconStyled = styled(Icon)(function (_a) {
     var theme = _a.theme;
     return ({
         width: theme.spacing(1.625),
@@ -105,10 +131,18 @@ var ErrorIconStyled = styled(Icon)(function (_a) {
 });
 var WarningContainer = styled(Box)(function (_a) {
     var theme = _a.theme;
-    return (__assign({ background: alpha(theme.palette.warning.main, 0.1), paddingBlock: theme.spacing(1.5), paddingInlineStart: theme.spacing(2.5), flexDirection: 'row', display: 'flex', justifyContent: 'center', color: theme.palette.warning.light, padding: theme.spacing(0.5, 1), borderRadius: '101px', alignItems: 'center', marginTop: theme.spacing(1.25) }, theme.typography.caption));
+    return ({
+        flexDirection: 'row',
+        display: 'flex',
+        justifyContent: 'start',
+        color: theme.palette.warning.main,
+        alignItems: 'center',
+        marginTop: theme.spacing(1),
+        fontSize: theme.spacing(1.25)
+    });
 });
 var FileUpload = function (_a) {
-    var key = _a.key, show = _a.show, title = _a.title, file = _a.file, uploadedFile = _a.uploadedFile, onSuccess = _a.onSuccess, onDelete = _a.onDelete, onUpdate = _a.onUpdate, sx = _a.sx, purpose = _a.purpose, isSubmitting = _a.isSubmitting, fileRemoveType = _a.fileRemoveType, initialFileId = _a.initialFileId, _b = _a.validFileFormats, validFileFormats = _b === void 0 ? VALID_FILE_FORMATS : _b, readOnly = _a.readOnly, isVerified = _a.isVerified;
+    var key = _a.key, show = _a.show, title = _a.title, file = _a.file, uploadedFile = _a.uploadedFile, onSuccess = _a.onSuccess, onDelete = _a.onDelete, onUpdate = _a.onUpdate, sx = _a.sx, purpose = _a.purpose, isSubmitting = _a.isSubmitting, fileRemoveType = _a.fileRemoveType, initialFileId = _a.initialFileId, _b = _a.validFileFormats, validFileFormats = _b === void 0 ? VALID_FILE_FORMATS : _b, readOnly = _a.readOnly, isVerified = _a.isVerified, label = _a.label;
     var theme = useTheme();
     var t = useTranslation().t;
     var _c = file || {}, name = _c.name, size = _c.size, type = _c.type;
@@ -224,8 +258,6 @@ var FileUpload = function (_a) {
         onDelete();
     };
     var getProgressComponent = function () {
-        if (status === FileStatus.ERROR)
-            return _jsx(ErrorIconStyled, { src: ICONS_NAMES.ERROR_ICON });
         if (status === FileStatus.SUCCESS)
             return _jsx(CheckIcon, { isVerified: isVerified });
         if (status === FileStatus.DOWNLOADING && !progress)
@@ -253,15 +285,10 @@ var FileUpload = function (_a) {
     }, [name]);
     var canDownloadFile = fileId && status !== FileStatus.DOWNLOADING;
     var canDeleteFile = status !== FileStatus.UPLOADING && status !== FileStatus.DOWNLOADING;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(Box, __assign({ sx: { pointerEvents: isSubmitting ? 'none' : 'auto' } }, { children: _jsxs(InputContainerStyled, __assign({ sx: __assign({ borderTop: "1px solid ".concat(alpha(theme.palette.divider, 0.8)), borderBottom: "1px solid ".concat(alpha(theme.palette.divider, 0.8)) }, sx) }, { children: [_jsxs(BoxStyled, __assign({ readOnly: readOnly }, { children: [_jsxs(Box, __assign({ sx: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    padding: theme.spacing(1.5, 0, 1.5),
-                                    width: '100%'
-                                } }, { children: [_jsxs(Box, __assign({ sx: { display: 'flex', flexDirection: 'row', cursor: canDownloadFile ? 'pointer' : 'auto' }, onClick: canDownloadFile ? function () { return downloadFile(); } : undefined }, { children: [_jsx(Icon, { src: ICONS_NAMES.DOC_ICON }), _jsx(Text, { children: name ? maskFileName(name) : uploadedFile.fileId })] })), _jsx(Box, __assign({ sx: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } }, { children: _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsxs(WarningContainer, { children: [_jsx(WarningIconStyled, { src: ICONS_NAMES.WARNING_ICON }), _jsx(Text, { children: t(error) })] }) })) }))] })), _jsx(ProgressBoxStyled, { children: getProgressComponent() })] })), _jsx(UploadBoxStyled, __assign({ readOnly: readOnly, uploading: status === FileStatus.UPLOADING || status === FileStatus.DOWNLOADING, onClick: function () {
-                            if (readOnly)
-                                return;
-                            canDeleteFile && handleDeleteFile();
-                        } }, { children: deleteStatus === DeleteFileStatus.DELETING ? (_jsx(MUICircularProgress, { size: 25, thickness: 5, sx: { color: theme.palette.common.white } })) : (_jsx(ClearIconStyled, {})) }))] })) }), key) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(Box, __assign({ sx: { pointerEvents: isSubmitting ? 'none' : 'auto', ml: 3, mr: 3 } }, { children: [_jsxs(InputContainerStyled, __assign({ sx: sx, readOnly: readOnly }, { children: [_jsxs(BoxStyled, { children: [_jsxs(Box, __assign({ sx: { display: 'flex', flexDirection: 'column', width: '100%' } }, { children: [_jsx(LabelStyled, { children: t(label) }), _jsx(FileContainerStyled, { children: _jsxs(FileNameBoxStyled, __assign({ sx: { cursor: canDownloadFile ? 'pointer' : 'auto' }, onClick: canDownloadFile ? function () { return downloadFile(); } : undefined }, { children: [_jsx(Icon, { src: ICONS_NAMES.DOC_ICON }), _jsx(Text, { children: name ? maskFileName(name) : uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.fileId })] })) })] })), _jsx(ProgressBoxStyled, { children: getProgressComponent() })] }), _jsx(UploadBoxStyled, __assign({ readOnly: readOnly, uploading: status === FileStatus.UPLOADING || status === FileStatus.DOWNLOADING, onClick: function () {
+                                if (readOnly)
+                                    return;
+                                canDeleteFile && handleDeleteFile();
+                            } }, { children: deleteStatus === DeleteFileStatus.DELETING ? (_jsx(MUICircularProgress, { size: 25, thickness: 5, sx: { color: theme.palette.common.white } })) : (_jsx(ClearIconStyled, {})) }))] })), _jsx(Box, __assign({ sx: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } }, { children: _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsxs(WarningContainer, { children: [_jsx(WarningIconStyled, { src: ICONS_NAMES.WARNING_INFO_ICON }), t(error)] }) })) }))] }), key) })));
 };
 export default FileUpload;

package/build/features/shared/UploadFile/UploadWrapper.js

@@ -18,8 +18,8 @@ import Box from '@mui/material/Box';
 import { DragAndDrop } from '../../../components/FileInput';
 import Collapse from '../../../components/Collapse';
 import { getFileType } from '../../../utils';
+import Text from '../../../components/Text';
 import { DeleteFileStatus, FileStatus } from '../../../constants';
-import { InputLabelStyled } from '../../shared/Input/Input';
 import { ScreenContainer } from '../../shared/Containers';
 import Mandatory from '../../shared/Mandatory';
 import FileUpload from './FileUpload';
@@ -29,12 +29,16 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
         marginBlockStart: theme.spacing(0)
     });
 });
+var InputLabelStyled = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'hasError'; } })(function (_a) {
+    var theme = _a.theme, hasError = _a.hasError;
+    return (__assign({ color: hasError ? theme.palette.warning.main : theme.palette.text.secondary, fontWeight: theme.typography.fontWeightMedium, fontSize: theme.spacing(1.375) }, theme.typography.caption));
+});
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
         justifyContent: 'space-between',
-        padding: theme.spacing(0, 2.5, 1.25, 2.5),
+        padding: theme.spacing(0, 3, 1.25, 3),
         alignItems: 'center'
     });
 });
@@ -110,6 +114,6 @@ var UploadWrapper = function (_a) {
     var fileExists = !!fileInfo;
     var showUploadedInputField = (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.status) === FileStatus.SUCCESS || (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.status) === FileStatus.DOWNLOADING || (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.deleteStatus) === DeleteFileStatus.DELETING;
     var showDragAndDrop = !showUploadedInputField && !readOnly;
-    return (_jsxs(FeatureStyled, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: _jsxs(_Fragment, { children: [label, required && _jsx(Mandatory, {})] }) }) }), _jsx(Collapse, __assign({ in: showDragAndDrop }, { children: _jsx(InputContainerStyled, __assign({ sx: { mb: 2.5 } }, { children: _jsx(DragAndDrop, { title: title, subTitle: subTitle, description: dragDescription, fileExists: fileExists, uploadingTitle: uploadingTitle, successTitle: successTitle, progress: fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.progress, uploading: (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.status) === FileStatus.UPLOADING, uploadSuccess: (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.status) === FileStatus.SUCCESS, onSuccess: handleFileChange, error: (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.error) || error, multiple: false }) })) })), _jsx(Collapse, __assign({ in: fileExists, timeout: 300 }, { children: _jsx(FileUpload, { validFileFormats: validFileFormats, readOnly: readOnly, show: showUploadedInputField, fileRemoveType: fileRemoveType, purpose: purpose, title: fileTitle || '', isSubmitting: isSubmitting, uploadedFile: fileInfo, file: fileData, onSuccess: handleSuccess, onDelete: handleDelete, onUpdate: handleUpdate, initialFileId: defaultFile === null || defaultFile === void 0 ? void 0 : defaultFile.id, isVerified: isVerified }) }))] }));
+    return (_jsxs(FeatureStyled, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, __assign({ hasError: (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.error) || error }, { children: _jsxs(_Fragment, { children: [label, required && _jsx(Mandatory, {})] }) })) }), _jsx(Collapse, __assign({ in: showDragAndDrop }, { children: _jsx(InputContainerStyled, { children: _jsx(DragAndDrop, { title: title, subTitle: subTitle, description: dragDescription, fileExists: fileExists, uploadingTitle: uploadingTitle, successTitle: successTitle, progress: fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.progress, uploading: (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.status) === FileStatus.UPLOADING, uploadSuccess: (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.status) === FileStatus.SUCCESS, onSuccess: handleFileChange, error: (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.error) || error, multiple: false }) }) })), _jsx(Collapse, __assign({ in: fileExists, timeout: 300 }, { children: _jsx(FileUpload, { label: label, validFileFormats: validFileFormats, readOnly: readOnly, show: showUploadedInputField, fileRemoveType: fileRemoveType, purpose: purpose, title: fileTitle || '', isSubmitting: isSubmitting, uploadedFile: fileInfo, file: fileData, onSuccess: handleSuccess, onDelete: handleDelete, onUpdate: handleUpdate, initialFileId: defaultFile === null || defaultFile === void 0 ? void 0 : defaultFile.id, isVerified: isVerified }) }))] }));
 };
 export default React.memo(UploadWrapper);

package/build/features/shared/UploadFile/index.d.ts

@@ -1,3 +1,2 @@
-import UploadFile from './UploadFile';
 import UploadWrapper from './UploadWrapper';
-export { UploadFile, UploadWrapper };
+export default UploadWrapper;

package/build/features/shared/UploadFile/index.js

@@ -1,3 +1,2 @@
-import UploadFile from './UploadFile';
 import UploadWrapper from './UploadWrapper';
-export { UploadFile, UploadWrapper };
+export default UploadWrapper;

package/build/features/shared/UploadMultipleFile/UploadFile.d.ts

@@ -1,6 +1,11 @@
 import React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
+import { BoxProps } from '@mui/material/Box';
 import { FileInfo, FileType } from '../../../constants';
+interface InputContainerStyledProps extends BoxProps {
+    readOnly?: boolean;
+    hasError?: boolean;
+}
 export declare const InputContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
     children?: React.ReactNode;
     component?: React.ElementType<any> | undefined;
@@ -8,7 +13,7 @@ export declare const InputContainerStyled: import("@emotion/styled").StyledCompo
     sx?: SxProps<Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "component" | "ref" | "sx"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "component" | "ref" | "sx"> & import("@mui/system").MUIStyledCommonProps<Theme> & InputContainerStyledProps, {}, {}>;
 export declare type UploadFileProps = {
     index: number;
     purpose: string;
@@ -24,6 +29,7 @@ export declare type UploadFileProps = {
     isSubmitting?: boolean;
     readOnly?: boolean;
     isVerified?: boolean;
+    label: string;
 };
-declare const UploadFile: ({ index, title, file, fileType, uploadedFiles, onSuccess, onDelete, onUpdate, sx, purpose, isSubmitting, readOnly, isVerified }: UploadFileProps) => JSX.Element;
+declare const UploadFile: ({ index, title, file, fileType, uploadedFiles, onSuccess, onDelete, onUpdate, sx, purpose, isSubmitting, readOnly, isVerified, label }: UploadFileProps) => JSX.Element;
 export default UploadFile;

package/build/features/shared/UploadMultipleFile/UploadFile.js

@@ -60,42 +60,68 @@ import { maskFileName } from '../../../utils';
 import API from '../../../api';
 import { DeleteFileStatus, FileStatus, ICONS_NAMES, MAX_FILE_SIZE_FOUR_MB, VALID_FILE_FORMATS } from '../../../constants';
 import CheckIcon from '../../shared/CheckIcon';
-var BoxStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'readOnly'; } })(function (_a) {
-    var theme = _a.theme, readOnly = _a.readOnly;
-    return (__assign(__assign(__assign({ direction: theme.direction }, theme.typography.subtitle2), { color: theme.palette.primary.main, fontWeight: theme.typography.fontWeightBold, background: theme.palette.background.default, padding: theme.spacing(0, 2.5, 0), width: '88%', wordBreak: 'break-all', display: 'flex', justifyContent: 'space-between' }), (readOnly && { opacity: '0.6' })));
+import { ThemeMode } from '../../../@types';
+var BoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ direction: theme.direction }, theme.typography.subtitle2), { color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.success.dark, fontWeight: theme.typography.fontWeightRegular, width: '88%', wordBreak: 'break-all', display: 'flex', justifyContent: 'space-between', minHeight: theme.spacing(6.75) }));
 });
 var UploadBoxStyled = styled(Box, { shouldForwardProp: function (prop) { return !['uploading', 'readOnly'].includes(prop.toString()); } })(function (_a) {
     var theme = _a.theme, uploading = _a.uploading, readOnly = _a.readOnly;
-    return (__assign(__assign(__assign({}, theme.typography.caption), { background: uploading ? alpha(theme.palette.primary.main, 0.5) : theme.palette.primary.main, color: theme.palette.common.white, fontWeight: theme.typography.fontWeightRegular, cursor: 'pointer', width: '12%', display: 'flex', justifyContent: 'center', alignItems: 'center' }), ((readOnly || uploading) && { background: alpha(theme.palette.primary.main, 0.5), cursor: 'default' })));
+    return (__assign(__assign(__assign({}, theme.typography.caption), { color: theme.palette.common.white, fontWeight: theme.typography.fontWeightRegular, cursor: 'pointer', width: '12%', display: 'flex', justifyContent: 'center', alignItems: 'center' }), ((readOnly || uploading) && { background: alpha(theme.palette.info.light, 0.5), cursor: 'default' })));
 });
 var ClearIconStyled = styled(ClearIcon)(function (_a) {
     var theme = _a.theme;
     return ({
-        width: theme.spacing(3),
-        height: theme.spacing(3),
+        width: theme.spacing(2.25),
+        height: theme.spacing(2.25),
         cursor: 'pointer',
-        color: theme.palette.common.white
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary.main : theme.palette.primary.contrastText
     });
 });
-export var InputContainerStyled = styled(Box)(function () { return ({
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'center'
-}); });
+var LabelStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        fontSize: theme.spacing(1.375),
+        color: theme.palette.text.secondary,
+        fontWeight: theme.typography.fontWeightRegular,
+        marginTop: theme.spacing(1)
+    });
+});
+export var InputContainerStyled = styled(Box, {
+    shouldForwardProp: function (prop) { return !['readOnly', 'hasError'].includes(prop); }
+})(function (_a) {
+    var theme = _a.theme, readOnly = _a.readOnly, hasError = _a.hasError;
+    return (__assign(__assign({ display: 'flex', width: '100%', justifyContent: 'center', background: theme.palette.info.light, borderRadius: theme.spacing(1), border: "1px solid ".concat(alpha(theme.palette.text.secondary, 0.3)), paddingInlineStart: theme.spacing(1.25) }, (readOnly && { opacity: '0.6' })), (hasError && {
+        border: "1px solid ".concat(alpha(theme.palette.warning.main, 0.3)),
+        background: alpha(theme.palette.warning.main, 0.07)
+    })));
+});
 var ProgressBoxStyled = styled(Box)(function () { return ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center'
 }); });
-var WarningIconStyled = styled(Icon)(function (_a) {
+var FileContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        width: theme.spacing(1.625),
-        height: theme.spacing(1.625),
-        marginInline: theme.spacing(0.5)
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing(1, 0, 0),
+        width: '100%'
     });
 });
-var ErrorIconStyled = styled(Icon)(function (_a) {
+var FileNameBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'row',
+        marginInlineStart: theme.spacing(-0.25),
+        img: __assign({}, (theme.palette.mode === ThemeMode.DARK && {
+            filter: 'brightness(0) invert(1)'
+        }))
+    });
+});
+var WarningIconStyled = styled(Icon)(function (_a) {
     var theme = _a.theme;
     return ({
         width: theme.spacing(1.625),
@@ -105,10 +131,18 @@ var ErrorIconStyled = styled(Icon)(function (_a) {
 });
 var WarningContainer = styled(Box)(function (_a) {
     var theme = _a.theme;
-    return (__assign({ background: alpha(theme.palette.warning.main, 0.1), paddingBlock: theme.spacing(1.5), paddingInlineStart: theme.spacing(2.5), flexDirection: 'row', display: 'flex', justifyContent: 'center', color: theme.palette.warning.light, padding: theme.spacing(0.5, 1), borderRadius: '101px', alignItems: 'center', marginTop: theme.spacing(1.25) }, theme.typography.caption));
+    return ({
+        flexDirection: 'row',
+        display: 'flex',
+        justifyContent: 'start',
+        color: theme.palette.warning.main,
+        alignItems: 'center',
+        marginTop: theme.spacing(1),
+        fontSize: theme.spacing(1.25)
+    });
 });
 var UploadFile = function (_a) {
-    var index = _a.index, title = _a.title, file = _a.file, fileType = _a.fileType, uploadedFiles = _a.uploadedFiles, onSuccess = _a.onSuccess, onDelete = _a.onDelete, onUpdate = _a.onUpdate, sx = _a.sx, purpose = _a.purpose, isSubmitting = _a.isSubmitting, readOnly = _a.readOnly, isVerified = _a.isVerified;
+    var index = _a.index, title = _a.title, file = _a.file, fileType = _a.fileType, uploadedFiles = _a.uploadedFiles, onSuccess = _a.onSuccess, onDelete = _a.onDelete, onUpdate = _a.onUpdate, sx = _a.sx, purpose = _a.purpose, isSubmitting = _a.isSubmitting, readOnly = _a.readOnly, isVerified = _a.isVerified, label = _a.label;
     var theme = useTheme();
     var t = useTranslation().t;
     var _b = file || {}, name = _b.name, size = _b.size, type = _b.type;
@@ -226,8 +260,6 @@ var UploadFile = function (_a) {
         onDelete(index);
     };
     var getProgressComponent = function () {
-        if (status === FileStatus.ERROR)
-            return _jsx(ErrorIconStyled, { src: ICONS_NAMES.ERROR_ICON });
         if (status === FileStatus.SUCCESS)
             return _jsx(CheckIcon, { isVerified: isVerified });
         if (status === FileStatus.DOWNLOADING && !progress)
@@ -259,15 +291,10 @@ var UploadFile = function (_a) {
     }, []);
     var canDownloadFile = uploadedFile.fileId && status !== FileStatus.DOWNLOADING;
     var canDeleteFile = !isAnyFileDoingDeleteUploadDownload;
-    return (_jsx(Box, __assign({ sx: { pointerEvents: isSubmitting ? 'none' : 'auto' } }, { children: _jsxs(InputContainerStyled, __assign({ sx: __assign({ borderTop: "1px solid ".concat(alpha(theme.palette.divider, 0.8)) }, sx) }, { children: [_jsxs(BoxStyled, __assign({ readOnly: readOnly }, { children: [_jsxs(Box, __assign({ sx: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                padding: theme.spacing(1.5, 0, 1.5),
-                                width: '100%'
-                            } }, { children: [_jsxs(Box, __assign({ sx: { display: 'flex', flexDirection: 'row', cursor: canDownloadFile ? 'pointer' : 'auto' }, onClick: canDownloadFile ? function () { return downloadFile(); } : undefined }, { children: [_jsx(Icon, { src: ICONS_NAMES.DOC_ICON }), _jsx(Text, { children: name ? maskFileName(name) : uploadedFile.fileId })] })), _jsx(Box, __assign({ sx: { display: 'flex', flexDirection: 'row', justifyContent: 'center' } }, { children: _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsxs(WarningContainer, { children: [_jsx(WarningIconStyled, { src: ICONS_NAMES.WARNING_ICON }), _jsx(Text, { children: t(error) })] }) })) }))] })), _jsx(ProgressBoxStyled, { children: getProgressComponent() })] })), _jsx(UploadBoxStyled, __assign({ readOnly: readOnly, uploading: status === FileStatus.UPLOADING || (!!isAnyFileDoingDeleteUploadDownload && deleteStatus !== DeleteFileStatus.DELETING), onClick: function () {
-                        if (readOnly)
-                            return;
-                        canDeleteFile && handleDeleteFile(index);
-                    } }, { children: deleteStatus === DeleteFileStatus.DELETING ? (_jsx(MUICircularProgress, { size: 25, thickness: 5, sx: { color: theme.palette.common.white } })) : (_jsx(ClearIconStyled, {})) }))] })) }), index));
+    return (_jsxs(Box, __assign({ sx: { pointerEvents: isSubmitting ? 'none' : 'auto', ml: 3, mr: 3 } }, { children: [_jsxs(InputContainerStyled, __assign({ readOnly: readOnly, sx: sx, hasError: !!error }, { children: [_jsxs(BoxStyled, { children: [_jsxs(Box, __assign({ sx: { display: 'flex', flexDirection: 'column', width: '100%' } }, { children: [_jsx(LabelStyled, { children: t(label) }), _jsx(FileContainerStyled, { children: _jsxs(FileNameBoxStyled, __assign({ sx: { cursor: canDownloadFile ? 'pointer' : 'auto' }, onClick: canDownloadFile ? function () { return downloadFile(); } : undefined }, { children: [_jsx(Icon, { src: ICONS_NAMES.DOC_ICON }), _jsx(Text, { children: name ? maskFileName(name) : uploadedFile.fileId })] })) })] })), _jsx(ProgressBoxStyled, { children: getProgressComponent() })] }), _jsx(UploadBoxStyled, __assign({ readOnly: readOnly, uploading: status === FileStatus.UPLOADING || (!!isAnyFileDoingDeleteUploadDownload && deleteStatus !== DeleteFileStatus.DELETING), onClick: function () {
+                            if (readOnly)
+                                return;
+                            canDeleteFile && handleDeleteFile(index);
+                        } }, { children: deleteStatus === DeleteFileStatus.DELETING ? (_jsx(MUICircularProgress, { size: 25, thickness: 5, sx: { color: theme.palette.common.white } })) : (_jsx(ClearIconStyled, {})) }))] })), _jsx(Box, __assign({ sx: { display: 'flex', flexDirection: 'row', justifyContent: 'start' } }, { children: _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsxs(WarningContainer, { children: [_jsx(WarningIconStyled, { src: ICONS_NAMES.WARNING_INFO_ICON }), t(error)] }) })) }))] }), index));
 };
 export default UploadFile;

package/build/features/shared/UploadMultipleFile/UploadMultipleFile.js

@@ -22,13 +22,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController } from 'react-hook-form';
-import { alpha, styled, useTheme } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { DragAndDrop } from '../../../components/FileInput';
 import Collapse from '../../../components/Collapse';
+import Text from '../../../components/Text';
+import { ThemeMode } from '../../../@types';
 import { getFileType } from '../../../utils';
 import { DeleteFileStatus, FileStatus } from '../../../constants';
-import { InputLabelStyled } from '../../shared/Input/Input';
 import { ScreenContainer } from '../../shared/Containers';
 import Mandatory from '../../shared/Mandatory';
 import UploadFile from './UploadFile';
@@ -38,12 +39,16 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
         marginBlockStart: theme.spacing(0)
     });
 });
+var InputLabelStyled = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'hasError'; } })(function (_a) {
+    var theme = _a.theme, hasError = _a.hasError;
+    return (__assign({ color: hasError ? theme.palette.warning.main : theme.palette.text.secondary, fontWeight: theme.typography.fontWeightMedium, fontSize: theme.spacing(1.375) }, theme.typography.caption));
+});
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
         justifyContent: 'space-between',
-        padding: theme.spacing(0, 2.5, 1.25, 2.5),
+        padding: theme.spacing(0, 3, 1.25, 3),
         alignItems: 'center'
     });
 });
@@ -58,13 +63,13 @@ var UploadCountBox = styled(Box)(function (_a) {
         fontSize: theme.typography.overline.fontSize,
         padding: theme.spacing(0.375, 0.75, 0.375, 0.75),
         borderRadius: theme.spacing(5.625),
-        backgroundColor: alpha(theme.palette.secondary.main, 0.4)
+        backgroundColor: alpha(theme.palette.secondary.main, 0.4),
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary
     });
 });
 var UploadMultipleFile = function (_a) {
     var id = _a.id, label = _a.label, control = _a.control, required = _a.required, fileType = _a.fileType, title = _a.title, subTitle = _a.subTitle, dragDescription = _a.dragDescription, uploadingTitle = _a.uploadingTitle, successTitle = _a.successTitle, isSubmitting = _a.isSubmitting, onFileUploaded = _a.onFileUploaded, fileUploadingStatus = _a.fileUploadingStatus, onDeleteFile = _a.onDeleteFile, maxLimit = _a.maxLimit, purpose = _a.purpose, fileTitle = _a.fileTitle, defaultFiles = _a.defaultFiles, readOnly = _a.readOnly, isVerified = _a.isVerified;
     var t = useTranslation().t;
-    var theme = useTheme();
     var _b = React.useState(''), error = _b[0], setError = _b[1];
     var fileControl = useController({ name: "".concat(id, "File"), control: control });
     var fileInfoControl = useController({ name: "".concat(id, "FileInfo"), control: control });
@@ -169,10 +174,10 @@ var UploadMultipleFile = function (_a) {
         }
     };
     var fileExists = fileInfoArray.length > 0;
-    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: _jsxs(_Fragment, { children: [label, required && _jsx(Mandatory, {})] }) }), _jsx(Collapse, __assign({ in: !!uploadedFileCount, timeout: 100, unmountOnExit: true }, { children: _jsx(UploadCountBox, { children: "".concat(uploadedFileCount, " ").concat(t('uploaded_file')) }) }))] }), _jsx(Collapse, __assign({ in: fileExists, timeout: 300 }, { children: (fileArray || []).map(function (file, index) {
-                    return (_jsx(UploadFile, { readOnly: readOnly, required: required, purpose: purpose, fileType: fileType, title: fileTitle, isVerified: isVerified && (defaultFiles === null || defaultFiles === void 0 ? void 0 : defaultFiles.length) === uploadedFileCount, isSubmitting: isSubmitting, uploadedFiles: fileInfoArray, index: index, file: file, sx: {
-                            borderBottom: index === fileArray.length - 1 ? "1px solid ".concat(alpha(theme.palette.divider, 0.8)) : ''
+    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, __assign({ hasError: !!error }, { children: _jsxs(_Fragment, { children: [label, required && _jsx(Mandatory, {})] }) })), _jsx(Collapse, __assign({ in: !!uploadedFileCount, timeout: 100, unmountOnExit: true }, { children: _jsx(UploadCountBox, { children: "".concat(uploadedFileCount, " ").concat(t('uploaded_file')) }) }))] }), _jsx(Collapse, __assign({ in: fileExists, timeout: 300 }, { children: (fileArray || []).map(function (file, index) {
+                    return (_jsx(UploadFile, { label: label, readOnly: readOnly, required: required, purpose: purpose, fileType: fileType, title: fileTitle, isVerified: isVerified && (defaultFiles === null || defaultFiles === void 0 ? void 0 : defaultFiles.length) === uploadedFileCount, isSubmitting: isSubmitting, uploadedFiles: fileInfoArray, index: index, file: file, sx: {
+                            mb: index === fileArray.length - 1 ? 0 : 1
                         }, onSuccess: handleSuccess, onDelete: handleDelete, onUpdate: handleUpdate }, index));
-                }) })), _jsx(Collapse, __assign({ in: !readOnly }, { children: _jsx(InputContainerStyled, __assign({ sx: { mt: 2.5 } }, { children: _jsx(DragAndDrop, { title: title, subTitle: subTitle, description: dragDescription, fileExists: fileExists, uploadingTitle: uploadingTitle, successTitle: successTitle, onSuccess: handleFileChange, multiple: true, error: error }) })) }))] }));
+                }) })), _jsx(Collapse, __assign({ in: !readOnly }, { children: _jsx(InputContainerStyled, __assign({ sx: { mt: 1.25 } }, { children: _jsx(DragAndDrop, { title: title, subTitle: subTitle, description: dragDescription, fileExists: fileExists, uploadingTitle: uploadingTitle, successTitle: successTitle, onSuccess: handleFileChange, multiple: true, error: error }) })) }))] }));
 };
 export default UploadMultipleFile;

package/build/features/signIn/SignIn.js

@@ -31,12 +31,12 @@ var SignIn = memo(function (props) {
     useAppConfig(__assign({ navigation: SigIn_SCREENS_NAVIGATION }, props));
     useErrorListener(signInError || error);
     useStepStartedListener();
-    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, merchant = data.merchant, isMaturityExpress = data.isMaturityExpress;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, open: open, error: error, loading: settingLoading, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: isMaturityExpress }, { children: signInFeatureScreens.map(function (_a, index) {
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, isMaturityExpress = data.isMaturityExpress;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: settingLoading }, { children: _jsx(AnimationFlow, __assign({ countries: data.tapCountries, pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, open: open, error: error, loading: settingLoading, breakpoint: 'sm', screenId: activeScreen.name, isMaturityExpress: isMaturityExpress }, { children: _jsx(FeatureContainer, { children: signInFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
-                    }) })) })) })) })));
+                    }) }) })) })) })));
 });
 export function SignInElement(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(SignIn, __assign({}, props)) })));

package/build/features/signIn/screens/Mobile/MobileNumber.js

@@ -37,6 +37,7 @@ import Input from '../../../shared/Input';
 import SimpleList from '../../../../components/SimpleList';
 import { removeAllCharsFromNumber } from '../../../../utils';
 import { useLanguage, useAppSelector } from '../../../../hooks';
+import { ThemeMode } from '../../../../@types';
 import Search from '../../../shared/Search';
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
@@ -53,15 +54,15 @@ var CountryCodeText = styled(Text, {
     shouldForwardProp: function (prop) { return prop !== 'isSelected'; }
 })(function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
-    return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { width: theme.spacing(10), textAlign: 'start', fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
+    return (__assign(__assign({ color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { width: theme.spacing(10), textAlign: 'start', fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
 });
 var CountryNameText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
-    return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25) }));
+    return (__assign(__assign({ color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25) }));
 });
 var CountryCodeStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({ cursor: 'pointer' }, theme.typography.body2), { fontWeight: theme.typography.fontWeightRegular, display: 'flex', alignItems: 'center', minWidth: theme.spacing(8.75) }));
+    return (__assign(__assign({ cursor: 'pointer', color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { fontWeight: theme.typography.fontWeightRegular, display: 'flex', alignItems: 'center', minWidth: theme.spacing(8.75) }));
 });
 var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
@@ -70,7 +71,9 @@ var InputLabelStyled = styled(Text)(function (_a) {
 var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
     var theme = _a.theme;
     return ({
-        marginInlineStart: theme.spacing(1)
+        marginInlineStart: theme.spacing(1),
+        width: theme.spacing(0.875),
+        height: theme.spacing(0.875)
     });
 });
 var InputStyled = styled(Input)(function () { return ({

package/build/features/tax/Tax.js

@@ -43,7 +43,7 @@ var Tax = memo(function (_a) {
     useAppConfig(__assign(__assign({ navigation: TAX_SCREENS_NAVIGATION }, props), { disableSettingFetching: !!verifyToken }));
     useErrorListener(taxError || error);
     useStepStartedListener();
-    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, featureScreensNavigation = data.featureScreensNavigation, merchant = data.merchant, isMaturityExpress = data.isMaturityExpress;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, featureScreensNavigation = data.featureScreensNavigation, isMaturityExpress = data.isMaturityExpress;
     React.useEffect(function () {
         sendPageView({
             title: 'Tax'
@@ -58,11 +58,11 @@ var Tax = memo(function (_a) {
         settingLoading: settingLoading
     });
     var initialLoading = verifyToken ? settingLoading : settingLoading || customLoading;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, open: open, error: error, loading: initialLoading, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: isMaturityExpress }, { children: taxFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ countries: data.tapCountries, pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, open: open, error: error, loading: initialLoading, breakpoint: 'sm', screenId: activeScreen.name, isMaturityExpress: isMaturityExpress }, { children: _jsx(FeatureContainer, { children: taxFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
-                    }) })) })) })) })));
+                    }) }) })) })) })));
 });
 export function TaxElement(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Tax, __assign({}, props)) })));

package/build/features/tax/screens/ResetPasswordSuccess/ResetPasswordSuccess.js

@@ -1,8 +1,20 @@
+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 * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { handlePrevScreenStep } from '../../../../app/settings';
 import SuccessScreen from '../../../shared/SuccessScreen';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { useAppSelector, useAppDispatch } from '../../../../hooks';
 import { maskEmail } from '../../../../utils';
 import { taxSelector } from '../../../app/tax/taxStore';
@@ -16,6 +28,6 @@ var ResetPasswordSuccess = function (_a) {
     var onBack = function () {
         dispatch(handlePrevScreenStep());
     };
-    return (_jsx(SuccessScreen, { title: t("reset_password_success_title"), description: _jsx(Trans, { i18nKey: 'reset_password_success_description_dev', values: { email: maskedEmail } }), showEmailProviders: true, enableBack: true, onBack: function () { return onBack(); } }));
+    return (_jsx(ContainerWithHeader, __assign({ onBack: function () { return onBack(); }, title: 'reset_password_success_header_title', description: 'reset_password_success_header_description' }, { children: _jsx(SuccessScreen, { title: t("reset_password_success_title"), description: _jsx(Trans, { i18nKey: 'reset_password_success_description_dev', values: { email: maskedEmail } }), showEmailProviders: true, enableBack: true, onBack: function () { return onBack(); } }) })));
 };
 export default React.memo(ResetPasswordSuccess);