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

package/build/components/AnimationFlow/BottomSheet.js

@@ -26,11 +26,9 @@ import { BottomSheet } from 'react-spring-bottom-sheet';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import 'react-spring-bottom-sheet/dist/style.css';
-import { ICONS_NAMES } from '../../constants';
-import { useLanguage } from '../../hooks';
-import { CustomFooter, PoweredByFooter } from '../../features/shared/Footer';
-import LogoBadge from '../LogoBadge';
-var LanguageFooterStyled = styled(Box)(function (_a) {
+import CountryPopup from '../../features/shared/CountryPopup';
+import LanguagePopup from '../../features/shared/LanguagePopup';
+var LanguageCountryStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
         top: theme.spacing(2.5),
@@ -38,24 +36,38 @@ var LanguageFooterStyled = styled(Box)(function (_a) {
         alignItems: 'center',
         width: '100%',
         cursor: 'pointer',
-        zIndex: 99999
+        zIndex: 99999,
+        display: 'flex',
+        justifyContent: 'center',
+        gap: theme.spacing(1)
     });
 });
 var BottomSheetStyled = styled(BottomSheet, {
-    shouldForwardProp: function (prop) { return !['isMaturityExpress', 'languageBarHeight'].includes(prop.toString()); }
+    shouldForwardProp: function (prop) { return !['languageBarHeight'].includes(prop.toString()); }
 })(function (_a) {
-    var theme = _a.theme, isMaturityExpress = _a.isMaturityExpress, languageBarHeight = _a.languageBarHeight;
+    var theme = _a.theme, languageBarHeight = _a.languageBarHeight;
     return ({
-        '[data-rsbs-header]:before': __assign({ width: '75px', height: '5px' }, (isMaturityExpress && { width: '0px', height: '0px' })),
+        '[data-rsbs-header]:before': {
+            width: theme.spacing(9.125),
+            height: theme.spacing(0.5),
+            backgroundColor: theme.palette.secondary.contrastText,
+            borderRadius: theme.spacing(7.75)
+        },
         '[data-rsbs-backdrop]': {
             backgroundColor: 'transparent'
         },
-        '[data-rsbs-header]': __assign({ paddingBottom: theme.spacing(6), position: 'absolute', width: '100vw' }, (isMaturityExpress && { display: 'none' })),
-        '[data-rsbs-overlay]': __assign({ backgroundColor: theme.palette.background.paper, zIndex: 9999, maxHeight: "calc(100vh - ".concat(languageBarHeight, "px)") }, (isMaturityExpress && {
-            marginBottom: theme.spacing(5.625),
-            paddingTop: theme.spacing(5)
-        })),
+        '[data-rsbs-header]': {
+            position: 'absolute',
+            width: '100vw',
+            top: theme.spacing(0.5)
+        },
+        '[data-rsbs-overlay]': {
+            backgroundColor: 'transparent',
+            zIndex: 9999,
+            maxHeight: "calc(100vh - ".concat(languageBarHeight, "px)")
+        },
         '[data-rsbs-scroll]': {
+            marginTop: theme.spacing(7.5),
             '&::-webkit-scrollbar': {
                 width: '0px'
             },
@@ -70,26 +82,20 @@ var BottomSheetStyled = styled(BottomSheet, {
         }
     });
 });
-var FooterStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ bottom: theme.spacing(-5.625), position: 'fixed', height: theme.spacing(5.625), display: 'flex' }, theme.typography.caption), { justifyContent: 'center', alignItems: 'center', width: '100vw', background: '#E6E7E9', borderTop: '1px solid rgba(156, 160, 169, 0.3)' }));
-});
 var BottomSheetComponent = function (_a) {
-    var open = _a.open, children = _a.children, screenId = _a.screenId, _b = _a.pointerEvents, pointerEvents = _b === void 0 ? 'auto' : _b, isMaturityExpress = _a.isMaturityExpress, merchantInfo = _a.merchantInfo, rest = __rest(_a, ["open", "children", "screenId", "pointerEvents", "isMaturityExpress", "merchantInfo"]);
+    var open = _a.open, children = _a.children, screenId = _a.screenId, _b = _a.pointerEvents, pointerEvents = _b === void 0 ? 'auto' : _b, countries = _a.countries, rest = __rest(_a, ["open", "children", "screenId", "pointerEvents", "countries"]);
     var sheetRef = React.useRef(null);
-    var isAr = useLanguage().isAr;
-    var logo = (merchantInfo || {}).logo;
     var getLanguageBarHeight = function () {
         var viewportHeight = window.innerHeight;
         var documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
-        return documentHeight - viewportHeight + (isMaturityExpress ? 150 : 70);
+        return documentHeight - viewportHeight + 30;
     };
     var getMinHeight = function (maxHeight) {
         var el = document.getElementById('main-feature-container');
-        var footer = document.getElementById('bottom-sheet-powered_by_footer');
+        var header = document.getElementById('main-feature-container-header');
         var height = el ? el.clientHeight : 0;
-        var footerHeight = footer ? footer.clientHeight + 20 : 0;
-        return (height || maxHeight * 0.7) + footerHeight;
+        var headerHeight = header ? header.clientHeight : 0;
+        return (height || maxHeight * 0.7) + headerHeight - 10;
     };
     React.useEffect(function () {
         if (sheetRef.current && screenId) {
@@ -102,9 +108,9 @@ var BottomSheetComponent = function (_a) {
             }, 500);
         }
     }, [screenId]);
-    return (_jsxs(BottomSheetStyled, __assign({ languageBarHeight: getLanguageBarHeight(), sibling: _jsx(LanguageFooterStyled, { children: _jsx(CustomFooter, {}) }), isMaturityExpress: isMaturityExpress, sx: { pointerEvents: pointerEvents }, ref: sheetRef, open: open, snapPoints: function (_a) {
+    return (_jsx(BottomSheetStyled, __assign({ languageBarHeight: getLanguageBarHeight(), sibling: _jsxs(LanguageCountryStyled, { children: [_jsx(CountryPopup, { isSmallDevice: true, list: countries }), _jsx(LanguagePopup, { isSmallDevice: true })] }), blocking: false, sx: { pointerEvents: pointerEvents }, ref: sheetRef, open: open, snapPoints: function (_a) {
             var maxHeight = _a.maxHeight;
             return [getMinHeight(maxHeight), maxHeight * 0.95];
-        } }, rest, { children: [isMaturityExpress && _jsx(LogoBadge, { src: isMaturityExpress ? logo || ICONS_NAMES.LOGO_ICON : ICONS_NAMES.LOGO_ICON }), children, isMaturityExpress && (_jsx(FooterStyled, { children: _jsx(PoweredByFooter, { id: 'bottom-sheet-powered_by_footer', sx: { margin: '0px' }, textSx: { color: 'rgba(63, 66, 77, 0.6)' }, icon: isAr ? ICONS_NAMES.LOGO_WITH_NAME_DARK_AR_ICON : ICONS_NAMES.LOGO_WITH_NAME_DARK_EN_ICON }) }))] })));
+        } }, rest, { children: children })));
 };
 export default React.memo(BottomSheetComponent);

package/build/components/AnimationFlow/Dialog.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DialogProps as MUIDialogProps } from '@mui/material/Dialog';
-import { MerchantInfo } from '../../@types';
+import { CountryCode } from '../../@types';
 export interface DialogProps extends MUIDialogProps {
     open: boolean;
     isTapOrigin?: boolean;
@@ -10,8 +10,7 @@ export interface DialogProps extends MUIDialogProps {
     onClose?: () => void;
     onConfirm?: () => void;
     pointerEvents?: 'none' | 'auto';
-    merchantInfo?: MerchantInfo;
-    isMaturityExpress?: boolean;
+    countries: Array<CountryCode>;
 }
-declare const _default: React.MemoExoticComponent<({ open, children, transitionDuration, isTapOrigin, animationType, onClose, onConfirm, pointerEvents, merchantInfo, isMaturityExpress, ...rest }: DialogProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ open, children, transitionDuration, isTapOrigin, animationType, onClose, onConfirm, pointerEvents, countries, ...rest }: DialogProps) => JSX.Element>;
 export default _default;

package/build/components/AnimationFlow/Dialog.js

@@ -26,27 +26,23 @@ import MuiDialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import { DIALOG_ID, ICONS_NAMES } from '../../constants';
-import { useLanguage } from '../../hooks';
+import { alpha, styled } from '@mui/material/styles';
+import { DIALOG_ID } from '../../constants';
 import DialogContainer from '../../features/shared/Dialog';
-import { CustomFooter, PoweredByFooter } from '../../features/shared/Footer';
+import CountryPopup from '../../features/shared/CountryPopup';
+import LanguagePopup from '../../features/shared/LanguagePopup';
 import Slide from '../Slide';
-import LogoBadge from '../LogoBadge';
-import Icon from '../Icon';
-import Collapse from '../Collapse';
 var Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, __assign({ direction: 'up', ref: ref }, props));
 });
 var PaperStyled = styled(Paper)(function (_a) {
     var theme = _a.theme;
     return ({
-        boxShadow: theme.shadows[1],
         borderRadius: theme.spacing(1.5),
-        backgroundColor: theme.palette.background.paper,
+        backgroundColor: 'transparent',
         color: theme.palette.text.primary,
         margin: "".concat(theme.spacing(5, 4, 5, 4), " !important"),
-        maxHeight: "calc(100% - ".concat(theme.spacing(10), ") !important"),
+        maxHeight: "calc(100% - ".concat(theme.spacing(15.625), ") !important"),
         width: theme.spacing(46.875),
         maxWidth: theme.spacing(46.875)
     });
@@ -55,80 +51,47 @@ var DialogContentStyled = styled(DialogContent, { shouldForwardProp: function (p
     var theme = _a.theme, isTapOrigin = _a.isTapOrigin;
     return ({
         padding: theme.spacing(0),
+        borderRadius: theme.spacing(1.5),
         marginTop: isTapOrigin ? theme.spacing(3.75) : theme.spacing(4.375),
         width: '100%',
         '&::-webkit-scrollbar': {
             width: '0px'
         },
         '&::-webkit-scrollbar-track': {
-            boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
-            webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'
+            boxShadow: theme.shadows[4],
+            webkitBoxShadow: theme.shadows[4]
         },
         '&::-webkit-scrollbar-thumb': {
-            backgroundColor: 'rgba(0,0,0,.1)',
+            backgroundColor: alpha(theme.palette.common.black, 0.1),
             outline: '1px solid slategrey'
         }
     });
 });
-var LogoIconBoxStyled = styled(Box)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            paddingTop: theme.spacing(3.125),
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center'
-        },
-        _b[theme.transitions.create(['top'])] = {
-            duration: theme.transitions.duration.standard
-        },
-        _b);
-});
-var LogoIconStyled = styled(Icon)(function (_a) {
+var LanguageCountryStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
-    return ({
-        width: theme.spacing(5.875),
-        height: '10%',
-        padding: theme.spacing(0)
-    });
-});
-var LanguageFooterStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'showLanguage'; } })(function (_a) {
-    var theme = _a.theme, showLanguage = _a.showLanguage;
     return ({
         position: 'fixed',
-        bottom: theme.spacing(7.5),
+        bottom: theme.spacing(3.75),
         left: '50%',
         transform: 'translateX(-50%)',
-        opacity: showLanguage ? 1 : 0,
-        transition: 'opacity 300ms'
+        transition: 'opacity 300ms',
+        display: 'flex',
+        gap: theme.spacing(1)
     });
 });
 var Dialog = function (_a) {
-    var open = _a.open, children = _a.children, transitionDuration = _a.transitionDuration, isTapOrigin = _a.isTapOrigin, _b = _a.animationType, animationType = _b === void 0 ? 'slide' : _b, onClose = _a.onClose, onConfirm = _a.onConfirm, _c = _a.pointerEvents, pointerEvents = _c === void 0 ? 'auto' : _c, merchantInfo = _a.merchantInfo, isMaturityExpress = _a.isMaturityExpress, rest = __rest(_a, ["open", "children", "transitionDuration", "isTapOrigin", "animationType", "onClose", "onConfirm", "pointerEvents", "merchantInfo", "isMaturityExpress"]);
-    var isAr = useLanguage().isAr;
+    var open = _a.open, children = _a.children, transitionDuration = _a.transitionDuration, isTapOrigin = _a.isTapOrigin, _b = _a.animationType, animationType = _b === void 0 ? 'slide' : _b, onClose = _a.onClose, onConfirm = _a.onConfirm, _c = _a.pointerEvents, pointerEvents = _c === void 0 ? 'auto' : _c, countries = _a.countries, rest = __rest(_a, ["open", "children", "transitionDuration", "isTapOrigin", "animationType", "onClose", "onConfirm", "pointerEvents", "countries"]);
     var animation = {};
     if (animationType === 'slide') {
         Object.assign(animation, { TransitionComponent: Transition });
     }
-    var logo = (merchantInfo || {}).logo;
-    var _d = React.useState(false), showLanguage = _d[0], setShowLanguage = _d[1];
-    React.useEffect(function () {
-        if (isMaturityExpress) {
-            setTimeout(function () {
-                setShowLanguage(true);
-            }, transitionDuration || 500);
-        }
-    }, []);
     return (_jsxs(MuiDialog, __assign({ id: DIALOG_ID, PaperProps: {
             elevation: 0
         }, sx: {
             '& .MuiDialog-paper': {
                 overflowY: 'visible'
             },
-            '&.MuiDialog-root': {
-                marginBottom: isMaturityExpress ? '60px' : '0px'
-            },
             pointerEvents: pointerEvents
-        }, hideBackdrop: true, PaperComponent: PaperStyled, open: open, transitionDuration: transitionDuration || 500, keepMounted: true, "aria-describedby": 'dialog-slide-description' }, rest, animation, { children: [_jsx(DialogContainer, __assign({ isTapOrigin: isTapOrigin, onClose: onClose, onConfirm: onConfirm }, { children: _jsxs(DialogContentStyled, __assign({ isTapOrigin: isTapOrigin }, { children: [_jsxs(Collapse, __assign({ in: !isTapOrigin }, { children: [_jsx(LogoBadge, { src: isMaturityExpress ? logo || ICONS_NAMES.LOGO_ICON : ICONS_NAMES.LOGO_ICON }), !isMaturityExpress && (_jsx(LogoIconBoxStyled, { children: _jsx(LogoIconStyled, { src: isAr ? ICONS_NAMES.TAP_AR : ICONS_NAMES.TAP_EN, alt: 'tap logo' }) }))] })), children] })) })), isMaturityExpress ? _jsx(PoweredByFooter, {}) : _jsx(CustomFooter, {}), _jsx(LanguageFooterStyled, __assign({ showLanguage: showLanguage }, { children: _jsx(CustomFooter, {}) }))] })));
+        }, hideBackdrop: true, PaperComponent: PaperStyled, open: open, transitionDuration: transitionDuration || 500, keepMounted: true, "aria-describedby": 'dialog-slide-description' }, rest, animation, { children: [_jsx(DialogContainer, __assign({ isTapOrigin: isTapOrigin, onClose: onClose, onConfirm: onConfirm }, { children: _jsx(DialogContentStyled, __assign({ isTapOrigin: isTapOrigin }, { children: children })) })), _jsxs(LanguageCountryStyled, { children: [_jsx(CountryPopup, { list: countries }), _jsx(LanguagePopup, {})] })] })));
 };
 export default React.memo(Dialog);

package/build/components/ArabicDatePicker/ArabicDatePicker.d.ts

@@ -11,6 +11,8 @@ export interface DatePickerProps extends CalendarProps {
     onDatePicked?: () => void;
     isDob?: boolean;
     isVerified?: boolean;
+    label?: string;
+    required?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ open, disabled, dir, readOnly, onDateChange, onClick, onDatePicked, value, isDob, isVerified, ...rest }: DatePickerProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ open, disabled, dir, readOnly, onDateChange, onClick, onDatePicked, value, isDob, isVerified, label, required, ...rest }: DatePickerProps) => JSX.Element>;
 export default _default;

package/build/components/ArabicDatePicker/ArabicDatePicker.js

@@ -27,12 +27,13 @@ import arabic from 'react-date-object/calendars/arabic';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import Divider from '@mui/material/Divider';
+import InputAdornment from '@mui/material/InputAdornment';
 import Collapse from '../Collapse';
 import Icon from '../Icon';
 import { ICONS_NAMES } from '../../constants';
 import { getEighteenYearsAgo } from '../../utils';
 import { EndAdornmentExpanded } from '../../features/shared/EndAdornment';
-import Input from '../Input';
+import Input from '../TextField';
 import Text from '../Text';
 import arabic_en from './arabicEn';
 import arabic_ar from './arabicAr';
@@ -48,13 +49,16 @@ var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !
         cursor: disabled ? 'auto' : 'pointer',
         opacity: disabled ? '0.6' : '1',
         fontFamily: theme.typography.fontFamily,
-        minHeight: openCalender ? '345px' : '46px'
+        minHeight: openCalender ? '345px' : '46px',
+        margin: theme.spacing(0, 3, 0, 3)
     });
 });
 var InputFieldStyled = styled(Input)(function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
     return ({
         cursor: disabled ? 'auto' : 'pointer',
+        width: '100%',
+        direction: theme.direction,
         '&::placeholder': __assign(__assign({ opacity: 1, color: theme.palette.text.primary, lineHeight: theme.spacing(2.125) }, theme.typography.body2), { fontWeight: theme.typography.fontWeightLight }),
         '& .MuiInputBase-input': {
             WebkitTextFillColor: 'inherit',
@@ -71,7 +75,7 @@ var ArrowIcon = styled(Text, { shouldForwardProp: function (prop) { return prop
     });
 });
 var DatePicker = function (_a) {
-    var _b = _a.open, open = _b === void 0 ? false : _b, disabled = _a.disabled, dir = _a.dir, readOnly = _a.readOnly, onDateChange = _a.onDateChange, onClick = _a.onClick, onDatePicked = _a.onDatePicked, value = _a.value, isDob = _a.isDob, isVerified = _a.isVerified, rest = __rest(_a, ["open", "disabled", "dir", "readOnly", "onDateChange", "onClick", "onDatePicked", "value", "isDob", "isVerified"]);
+    var _b = _a.open, open = _b === void 0 ? false : _b, disabled = _a.disabled, dir = _a.dir, readOnly = _a.readOnly, onDateChange = _a.onDateChange, onClick = _a.onClick, onDatePicked = _a.onDatePicked, value = _a.value, isDob = _a.isDob, isVerified = _a.isVerified, label = _a.label, required = _a.required, rest = __rest(_a, ["open", "disabled", "dir", "readOnly", "onDateChange", "onClick", "onDatePicked", "value", "isDob", "isVerified", "label", "required"]);
     var _c = React.useState(), date = _c[0], setDate = _c[1];
     var _d = React.useState(null), anchor = _d[0], setAnchor = _d[1];
     var _e = React.useState(open), openCalender = _e[0], setOpenCalender = _e[1];
@@ -108,9 +112,12 @@ var DatePicker = function (_a) {
         var dateObject = toDateObject(date);
         return dateObject.convert(arabic).format(DATE_FORMAT);
     };
-    return (_jsxs(Container, __assign({ openCalender: openCalender, disabled: disabled, id: 'arabic-container-calendar' }, { children: [_jsx(InputFieldStyled, { endAdornment: _jsx(ArrowIcon, __assign({ disabled: disabled }, { children: getEndAdornment() })), value: date ? formateDate(date) : '', placeholder: DATE_FORMAT, onClick: function (e) {
+    return (_jsxs(Container, __assign({ openCalender: openCalender, disabled: disabled, id: 'arabic-container-calendar' }, { children: [_jsx(InputFieldStyled, { label: label, required: required, InputProps: {
+                    endAdornment: _jsx(InputAdornment, __assign({ position: 'end' }, { children: calenderIcon })),
+                    readOnly: readOnly
+                }, value: date ? formateDate(date) : '', placeholder: DATE_FORMAT, onClick: function (e) {
                     if (!disabled)
                         toggleCalender(e);
-                }, startAdornment: calenderIcon, disabled: disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: openCalender }, { children: [_jsx(Calendar, __assign({ calendar: arabic, locale: dir === 'rtl' ? arabic_ar : arabic_en, maxDate: rest.maxDate || defaultMax, minDate: defaultMin, format: DATE_FORMAT, onChange: handleOnDateChange, value: date || (isDob ? new Date(getEighteenYearsAgo()) : undefined), className: 'custom-container' }, rest)), _jsx(Divider, {})] }))] })));
+                }, disabled: disabled, dir: dir }), _jsxs(Collapse, __assign({ in: openCalender }, { children: [_jsx(Calendar, __assign({ calendar: arabic, locale: dir === 'rtl' ? arabic_ar : arabic_en, maxDate: rest.maxDate || defaultMax, minDate: defaultMin, format: DATE_FORMAT, onChange: handleOnDateChange, value: date || (isDob ? new Date(getEighteenYearsAgo()) : undefined), className: 'custom-container' }, rest)), _jsx(Divider, {})] }))] })));
 };
 export default memo(DatePicker);

package/build/components/ArabicDatePicker/style.css

@@ -2,6 +2,8 @@
 	box-shadow: none !important;
 	width: 100% !important;
 	z-index: 0 !important;
+	border-radius: 0px !important;
+	margin-top: -5px;
 }
 
 .rmdp-day-picker > div {

package/build/components/Button/Button.js

@@ -24,6 +24,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Button from '@mui/material/Button';
 import { styled, alpha } from '@mui/material/styles';
+import { ThemeMode } from '../../@types';
 var ButtonStyled = styled(Button, {
     shouldForwardProp: function (prop) { return !['outLineColor', 'touched'].includes(prop.toString()); }
 })(function (_a) {
@@ -31,7 +32,7 @@ var ButtonStyled = styled(Button, {
     var theme = _a.theme, touched = _a.touched, outLineColor = _a.outLineColor;
     return ({
         '&.MuiButton-contained': {
-            color: theme.palette.common.white,
+            color: theme.palette.mode === ThemeMode.DARK ? theme.palette.text.primary : theme.palette.common.white,
             backgroundColor: theme.palette.primary.main,
             '&:hover': {
                 backgroundColor: theme.palette.primary.main
@@ -40,9 +41,9 @@ var ButtonStyled = styled(Button, {
                 backgroundColor: theme.palette.primary.main
             },
             ':disabled': {
-                backgroundColor: alpha(theme.palette.primary.main, 0.3),
-                borderColor: alpha(theme.palette.primary.main, 0.2),
-                color: theme.palette.common.white
+                backgroundColor: theme.palette.action.disabled,
+                borderColor: theme.palette.action.disabled,
+                color: theme.palette.mode === ThemeMode.DARK ? theme.palette.text.disabled : theme.palette.common.white
             },
             '& .MuiButton-endIcon': {
                 margin: theme.spacing(0)
@@ -54,19 +55,19 @@ var ButtonStyled = styled(Button, {
         minHeight: theme.spacing(5.5),
         maxHeight: theme.spacing(5.5),
         borderRadius: theme.spacing(4.1),
-        fontWeight: 'bold',
+        fontWeight: 600,
         lineHeight: 1.7,
         display: 'flex',
         justifyContent: 'space-between',
         paddingInlineStart: theme.spacing(0.75),
         textTransform: 'none',
         '&.MuiButton-outlined': (_b = {
-                backgroundColor: theme.palette.common.white,
+                backgroundColor: theme.palette.mode === ThemeMode.DARK ? 'transparent' : theme.palette.common.white,
                 border: "1px solid ".concat(!!outLineColor ? outLineColor : theme.palette.primary.main),
                 color: !!outLineColor ? outLineColor : theme.palette.primary.main,
                 '&:hover': {
                     backgroundColor: !!outLineColor ? outLineColor : theme.palette.primary.main,
-                    color: theme.palette.common.white,
+                    color: theme.palette.mode === ThemeMode.DARK ? theme.palette.text.disabled : theme.palette.common.white,
                     img: {
                         filter: 'brightness(0) invert(1)'
                     }
@@ -75,15 +76,25 @@ var ButtonStyled = styled(Button, {
             _b[theme.breakpoints.down('sm')] = {
                 '&:hover': {
                     backgroundColor: touched ? (!!outLineColor ? outLineColor : theme.palette.primary.main) : theme.palette.common.white,
-                    color: touched ? theme.palette.common.white : !!outLineColor ? outLineColor : theme.palette.primary.main,
+                    color: touched
+                        ? theme.palette.mode === ThemeMode.DARK
+                            ? theme.palette.text.primary
+                            : theme.palette.common.white
+                        : !!outLineColor
+                            ? outLineColor
+                            : theme.palette.primary.main,
                     img: {
                         filter: touched ? 'brightness(0) invert(1)' : 'none'
                     }
                 }
             },
             _b['&:disabled'] = {
-                backgroundColor: theme.palette.common.white,
-                color: alpha(!!outLineColor ? outLineColor : theme.palette.primary.main, 0.3)
+                backgroundColor: theme.palette.action.disabled,
+                color: outLineColor
+                    ? alpha(outLineColor, 0.3)
+                    : theme.palette.mode === ThemeMode.DARK
+                        ? theme.palette.text.disabled
+                        : theme.palette.common.white
             },
             _b)
     });

package/build/components/CheckBox/CheckBox.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { CheckboxProps } from '@mui/material/Checkbox/Checkbox';
 export type { CheckboxProps };
-declare const _default: React.MemoExoticComponent<({ ...rest }: CheckboxProps) => JSX.Element>;
+declare function CheckBoxComponent(props: CheckboxProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof CheckBoxComponent>;
 export default _default;

package/build/components/CheckBox/CheckBox.js

@@ -9,31 +9,53 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Checkbox from '@mui/material/Checkbox/Checkbox';
-var CheckBoxStyled = styled(Checkbox)(function (_a) {
+import { ThemeMode } from '../../@types';
+var CheckBoxIcon = styled('span')(function (_a) {
     var theme = _a.theme;
     return ({
-        paddingInlineStart: theme.spacing(2.5),
-        paddingInlineEnd: theme.spacing(1.25),
-        marginBlockStart: theme.spacing(1.9)
+        borderRadius: 3,
+        width: 16,
+        height: 16,
+        opacity: 1,
+        borderStyle: 'solid',
+        borderWidth: theme.spacing(0.125),
+        borderColor: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.common.black,
+        'input:disabled ~ &': {
+            opacity: 0.6
+        }
     });
 });
-var CheckBoxComponent = function (_a) {
-    var rest = __rest(_a, []);
-    return _jsx(CheckBoxStyled, __assign({}, rest));
-};
+var CheckedIcon = styled(CheckBoxIcon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        backgroundColor: theme.palette.action.active,
+        borderWidth: theme.spacing(0),
+        '&:before': {
+            display: 'block',
+            width: theme.spacing(2),
+            height: theme.spacing(2),
+            backgroundRepeat: 'no-repeat',
+            position: 'absolute',
+            top: theme.spacing(1.75),
+            left: theme.spacing(1.5),
+            backgroundImage: theme.palette.mode === ThemeMode.DARK
+                ? "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath" +
+                    " d='M8.07433 0.226874C8.21025 0.0872426 8.39518 0.00598767 8.58996 0.000311011C8.74093 -0.00403712 8.8897 0.0372929 9.0168 0.118893C9.14389 0.200493 9.24339 0.318561 9.30228 0.457645C9.36116 0.596729 9.37668 0.75035 9.34682 0.898402C9.31695 1.04646 9.24308 1.18204 9.13488 1.28742L4.13488 6.28742C3.99422 6.42802 3.80349 6.507 3.60461 6.507C3.40573 6.507 3.21499 6.42802 3.07433 6.28742L0.574334 3.78742C0.502356 3.71831 0.444891 3.63553 0.405304 3.54394C0.365716 3.45234 0.344803 3.35377 0.343789 3.25399C0.342774 3.15421 0.361679 3.05523 0.399396 2.96285C0.437113 2.87047 0.492884 2.78654 0.563442 2.71598C0.634 2.64542 0.717928 2.58965 0.81031 2.55194C0.902691 2.51422 1.00167 2.49531 1.10145 2.49633C1.20123 2.49734 1.2998 2.51825 1.3914 2.55784C1.483 2.59743 1.56577 2.6549 1.63488 2.72687L3.60461 4.6966L8.07433 0.226874Z'" +
+                    " fill='%23000'/%3E%3C/svg%3E\")"
+                : "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath" +
+                    " d='M8.07433 0.226874C8.21025 0.0872426 8.39518 0.00598767 8.58996 0.000311011C8.74093 -0.00403712 8.8897 0.0372929 9.0168 0.118893C9.14389 0.200493 9.24339 0.318561 9.30228 0.457645C9.36116 0.596729 9.37668 0.75035 9.34682 0.898402C9.31695 1.04646 9.24308 1.18204 9.13488 1.28742L4.13488 6.28742C3.99422 6.42802 3.80349 6.507 3.60461 6.507C3.40573 6.507 3.21499 6.42802 3.07433 6.28742L0.574334 3.78742C0.502356 3.71831 0.444891 3.63553 0.405304 3.54394C0.365716 3.45234 0.344803 3.35377 0.343789 3.25399C0.342774 3.15421 0.361679 3.05523 0.399396 2.96285C0.437113 2.87047 0.492884 2.78654 0.563442 2.71598C0.634 2.64542 0.717928 2.58965 0.81031 2.55194C0.902691 2.51422 1.00167 2.49531 1.10145 2.49633C1.20123 2.49734 1.2998 2.51825 1.3914 2.55784C1.483 2.59743 1.56577 2.6549 1.63488 2.72687L3.60461 4.6966L8.07433 0.226874Z'" +
+                    " fill='%23fff'/%3E%3C/svg%3E\")",
+            content: '""'
+        }
+    });
+});
+function CheckBoxComponent(props) {
+    return (_jsx(Checkbox, __assign({ sx: {
+            '&:hover': { bgcolor: 'transparent' }
+        }, disableRipple: true, color: 'default', checkedIcon: _jsx(CheckedIcon, {}), icon: _jsx(CheckBoxIcon, {}), inputProps: { 'aria-label': 'Checkbox' } }, props)));
+}
 export default React.memo(CheckBoxComponent);

package/build/components/DatePicker/DatePicker.d.ts

@@ -12,6 +12,8 @@ export interface DatePickerProps extends CalendarProps {
     dir?: string;
     isDob?: boolean;
     isVerified?: boolean;
+    label?: string;
+    required?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ onDateChange, disabled, readOnly, onClick, onDatePicked, dir, defaultValue, isDob, isVerified, open, ...rest }: DatePickerProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onDateChange, disabled, readOnly, onClick, onDatePicked, dir, defaultValue, isDob, isVerified, open, label, required, ...rest }: DatePickerProps) => JSX.Element>;
 export default _default;

package/build/components/DatePicker/DatePicker.js

@@ -25,14 +25,15 @@ import React, { useEffect, useState, memo } from 'react';
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import Box from '@mui/material/Box';
+import InputAdornment from '@mui/material/InputAdornment';
 import { styled } from '@mui/material/styles';
 import Divider from '@mui/material/Divider';
 import Collapse from '../Collapse';
 import Icon from '../Icon';
+import Input from '../TextField';
 import { ICONS_NAMES } from '../../constants';
 import { convertToEnglishDateFormat, getEighteenYearsAgo, scrollDown, scrollUp } from '../../utils';
 import { EndAdornmentExpanded } from '../../features/shared/EndAdornment';
-import Input from '../Input';
 import Text from '../Text';
 import './customStyle.css';
 var ContainerIcon = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
@@ -44,14 +45,16 @@ var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !
     return ({
         cursor: disabled ? 'auto' : 'pointer',
         opacity: disabled ? '0.6' : '1',
-        fontFamily: theme.typography.fontFamily
+        fontFamily: theme.typography.fontFamily,
+        margin: theme.spacing(0, 3, 0, 3)
     });
 });
 var InputFieldStyled = styled(Input)(function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
     return ({
         cursor: disabled ? 'auto' : 'pointer',
-        '&::placeholder': __assign(__assign({ opacity: 1, color: theme.palette.text.primary, lineHeight: theme.spacing(2.125) }, theme.typography.body2), { fontWeight: theme.typography.fontWeightLight }),
+        width: '100%',
+        direction: theme.direction,
         '& .MuiInputBase-input': {
             WebkitTextFillColor: 'inherit',
             cursor: disabled ? 'auto' : 'pointer'
@@ -67,7 +70,7 @@ var ArrowIcon = styled(Text, { shouldForwardProp: function (prop) { return prop
     });
 });
 var DatePicker = function (_a) {
-    var onDateChange = _a.onDateChange, disabled = _a.disabled, readOnly = _a.readOnly, onClick = _a.onClick, onDatePicked = _a.onDatePicked, dir = _a.dir, defaultValue = _a.defaultValue, isDob = _a.isDob, isVerified = _a.isVerified, open = _a.open, rest = __rest(_a, ["onDateChange", "disabled", "readOnly", "onClick", "onDatePicked", "dir", "defaultValue", "isDob", "isVerified", "open"]);
+    var onDateChange = _a.onDateChange, disabled = _a.disabled, readOnly = _a.readOnly, onClick = _a.onClick, onDatePicked = _a.onDatePicked, dir = _a.dir, defaultValue = _a.defaultValue, isDob = _a.isDob, isVerified = _a.isVerified, open = _a.open, label = _a.label, required = _a.required, rest = __rest(_a, ["onDateChange", "disabled", "readOnly", "onClick", "onDatePicked", "dir", "defaultValue", "isDob", "isVerified", "open", "label", "required"]);
     var _b = useState(), date = _b[0], setDate = _b[1];
     var _c = React.useState(null), anchor = _c[0], setAnchor = _c[1];
     var _d = React.useState(open), openCalender = _d[0], setOpenCalender = _d[1];
@@ -103,9 +106,12 @@ var DatePicker = function (_a) {
             return '';
         return _jsx(EndAdornmentExpanded, { isVerified: isVerified, anchorEl: anchor });
     };
-    return (_jsxs(Container, __assign({ disabled: disabled, id: 'container-calendar' }, { children: [_jsx(InputFieldStyled, { endAdornment: _jsx(ArrowIcon, __assign({ disabled: disabled }, { children: getEndAdornment() })), value: date ? convertToEnglishDateFormat(date) : '', placeholder: 'YYYY-MM-DD', onClick: function (e) {
+    return (_jsxs(Container, __assign({ disabled: disabled, id: 'container-calendar' }, { children: [_jsx(InputFieldStyled, { label: label, required: required, InputProps: {
+                    endAdornment: _jsx(InputAdornment, __assign({ position: 'end' }, { children: calenderIcon })),
+                    readOnly: readOnly
+                }, value: date ? convertToEnglishDateFormat(date) : '', placeholder: 'YYYY-MM-DD', onClick: function (e) {
                     if (!disabled)
                         toggleCalender(e);
-                }, startAdornment: calenderIcon, disabled: disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: openCalender }, { children: [_jsx(Calendar, __assign({}, rest, { value: date || (isDob ? new Date(getEighteenYearsAgo()) : undefined), calendarType: 'Hebrew', onChange: handleOnDateChange, locale: rest.locale, maxDate: rest.maxDate || defaultMax, minDate: rest.minDate || defaultMin })), _jsx(Divider, {})] }))] })));
+                }, disabled: disabled, dir: dir }), _jsxs(Collapse, __assign({ in: openCalender }, { children: [_jsx(Calendar, __assign({}, rest, { value: date || (isDob ? new Date(getEighteenYearsAgo()) : undefined), calendarType: 'Hebrew', onChange: handleOnDateChange, locale: rest.locale, maxDate: rest.maxDate || defaultMax, minDate: rest.minDate || defaultMin })), _jsx(Divider, {})] }))] })));
 };
 export default memo(DatePicker);

package/build/components/DatePicker/customStyle.css

@@ -6,6 +6,7 @@
 	width: 100%;
 	border: none;
 	padding: 15px 0px 15px 0px;
+	margin-top: -5px;
 }
 
 .react-calendar__navigation {

package/build/components/ExpandIcon/ExpandIcon.js

@@ -10,15 +10,18 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-var ExpandIcon = styled(ExpandMoreIcon, { shouldForwardProp: function (prop) { return prop !== 'anchorEl'; } })(function (_a) {
+import { styled, useTheme } from '@mui/material/styles';
+import { ICONS_NAMES } from '../../constants';
+import Icon from '../Icon';
+var ExpandIcon = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'anchorEl'; } })(function (_a) {
     var _b;
     var theme = _a.theme, anchorEl = _a.anchorEl;
-    return (__assign(__assign({}, theme.typography.h6), (_b = { display: 'flex', cursor: 'pointer', width: theme.spacing(2.25), height: theme.spacing(2.25), transform: !!anchorEl ? 'rotate(180deg)' : '' }, _b[theme.transitions.create(['transform'])] = {
+    return (__assign(__assign({}, theme.typography.h6), (_b = { display: 'flex', cursor: 'pointer', width: theme.spacing(1.75), height: theme.spacing(1.75), transform: !!anchorEl ? 'rotate(180deg)' : '' }, _b[theme.transitions.create(['transform'])] = {
         duration: theme.transitions.duration.standard
     }, _b)));
 });
 export default function CustomExpandIcon(props) {
-    return _jsx(ExpandIcon, __assign({}, props));
+    var theme = useTheme();
+    var url = theme.palette.mode === 'dark' ? ICONS_NAMES.expand_more_dark : ICONS_NAMES.expand_more_light;
+    return _jsx(ExpandIcon, __assign({ src: url }, props));
 }