@tap-payments/os-micro-frontend-shared 0.1.441 → 0.1.442

package/build/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import MuiRadioGroup from '@mui/material/RadioGroup';
+import { StyledFormControlLabel } from './style';
+import { RadioButton } from '../RadioButton';
+import { FormControl, FormLabel, Stack } from '@mui/material';
+function RadioItem(_a) {
+    var { option, size = 'small', customLabelRenderer, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx, icon } = _a, props = __rest(_a, ["option", "size", "customLabelRenderer", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx", "icon"]);
+    const label = customLabelRenderer ? customLabelRenderer(option) : option.label;
+    const labelContent = useMemo(() => {
+        if (icon) {
+            return (_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", justifyContent: "space-between" }, { children: [label, _jsx("img", Object.assign({ alt: "icon" }, icon))] })));
+        }
+        return label;
+    }, [icon, label]);
+    return (_jsx(StyledFormControlLabel, Object.assign({ value: option.value, control: _jsx(RadioButton, Object.assign({ size: size }, customRadioProps, option.customProps)), label: labelContent, disabled: option.disabled, size: size, labelPlacement: labelPosition, showHoverEffects: showHoverEffects, labelSx: labelSx }, props)));
+}
+function RadioGroup(_a) {
+    var { options, onOptionChange, size = 'small', customLabelRenderer, layout = 'vertical', spacing = 0, labelPosition = 'end', showHoverEffects = true, customRadioProps, labelSx, onChange, title, sx } = _a, props = __rest(_a, ["options", "onOptionChange", "size", "customLabelRenderer", "layout", "spacing", "labelPosition", "showHoverEffects", "customRadioProps", "labelSx", "onChange", "title", "sx"]);
+    const handleChange = (event) => {
+        const value = event.target.value;
+        onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
+    };
+    return (_jsxs(FormControl, { children: [typeof title === 'string' ? _jsx(FormLabel, { children: title }) : title, _jsx(MuiRadioGroup, Object.assign({ onChange: handleChange, sx: Object.assign({ display: 'flex', flexDirection: layout === 'horizontal' ? 'row' : 'column', gap: spacing }, sx) }, props, { children: options.map((option) => (_jsx(RadioItem, { icon: option.icon, option: option, size: size, customLabelRenderer: customLabelRenderer, labelPosition: labelPosition, showHoverEffects: showHoverEffects, customRadioProps: customRadioProps, labelSx: labelSx }, option.value))) }))] }));
+}
+export default memo(RadioGroup);

package/build/components/RadioGroup/index.js

@@ -1 +1 @@
-export{a as RadioGroup}from'../../chunk-4O4EFXIC.js';import'../../chunk-X5KEG2KP.js';import'../../chunk-RWXGVZUC.js';
+export { default as RadioGroup } from './RadioGroup';

package/build/components/RadioGroup/style.js

@@ -0,0 +1,16 @@
+import { styled } from '@mui/material/styles';
+import FormControlLabel from '@mui/material/FormControlLabel';
+export const StyledFormControlLabel = styled(FormControlLabel, {
+    shouldForwardProp: (prop) => !['size', 'showHoverEffects', 'labelSx'].includes(prop),
+})(({ size = 'small', showHoverEffects = true, labelSx }) => (Object.assign(Object.assign({ margin: '0', width: '100%', cursor: 'pointer', padding: size === 'small' ? '7.5px 16px 7.5px 8px' : size === 'medium' ? '9px 16px 9px 10px' : '11px 16px 11px 12px', maxHeight: size === 'small' ? '35px' : size === 'medium' ? '40px' : '45px' }, (showHoverEffects && {
+    '&:hover': {
+        boxShadow: '0px 0px 16px 0px #00000021',
+        borderLeft: '1px solid transparent',
+    },
+})), { '& .MuiFormControlLabel-label': Object.assign({ fontSize: size === 'small' ? '11px' : size === 'medium' ? '13px' : '15px', fontWeight: '500', color: '#20232B', width: '100%', cursor: 'pointer' }, labelSx), '& .MuiRadio-root': {
+        cursor: 'pointer',
+        color: '#8C9196',
+        '&.Mui-checked': {
+            color: '#1F88D0',
+        },
+    } })));

package/build/components/RadioGroup/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/RangeCalender/RangeCalender.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback } from 'react';
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
+import Popper from '@mui/material/Popper';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { DateObject } from 'react-multi-date-picker';
+import { CustomBackdrop, Error } from '../index.js';
+import GroupBy from './components/GroupBy';
+import Hijri from './components/Hijri';
+import QuickFilters from './components/QuickFilters';
+import RangeDatePicker from './components/RangeDatepicker';
+import CustomTimezone from './components/Timezone';
+import { ButtonsWrapper, CalenderWrapper, CancelButton, FiltersArea, Footer, Main, OkayButton, SelectedDate, TimeZone, Settings } from './style';
+import CustomTimePicker from './components/CustomTimepicker';
+import { getDateRange, getEndOfDate, getStartOfDate } from './utils';
+function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezone, browserTimezone, renderCalendarButton, mainSx, popperProps, rangeDatePickerProps, defaultCountryTimezone, timezoneCountriesCodes, }) {
+    const [dates, setDates] = useState(getDateRange(defaultDate));
+    const [values, setValues] = useState(dates);
+    const [selectedTimezone, setSelectedTimezone] = useState(timezone);
+    const [selectedGroupBy, setSelectedGroupBy] = useState(groupBy || 'day');
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const [isError, setIsError] = useState(false);
+    const { t } = useTranslation();
+    // eslint-disable-next-line
+    const calendarRef = useRef();
+    const isHijri = mode === 'hijri';
+    const onCloseCalender = () => {
+        setAnchorEl(null);
+    };
+    const onOpenCalender = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    useEffect(() => {
+        if (!open) {
+            if (numberOfMonths === 1)
+                return;
+            setValues(getDateRange(defaultDate));
+        }
+    }, [open]);
+    useEffect(() => {
+        if (defaultDate)
+            setDates(getDateRange(defaultDate));
+    }, [defaultDate]);
+    useEffect(() => {
+        setSelectedTimezone(timezone);
+    }, [timezone, open]);
+    const submitDate = () => {
+        setDates(values);
+        onCloseCalender();
+        let newDates;
+        if (values[0].dayOfYear === values[1].dayOfYear) {
+            newDates = [values[0], values[1]];
+        }
+        else {
+            newDates = [getStartOfDate(values[0]), getEndOfDate(values[1])];
+        }
+        onDateChange([newDates[0].toDate(), newDates[1].toDate()]);
+        onCalendarGroupChange === null || onCalendarGroupChange === void 0 ? void 0 : onCalendarGroupChange(selectedGroupBy || 'day');
+        onChangeTimezone === null || onChangeTimezone === void 0 ? void 0 : onChangeTimezone(selectedTimezone);
+    };
+    const getSelectedDate = useCallback(() => {
+        const startSelectedTime = dates[0].format('MMM D');
+        const endSelectedTime = dates[1] ? dates[1].format('MMM D') : dates[0].format('MMM D');
+        return startSelectedTime === endSelectedTime && !noTimezone ? startSelectedTime : `${startSelectedTime} - ${endSelectedTime}`;
+    }, [dates, noTimezone]);
+    const onChange = (newDate) => {
+        if (newDate.length < 2 || !maxDateRange) {
+            setValues(newDate);
+            return;
+        }
+        const startDate = getStartOfDate(newDate[0]).toDate();
+        const endDate = getEndOfDate(newDate[1]).toDate();
+        const numberOfDays = dayjs(endDate).diff(startDate, 'day');
+        if (numberOfDays <= maxDateRange) {
+            setValues(newDate);
+            return;
+        }
+        setIsError(true);
+        setValues([newDate[0], newDate[1].subtract(numberOfDays - maxDateRange, 'd')]);
+        setTimeout(() => {
+            setIsError(false);
+        }, 3000);
+    };
+    const onChangeQuickFilter = (newValues) => {
+        setValues([getStartOfDate(newValues[0]), getEndOfDate(newValues[1])]);
+        if (calendarRef.current)
+            calendarRef.current.set({ date: newValues[0] });
+    };
+    return (_jsxs(Main, Object.assign({ "data-testid": "RangeCalender", sx: mainSx }, { children: [renderCalendarButton ? (renderCalendarButton(open, onOpenCalender)) : (_jsx(SelectedDate, Object.assign({ onClick: onOpenCalender, open: open }, { children: (dates[0] || dates[1]) && getSelectedDate() }))), open && (_jsx(CustomBackdrop, { onClick: (e) => {
+                    e.stopPropagation();
+                    onCloseCalender();
+                } })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end" }, popperProps, { children: _jsxs(CalenderWrapper, { children: [!noQuickFilter && (_jsxs(FiltersArea, { children: [_jsx(QuickFilters, { onChange: onChangeQuickFilter, isHijri: isHijri }), _jsxs(Settings, { children: [groupBy && (_jsx(GroupBy, { groupBy: selectedGroupBy, isCalenderOpen: open, onUpdate: (group) => {
+                                                setSelectedGroupBy(group);
+                                            } })), _jsx(Hijri, { isHijri: isHijri, onCalendarModeSwitch: onCalendarModeSwitch })] })] })), _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } }, { children: [_jsx(RangeDatePicker, Object.assign({ values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }, rangeDatePickerProps)), _jsx(Collapse, Object.assign({ in: isError && Boolean(maxDateRange) }, { children: _jsx(Error, { error: t('dateRangeError', { number: maxDateRange }), sx: { marginInline: '16px', marginBottom: '16px' } }) })), _jsxs(Footer, Object.assign({ sx: { borderBottomLeftRadius: '8px' } }, { children: [!noTimezone ? (_jsx(TimeZone, { children: _jsx(CustomTimezone, { onChange: setSelectedTimezone, selectedTimezone: selectedTimezone, browserTimezone: browserTimezone, defaultCountryTimezone: defaultCountryTimezone, timezoneCountriesCodes: timezoneCountriesCodes }, String(open)) })) : (_jsx("div", {})), new DateObject(values[0]).dayOfYear === new DateObject(values[1]).dayOfYear && (_jsx(CustomTimePicker, { values: values, setValues: setValues })), _jsxs(ButtonsWrapper, { children: [_jsx(CancelButton, Object.assign({ variant: "contained", onClick: onCloseCalender }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ variant: "contained", onClick: submitDate }, { children: t('okay') }))] })] }))] }))] }) }))] })));
+}
+export default RangeCalender;

package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DateObject } from 'react-multi-date-picker';
+import { IOSSwitch } from '../../../index.js';
+import TimePicker, { convertTo12Hour, maxHour } from '../../../Timepicker';
+import { AllDayStyled, TimeArea, TimePickerWrapper, TimeAreaInner } from './style';
+import { getEndOfDate, getStartOfDate } from '../../utils';
+function CustomTimePicker({ values, setValues }) {
+    var _a, _b;
+    const { t } = useTranslation();
+    const startDate = new DateObject(values[0]);
+    const endDate = new DateObject(values[1]);
+    const [isAllDay, setIsAllDay] = useState(startDate.dayOfYear === endDate.dayOfYear && startDate.hour === 0 && startDate.minute === 0 && endDate.hour === 23 && endDate.minute === 59);
+    const formatHour = ({ period, hour }) => period === 'PM' && hour !== 12 ? hour + 12 : period === 'AM' && hour === 12 ? 0 : hour;
+    const onChangeStartTime = ({ hour, minute, period }) => {
+        setValues([startDate.setHour(formatHour({ hour, period })).setMinute(minute).setSecond(0), endDate]);
+    };
+    const onChangeEndTime = ({ hour, minute, period }) => {
+        setValues([startDate, endDate.setHour(formatHour({ hour, period })).setMinute(minute).setSecond(59)]);
+    };
+    return (_jsx(TimeArea, { children: _jsxs(TimeAreaInner, { children: [_jsxs(AllDayStyled, Object.assign({ isAllDay: isAllDay }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: t('allDay') })), _jsx(IOSSwitch, { checked: isAllDay, onChange: (e) => {
+                                setIsAllDay(!isAllDay);
+                                if (e.target.checked) {
+                                    setValues([getStartOfDate(values[0]), getEndOfDate(values[1])]);
+                                }
+                                else {
+                                    setValues(values);
+                                }
+                            } })] })), !isAllDay && (_jsxs(TimePickerWrapper, { children: [_jsx(TimePicker, { defaultTime: {
+                                hour: convertTo12Hour(startDate.hour),
+                                minute: startDate.minute,
+                                period: startDate.hour >= maxHour ? 'PM' : 'AM',
+                            }, size: "small", onChange: onChangeStartTime, enableRealTimeChange: true }, `${(_a = values[0]) === null || _a === void 0 ? void 0 : _a.toString()}-start`), _jsx(TimePicker, { defaultTime: {
+                                hour: convertTo12Hour(endDate.hour),
+                                minute: endDate.minute,
+                                period: endDate.hour >= maxHour ? 'PM' : 'AM',
+                            }, size: "small", onChange: onChangeEndTime, enableRealTimeChange: true }, `${(_b = values[1]) === null || _b === void 0 ? void 0 : _b.toString()}-end`)] }))] }) }));
+}
+export default CustomTimePicker;

package/build/components/RangeCalender/components/CustomTimepicker/index.js

@@ -0,0 +1,2 @@
+import CustomTimepicker from './CustomTimepicker';
+export default CustomTimepicker;

package/build/components/RangeCalender/components/CustomTimepicker/style.js

@@ -0,0 +1,132 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { grayUpArrowIcon } from '../../../../constants/index.js';
+export const AllDayStyled = styled(Box, { shouldForwardProp: (props) => props !== 'isAllDay' })(({ theme, isAllDay }) => (Object.assign({ display: 'flex', alignItems: 'center', gap: theme.spacing(1), position: 'relative', paddingInline: '5px', '.label': {
+        width: 'max-content',
+    } }, (!isAllDay && {
+    paddingRight: theme.spacing(1),
+    '&:after': {
+        content: '""',
+        position: 'absolute',
+        width: '1px',
+        background: theme.palette.divider,
+        right: 0,
+        height: 17,
+    },
+}))));
+export const TimeArea = styled(Box)(() => ({
+    width: 235,
+}));
+export const TimePickerWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: '4px',
+    '.rmdp-input': {
+        width: '64px',
+        borderRadius: '19px',
+        border: '1px solid',
+        borderColor: theme.palette.divider,
+        color: theme.palette.text.primary,
+        fontSize: '11px',
+        fontWeight: 500,
+        background: 'transparent',
+        cursor: 'pointer',
+    },
+    '.rmdp-input:focus': {
+        boxShadow: theme.shadows[7],
+        border: `1px solid ${theme.palette.info.dark}`,
+        borderRadius: '19px',
+    },
+    '.rmdp-time-picker': {
+        boxShadow: theme.shadows[5],
+        borderRadius: theme.spacing(1),
+        padding: theme.spacing(2),
+        minWidth: 'auto !important',
+        div: {
+            marginTop: 0,
+            display: 'block',
+        },
+        '> div': {
+            width: 32,
+            height: 64,
+        },
+        '.rmdp-arrow': {
+            borderColor: `${theme.palette.background.transparent[1]} !important`,
+        },
+        '.rmdp-arrow-container': {
+            justifyContent: 'center',
+            '&:hover': {
+                backgroundColor: 'transparent',
+                boxShadow: 'unset',
+            },
+        },
+        input: {
+            borderRadius: '4px',
+            border: `1px solid ${theme.palette.divider}`,
+            padding: 0,
+            width: 32,
+            height: 32,
+            fontSize: '11px',
+            color: theme.palette.text.primary,
+            fontWeight: 500,
+            '&:focus, &:focus-visible': {
+                border: `1px solid ${theme.palette.info.dark}`,
+                outline: 'unset',
+            },
+        },
+        '.dvdr': {
+            margin: '7px 4px 0',
+        },
+        '.rmdp-am, .rmdp-pm': {
+            margin: 0,
+            width: 32,
+            height: 32,
+            flex: 'auto',
+            justifyContent: 'center',
+            fontSize: '11px',
+            color: theme.palette.text.primary,
+            fontWeight: 500,
+            display: 'flex',
+            cursor: 'default',
+        },
+        '> div:last-child': {
+            marginInlineStart: '4px',
+            display: 'block !important',
+        },
+        '.rmdp-down, .rmdp-up': {
+            position: 'relative',
+            i: {
+                display: 'none',
+            },
+            '&:before': {
+                content: '""',
+                position: 'absolute',
+                top: '5px',
+                width: '10px',
+                height: '10px',
+                backgroundImage: `url(${grayUpArrowIcon})`,
+            },
+        },
+        '.rmdp-down:before': {
+            transform: 'rotate(180deg)',
+        },
+    },
+    '.rmdp-container': {
+        position: 'relative',
+        '> div': {
+            top: 'unset !important',
+            bottom: '28px',
+            transform: 'unset !important',
+        },
+    },
+}));
+export const TimeAreaInner = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: '8px',
+    alignItems: 'center',
+    borderRadius: '50px',
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    paddingInline: '5px',
+    width: 'fit-content',
+    height: 32,
+}));

package/build/components/RangeCalender/components/GroupBy/GroupBy.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { useTranslation } from 'react-i18next';
+import { blackHeadingDownArrow } from '../../../../constants/index.js';
+import { Menu } from '../../../index.js';
+import { GroupByLabel, GroupByDropdownButton, GroupByDropdown, Option } from './style';
+const groupByLabel = {
+    day: 'Day',
+    month: 'Month',
+    quarter: 'Quarter',
+    year: 'Year',
+};
+function GroupBy({ sx, groupBy, isCalenderOpen, onUpdate }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl) && isCalenderOpen;
+    const { t } = useTranslation();
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const onOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+    };
+    const onSelect = (value) => {
+        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(value);
+        onClose();
+    };
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, Object.assign({ sx: sx }, { children: [_jsx(GroupByLabel, { children: t('groupedBy') }), _jsxs(GroupByDropdownButton, Object.assign({ onClick: onOpen, open: open }, { children: [_jsx("span", { children: groupByLabel[groupBy] }), _jsx(Box, { component: "img", src: blackHeadingDownArrow, alt: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl }, { children: _jsx(GroupByDropdown, Object.assign({ sx: { width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth } }, { children: Object.entries(groupByLabel).map(([key, value]) => (_jsx(Option, Object.assign({ onClick: () => {
+                                onSelect(key);
+                            }, className: groupBy === key ? 'active' : '' }, { children: value }), `${key}-groupedBy`))) })) }))] })) })));
+}
+export default memo(GroupBy);

package/build/components/RangeCalender/components/GroupBy/index.js

@@ -0,0 +1,2 @@
+import GroupBy from './GroupBy';
+export default GroupBy;

package/build/components/RangeCalender/components/GroupBy/style.js

@@ -0,0 +1,39 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const GroupByLabel = styled(Box)(({ theme }) => ({
+    color: theme.palette.grey[700],
+    fontSize: '9px',
+    fontWeight: 500,
+    marginBottom: '6px',
+}));
+export const GroupByDropdownButton = styled(Box, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, background: theme.palette.common.white, height: 32, padding: '8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer' }, (open && {
+    border: `1px solid ${theme.palette.info.dark}`,
+    background: theme.palette.common.white,
+    boxShadow: theme.shadows[7],
+}))));
+export const GroupByDropdown = styled(Box)(({ theme }) => ({
+    borderRadius: '8px',
+    background: theme.palette.common.white,
+    boxShadow: '0px 8px 36px 0px rgba(0, 0, 0, 0.15)',
+    textAlign: 'center',
+    color: theme.palette.grey[900],
+    fontSize: '12px',
+    fontWeight: 500,
+    lineHeight: '20px',
+    letterSpacing: '0.1px',
+    padding: '16px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '12px',
+    flexDirection: 'column',
+}));
+export const Option = styled(Box)(({ theme }) => ({
+    width: 71,
+    padding: '4px 0',
+    cursor: 'pointer',
+    '&:hover, &.active': {
+        borderRadius: '100px',
+        background: theme.palette.info.light,
+    },
+}));

package/build/components/RangeCalender/components/Hijri/Hijri.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { useTranslation } from 'react-i18next';
+import { IOSSwitch } from '../../../index.js';
+import { hijriIcon } from '../../../../constants/index.js';
+import { CalenderSetting } from './style';
+export default function Hijri({ isHijri, onCalendarModeSwitch }) {
+    const { t } = useTranslation();
+    const onChange = () => {
+        onCalendarModeSwitch === null || onCalendarModeSwitch === void 0 ? void 0 : onCalendarModeSwitch(isHijri ? 'gregorian' : 'hijri');
+    };
+    return (_jsx(Box, { children: _jsxs(CalenderSetting, { children: [_jsxs(Box, { children: [_jsx("img", { src: hijriIcon, alt: "hijri" }), _jsx("span", { children: t('hijri') })] }), _jsx(IOSSwitch, { checked: isHijri, onChange: onChange })] }) }));
+}

package/build/components/RangeCalender/components/Hijri/index.js

@@ -0,0 +1,2 @@
+import CalenderSettings from './Hijri';
+export default CalenderSettings;

package/build/components/RangeCalender/components/Hijri/style.js

@@ -0,0 +1,25 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const CalenderSetting = styled(Box)(({ theme }) => ({
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    borderRadius: '50px',
+    paddingInline: '6px 12px',
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    display: 'flex',
+    gap: '8px',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: 32,
+    marginTop: '8px',
+    img: {
+        width: 16,
+        height: 16,
+    },
+    '& > div': {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '2px',
+    },
+}));

package/build/components/RangeCalender/components/QuickFilters/QuickFilters.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import Box from '@mui/material/Box';
+import { useTranslation } from 'react-i18next';
+import { DateObject } from 'react-multi-date-picker';
+import { CustomLabel, FiltersWrapper } from './style';
+import { getCalender, getLocale } from '../../utils';
+export default function QuickFilters({ onChange, isHijri, isAr = false }) {
+    const calenderSettings = { locale: getLocale({ isHijri, isAr }), calendar: getCalender(isHijri) };
+    const filterList = useMemo(() => [
+        { id: 'today', value: [new DateObject(calenderSettings), new DateObject(calenderSettings)] },
+        {
+            id: 'lastWeek',
+            value: [new DateObject(calenderSettings).subtract(6, 'day'), new DateObject(calenderSettings)],
+        },
+        {
+            id: 'lastMonth',
+            value: [new DateObject(calenderSettings).subtract(30, 'day'), new DateObject(calenderSettings)],
+        },
+        {
+            id: new DateObject(calenderSettings).subtract(1, 'month').toFirstOfMonth().format('MMMM YYYY'),
+            value: [
+                new DateObject(calenderSettings).subtract(1, 'month').toFirstOfMonth(),
+                new DateObject(calenderSettings).subtract(1, 'month').toLastOfMonth(),
+            ],
+        },
+        {
+            id: new DateObject(calenderSettings).subtract(2, 'month').toFirstOfMonth().format('MMMM YYYY'),
+            value: [
+                new DateObject(calenderSettings).subtract(2, 'month').toFirstOfMonth(),
+                new DateObject(calenderSettings).subtract(2, 'month').toLastOfMonth(),
+            ],
+        },
+        {
+            id: new DateObject(calenderSettings).subtract(3, 'month').toFirstOfMonth().format('MMMM YYYY'),
+            value: [
+                new DateObject(calenderSettings).subtract(3, 'month').toFirstOfMonth(),
+                new DateObject(calenderSettings).subtract(3, 'month').toLastOfMonth(),
+            ],
+        },
+    ], [isHijri, isAr]);
+    const { t } = useTranslation();
+    return (_jsx(Box, Object.assign({ "data-testid": "RangeCalender_QuickFilters" }, { children: _jsx(FiltersWrapper, { children: filterList.map((item) => (_jsx(CustomLabel, Object.assign({ onClick: (e) => {
+                    e.preventDefault();
+                    onChange(item.value);
+                } }, { children: t(item.id) }), item.id))) }) })));
+}

package/build/components/RangeCalender/components/QuickFilters/index.js

@@ -0,0 +1,2 @@
+import QuickFilters from './QuickFilters';
+export default QuickFilters;

package/build/components/RangeCalender/components/QuickFilters/style.js

@@ -0,0 +1,27 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+export const CustomLabel = styled(Button)(({ theme }) => ({
+    cursor: 'pointer',
+    borderRadius: '50px',
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    background: theme.palette.common.white,
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    fontWeight: theme.typography.fontWeightRegular,
+    paddingInline: '12px',
+    height: 32,
+    width: 'max-content',
+    textTransform: 'unset',
+    '&:hover': {
+        boxShadow: theme.shadows[7],
+        border: '1px solid',
+        borderColor: theme.palette.info.dark,
+    },
+}));
+export const FiltersWrapper = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+}));

package/build/components/RangeCalender/components/RangeDatepicker/RangeDatepicker.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Calendar } from 'react-multi-date-picker';
+import { darkLeftArrowIcon, darkRightArrowIcon } from '../../../../constants/index.js';
+import { ArrowButton } from './style';
+import { getLocale, getCalender } from '../../utils';
+const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+function RangeDatepicker(_a, 
+// eslint-disable-next-line
+ref) {
+    var { isAr = false, isHijri, values, onChange, numberOfMonths = 2 } = _a, props = __rest(_a, ["isAr", "isHijri", "values", "onChange", "numberOfMonths"]);
+    const getArrow = (direction) => {
+        if (direction === 'right') {
+            return isAr ? darkLeftArrowIcon : darkRightArrowIcon;
+        }
+        return isAr ? darkRightArrowIcon : darkLeftArrowIcon;
+    };
+    return (_jsx(Calendar, Object.assign({ ref: ref, numberOfMonths: numberOfMonths, value: values, onChange: onChange, calendar: getCalender(isHijri), locale: getLocale({ isHijri, isAr }), range: true, format: "MMM DD", monthYearSeparator: ' ', renderButton: (direction, handleClick) => (_jsx(ArrowButton, Object.assign({ onClick: handleClick }, { children: _jsx("img", { src: getArrow(direction), alt: "arrow" }) }))), weekDays: !isAr ? weekDays : undefined, maxDate: new Date() }, props)));
+}
+export default forwardRef(RangeDatepicker);

package/build/components/RangeCalender/components/RangeDatepicker/index.js

@@ -0,0 +1,3 @@
+import RangeDatepicker from './RangeDatepicker';
+export * from './type';
+export default RangeDatepicker;

package/build/components/RangeCalender/components/RangeDatepicker/style.js

@@ -0,0 +1,9 @@
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+export const ArrowButton = styled(Button)(() => ({
+    minWidth: 'auto',
+    padding: 0,
+    '& > img': {
+        cursor: 'pointer',
+    },
+}));

package/build/components/RangeCalender/components/RangeDatepicker/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/RangeCalender/components/Timezone/Timezone.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, memo } from 'react';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Popper from '@mui/material/Popper';
+import { entityTimezoneIcon, savedTimezoneIcon, userTimezoneIcon } from '../../../../constants/index.js';
+import { CountryFlag } from '../../../index.js';
+import { TimezoneWrapper, TimezoneDropdown, SelectedTimezone } from './style';
+import EntitiesTimezone from './components/EntitiesTimezone';
+import UserTimezone from './components/UserTimezone';
+function CustomTimezone({ onChange, selectedTimezone, browserTimezone, defaultCountryTimezone, timezoneCountriesCodes }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const updateTimezone = (timezone) => {
+        onChange(timezone);
+        onClose();
+    };
+    const onOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+    };
+    const selectedTimezoneIcon = useMemo(() => {
+        if (browserTimezone === (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone))
+            return userTimezoneIcon;
+        if ((selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone) === defaultCountryTimezone.timezone)
+            return entityTimezoneIcon;
+        return savedTimezoneIcon;
+    }, [browserTimezone, defaultCountryTimezone.timezone, selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone]);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(TimezoneWrapper, Object.assign({ "data-testid": "CustomTimezone" }, { children: [_jsxs(SelectedTimezone, Object.assign({ open: open, onClick: onOpen }, { children: [_jsx("img", { src: selectedTimezoneIcon, alt: "timezone-icon" }), _jsx(CountryFlag, { countryCode: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.countryCode }), _jsx("span", { children: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.label })] })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "top-start", sx: { zIndex: 1400 } }, { children: _jsxs(TimezoneDropdown, Object.assign({ "data-testid": "CustomTimezone_dropdown" }, { children: [_jsx(EntitiesTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, defaultCountryTimezone: defaultCountryTimezone, timezoneCountriesCodes: timezoneCountriesCodes }), _jsx(UserTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, browserTimezone: browserTimezone })] })) }))] })) })));
+}
+export default memo(CustomTimezone);