@tap-payments/auth-jsconnect 2.4.28-test → 2.4.29

package/build/components/ArabicDatePicker/ArabicDatePicker.js

@@ -24,25 +24,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { memo } from 'react';
 import { Calendar, toDateObject } from 'react-multi-date-picker';
 import arabic from 'react-date-object/calendars/arabic';
-import arabic_ar from 'react-date-object/locales/arabic_ar';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import Divider from '@mui/material/Divider';
-import Collapse from '@components/Collapse';
-import ExpandIcon from '@components/ExpandIcon';
-import CalendarTodayOutlined from '@mui/icons-material/CalendarTodayOutlined';
+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 Text from '../Text';
+import arabic_en from './arabicEn';
+import arabic_ar from './arabicAr';
 import './style.css';
-var ContainerIcon = styled(CalendarTodayOutlined)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: 'pointer', width: theme.spacing(2.5), height: theme.spacing(2.5) }));
-});
-var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+var ContainerIcon = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
+    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: disabled ? 'auto' : 'pointer', width: theme.spacing(2), height: theme.spacing(2) }));
+});
+var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'disabled' && prop !== 'openCalender'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled, openCalender = _a.openCalender;
     return ({
+        transition: 'min-height 0.5s',
         cursor: disabled ? 'auto' : 'pointer',
-        fontFamily: theme.typography.fontFamily
+        opacity: disabled ? '0.6' : '1',
+        fontFamily: theme.typography.fontFamily,
+        minHeight: openCalender ? '345px' : '46px'
     });
 });
 var InputFieldStyled = styled(Input)(function (_a) {
@@ -51,7 +57,8 @@ var InputFieldStyled = styled(Input)(function (_a) {
         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 }),
         '& .MuiInputBase-input': {
-            WebkitTextFillColor: 'inherit'
+            WebkitTextFillColor: 'inherit',
+            cursor: disabled ? 'auto' : 'pointer'
         }
     });
 });
@@ -59,36 +66,51 @@ var ArrowIcon = styled(Text, { shouldForwardProp: function (prop) { return prop
     var theme = _a.theme, disabled = _a.disabled;
     return ({
         cursor: disabled ? 'auto' : 'pointer',
-        marginInlineEnd: theme.spacing(2.5)
+        marginInlineEnd: theme.spacing(2.5),
+        display: 'flex'
     });
 });
 var DatePicker = function (_a) {
-    var disabled = _a.disabled, dir = _a.dir, readOnly = _a.readOnly, onDateChange = _a.onDateChange, onClick = _a.onClick, onDatePicked = _a.onDatePicked, value = _a.value, rest = __rest(_a, ["disabled", "dir", "readOnly", "onDateChange", "onClick", "onDatePicked", "value"]);
-    var _b = React.useState(null), anchor = _b[0], setAnchor = _b[1];
-    var calenderIcon = _jsx(ContainerIcon, {});
+    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 _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];
+    var calenderIcon = _jsx(ContainerIcon, { disabled: disabled, src: ICONS_NAMES.SWITCH_HIJRI_CALENDER });
     var defaultMax = new Date();
     var defaultMin = new Date('1900-01-01');
     var DATE_FORMAT = 'YYYY-MM-DD';
+    React.useEffect(function () {
+        if (value)
+            setDate(value);
+    }, [value]);
     var toggleCalender = function (event) {
-        if (disabled)
-            return;
-        if (anchor) {
-            onDatePicked && onDatePicked();
-            setAnchor(null);
-            return;
+        if (anchor || openCalender) {
+            onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
+            setOpenCalender(false);
+            return setAnchor(null);
         }
         setAnchor(event.currentTarget);
-        onClick && onClick(event);
+        setOpenCalender(true);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var getEndAdornment = function () {
+        if (disabled && !isVerified)
+            return '';
+        return _jsx(EndAdornmentExpanded, { isVerified: isVerified, anchorEl: anchor });
     };
     var handleOnDateChange = function (date) {
-        onDateChange && onDateChange(date.toDate().toLocaleDateString('en-CA'));
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(date.toDate().toLocaleDateString('en-CA'));
         setAnchor(null);
+        setOpenCalender(false);
         onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
     };
     var formateDate = function (date) {
         var dateObject = toDateObject(date);
         return dateObject.convert(arabic).format(DATE_FORMAT);
     };
-    return (_jsxs(Container, __assign({ disabled: disabled, id: 'container-calendar' }, { children: [_jsx(InputFieldStyled, { endAdornment: _jsx(ArrowIcon, __assign({ disabled: disabled }, { children: disabled ? '' : _jsx(ExpandIcon, { anchorEl: !!anchor }) })), value: value ? formateDate(value) : '', placeholder: DATE_FORMAT, onClick: toggleCalender, startAdornment: calenderIcon, disabled: !disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: !!anchor }, { children: [_jsx(Calendar, __assign({ calendar: arabic, locale: arabic_ar, maxDate: defaultMax, minDate: defaultMin, format: DATE_FORMAT, onChange: handleOnDateChange, value: value, className: 'custom-container' }, rest)), _jsx(Divider, {})] }))] })));
+    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) {
+                    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, {})] }))] })));
 };
 export default memo(DatePicker);

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

@@ -0,0 +1,8 @@
+declare const arabic_ar: {
+    name: string;
+    months: string[][];
+    weekDays: string[][];
+    digits: string[];
+    meridiems: string[][];
+};
+export default arabic_ar;

package/build/components/ArabicDatePicker/arabicAr.js

@@ -0,0 +1,32 @@
+var arabic_ar = {
+    name: 'arabic_ar',
+    months: [
+        ['محرم', 'محرم'],
+        ['صفر', 'صفر'],
+        ['ربیع الاول', 'ربیع الاول'],
+        ['ربیع الثانی', 'ربیع الثانی'],
+        ['جمادی الاول', 'جمادی الاول'],
+        ['جمادی الثانی', 'جمادی الثانی'],
+        ['رجب', 'رجب'],
+        ['شعبان', 'شعبان'],
+        ['رمضان', 'رمضان'],
+        ['شوال', 'شوال'],
+        ['ذی القعده ', 'ذی القعده'],
+        ['ذی الحجه', 'ذی الحجه']
+    ],
+    weekDays: [
+        ['السّبت', 'سب'],
+        ['الأحد', 'اح'],
+        ['الإثنينِ', 'ثن'],
+        ['الثلاثاء', 'ثل'],
+        ['الأربعاء', 'ار'],
+        ['الخميس', 'خم'],
+        ['الجمعة', 'جم']
+    ],
+    digits: ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'],
+    meridiems: [
+        ['قبل الظهر', 'ق.ظ'],
+        ['بعد الظهر', 'ب.ظ']
+    ]
+};
+export default arabic_ar;

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

@@ -0,0 +1,8 @@
+declare const arabic_en: {
+    name: string;
+    months: string[][];
+    weekDays: string[][];
+    digits: string[];
+    meridiems: string[][];
+};
+export default arabic_en;

package/build/components/ArabicDatePicker/arabicEn.js

@@ -0,0 +1,32 @@
+var arabic_en = {
+    name: 'arabic_en',
+    months: [
+        ['Muharram', 'Mu'],
+        ['Safar', 'Sa'],
+        ['Rabi`al-Awwal', 'RI'],
+        ['Rabi`ath-Thani', 'RII'],
+        ['Jumada l-Ula', 'JI'],
+        ['Jumada t-Tania', 'JII'],
+        ['Rajab', 'Ra'],
+        ['Sha`ban', 'Sh'],
+        ['Ramadan', 'Ra'],
+        ['Shawwal', 'Sh'],
+        ['Dhu l-Qa`da ', 'DhQ'],
+        ['Dhu l-Hijja', 'DhH']
+    ],
+    weekDays: [
+        ['as-sabt', 'Sab'],
+        ["al-'ahad", 'Aha'],
+        ["al-'ithnayn", 'Ith'],
+        ['ath-thalatha', 'Tha'],
+        ["al-'arb`a'", 'Arb'],
+        ['al-khamis', 'Kha'],
+        ['al-jum`a', 'Jum']
+    ],
+    digits: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
+    meridiems: [
+        ['AM', 'am'],
+        ['PM', 'pm']
+    ]
+};
+export default arabic_en;

package/build/components/ArabicDatePicker/style.css

@@ -0,0 +1,64 @@
+.rmdp-wrapper {
+	box-shadow: none !important;
+	width: 100% !important;
+	z-index: 0 !important;
+}
+
+.rmdp-day-picker > div {
+	width: 100%;
+}
+.rmdp-day {
+	color: #3a4154 !important;
+}
+
+.rmdp-calendar {
+	width: 100%;
+	padding-bottom: 15px !important;
+	padding-top: 12px !important;
+}
+
+.rmdp-day.rmdp-selected span:not(.highlight) {
+	/* background: radial-gradient(circle closest-side, #3a4154 0%, #3a4154 98%, rgba(0, 0, 0, 0) 100%) !important; */
+	color: #ffffff !important;
+	background-color: black !important;
+}
+
+.rmdp-week-day {
+	color: #abaeb6 !important;
+	font-weight: 400 !important;
+	font-size: 0.75em !important;
+	text-transform: uppercase;
+}
+.rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
+	background-color: #fafafa !important;
+	/* border-radius: 50%; */
+	color: #3a4154 !important;
+	/* background: radial-gradient(circle closest-side, #fafafa 0, #fafafa 98%, transparent 100%) !important; */
+}
+.rmdp-day.rmdp-selected span:not(.highlight):hover {
+	color: #ffffff !important;
+	background-color: black !important;
+}
+.rmdp-arrow-container:hover {
+	background-color: unset !important;
+	box-shadow: unset !important;
+}
+.rmdp-arrow {
+	border: solid #000 !important;
+	border-width: 0 1px 1px 0 !important;
+}
+.rmdp-day.rmdp-today span {
+	background-color: unset !important;
+	color: #000 !important;
+}
+.rmdp-header {
+	margin-bottom: 12px;
+}
+.rmdp-day-picker .rmdp-day {
+	height: 36px !important;
+	width: 36px !important;
+}
+.rmdp-day-picker .rmdp-day span {
+	height: 36px !important;
+	width: 36px !important;
+}

package/build/components/Button/Button.d.ts

@@ -8,7 +8,7 @@ export interface ButtonProps extends MUIButtonProps {
     outLineColor?: string;
 }
 declare const _default: React.MemoExoticComponent<{
-    ({ children, startIcon, outLineColor, endIcon, ...rest }: ButtonProps): JSX.Element;
+    ({ children, startIcon, outLineColor, endIcon, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: {};
 }>;
 export default _default;

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

@@ -1,5 +1,5 @@
 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 const _default: React.MemoExoticComponent<({ ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/build/components/Collapse/Collapse.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { CollapseProps as MUICollapseProps } from '@mui/material/Collapse';
 export interface CollapseProps extends MUICollapseProps {
 }
-export default function Collapse({ children, ...rest }: CollapseProps): JSX.Element;
+export default function Collapse({ children, ...rest }: CollapseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,6 +3,7 @@ import { CalendarProps } from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import './customStyle.css';
 export interface DatePickerProps extends CalendarProps {
+    open?: boolean;
     onDateChange?: (date: string) => void;
     onClick?: () => void;
     onDatePicked?: () => void;
@@ -12,5 +13,5 @@ export interface DatePickerProps extends CalendarProps {
     isDob?: boolean;
     isVerified?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ onDateChange, disabled, readOnly, onClick, onDatePicked, dir, defaultValue, isDob, isVerified, ...rest }: DatePickerProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onDateChange, disabled, readOnly, onClick, onDatePicked, dir, defaultValue, isDob, isVerified, open, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/build/components/DatePicker/DatePicker.js

@@ -27,16 +27,17 @@ import 'react-calendar/dist/Calendar.css';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import Divider from '@mui/material/Divider';
-import Collapse from '@components/Collapse';
-import CalendarTodayOutlined from '@mui/icons-material/CalendarTodayOutlined';
-import { convertToEnglishDateFormat, getEighteenYearsAgo, scrollDown, scrollUp } from '@utils';
-import { EndAdornmentExpanded } from '@features/shared/EndAdornment';
+import Collapse from '../Collapse';
+import Icon from '../Icon';
+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(CalendarTodayOutlined, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+var ContainerIcon = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
-    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: disabled ? 'auto' : 'pointer', width: theme.spacing(2.5), height: theme.spacing(2.5) }));
+    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: disabled ? 'auto' : 'pointer', width: theme.spacing(2.25), height: theme.spacing(2.25) }));
 });
 var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
@@ -66,24 +67,27 @@ 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, rest = __rest(_a, ["onDateChange", "disabled", "readOnly", "onClick", "onDatePicked", "dir", "defaultValue", "isDob", "isVerified"]);
+    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 _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];
     useEffect(function () {
         if (defaultValue)
             setDate(defaultValue);
     }, [defaultValue]);
-    var calenderIcon = _jsx(ContainerIcon, { disabled: disabled });
+    var calenderIcon = _jsx(ContainerIcon, { disabled: disabled, src: ICONS_NAMES.SWITCH_CALENDER });
     var defaultMax = new Date();
     var defaultMin = new Date('1900-01-01');
     var toggleCalender = function (event) {
         var elementId = 'animation-flow-template-content';
-        if (anchor) {
+        if (anchor || openCalender) {
             onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
             setTimeout(function () { return scrollDown(elementId); }, 500);
+            setOpenCalender(false);
             return setAnchor(null);
         }
         setAnchor(event.currentTarget);
+        setOpenCalender(true);
         setTimeout(function () { return scrollUp(elementId); }, 550);
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
@@ -91,6 +95,7 @@ var DatePicker = function (_a) {
         setDate(date);
         onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(convertToEnglishDateFormat(date));
         setAnchor(null);
+        setOpenCalender(false);
         onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
     };
     var getEndAdornment = function () {
@@ -101,6 +106,6 @@ var DatePicker = function (_a) {
     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) {
                     if (!disabled)
                         toggleCalender(e);
-                }, startAdornment: calenderIcon, disabled: disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: !!anchor }, { 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, {})] }))] })));
+                }, 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, {})] }))] })));
 };
 export default memo(DatePicker);

package/build/components/DatePicker/customStyle.css

@@ -0,0 +1,86 @@
+.date_picker_input {
+	cursor: pointer;
+}
+
+.react-calendar {
+	width: 100%;
+	border: none;
+	padding: 15px 0px 15px 0px;
+}
+
+.react-calendar__navigation {
+	display: flex;
+	position: relative;
+}
+.react-calendar__navigation__label__labelText {
+	font-family: 'Lato', 'Roboto';
+}
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+	background-color: #ffffff;
+}
+.react-calendar__navigation__prev-button {
+	top: 20px;
+	left: 86px;
+}
+
+.react-calendar__navigation__next-button {
+	top: 0px;
+	left: 86px;
+}
+
+.react-calendar__navigation__prev2-button {
+	top: 20px;
+	right: 13px;
+}
+
+.react-calendar__navigation__next2-button {
+	top: 0px;
+	right: 13px;
+}
+
+.react-calendar__navigation__arrow {
+	background-color: transparent !important;
+}
+
+abbr[title] {
+	text-decoration: none;
+	font-weight: 400;
+	color: #abaeb6;
+}
+
+.react-calendar__tile {
+	transition: all 0.5s ease;
+}
+
+.react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus {
+	background-color: transparent;
+}
+
+.react-calendar__tile:enabled:hover {
+	background: radial-gradient(circle closest-side, #fafafa 0%, #fafafa 98%, rgba(0, 0, 0, 0) 100%);
+}
+
+.react-calendar__month-view__days__day--weekend,
+.react-calendar__tile {
+	color: #3a4154;
+}
+.react-calendar__tile--hasActive {
+	background: radial-gradient(circle closest-side, #fafafa 0%, #fafafa 98%, rgba(0, 0, 0, 0) 100%);
+}
+
+.react-calendar__tile--active,
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+	background-color: transparent;
+	background: radial-gradient(circle closest-side, #3a4154 0%, #3a4154 98%, rgba(0, 0, 0, 0) 100%);
+	color: #ffffff;
+}
+.react-calendar__tile--now {
+	background-color: transparent;
+}
+.react-calendar__navigation button:disabled {
+	background-color: #ffffff;
+	color: #3a4154;
+}

package/build/components/ExpandIcon/ExpandIcon.d.ts

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

package/build/components/FileInput/DragAndDrop.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface DragAndDropProps {
     title: string;
     subTitle: string;
@@ -13,5 +12,5 @@ interface DragAndDropProps {
     onSuccess?: (files: Array<File>) => void;
     multiple?: boolean;
 }
-declare const DragAndDrop: ({ title, subTitle, description, error, uploadingTitle, successTitle, progress, uploading, fileExists, uploadSuccess, onSuccess, multiple }: DragAndDropProps) => JSX.Element;
+declare const DragAndDrop: ({ title, subTitle, description, error, uploadingTitle, successTitle, progress, uploading, fileExists, uploadSuccess, onSuccess, multiple }: DragAndDropProps) => import("react/jsx-runtime").JSX.Element;
 export default DragAndDrop;

package/build/components/FileInput/DragAndDrop.js

@@ -13,13 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import Box from '@mui/material/Box';
 import { alpha, styled } from '@mui/material/styles';
-import Input from '@components/Input';
-import Text from '@components/Text';
+import Input from '../Input';
+import Text from '../Text';
 import { useDropzone } from 'react-dropzone';
-import Icon from '@src/components/Icon';
-import { ICONS_NAMES } from '@src/constants';
-import { CircularProgress } from '@src/components/ProgressBar';
-import Collapse from '@src/components/Collapse';
+import Icon from '../../components/Icon';
+import { ICONS_NAMES } from '../../constants';
+import { CircularProgress } from '../../components/ProgressBar';
+import Collapse from '../../components/Collapse';
 import Fade from '@mui/material/Fade';
 var BoxStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'active'; } })(function (_a) {
     var theme = _a.theme, active = _a.active;

package/build/components/FileInput/UploadInput.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 interface UploadInputProps {
     title: string;
     onChange: (file: File) => void;
 }
-declare const UploadInput: ({ title, onChange }: UploadInputProps) => JSX.Element;
+declare const UploadInput: ({ title, onChange }: UploadInputProps) => import("react/jsx-runtime").JSX.Element;
 export default UploadInput;

package/build/components/FileInput/UploadInput.js

@@ -13,8 +13,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import React from 'react';
 import Box from '@mui/material/Box';
-import Input from '@src/components/Input';
-import Text from '@components/Text';
+import Input from '../../components/Input';
+import Text from '../Text';
 var UploadInputStyled = styled(Input)(function () { return ({
     display: 'none'
 }); });

package/build/components/Footer/Footer.d.ts

@@ -7,7 +7,7 @@ export interface FooterProps extends BoxProps {
     countryFlag: string;
 }
 declare const _default: React.MemoExoticComponent<{
-    ({ language, countryName, countryFlag, onSwitchLanguage, ...rest }: FooterProps): JSX.Element;
+    ({ language, countryName, countryFlag, onSwitchLanguage, ...rest }: FooterProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         language: string;
     };

package/build/components/Footer/Footer.js

@@ -23,10 +23,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Text from '@components/Text';
+import Text from '../Text';
 import Box from '@mui/material/Box';
-import Icon from '@components/Icon';
-import { useLanguage } from '@hooks';
+import Icon from '../Icon';
+import { useLanguage } from '../../hooks';
 var FooterStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return (__assign(__assign({ direction: theme.direction, display: 'flex', margin: theme.spacing(1.5), color: theme.palette.background.paper }, theme.typography.caption), { alignItems: 'center', justifyContent: 'center', position: 'relative', bottom: 0, marginBottom: theme.spacing(-3.75) }));

package/build/components/Form/Form.d.ts

@@ -3,7 +3,7 @@ import { BoxProps } from '@mui/material/Box';
 export interface FormProps extends BoxProps {
 }
 declare const _default: React.MemoExoticComponent<{
-    ({ children, ...rest }: FormProps): JSX.Element;
+    ({ children, ...rest }: FormProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         onSubmit: () => void;
     };

package/build/components/Input/Input.d.ts

@@ -9,7 +9,7 @@ export interface InputFieldProps extends InputProps {
     warningMessage?: string;
 }
 declare const _default: React.MemoExoticComponent<{
-    ({ onEnterPressed, hide, endAdornment, startAdornment, warningType, warningMessage, ...rest }: InputFieldProps): JSX.Element;
+    ({ onEnterPressed, hide, endAdornment, startAdornment, warningType, warningMessage, ...rest }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         hide: boolean;
         placeholder: string;

package/build/components/Input/Input.js

@@ -23,8 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { memo } from 'react';
 import Input from '@mui/material/Input';
-import Collapse from '@components/Collapse';
-import Warning from '@components/Warning';
+import Collapse from '../Collapse';
+import Warning from '../Warning';
 import { alpha, styled } from '@mui/material/styles';
 var InputStyled = styled(Input)(function (_a) {
     var theme = _a.theme;

package/build/components/InputAdornment/InputAdornment.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { InputAdornmentProps } from '@mui/material/InputAdornment';
 export type { InputAdornmentProps };
 declare const _default: React.MemoExoticComponent<{
-    ({ position, children, ...rest }: InputAdornmentProps<"div", {}>): JSX.Element;
+    ({ position, children, ...rest }: InputAdornmentProps<"div", {}>): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         position: string;
     };

package/build/components/List/List.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { ListProps } from '@mui/material/List';
 export type { ListProps };
-declare const _default: React.MemoExoticComponent<({ children, ...rest }: ListProps<"ul", {}>) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ children, ...rest }: ListProps<"ul", {}>) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/build/components/ListItem/ListItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { ListItemProps } from '@mui/material/ListItem';
 export type { ListItemProps };
-declare const _default: React.MemoExoticComponent<({ children, ...rest }: ListItemProps<"li", {}>) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ children, ...rest }: ListItemProps<"li", {}>) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/build/components/Loader/Loader.d.ts

@@ -9,7 +9,7 @@ export interface LoaderProps {
     svgStyle?: React.CSSProperties;
     className?: string;
 }
-declare function Loader(props: LoaderProps): JSX.Element;
+declare function Loader(props: LoaderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Loader {
     var defaultProps: {
         outerColor: string;

package/build/components/LogoBadge/LogoBadge.d.ts

@@ -3,5 +3,5 @@ import { BadgeProps } from '@mui/material/Badge';
 export interface LogoBadgeProps extends BadgeProps {
     src?: string;
 }
-declare const _default: React.MemoExoticComponent<({ src, ...rest }: LogoBadgeProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ src, ...rest }: LogoBadgeProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;