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

package/build/features/shared/Button/EmailProvidersButtons.js

@@ -10,59 +10,71 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
 import Button from '../../../components/Button';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import { ICONS_NAMES } from '../../../constants';
 import { getBrowserInfo, sendCustomEventToGTM } from '../../../utils';
+import { ThemeMode } from '../../../@types';
 var Image = styled('img')(function (_a) {
     var theme = _a.theme;
     return ({
         width: theme.spacing(3),
         height: theme.spacing(3),
         fontSize: theme.spacing(3),
-        marginInlineStart: theme.spacing(1)
+        marginInlineEnd: theme.spacing(0.25)
     });
 });
+var LinkImage = styled('img')(function (_a) {
+    var theme = _a.theme;
+    return (__assign({ width: theme.spacing(1.625), height: theme.spacing(1.625), fontSize: theme.spacing(1.625), marginInlineStart: theme.spacing(0.25) }, (theme.palette.mode === ThemeMode.DARK && {
+        filter: 'brightness(0) invert(1)'
+    })));
+});
 var ButtonBoxStyled = styled(Box)(function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = {
-            margin: theme.spacing(0, 2.5, 2.5, 2.5)
+            margin: theme.spacing(0, 3, 3, 3)
         },
         _b[theme.breakpoints.down('sm')] = {
-            margin: theme.spacing(0, 2.5, 0.25, 2.5)
+            margin: theme.spacing(0, 3, 3, 2.5)
         },
         _b);
 });
-var GMailButtonStyled = styled(Button)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: '100%',
-        marginBottom: theme.spacing(1.875)
-    });
-});
-var OutlookButtonStyled = styled(Button)(function (_a) {
+var ButtonStyled = styled(Button)(function (_a) {
     var theme = _a.theme;
     return ({
         width: '100%',
-        marginBottom: theme.spacing(2.5)
-    });
-});
-var AppleButtonStyled = styled(Button)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: '100%',
-        marginBottom: theme.spacing(1.875)
+        justifyContent: 'center',
+        marginBottom: theme.spacing(2),
+        '& .MuiButton-startIcon': __assign({}, (theme.direction === 'rtl' && {
+            marginRight: theme.spacing(-0.5),
+            marginLeft: theme.spacing(1)
+        })),
+        '& .MuiButton-endIcon': __assign({}, (theme.direction === 'rtl' && {
+            marginLeft: theme.spacing(-0.5),
+            marginRight: theme.spacing(1)
+        })),
+        '&:hover': {
+            '& .MuiButton-startIcon': {
+                img: {
+                    filter: 'none'
+                }
+            },
+            '& .MuiButton-endIcon': {
+                img: __assign({}, (theme.palette.mode === ThemeMode.DARK && {
+                    filter: 'grayscale(1) !important'
+                }))
+            }
+        }
     });
 });
 export default function EmailProvidersButtons(_a) {
     var _b;
     var gmail = _a.gmail, outlook = _a.outlook, apple = _a.apple, mail = _a.mail;
     var os = getBrowserInfo().os;
-    var _c = React.useState(false), hoverApple = _c[0], setHoverApple = _c[1];
     var emailEvent = function (provider) {
         sendCustomEventToGTM({
             event: 'Send Event',
@@ -70,5 +82,5 @@ export default function EmailProvidersButtons(_a) {
             event_action: "open ".concat(provider, " clicked")
         });
     };
-    return (_jsxs(ButtonBoxStyled, { children: [_jsx(Link, __assign({ href: gmail.href, underline: 'none', target: '_blank' }, { children: _jsx(GMailButtonStyled, __assign({ variant: 'outlined', onClick: function () { return emailEvent('gmail'); }, startIcon: _jsx(Image, { src: ICONS_NAMES.GMAIL_Filled_ICON, alt: gmail.title }), type: 'button' }, { children: gmail.title })) })), ((_b = os === null || os === void 0 ? void 0 : os.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'windows' ? (_jsx(Link, __assign({ href: mail.href, underline: 'none', target: '_blank' }, { children: _jsx(OutlookButtonStyled, __assign({ variant: 'outlined', onClick: function () { return emailEvent('mail'); }, onMouseDown: function () { return setHoverApple(true); }, onMouseUp: function () { return setHoverApple(false); }, startIcon: _jsx(Image, { src: ICONS_NAMES.Mail_Filled_icon, alt: outlook.title }), type: 'button' }, { children: mail.title })) }))) : (_jsx(Link, __assign({ href: apple.href, underline: 'none', target: '_blank' }, { children: _jsx(AppleButtonStyled, __assign({ variant: 'outlined', onClick: function () { return emailEvent('apple'); }, onMouseEnter: function () { return setHoverApple(true); }, onMouseLeave: function () { return setHoverApple(false); }, startIcon: _jsx(Image, { src: hoverApple ? ICONS_NAMES.apple_white_icon : ICONS_NAMES.Apple_Filled_ICON, alt: apple.title }), type: 'button' }, { children: apple.title })) }))), _jsx(Link, __assign({ href: outlook.href, underline: 'none', target: '_blank' }, { children: _jsx(OutlookButtonStyled, __assign({ onClick: function () { return emailEvent('outlook'); }, variant: 'outlined', startIcon: _jsx(Image, { src: ICONS_NAMES.outlook_Filled_ICON, alt: outlook.title }), type: 'button' }, { children: outlook.title })) }))] }));
+    return (_jsxs(ButtonBoxStyled, { children: [_jsx(Link, __assign({ href: gmail.href, underline: 'none', target: '_blank' }, { children: _jsx(ButtonStyled, __assign({ variant: 'outlined', onClick: function () { return emailEvent('gmail'); }, startIcon: _jsx(Image, { src: ICONS_NAMES.GMAIL_Filled_ICON, alt: gmail.title }), endIcon: _jsx(LinkImage, { src: ICONS_NAMES.external_link, alt: 'link' }), type: 'button' }, { children: gmail.title })) })), ((_b = os === null || os === void 0 ? void 0 : os.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'windows' ? (_jsx(Link, __assign({ href: mail.href, underline: 'none', target: '_blank' }, { children: _jsx(ButtonStyled, __assign({ variant: 'outlined', onClick: function () { return emailEvent('mail'); }, startIcon: _jsx(Image, { src: ICONS_NAMES.Mail_Filled_icon, alt: outlook.title }), endIcon: _jsx(LinkImage, { src: ICONS_NAMES.external_link, alt: 'link' }), type: 'button' }, { children: mail.title })) }))) : (_jsx(Link, __assign({ href: apple.href, underline: 'none', target: '_blank' }, { children: _jsx(ButtonStyled, __assign({ variant: 'outlined', onClick: function () { return emailEvent('apple'); }, startIcon: _jsx(Image, { src: ICONS_NAMES.Apple_Filled_ICON, alt: apple.title }), endIcon: _jsx(LinkImage, { src: ICONS_NAMES.external_link, alt: 'link' }), type: 'button' }, { children: apple.title })) }))), _jsx(Link, __assign({ href: outlook.href, underline: 'none', target: '_blank' }, { children: _jsx(ButtonStyled, __assign({ sx: { mb: 0 }, onClick: function () { return emailEvent('outlook'); }, variant: 'outlined', startIcon: _jsx(Image, { src: ICONS_NAMES.outlook_Filled_ICON, alt: outlook.title }), endIcon: _jsx(LinkImage, { src: ICONS_NAMES.external_link, alt: 'link' }), type: 'button' }, { children: outlook.title })) }))] }));
 }

package/build/features/shared/Button/FlowsButtons.d.ts

@@ -6,9 +6,11 @@ export declare type ButtonItemProps = {
     name: string;
     status: string;
     title: string;
+    subtitle: string;
     href: string;
     src: string;
-    hoverSrc: string;
+    darkSrc: string;
+    hoverSrc?: string;
     isCompleted: boolean;
     sx?: SxProps<Theme> | undefined;
     token?: string;

package/build/features/shared/Button/FlowsButtons.js

@@ -48,16 +48,16 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import Button from '../../../components/Button';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha, styled, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import { ICONS_NAMES } from '../../../constants';
-import CheckIcon from '@mui/icons-material/Check';
 import { useAppDispatch, useAppSelector, useLanguage } from '../../../hooks';
+import Icon from '../../../components/Icon';
 import { handleOpen, handleCurrentActiveScreen, handleNextScreenStep, settingsSelector } from '../../../app/settings';
+import { ThemeMode } from '../../../@types';
 import { dangerousMessage, getScreenNameBasedOnFlow } from '../../../utils';
 import API from '../../../api';
-import Text from '../../../components/Text';
 import Dot from '../Dot';
 var Image = styled('img')(function (_a) {
     var theme = _a.theme;
@@ -69,15 +69,38 @@ var Image = styled('img')(function (_a) {
     });
 });
 var ButtonBoxStyled = styled(Box)(function (_a) {
-    var _b;
     var theme = _a.theme;
-    return (_b = {
-            margin: theme.spacing(0, 2.5, 2.5, 2.5)
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            margin: theme.spacing(0, 2.5, 0.25, 2.5)
-        },
-        _b);
+    return ({
+        marginBottom: theme.spacing(3)
+    });
+});
+var BoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'start',
+        marginInlineStart: theme.spacing(2.625)
+    });
+});
+var BoxIconStyled = styled(Box)(function () { return ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+}); });
+var TitleStyled = styled('span')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        fontSize: '14px',
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary.main : theme.palette.text.primary
+    });
+});
+var SubTitleStyled = styled('span')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        fontSize: '11px',
+        color: theme.palette.text.secondary
+    });
 });
 var ButtonStyled = styled(Button, {
     shouldForwardProp: function (prop) { return prop !== 'isCompleted' && prop !== 'hasUrl'; }
@@ -85,75 +108,64 @@ var ButtonStyled = styled(Button, {
     var _b;
     var theme = _a.theme, isCompleted = _a.isCompleted, hasUrl = _a.hasUrl;
     return ({
-        '&.MuiButton-outlined': __assign(__assign({}, (isCompleted && {
+        minHeight: theme.spacing(7.5),
+        '& .MuiButton-startIcon': __assign({ width: '100%' }, (theme.direction === 'rtl' && {
+            marginRight: theme.spacing(-0.5),
+            marginLeft: theme.spacing(1)
+        })),
+        '& .MuiButton-endIcon': __assign({}, (theme.direction === 'rtl' && {
+            marginLeft: theme.spacing(-0.5),
+            marginRight: theme.spacing(1)
+        })),
+        '&.MuiButton-outlined': __assign(__assign(__assign({ color: theme.palette.text.primary, borderRadius: theme.spacing(1), border: 'none', boxShadow: theme.shadows[6], img: {
+                filter: 'none'
+            }, background: theme.palette.common.white }, (theme.palette.mode === ThemeMode.DARK && {
+            boxShadow: 'none',
+            color: theme.palette.text.secondary,
+            background: theme.palette.primary.contrastText,
+            border: "1px solid ".concat(alpha(theme.palette.text.secondary, 0.3))
+        })), (isCompleted && {
             paddingInlineEnd: theme.spacing(1.625),
             color: theme.palette.success.main,
-            border: "1px solid ".concat(theme.palette.success.main)
-        })), (_b = { '&:hover': __assign({}, (isCompleted && __assign({ backgroundColor: hasUrl ? theme.palette.success.main : theme.palette.common.white, border: "1px solid ".concat(theme.palette.success.main), color: hasUrl ? theme.palette.common.white : theme.palette.success.main, cursor: hasUrl ? 'pointer' : 'initial', img: {
+            border: "1px solid ".concat(theme.palette.success.main),
+            backgroundColor: alpha(theme.palette.success.main, 0.04)
+        })), (_b = { '&:hover': __assign({ backgroundColor: theme.palette.mode === ThemeMode.DARK ? alpha(theme.palette.primary.contrastText, 0.05) : alpha(theme.palette.common.white, 0.05), img: {
                         filter: 'none'
-                    } }, (hasUrl && {
-                    svg: {
-                        filter: 'brightness(3)'
-                    },
-                    img: {
-                        filter: 'brightness(3)'
-                    }
-                })))) }, _b[theme.breakpoints.down('sm')] = {
-            '&:hover': __assign({ backgroundColor: theme.palette.common.white, border: "1px solid ".concat(theme.palette.primary.main), img: {
+                    } }, (isCompleted && {
+                    backgroundColor: hasUrl ? 'inherit' : alpha(theme.palette.success.main, 0.04),
+                    border: "1px solid ".concat(theme.palette.success.main),
+                    color: hasUrl ? theme.palette.common.white : theme.palette.success.main,
+                    cursor: hasUrl ? 'pointer' : 'initial'
+                })) }, _b[theme.breakpoints.down('sm')] = {
+            '&:hover': __assign({ backgroundColor: theme.palette.mode === ThemeMode.DARK ? alpha(theme.palette.primary.contrastText, 0.05) : alpha(theme.palette.common.white, 0.05), img: {
                     filter: 'none'
-                }, color: theme.palette.primary.main }, (isCompleted && __assign({ backgroundColor: hasUrl ? theme.palette.success.main : theme.palette.common.white, border: "1px solid ".concat(theme.palette.success.main), paddingInlineEnd: theme.spacing(1.625), color: hasUrl ? theme.palette.common.white : theme.palette.success.main, cursor: hasUrl ? 'pointer' : 'initial', img: {
-                    filter: 'none'
-                } }, (hasUrl && {
-                svg: {
-                    filter: 'brightness(3)'
-                },
-                img: {
-                    filter: 'brightness(3)'
-                }
-            }))))
+                } }, (isCompleted && {
+                backgroundColor: hasUrl ? 'inherit' : alpha(theme.palette.success.main, 0.04),
+                border: "1px solid ".concat(theme.palette.success.main),
+                paddingInlineEnd: theme.spacing(1.625),
+                color: hasUrl ? theme.palette.common.white : theme.palette.success.main,
+                cursor: hasUrl ? 'pointer' : 'initial'
+            }))
         }, _b['&:disabled'] = {
-            backgroundColor: theme.palette.common.white,
-            color: alpha(theme.palette.primary.main, 0.3)
+            opacity: theme.palette.mode === ThemeMode.DARK ? 0.6 : 0.8
         }, _b))
     });
 });
-var CheckIconStyled = styled(CheckIcon)(function (_a) {
+var CompletedIconStyled = styled(Icon)(function (_a) {
     var theme = _a.theme;
-    return ({
-        width: theme.spacing(2.5),
-        height: theme.spacing(2.5),
-        color: theme.palette.success.main
-    });
-});
-var BrandImage = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: theme.spacing(3),
-        height: theme.spacing(3),
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginInlineStart: theme.spacing(1),
-        borderColor: theme.palette.primary.main,
-        border: '2px solid',
-        borderRadius: '50%'
-    });
-});
-var BrandNameStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        fontSize: theme.spacing(1.125),
-        fontWeight: 800
-    });
+    return (__assign({ width: theme.spacing(2.5), height: theme.spacing(2.5) }, (theme.palette.mode === ThemeMode.DARK && {
+        filter: 'brightness(0) invert(1)'
+    })));
 });
 export default function FlowsButtons(_a) {
     var _this = this;
     var buttons = _a.buttons, data = _a.data;
     var dispatch = useAppDispatch();
     var settingsData = useAppSelector(settingsSelector).data;
-    var flowName = data.flowName, email = data.email, emailUrl = data.emailUrl, brandName = data.brandName, isAuthorizedUser = data.isAuthorizedUser;
+    var flowName = data.flowName, email = data.email, emailUrl = data.emailUrl, isAuthorizedUser = data.isAuthorizedUser;
     var _b = useState(false), loading = _b[0], setLoading = _b[1];
     var isAr = useLanguage().isAr;
+    var theme = useTheme();
     var onRedirect = function (item) {
         if (!item.href)
             return;
@@ -173,9 +185,6 @@ export default function FlowsButtons(_a) {
     var isResetPassword = function (name, status) {
         return name === 'password' && status === 'completed';
     };
-    var isBrand = function (name) {
-        return name === 'brand';
-    };
     var onResetPassword = function () { return __awaiter(_this, void 0, void 0, function () {
         var payload;
         return __generator(this, function (_a) {
@@ -215,14 +224,15 @@ export default function FlowsButtons(_a) {
             }
         });
     }); };
+    var icon = theme.palette.mode === ThemeMode.DARK ? ICONS_NAMES.expand_left_light : ICONS_NAMES.expand_left_dark;
     return (_jsx(ButtonBoxStyled, { children: buttons.map(function (_a, idx) {
-            var title = _a.title, href = _a.href, src = _a.src, hoverSrc = _a.hoverSrc, isCompleted = _a.isCompleted, sx = _a.sx, name = _a.name, status = _a.status, token = _a.token;
+            var title = _a.title, subtitle = _a.subtitle, href = _a.href, src = _a.src, darkSrc = _a.darkSrc, hoverSrc = _a.hoverSrc, isCompleted = _a.isCompleted, sx = _a.sx, name = _a.name, status = _a.status, token = _a.token;
             var isLast = idx === buttons.length - 1;
             return (_jsx(Link, __assign({ underline: 'none', onClick: function () {
                     if (isResetPassword(name, status))
                         onResetPassword();
                     else
-                        onRedirect({ title: title, href: href, src: src, hoverSrc: hoverSrc, isCompleted: isCompleted, name: name, status: status, token: token });
-                } }, { children: _jsx(ButtonStyled, __assign({ variant: 'outlined', disabled: isResetPassword(name, status) && loading, isCompleted: isCompleted, hasUrl: !!href, sx: __assign({ mb: isLast ? 2.5 : 1.8 }, sx), endIcon: isResetPassword(name, status) && loading ? (_jsx(_Fragment, {})) : isCompleted ? (_jsx(CheckIconStyled, {})) : (_jsxs("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [name !== 'password' && _jsx(Dot, { completed: status === 'complete' || status === 'completed' || status === 'reviewed' }), _jsx(Image, { sx: { height: 15, transform: isAr ? 'scale(-1)' : 'scale(1)', marginInlineStart: 0 }, src: ICONS_NAMES.Arrow_filled_right_icon })] }))), startIcon: isResetPassword(name, status) && loading ? (_jsx(_Fragment, {})) : isBrand(name) ? (_jsx(_Fragment, { children: _jsx(BrandImage, { children: _jsx(BrandNameStyled, { children: brandName }) }) })) : (_jsx(Image, { src: src, alt: title })), type: 'button' }, { children: title })) }), idx));
+                        onRedirect({ title: title, subtitle: subtitle, href: href, src: src, darkSrc: darkSrc, hoverSrc: hoverSrc, isCompleted: isCompleted, name: name, status: status, token: token });
+                } }, { children: _jsx(ButtonStyled, { variant: 'outlined', disabled: isResetPassword(name, status) && loading, isCompleted: isCompleted, hasUrl: !!href, sx: __assign({ mb: isLast ? 0 : 1.8 }, sx), endIcon: isResetPassword(name, status) && loading ? (_jsx(_Fragment, {})) : isCompleted ? (_jsx(CompletedIconStyled, { src: ICONS_NAMES.flow_edit_icon })) : (_jsxs("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [name !== 'password' && _jsx(Dot, { completed: status === 'complete' || status === 'completed' || status === 'reviewed' }), _jsx(Image, { sx: { height: 15, transform: isAr ? 'scale(-1)' : 'scale(1)', marginInlineStart: 0 }, src: icon })] }))), startIcon: _jsxs(BoxIconStyled, { children: [isResetPassword(name, status) && loading ? (_jsx(_Fragment, {})) : (_jsx(Image, { src: theme.palette.mode === ThemeMode.DARK ? darkSrc : src, alt: title })), _jsxs(BoxStyled, { children: [_jsx(TitleStyled, { children: title }), _jsx(SubTitleStyled, { children: subtitle })] })] }), type: 'button' }) }), idx));
         }) }));
 }

package/build/features/shared/Button/IndividualActionButtons.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
-import { styled, useTheme } from '@mui/material/styles';
+import { alpha, styled, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { ICONS_NAMES } from '../../../constants';
 import Loader from '../../../components/Loader';
@@ -20,6 +20,7 @@ import Icon from '../../../components/Icon';
 import Collapse from '../../../components/Collapse';
 import CheckIcon from '../CheckIcon';
 import Dot from '../Dot';
+import { ThemeMode } from '../../../@types';
 var ArrowIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
     var theme = _a.theme, isAr = _a.isAr;
     return ({
@@ -30,18 +31,11 @@ var ArrowIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return
         verticalAlign: 'unset'
     });
 });
-var CheckIconStyled = styled(CheckIcon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: theme.spacing(2),
-        height: theme.spacing(2),
-        verticalAlign: 'middle'
-    });
-});
+var CheckIconStyled = styled(CheckIcon)(function () { return ({}); });
 var ButtonBoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        margin: theme.spacing(0, 2.5, 2.5, 2.5),
+        margin: theme.spacing(0, 1.5, 2.5, 1.5),
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -61,16 +55,6 @@ var ButtonStyled = styled(Button, {
         borderRadius: 30
     })));
 });
-var Image = styled('img')(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: theme.spacing(3),
-        height: theme.spacing(3),
-        fontSize: theme.spacing(3),
-        marginInlineStart: theme.spacing(1),
-        verticalAlign: 'sub'
-    });
-});
 var TextStyled = styled('span')(function () { return ({
     whiteSpace: 'pre',
     overflow: 'auto'
@@ -86,24 +70,31 @@ var AddDetailsButtonStyled = styled(ButtonStyled, {
     shouldForwardProp: function (prop) { return prop !== 'isCompleted'; }
 })(function (_a) {
     var theme = _a.theme, isCompleted = _a.isCompleted;
-    return (__assign({}, (isCompleted && {
-        '&.MuiButton-outlined': {
-            backgroundColor: theme.palette.common.white,
-            border: "1px solid ".concat(theme.palette.success.main),
+    return ({
+        '&.MuiButton-outlined': __assign({ '&:hover': __assign(__assign({ color: theme.palette.primary.main }, (theme.palette.mode !== ThemeMode.DARK && {
+                img: {
+                    filter: 'none'
+                },
+                svg: {
+                    filter: 'none'
+                }
+            })), { backgroundColor: 'transparent' }) }, (isCompleted && {
+            backgroundColor: alpha(theme.palette.success.main, 0.04),
+            border: "1px solid ".concat(alpha(theme.palette.success.main, 0.4)),
             color: theme.palette.success.main,
             '&:hover': {
                 cursor: 'pointer',
-                backgroundColor: theme.palette.success.main,
-                color: theme.palette.common.white,
+                color: theme.palette.success.main,
+                backgroundColor: alpha(theme.palette.success.main, 0.04),
                 img: {
-                    filter: 'brightness(0) invert(1)'
+                    filter: 'none'
                 },
                 svg: {
-                    filter: 'brightness(0) invert(1)'
+                    filter: 'none'
                 }
             }
-        }
-    })));
+        }))
+    });
 });
 var RequestEmailButtonStyled = styled(ButtonStyled, {
     shouldForwardProp: function (prop) { return prop !== 'isRequested' && prop !== 'disabled'; }
@@ -112,20 +103,27 @@ var RequestEmailButtonStyled = styled(ButtonStyled, {
     return ({
         marginTop: theme.spacing(1.5),
         opacity: !isRequested && disabled ? 0.5 : 1,
-        '&.MuiButton-outlined': isRequested && !isLoading
+        '&.MuiButton-outlined': __assign({ '&:hover': __assign(__assign({ color: theme.palette.primary.main }, (theme.palette.mode !== ThemeMode.DARK && {
+                img: {
+                    filter: 'none'
+                },
+                svg: {
+                    filter: 'none'
+                }
+            })), { backgroundColor: 'transparent' }) }, (isRequested && !isLoading
             ? {
-                backgroundColor: theme.palette.common.white,
-                border: "1px solid ".concat(theme.palette.success.main),
+                backgroundColor: alpha(theme.palette.success.main, 0.04),
+                border: "1px solid ".concat(alpha(theme.palette.success.main, 0.4)),
                 color: theme.palette.success.main,
                 '&:hover': {
                     cursor: 'pointer',
-                    backgroundColor: theme.palette.success.main,
-                    color: theme.palette.common.white,
+                    color: theme.palette.success.main,
+                    backgroundColor: alpha(theme.palette.success.main, 0.04),
                     img: {
-                        filter: 'brightness(0) invert(1)'
+                        filter: 'none'
                     },
                     svg: {
-                        filter: 'brightness(0) invert(1)'
+                        filter: 'none'
                     }
                 }
             }
@@ -133,7 +131,7 @@ var RequestEmailButtonStyled = styled(ButtonStyled, {
                 ? {
                     '&:hover': {
                         cursor: 'default',
-                        backgroundColor: theme.palette.common.white,
+                        backgroundColor: 'transparent',
                         color: theme.palette.primary.main,
                         img: {
                             filter: 'none'
@@ -143,7 +141,7 @@ var RequestEmailButtonStyled = styled(ButtonStyled, {
                         }
                     }
                 }
-                : undefined
+                : undefined))
     });
 });
 export default function IndividualActionButtons(_a) {
@@ -152,5 +150,6 @@ export default function IndividualActionButtons(_a) {
     var theme = useTheme();
     var isRequestedAndNotLoading = requestEmail.isRequested && !requestEmail.loading;
     var requestEmailLoaderColor = isRequestedAndNotLoading ? theme.palette.success.main : theme.palette.primary.main;
-    return (_jsxs(ButtonBoxStyled, { children: [_jsxs(AddDetailsButtonStyled, __assign({ isCompleted: addDetails.status === 'verified', isLoading: addDetails.loading, type: 'button', variant: 'outlined', onClick: addDetails.onClick, startIcon: _jsx(Collapse, __assign({ in: !addDetails.loading }, { children: _jsx(Image, { src: addDetails.status === 'verified' ? ICONS_NAMES.ADD_DETAIL_GREEN : ICONS_NAMES.ADD_DETAIL }) })), endIcon: _jsx(Collapse, __assign({ in: !addDetails.loading }, { children: _jsxs("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [addDetails.status !== 'verified' && (_jsx(Dot, { sx: { margin: 0 }, completed: addDetails.status === 'complete' || addDetails.status === 'completed' || addDetails.status === 'reviewed' })), _jsx(ArrowIconStyled, { isAr: isAr, src: addDetails.status === 'verified' ? ICONS_NAMES.GREEN_ARROW : ICONS_NAMES.BLUE_ARROW })] })) })) }, { children: [_jsx(Collapse, __assign({ in: addDetails.loading }, { children: _jsx(LoaderStyled, { innerColor: addDetails.status === 'verified' ? theme.palette.success.main : theme.palette.primary.main, outerColor: addDetails.status === 'verified' ? theme.palette.success.main : theme.palette.primary.main, size: 15, toggleAnimation: addDetails.loading }) })), _jsx(Collapse, __assign({ in: !addDetails.loading }, { children: _jsx(TextStyled, { children: t(addDetails.title) }) }))] })), requestEmail.show && (_jsxs(_Fragment, { children: [requestEmail.children, _jsxs(RequestEmailButtonStyled, __assign({ isRequested: requestEmail.isRequested, isLoading: requestEmail.loading, variant: 'outlined', disabled: requestEmail.disabled, type: 'button', onClick: requestEmail.onClick, startIcon: _jsx(Collapse, __assign({ in: !requestEmail.loading }, { children: _jsx(Image, { src: isRequestedAndNotLoading ? ICONS_NAMES.REQUEST_EMAIL_GREEN : ICONS_NAMES.REQUEST_EMAIL }) })), endIcon: _jsx(Collapse, __assign({ in: !requestEmail.loading }, { children: isRequestedAndNotLoading ? (_jsx(CheckIconStyled, { isVerified: requestEmail.isRequested })) : (_jsx(ArrowIconStyled, { isAr: isAr, src: ICONS_NAMES.BLUE_ARROW })) })) }, { children: [_jsx(Collapse, __assign({ in: requestEmail.loading }, { children: _jsx(LoaderStyled, { innerColor: requestEmailLoaderColor, outerColor: requestEmailLoaderColor, size: 15, toggleAnimation: requestEmail.loading }) })), _jsx(Collapse, __assign({ in: !requestEmail.loading }, { children: _jsx(TextStyled, { children: t(requestEmail.title) }) }))] }))] }))] }));
+    var arrow = theme.palette.mode === ThemeMode.DARK ? ICONS_NAMES.next_arrow_white : ICONS_NAMES.next_arrow_blue;
+    return (_jsxs(ButtonBoxStyled, { children: [_jsxs(AddDetailsButtonStyled, __assign({ isCompleted: addDetails.status === 'verified', isLoading: addDetails.loading, type: 'button', variant: 'outlined', onClick: addDetails.onClick, endIcon: _jsx(Collapse, __assign({ in: !addDetails.loading }, { children: _jsxs("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [addDetails.status !== 'verified' && (_jsx(Dot, { sx: { margin: 0 }, completed: addDetails.status === 'complete' || addDetails.status === 'completed' || addDetails.status === 'reviewed' })), addDetails.status === 'verified' ? _jsx(CheckIconStyled, { isVerified: true }) : _jsx(ArrowIconStyled, { isAr: isAr, src: arrow })] })) })) }, { children: [_jsx(Collapse, __assign({ in: addDetails.loading }, { children: _jsx(LoaderStyled, { innerColor: addDetails.status === 'verified' ? theme.palette.success.main : theme.palette.primary.main, outerColor: addDetails.status === 'verified' ? theme.palette.success.main : theme.palette.primary.main, size: 15, toggleAnimation: addDetails.loading }) })), _jsx(Collapse, __assign({ in: !addDetails.loading }, { children: _jsx(TextStyled, { children: t(addDetails.title) }) }))] })), requestEmail.show && (_jsxs(_Fragment, { children: [requestEmail.children, _jsxs(RequestEmailButtonStyled, __assign({ isRequested: requestEmail.isRequested, isLoading: requestEmail.loading, variant: 'outlined', disabled: requestEmail.disabled, type: 'button', onClick: requestEmail.onClick, endIcon: _jsx(Collapse, __assign({ in: !requestEmail.loading }, { children: isRequestedAndNotLoading ? _jsx(CheckIconStyled, { isVerified: requestEmail.isRequested }) : _jsx(ArrowIconStyled, { isAr: isAr, src: arrow }) })) }, { children: [_jsx(Collapse, __assign({ in: requestEmail.loading }, { children: _jsx(LoaderStyled, { innerColor: requestEmailLoaderColor, outerColor: requestEmailLoaderColor, size: 15, toggleAnimation: requestEmail.loading }) })), _jsx(Collapse, __assign({ in: !requestEmail.loading }, { children: _jsx(TextStyled, { children: t(requestEmail.title) }) }))] }))] }))] }));
 }

package/build/features/shared/Button/MobileButton.js

@@ -26,6 +26,7 @@ import Icon from '../../../components/Icon';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { ICONS_NAMES } from '../../../constants';
+import { ThemeMode } from '../../../@types';
 var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
     return (__assign({ width: theme.spacing(3), height: theme.spacing(3), marginInlineStart: theme.spacing(0.75) }, (disabled && {
@@ -35,10 +36,23 @@ var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop
 var ButtonBoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        margin: theme.spacing(0, 2.5, 2.5, 2.5)
+        margin: theme.spacing(0, 3, 3, 3)
+    });
+});
+var ButtonStyled = styled(Button)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        img: __assign({}, (theme.palette.mode === ThemeMode.DARK && {
+            filter: 'brightness(0) invert(1)'
+        })),
+        '&:hover': {
+            img: __assign({}, (theme.palette.mode === ThemeMode.DARK && {
+                filter: 'grayscale(1) !important'
+            }))
+        }
     });
 });
 export default function MobileButton(_a) {
     var children = _a.children, hideIcon = _a.hideIcon, icon = _a.icon, disabled = _a.disabled, props = __rest(_a, ["children", "hideIcon", "icon", "disabled"]);
-    return (_jsx(ButtonBoxStyled, { children: _jsx(Button, __assign({ disabled: disabled, type: 'button', variant: 'outlined', startIcon: !hideIcon && _jsx(IconStyled, { disabled: disabled, src: !!icon ? icon : ICONS_NAMES.MOBILE_ICON }) }, props, { children: children })) }));
+    return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ disabled: disabled, type: 'button', variant: 'outlined', startIcon: !hideIcon && _jsx(IconStyled, { disabled: disabled, src: !!icon ? icon : ICONS_NAMES.MOBILE_ICON }) }, props, { children: children })) }));
 }

package/build/features/shared/Button/SuccessButton.d.ts

@@ -5,5 +5,5 @@ interface SuccessButtonProps extends CustomButtonProps {
     loading?: boolean;
     hideIcon?: boolean;
 }
-export default function SuccessButton({ children, isAr, disabled, loading, error, ...props }: SuccessButtonProps): JSX.Element;
+export default function SuccessButton({ children, isAr, disabled, loading, error, variant, ...props }: SuccessButtonProps): JSX.Element;
 export {};

package/build/features/shared/Button/SuccessButton.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import Button from './Button';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import { ThemeMode } from '../../../@types';
+import Button from './Button';
 var ButtonStyled = styled(Button)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -32,12 +33,12 @@ var ButtonStyled = styled(Button)(function (_a) {
             width: '100%',
             textTransform: 'none',
             paddingInlineStart: theme.spacing(0.75),
-            backgroundColor: theme.palette.common.white,
-            color: theme.palette.primary.main,
+            backgroundColor: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.primary.main,
+            color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.black : theme.palette.primary.main,
             border: "1px solid ".concat(theme.palette.primary.main),
             '&:hover': {
                 backgroundColor: theme.palette.common.white,
-                color: theme.palette.primary.main
+                color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.black : theme.palette.primary.main
             },
             '&:disabled': {
                 backgroundColor: theme.palette.primary.main,
@@ -49,7 +50,7 @@ var ButtonStyled = styled(Button)(function (_a) {
             })
         },
         '&.MuiButton-contained': {
-            color: theme.palette.common.white,
+            color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.black : theme.palette.common.white,
             backgroundColor: theme.palette.primary.main,
             '&:hover': {
                 backgroundColor: theme.palette.primary.main
@@ -58,20 +59,14 @@ var ButtonStyled = styled(Button)(function (_a) {
                 backgroundColor: theme.palette.primary.main
             },
             ':disabled': {
-                backgroundColor: theme.palette.primary.main,
-                color: theme.palette.common.white
+                backgroundColor: theme.palette.primary.main
             }
         }
     });
 });
-var ButtonBoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        margin: theme.spacing(0, 2.5, 2.5, 2.5)
-    });
-});
+var ButtonBoxStyled = styled(Box)(function () { return ({}); });
 export default function SuccessButton(_a) {
-    var children = _a.children, isAr = _a.isAr, disabled = _a.disabled, loading = _a.loading, error = _a.error, props = __rest(_a, ["children", "isAr", "disabled", "loading", "error"]);
+    var children = _a.children, isAr = _a.isAr, disabled = _a.disabled, loading = _a.loading, error = _a.error, variant = _a.variant, props = __rest(_a, ["children", "isAr", "disabled", "loading", "error", "variant"]);
     var _b = React.useState(false), btnLoading = _b[0], setBtnLoading = _b[1];
     React.useEffect(function () {
         if (loading)
@@ -82,5 +77,5 @@ export default function SuccessButton(_a) {
     React.useEffect(function () {
         setBtnLoading(false);
     }, []);
-    return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ isAr: isAr, loading: btnLoading, disabled: disabled, type: 'button', variant: btnLoading ? 'contained' : 'outlined', error: error, hideError: true }, props, { children: children })) }));
+    return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ isAr: isAr, loading: btnLoading, disabled: disabled, type: 'button', variant: btnLoading ? 'contained' : variant || 'outlined', error: error, hideError: true }, props, { children: children })) }));
 }

package/build/features/shared/Calender/Calender.d.ts

@@ -8,6 +8,8 @@ interface CustomCalenderProps extends CalendarProps {
     disabled?: boolean;
     isVerified?: boolean;
     maxDate?: Date;
+    label?: string;
+    required?: boolean;
 }
-declare const CustomCalender: ({ onDateClicked, onDateChange, defaultValue, isDob, disabled, isVerified, maxDate }: CustomCalenderProps) => JSX.Element;
+declare const CustomCalender: ({ onDateClicked, onDateChange, defaultValue, isDob, disabled, isVerified, maxDate, label, required }: CustomCalenderProps) => JSX.Element;
 export default CustomCalender;