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

package/build/features/shared/Calender/CustomHijriDatePicker.js

@@ -0,0 +1,258 @@
+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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import momentHijri from 'moment-hijri';
+import { styled, useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { useLanguage } from '../../../hooks';
+import { convertToEnglishDateFormat } from '../../../utils';
+import Text from '../../../components/Text';
+import SimpleList from '../../../components/SimpleList';
+import { ThemeMode } from '../../../@types';
+import { hijriArabicMonthNames } from '../../../constants';
+import ExpandIcon from '../../../components/ExpandIcon';
+import TextFieldSelect from '../TextFieldSelect';
+import Mandatory from '../Mandatory';
+import DropDownStyle from '../DropDownStyle';
+import CheckIcon from '../CheckIcon';
+var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(1.5),
+        height: theme.spacing(1.5)
+    });
+});
+var TextContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        padding: theme.spacing(0, 3, 1, 3)
+    });
+});
+var InputLabelStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.text.secondary,
+        fontWeight: theme.typography.fontWeightRegular,
+        fontSize: theme.spacing(1.375)
+    });
+});
+var DateContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'row',
+        padding: theme.spacing(0, 3, 0, 3)
+    });
+});
+var DayInputStyled = styled(TextFieldSelect)(function () { return ({}); });
+var MonthInputStyled = styled(TextFieldSelect)(function () { return ({}); });
+var YearInputStyled = styled(TextFieldSelect)(function () { return ({}); });
+var DayListStyled = styled((SimpleList))(function () { return ({}); });
+var MonthListStyled = styled((SimpleList))(function () { return ({}); });
+var YearListStyled = styled((SimpleList))(function () { return ({}); });
+export var NameContainer = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
+    var theme = _a.theme, isSelected = _a.isSelected;
+    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, textAlign: 'center', whiteSpace: 'pre' }));
+});
+var CustomDatePicker = function (_a) {
+    var label = _a.label, required = _a.required, isVerified = _a.isVerified, readOnly = _a.readOnly, labelSx = _a.labelSx, defaultValue = _a.defaultValue, onDateChange = _a.onDateChange, maxDate = _a.maxDate;
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var theme = useTheme();
+    var _b = useState(null), date = _b[0], setDate = _b[1];
+    var _c = React.useState(null), dayAnchorEl = _c[0], setDayAnchorEl = _c[1];
+    var _d = React.useState(null), monthAnchorEl = _d[0], setMonthAnchorEl = _d[1];
+    var _e = React.useState(null), yearAnchorEl = _e[0], setYearAnchorEl = _e[1];
+    var _f = useState(), day = _f[0], setDay = _f[1];
+    var _g = useState(), month = _g[0], setMonth = _g[1];
+    var _h = useState(), year = _h[0], setYear = _h[1];
+    var locale = isAr ? 'ar' : 'en';
+    var defaultMax = new Date();
+    var defaultMin = new Date('1900-01-01');
+    React.useEffect(function () {
+        if (defaultValue) {
+            var date_1 = momentHijri(defaultValue).locale(locale);
+            setDate(defaultValue);
+            setDay(date_1.iDate());
+            setMonth(date_1.iMonth());
+            setYear(date_1.iYear());
+        }
+    }, []);
+    React.useEffect(function () {
+        if (day && !getDays.includes(day)) {
+            setDay(undefined);
+        }
+        if (month && !getMonths[month]) {
+            setMonth(undefined);
+        }
+    }, [year, month, isAr]);
+    React.useEffect(function () {
+        var dateValue = date || new Date();
+        var selectedDate = dateValue;
+        if (year) {
+            selectedDate = momentHijri(selectedDate).locale('en').iYear(year).toDate();
+        }
+        if (month === null || month === void 0 ? void 0 : month.toString()) {
+            selectedDate = momentHijri(selectedDate).locale('en').iMonth(month).toDate();
+        }
+        if (day) {
+            selectedDate = momentHijri(selectedDate).locale('en').iDate(day).toDate();
+        }
+        setDate(selectedDate);
+        if (day && month !== undefined && getMonths[month] && year) {
+            onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(convertToEnglishDateFormat(selectedDate));
+            return;
+        }
+        if (defaultValue) {
+            onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange('');
+        }
+    }, [day, month, year]);
+    var getMonths = React.useMemo(function () {
+        var maxDateMoment = momentHijri(maxDate || defaultMax).locale(locale);
+        var maxYear = maxDateMoment.iYear();
+        var maxMonth = 12;
+        if (year && year === maxYear) {
+            maxMonth = maxDateMoment.iMonth() + 1;
+        }
+        var hijriMonths = Array.from({ length: maxMonth }, function (_, index) {
+            if (isAr) {
+                return hijriArabicMonthNames[index];
+            }
+            return momentHijri().locale('en').iMonth(index).format('iMMMM');
+        });
+        return hijriMonths;
+    }, [year, isAr]);
+    var getDays = React.useMemo(function () {
+        var maxDateMoment = momentHijri(maxDate || defaultMax).locale(locale);
+        var maxMonth = maxDateMoment.iMonth();
+        var maxYear = maxDateMoment.iYear();
+        var selectedMonth = month ? month : 0;
+        var selectedYear = year ? year : momentHijri().locale(locale).iYear();
+        var daysInMonth = parseInt(momentHijri("".concat(selectedYear, "-").concat(selectedMonth + 1), 'iYYYY-iMM')
+            .locale('en')
+            .endOf('iMonth')
+            .format('iDD'));
+        if (selectedMonth === maxMonth && selectedYear === maxYear) {
+            daysInMonth = maxDateMoment.iDate();
+        }
+        return Array.from({ length: daysInMonth }, function (_, index) { return index + 1; });
+    }, [month, year]);
+    var getYears = React.useMemo(function () {
+        var m = momentHijri().locale(locale);
+        var minYear = m.year(momentHijri(defaultMin).year()).iYear();
+        var maxYear = m.year(momentHijri(maxDate || defaultMax).year()).iYear();
+        var years = [];
+        for (var year_1 = maxYear; year_1 >= minYear; year_1--) {
+            years.push(year_1);
+        }
+        return years;
+    }, [locale]);
+    var onOpenDayList = function (event) {
+        if (readOnly)
+            return;
+        setDayAnchorEl(event.currentTarget);
+    };
+    var onCloseDayList = function () {
+        setDayAnchorEl(null);
+    };
+    var onChangeDay = function (day) {
+        setDay(day);
+        onCloseDayList();
+    };
+    var getSelectedDayFlag = function (d) {
+        return d === day;
+    };
+    var getDay = function () {
+        return day ? day : '';
+    };
+    var onOpenMonthList = function (event) {
+        if (readOnly)
+            return;
+        setMonthAnchorEl(event.currentTarget);
+    };
+    var onCloseMonthList = function () {
+        setMonthAnchorEl(null);
+    };
+    var onChangeMonth = function (month) {
+        setMonth(getMonths.indexOf(month));
+        onCloseMonthList();
+    };
+    var getSelectedMonthFlag = function (m) {
+        return getMonths.indexOf(m) === month;
+    };
+    var getMonth = function () {
+        if ((month === 0 || month) && getMonths[month])
+            return getMonths[month];
+        return '';
+    };
+    var onOpenYearList = function (event) {
+        if (readOnly)
+            return;
+        setYearAnchorEl(event.currentTarget);
+    };
+    var onCloseYearList = function () {
+        setYearAnchorEl(null);
+    };
+    var onChangeYear = function (year) {
+        setYear(year);
+        onCloseYearList();
+    };
+    var getSelectedYearFlag = function (y) {
+        return y === year;
+    };
+    var getYear = function () {
+        return year ? year : '';
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(TextContainerStyled, __assign({ sx: labelSx }, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {}), isVerified && (_jsx(CheckIcon, { sx: { marginInlineStart: theme.spacing(1), width: theme.spacing(2.5), height: theme.spacing(2.5) }, isVerified: isVerified }))] })), _jsxs(DateContainerStyled, { children: [_jsx(DayInputStyled, { label: t('day'), boxSx: { padding: 0, width: '25%', marginInlineEnd: theme.spacing(1) }, InputProps: {
+                            endAdornment: !readOnly && _jsx(ExpandIconStyled, { anchorEl: !!dayAnchorEl })
+                        }, inputProps: {
+                            readOnly: readOnly
+                        }, value: getDay(), onClick: !!dayAnchorEl ? function () { return onCloseDayList(); } : onOpenDayList }), _jsx(DropDownStyle, __assign({ anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, sx: { marginLeft: 0, marginRight: 0, width: theme.spacing(10.625) }, isPopupMode: true, anchorEl: dayAnchorEl, onClosePopup: onCloseDayList }, { children: _jsx(DayListStyled, { list: getDays, onSelectItem: onChangeDay, renderItem: function (day) {
+                                return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(NameContainer, __assign({ isSelected: getSelectedDayFlag(day) }, { children: day })) })), getSelectedDayFlag(day) && _jsx(CheckIcon, { sx: { paddingInlineStart: theme.spacing(1.25) } })] }));
+                            } }) })), _jsx(MonthInputStyled, { label: t('month'), boxSx: { padding: 0, width: '47%', marginInlineEnd: theme.spacing(1) }, InputProps: {
+                            endAdornment: !readOnly && _jsx(ExpandIconStyled, { anchorEl: !!monthAnchorEl })
+                        }, inputProps: {
+                            readOnly: readOnly
+                        }, value: getMonth(), onClick: !!monthAnchorEl ? function () { return onCloseMonthList(); } : onOpenMonthList }), _jsx(DropDownStyle, __assign({ anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, sx: { marginLeft: 0, marginRight: 0, width: theme.spacing(19.375) }, isPopupMode: true, anchorEl: monthAnchorEl, onClosePopup: onCloseMonthList }, { children: _jsx(MonthListStyled, { list: getMonths, onSelectItem: onChangeMonth, renderItem: function (month) {
+                                return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(NameContainer, __assign({ isSelected: getSelectedMonthFlag(month) }, { children: month })) })), getSelectedMonthFlag(month) && _jsx(CheckIcon, { sx: { paddingInlineStart: theme.spacing(1.25) } })] }));
+                            } }) })), _jsx(YearInputStyled, { label: t('year'), boxSx: { padding: 0, width: '28%' }, InputProps: {
+                            endAdornment: !readOnly && _jsx(ExpandIconStyled, { anchorEl: !!yearAnchorEl })
+                        }, inputProps: {
+                            readOnly: readOnly
+                        }, value: getYear(), onClick: !!yearAnchorEl ? function () { return onCloseYearList(); } : onOpenYearList }), _jsx(DropDownStyle, __assign({ anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, sx: { marginLeft: 0, marginRight: 0, width: theme.spacing(11.25) }, isPopupMode: true, anchorEl: yearAnchorEl, onClosePopup: onCloseYearList }, { children: _jsx(YearListStyled, { list: getYears, onSelectItem: onChangeYear, renderItem: function (year) {
+                                return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(NameContainer, __assign({ isSelected: getSelectedYearFlag(year) }, { children: year })) })), getSelectedYearFlag(year) && _jsx(CheckIcon, { sx: { paddingInlineStart: theme.spacing(1.25) } })] }));
+                            } }) }))] })] }));
+};
+export default memo(CustomDatePicker);

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export declare const NameContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
+    children?: React.ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: SxProps<Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | 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" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    isSelected: boolean;
+}, {}, {}>;
+export declare type CustomDatePickerProps = {
+    label: string;
+    required?: boolean;
+    isVerified?: boolean;
+    readOnly?: boolean;
+    labelSx?: SxProps<Theme>;
+    defaultValue?: Date;
+    onDateChange?: (date: string) => void;
+    maxDate?: Date;
+};
+declare const _default: React.MemoExoticComponent<({ label, required, isVerified, readOnly, labelSx, defaultValue, onDateChange, maxDate }: CustomDatePickerProps) => JSX.Element>;
+export default _default;

package/build/features/shared/Calender/DatePicker.js

@@ -0,0 +1,229 @@
+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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import moment from 'moment';
+import { styled, useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { useAppDispatch, useAppSelector } from '../../../hooks';
+import { handleSwitchCalender, settingsSelector } from '../../../app/settings';
+import Text from '../../../components/Text';
+import SimpleList from '../../../components/SimpleList';
+import { ThemeMode } from '../../../@types';
+import TextFieldSelect from '../TextFieldSelect';
+import Mandatory from '../Mandatory';
+import { EndAdornmentExpanded } from '../EndAdornment';
+import DropDownStyle from '../DropDownStyle';
+import CheckIcon from '../CheckIcon';
+var TextContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'flex-start',
+        padding: theme.spacing(0, 3, 0.5, 3)
+    });
+});
+var InputLabelStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.text.secondary,
+        fontWeight: theme.typography.fontWeightRegular,
+        fontSize: theme.spacing(1.375)
+    });
+});
+var SwitchLabelStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ color: theme.palette.primary.main, fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { cursor: 'pointer' }));
+});
+var DateContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'row',
+        padding: theme.spacing(0, 3, 0, 3)
+    });
+});
+var DayInputStyled = styled(TextFieldSelect)(function () { return ({}); });
+var MonthInputStyled = styled(TextFieldSelect)(function () { return ({}); });
+var YearInputStyled = styled(TextFieldSelect)(function () { return ({}); });
+var DayListStyled = styled((SimpleList))(function () { return ({}); });
+var MonthListStyled = styled((SimpleList))(function () { return ({}); });
+var YearListStyled = styled((SimpleList))(function () { return ({}); });
+export var NameContainer = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
+    var theme = _a.theme, isSelected = _a.isSelected;
+    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, textAlign: 'center' }));
+});
+var CustomDatePicker = function (_a) {
+    var label = _a.label, required = _a.required, isVerified = _a.isVerified, readOnly = _a.readOnly, labelSx = _a.labelSx, defaultValue = _a.defaultValue, onDateChange = _a.onDateChange, maxDate = _a.maxDate;
+    var t = useTranslation().t;
+    var theme = useTheme();
+    var _b = useState(null), date = _b[0], setDate = _b[1];
+    var _c = React.useState(null), dayAnchorEl = _c[0], setDayAnchorEl = _c[1];
+    var _d = React.useState(null), monthAnchorEl = _d[0], setMonthAnchorEl = _d[1];
+    var _e = React.useState(null), yearAnchorEl = _e[0], setYearAnchorEl = _e[1];
+    var _f = useState(), day = _f[0], setDay = _f[1];
+    var _g = useState(), month = _g[0], setMonth = _g[1];
+    var _h = useState(), year = _h[0], setYear = _h[1];
+    var data = useAppSelector(settingsSelector).data;
+    var dispatch = useAppDispatch();
+    var isHijriCalender = data.isHijri;
+    var defaultMax = new Date();
+    var defaultMin = new Date('1900-01-01');
+    useEffect(function () {
+        setDate(new Date());
+        if (defaultValue) {
+            setDate(defaultValue);
+            setDay(parseInt(moment(defaultValue).format('DD')));
+            setMonth(moment(date).format('MMMM'));
+            setYear(parseInt(moment(defaultValue).format('YYYY')));
+        }
+    }, []);
+    var onSwitchCalender = function () {
+        dispatch(handleSwitchCalender(!isHijriCalender));
+    };
+    React.useEffect(function () {
+        if (date) {
+            var selectedDate = date;
+            checkSelectedDayValidity();
+            if (year) {
+                selectedDate = moment(selectedDate)
+                    .set('year', +year)
+                    .toDate();
+            }
+            if (month) {
+                selectedDate = moment(date).month(getMonths.indexOf(month)).toDate();
+            }
+            if (day) {
+                selectedDate = moment(selectedDate)
+                    .set('date', +day)
+                    .toDate();
+            }
+            setDate(selectedDate);
+            if (day && month && year) {
+                onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(selectedDate.toLocaleDateString('en-CA'));
+                return;
+            }
+            onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange('');
+        }
+    }, [day, month, year]);
+    var getMonths = React.useMemo(function () {
+        return moment.months();
+    }, []);
+    var getDays = React.useMemo(function () {
+        var selectedMonth = month ? getMonths.indexOf(month) : 0;
+        var selectedYear = year ? year : moment().year();
+        var daysInMonth = moment("".concat(selectedYear, "-").concat(selectedMonth + 1), 'YYYY-MM').daysInMonth();
+        return Array.from({ length: daysInMonth }, function (_, index) { return index + 1; });
+    }, [month, year]);
+    var getYears = React.useMemo(function () {
+        var minYear = moment().year(moment(defaultMin).year()).year();
+        var maxYear = moment()
+            .year(moment(maxDate || defaultMax).year())
+            .year();
+        var years = [];
+        for (var year_1 = maxYear; year_1 >= minYear; year_1--) {
+            years.push(year_1);
+        }
+        return years;
+    }, []);
+    var checkSelectedDayValidity = function () {
+        if (day) {
+            if (!getDays.includes(day)) {
+                setDay(undefined);
+            }
+        }
+    };
+    var onOpenDayList = function (event) {
+        if (readOnly)
+            return;
+        setDayAnchorEl(event.currentTarget);
+    };
+    var onCloseDayList = function () {
+        setDayAnchorEl(null);
+    };
+    var onChangeDay = function (day) {
+        setDay(day);
+        onCloseDayList();
+    };
+    var getSelectedDayFlag = function (d) {
+        return d === day;
+    };
+    var onOpenMonthList = function (event) {
+        if (readOnly)
+            return;
+        setMonthAnchorEl(event.currentTarget);
+    };
+    var onCloseMonthList = function () {
+        setMonthAnchorEl(null);
+    };
+    var onChangeMonth = function (month) {
+        setMonth(month);
+        onCloseMonthList();
+    };
+    var getSelectedMonthFlag = function (m) {
+        return m === month;
+    };
+    var onOpenYearList = function (event) {
+        if (readOnly)
+            return;
+        setYearAnchorEl(event.currentTarget);
+    };
+    var onCloseYearList = function () {
+        setYearAnchorEl(null);
+    };
+    var onChangeYear = function (year) {
+        setYear(year);
+        onCloseYearList();
+    };
+    var getSelectedYearFlag = function (y) {
+        return y === year;
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(TextContainerStyled, __assign({ sx: labelSx }, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {})] })), _jsxs(DateContainerStyled, { children: [_jsx(DayInputStyled, { label: t('day'), boxSx: { padding: 0, width: '25%', marginInlineEnd: theme.spacing(1) }, InputProps: {
+                            endAdornment: _jsx(EndAdornmentExpanded, { isVerified: isVerified, anchorEl: dayAnchorEl })
+                        }, inputProps: {
+                            readOnly: readOnly
+                        }, value: day ? day : '', onClick: !!dayAnchorEl ? function () { return onCloseDayList(); } : onOpenDayList }), _jsx(DropDownStyle, __assign({ anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, sx: { marginLeft: 0, marginRight: 0, width: theme.spacing(10.625) }, isPopupMode: true, anchorEl: dayAnchorEl, onClosePopup: onCloseDayList }, { children: _jsx(DayListStyled, { list: getDays, onSelectItem: onChangeDay, renderItem: function (day) {
+                                return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(NameContainer, __assign({ isSelected: getSelectedDayFlag(day) }, { children: day })) })), getSelectedDayFlag(day) && _jsx(CheckIcon, { sx: { paddingInlineStart: theme.spacing(1.25) } })] }));
+                            } }) })), _jsx(MonthInputStyled, { label: t('month'), boxSx: { padding: 0, width: '47%', marginInlineEnd: theme.spacing(1) }, InputProps: {
+                            endAdornment: _jsx(EndAdornmentExpanded, { isVerified: isVerified, anchorEl: monthAnchorEl })
+                        }, inputProps: {
+                            readOnly: readOnly
+                        }, value: month ? month : '', onClick: !!monthAnchorEl ? function () { return onCloseMonthList(); } : onOpenMonthList }), _jsx(DropDownStyle, __assign({ anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, sx: { marginLeft: 0, marginRight: 0, width: theme.spacing(19.375) }, isPopupMode: true, anchorEl: monthAnchorEl, onClosePopup: onCloseMonthList }, { children: _jsx(MonthListStyled, { list: getMonths, onSelectItem: onChangeMonth, renderItem: function (month) {
+                                return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(NameContainer, __assign({ isSelected: getSelectedMonthFlag(month) }, { children: month })) })), getSelectedMonthFlag(month) && _jsx(CheckIcon, { sx: { paddingInlineStart: theme.spacing(1.25) } })] }));
+                            } }) })), _jsx(YearInputStyled, { label: t('year'), boxSx: { padding: 0, width: '28%' }, InputProps: {
+                            endAdornment: _jsx(EndAdornmentExpanded, { isVerified: isVerified, anchorEl: yearAnchorEl })
+                        }, inputProps: {
+                            readOnly: readOnly
+                        }, value: year ? year : '', onClick: !!yearAnchorEl ? function () { return onCloseYearList(); } : onOpenYearList }), _jsx(DropDownStyle, __assign({ anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: theme.direction === 'rtl' ? 'left' : 'right'
+                        }, sx: { marginLeft: 0, marginRight: 0, width: theme.spacing(11.25) }, isPopupMode: true, anchorEl: yearAnchorEl, onClosePopup: onCloseYearList }, { children: _jsx(YearListStyled, { list: getYears, onSelectItem: onChangeYear, renderItem: function (year) {
+                                return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(NameContainer, __assign({ isSelected: getSelectedYearFlag(year) }, { children: year })) })), getSelectedYearFlag(year) && _jsx(CheckIcon, { sx: { paddingInlineStart: theme.spacing(1.25) } })] }));
+                            } }) }))] }), _jsx(TextContainerStyled, __assign({ sx: { pt: 1.25, pb: 0 } }, { children: _jsx(SwitchLabelStyled, __assign({ onClick: onSwitchCalender }, { children: !isHijriCalender ? t('switch_to_islamic_calendar') : t('switch_to_gregorian_calendar') })) }))] }));
+};
+export default memo(CustomDatePicker);

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

@@ -1,2 +1,4 @@
 import Calender from './Calender';
+import CustomCalender from './CustomCalender';
+export { CustomCalender };
 export default Calender;

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

@@ -1,2 +1,4 @@
 import Calender from './Calender';
+import CustomCalender from './CustomCalender';
+export { CustomCalender };
 export default Calender;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { SxProps, Theme } from '@mui/material/styles';
-declare type CustomCheckIconProps = {
+interface CustomCheckIconProps {
     isVerified?: boolean;
     sx?: SxProps<Theme>;
-};
+}
 export default function CustomCheckIcon({ isVerified, sx }: CustomCheckIconProps): JSX.Element;
 export {};

package/build/features/shared/CheckIcon/CheckIcon.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { alpha, styled } from '@mui/material/styles';
-import CheckIcon from '@mui/icons-material/Check';
-var CheckIconStyled = styled(CheckIcon, { shouldForwardProp: function (prop) { return prop !== 'isVerified'; } })(function (_a) {
-    var theme = _a.theme, isVerified = _a.isVerified;
+import { styled } from '@mui/material/styles';
+import Icon from '../../../components/Icon';
+import { ICONS_NAMES } from '../../../constants';
+var CheckIconStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
     return ({
         display: 'flex',
-        alignItems: 'flex-end',
-        color: isVerified ? theme.palette.success.main : alpha(theme.palette.success.dark, 0.5)
+        width: theme.spacing(3),
+        height: theme.spacing(3),
+        alignItems: 'flex-end'
     });
 });
 export default function CustomCheckIcon(_a) {
     var _b = _a.isVerified, isVerified = _b === void 0 ? false : _b, sx = _a.sx;
-    return _jsx(CheckIconStyled, { isVerified: isVerified, sx: sx });
+    return _jsx(CheckIconStyled, { sx: sx, src: isVerified ? ICONS_NAMES.tick_green : ICONS_NAMES.tick_grey, alt: 'check-icon' });
 }

package/build/features/shared/Chip/Chip.js

@@ -12,9 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import Chip from '@mui/material/Chip';
+import { ThemeMode } from '../../../@types';
 var ChipStyled = styled(Chip)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({ borderRadius: theme.spacing(12.625), padding: theme.spacing(0.25, 0.5, 0.25, 0.5), background: theme.palette.common.white }, theme.typography.caption), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightRegular, boxShadow: theme.shadows[2] }));
+    return (__assign(__assign({ borderRadius: theme.spacing(0.75), padding: theme.spacing(0.25, 0.5, 0.25, 0.5), background: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.black : theme.palette.common.white }, theme.typography.caption), { color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.success.dark, fontWeight: theme.typography.fontWeightRegular, boxShadow: theme.shadows[2], height: theme.spacing(3.75) }));
 });
 export default function CustomChip(props) {
     return _jsx(ChipStyled, __assign({}, props));

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+import { Theme, SxProps } from '@mui/material/styles';
 interface CustomClearIconProps {
     onClick: () => void;
+    sx?: SxProps<Theme>;
 }
 export default function CustomClearIcon(props: CustomClearIconProps): JSX.Element;
 export {};

package/build/features/shared/ClearIcon/ClearIcon.js

@@ -12,13 +12,14 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styled, alpha } from '@mui/material/styles';
 import ClearIcon from '@mui/icons-material/Clear';
+import { ThemeMode } from '../../../@types';
 var ClearIconStyled = styled(ClearIcon)(function (_a) {
     var theme = _a.theme;
     return ({
         width: theme.spacing(2),
         height: theme.spacing(2),
         cursor: 'pointer',
-        color: alpha(theme.palette.text.primary, 0.4)
+        color: theme.palette.mode === ThemeMode.DARK ? alpha(theme.palette.common.white, 0.5) : alpha(theme.palette.text.primary, 0.4)
     });
 });
 export default function CustomClearIcon(props) {

package/build/features/shared/Containers/ContainerWithHeader.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BoxProps } from '@mui/material/Box';
+import { SxProps, Theme } from '@mui/material/styles';
+import { HeaderProps } from '../Header';
+declare type ContainerWithHeaderProps = BoxProps & HeaderProps & {
+    title: string;
+    description?: string;
+    titleBoxSx?: SxProps<Theme>;
+};
+declare const ContainerWithHeader: React.ForwardRefExoticComponent<Pick<ContainerWithHeaderProps, keyof import("@mui/material/OverridableComponent").CommonProps | "translate" | ("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") | "slot" | "title" | "children" | "component" | "sx" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "description" | "titleBoxSx" | keyof HeaderProps> & React.RefAttributes<unknown>>;
+export default ContainerWithHeader;