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

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

@@ -24,12 +24,12 @@ import Icon from '../../../components/Icon';
 import { ScreenContainer } from '../../shared/Containers';
 var SwitchBoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({ backgroundColor: 'rgba(117, 122, 135, 0.1)' }, theme.typography.caption), { borderBottomLeftRadius: '12px', borderBottomRightRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', height: '47px', color: '#757A87', '&:hover': {
+    return (__assign(__assign({ backgroundColor: 'rgba(117, 122, 135, 0.1)', margin: '0px 24px 0px 24px' }, theme.typography.caption), { borderBottomLeftRadius: '12px', borderBottomRightRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', height: '47px', color: '#757A87', '&:hover': {
             cursor: 'pointer'
         } }));
 });
 var CustomCalender = function (_a) {
-    var onDateClicked = _a.onDateClicked, onDateChange = _a.onDateChange, defaultValue = _a.defaultValue, isDob = _a.isDob, disabled = _a.disabled, isVerified = _a.isVerified, maxDate = _a.maxDate;
+    var onDateClicked = _a.onDateClicked, onDateChange = _a.onDateChange, defaultValue = _a.defaultValue, isDob = _a.isDob, disabled = _a.disabled, isVerified = _a.isVerified, maxDate = _a.maxDate, label = _a.label, required = _a.required;
     var t = useTranslation().t;
     var theme = useTheme();
     var data = useAppSelector(settingsSelector).data;
@@ -45,12 +45,12 @@ var CustomCalender = function (_a) {
                     }, onDatePicked: function () {
                         onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false);
                         setOpen(false);
-                    } }) })), _jsx(Collapse, __assign({ in: isHijriCalender }, { children: _jsx(ArabicDatePicker, { open: open, readOnly: true, disabled: disabled, isVerified: isVerified, dir: theme.direction, isDob: isDob, maxDate: maxDate, onClick: function () {
+                    }, label: label, required: required }) })), _jsx(Collapse, __assign({ in: isHijriCalender }, { children: _jsx(ArabicDatePicker, { open: open, readOnly: true, disabled: disabled, isVerified: isVerified, dir: theme.direction, isDob: isDob, maxDate: maxDate, onClick: function () {
                         onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(true);
                         setOpen(true);
                     }, onDatePicked: function () {
                         onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false);
                         setOpen(false);
-                    }, onDateChange: onDateChange, value: defaultValue }) })), _jsx(Collapse, __assign({ in: open }, { children: _jsx(SwitchBoxStyled, __assign({ onClick: onSwitchCalender }, { children: _jsxs(_Fragment, { children: [_jsx(Icon, { src: !isHijriCalender ? ICONS_NAMES.SWITCH_HIJRI_CALENDER : ICONS_NAMES.SWITCH_CALENDER }), !isHijriCalender ? t('switch_to_islamic_calendar') : t('switch_to_gregorian_calendar')] }) })) }))] }));
+                    }, onDateChange: onDateChange, value: defaultValue, label: label, required: required }) })), _jsx(Collapse, __assign({ in: open }, { children: _jsx(SwitchBoxStyled, __assign({ onClick: onSwitchCalender }, { children: _jsxs(_Fragment, { children: [_jsx(Icon, { src: !isHijriCalender ? ICONS_NAMES.SWITCH_HIJRI_CALENDER : ICONS_NAMES.SWITCH_CALENDER }), !isHijriCalender ? t('switch_to_islamic_calendar') : t('switch_to_gregorian_calendar')] }) })) }))] }));
 };
 export default CustomCalender;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { CalendarProps } from 'react-multi-date-picker';
+import { SxProps, Theme } from '@mui/material/styles';
+interface CustomCalenderProps extends CalendarProps {
+    label: string;
+    required?: boolean;
+    isVerified?: boolean;
+    readOnly?: boolean;
+    labelSx?: SxProps<Theme>;
+    defaultValue?: Date;
+    onDateChange?: (date: string) => void;
+    maxDate?: Date;
+}
+declare const CustomCalender: ({ label, required, isVerified, readOnly, labelSx, defaultValue, onDateChange, maxDate }: CustomCalenderProps) => JSX.Element;
+export default CustomCalender;

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

@@ -0,0 +1,46 @@
+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 } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { useAppDispatch, useAppSelector } from '../../../hooks';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { settingsSelector, handleSwitchCalender } from '../../../app/settings';
+import Text from '../../../components/Text';
+import Collapse from '../../../components/Collapse';
+import { ScreenContainer } from '../../shared/Containers';
+import CustomDatePicker from './CustomDatePicker';
+import CustomHijriDatePicker from './CustomHijriDatePicker';
+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 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 CustomCalender = 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 data = useAppSelector(settingsSelector).data;
+    var dispatch = useAppDispatch();
+    var isHijriCalender = data.isHijri;
+    var onSwitchCalender = function () {
+        dispatch(handleSwitchCalender(!isHijriCalender));
+    };
+    return (_jsxs(ScreenContainer, { children: [_jsx(Collapse, __assign({ in: !isHijriCalender }, { children: _jsx(CustomDatePicker, { labelSx: labelSx, defaultValue: defaultValue, readOnly: readOnly, isVerified: isVerified, maxDate: maxDate, onDateChange: onDateChange, label: label, required: required }) })), _jsx(Collapse, __assign({ in: isHijriCalender }, { children: _jsx(CustomHijriDatePicker, { labelSx: labelSx, defaultValue: defaultValue, readOnly: readOnly, isVerified: isVerified, maxDate: maxDate, onDateChange: onDateChange, label: label, required: required }) })), _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 CustomCalender;

package/build/features/shared/Calender/CustomDatePicker.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/CustomDatePicker.js

@@ -0,0 +1,252 @@
+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 moment from 'moment';
+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 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 = moment(defaultValue).locale(locale);
+            setDate(date_1.toDate());
+            setDay(date_1.date());
+            setMonth(date_1.month());
+            setYear(date_1.year());
+        }
+    }, []);
+    React.useEffect(function () {
+        if (day && !getDays.includes(day)) {
+            setDay(undefined);
+        }
+        if (month && !getMonths[month]) {
+            setMonth(undefined);
+        }
+    }, [year, month, locale]);
+    React.useEffect(function () {
+        var dateValue = date || new Date();
+        var selectedDate = dateValue;
+        if (year) {
+            selectedDate = moment(selectedDate).year(year).toDate();
+        }
+        if (month === null || month === void 0 ? void 0 : month.toString()) {
+            selectedDate = moment(selectedDate).locale('en').month(month).toDate();
+        }
+        if (day) {
+            selectedDate = moment(selectedDate).date(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 = moment(maxDate || defaultMax);
+        var maxYear = maxDateMoment.year();
+        var maxMonth = 12;
+        if (year && year === maxYear) {
+            maxMonth = maxDateMoment.month() + 1;
+        }
+        var gregorianMonths = Array.from({ length: maxMonth }, function (_, index) {
+            return moment().locale(locale).month(index).format('MMMM');
+        });
+        return gregorianMonths;
+    }, [locale, year]);
+    var getDays = React.useMemo(function () {
+        var maxDateMoment = moment(maxDate || defaultMax);
+        var maxMonth = maxDateMoment.month();
+        var maxYear = maxDateMoment.year();
+        var selectedMonth = month ? month : 0;
+        var selectedYear = year ? year : moment().year();
+        var daysInMonth = moment("".concat(selectedYear, "-").concat(selectedMonth + 1), 'YYYY-MM').daysInMonth();
+        if (selectedMonth === maxMonth && selectedYear === maxYear) {
+            daysInMonth = maxDateMoment.date();
+        }
+        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 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/CustomHijriDatePicker.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;