@tap-payments/os-micro-frontend-shared 0.0.88 → 0.0.89

package/build/components/RangeCalender/components/QuickFilters/style.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const CustomLabel: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const FiltersWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

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.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CalendarProps } from 'react-multi-date-picker';
+import { Dates } from '../../type';
+interface RangeDatepickerProps extends Omit<CalendarProps, 'onChange'> {
+    isAr?: boolean;
+    isHijri: boolean;
+    values: Dates;
+    onChange: (v: Dates) => void;
+    numberOfMonths?: number;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<RangeDatepickerProps, "ref"> & React.RefAttributes<unknown>>;
+export default _default;

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

@@ -0,0 +1,29 @@
+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, 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.d.ts

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

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

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

package/build/components/RangeCalender/components/RangeDatepicker/style.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ArrowButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

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/Timezone/Timezone.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { Timezone } from '../../../../types/index.js';
+interface CustomTimezoneProps {
+    onChange: (timezone: Timezone) => void;
+    selectedTimezone: Timezone | null;
+    defaultTimezone: Timezone;
+    browserTimezone: string;
+}
+declare function CustomTimezone({ onChange, selectedTimezone, defaultTimezone, browserTimezone }: CustomTimezoneProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CustomTimezone>;
+export default _default;

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, defaultTimezone, browserTimezone }) {
+    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) === defaultTimezone.timezone)
+            return entityTimezoneIcon;
+        return savedTimezoneIcon;
+    }, [browserTimezone, defaultTimezone.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, { code: 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: 3 } }, { children: _jsxs(TimezoneDropdown, Object.assign({ "data-testid": "CustomTimezone_dropdown" }, { children: [_jsx(EntitiesTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone }), _jsx(UserTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, browserTimezone: browserTimezone })] })) }))] })) })));
+}
+export default memo(CustomTimezone);

package/build/components/RangeCalender/components/Timezone/components/EntitiesTimezone.d.ts

@@ -0,0 +1,12 @@
+import type { Timezone } from '../../../../../types/index.js';
+interface EntitiesTimezoneProps {
+    selectedTimezone: Timezone | null;
+    onChange: (selected: Timezone) => void;
+    defaultTimezone: Timezone;
+    getTimezoneByCountryCode?: (countryCode: string) => Timezone;
+    segmentCountries?: {
+        code: string;
+    }[];
+}
+export default function EntitiesTimezone({ selectedTimezone, onChange, defaultTimezone, getTimezoneByCountryCode, segmentCountries, }: EntitiesTimezoneProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import Popper from '@mui/material/Popper';
+import { entityTimezoneIcon, smallBlueCheckIcon } from '../../../../../constants/index.js';
+import { CountryFlag } from '../../../../index.js';
+import { Label, Space, TimezoneDropdown, TimezoneElement } from '../style';
+export default function EntitiesTimezone({ selectedTimezone, onChange, defaultTimezone, getTimezoneByCountryCode, segmentCountries, }) {
+    const [entitiesEl, setEntitiesEl] = useState(null);
+    const onMouseEnter = (e) => {
+        if (!entitiesEl)
+            setEntitiesEl(e.currentTarget);
+    };
+    const onMouseLeave = () => {
+        if (entitiesEl)
+            setEntitiesEl(null);
+    };
+    const onSelectTimezone = (e, tz) => {
+        e.stopPropagation();
+        onChange(tz);
+    };
+    const availableTimezones = useMemo(() => segmentCountries === null || segmentCountries === void 0 ? void 0 : segmentCountries.map(({ code }) => getTimezoneByCountryCode === null || getTimezoneByCountryCode === void 0 ? void 0 : getTimezoneByCountryCode(code)), [segmentCountries]);
+    const isSelectedTimezoneOneOFTheAvailable = useMemo(() => availableTimezones === null || availableTimezones === void 0 ? void 0 : availableTimezones.find((item) => (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone) === (item === null || item === void 0 ? void 0 : item.timezone)), [availableTimezones, selectedTimezone]);
+    const entityTimezone = useMemo(() => {
+        if (!selectedTimezone)
+            return defaultTimezone;
+        return isSelectedTimezoneOneOFTheAvailable ? selectedTimezone : defaultTimezone;
+    }, [selectedTimezone, defaultTimezone]);
+    return (_jsxs(TimezoneElement, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: () => {
+            if (selectedTimezone)
+                onChange(entityTimezone);
+        } }, { children: [isSelectedTimezoneOneOFTheAvailable ? _jsx("img", { src: smallBlueCheckIcon, alt: "icon" }) : _jsx(Space, {}), _jsx("img", { src: entityTimezoneIcon, alt: "entity-timezone" }), _jsx(CountryFlag, { code: entityTimezone === null || entityTimezone === void 0 ? void 0 : entityTimezone.countryCode }), _jsx(Label, Object.assign({ className: isSelectedTimezoneOneOFTheAvailable ? 'selected' : '' }, { children: isSelectedTimezoneOneOFTheAvailable ? selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.label : defaultTimezone.label })), _jsx(Popper, Object.assign({ open: Boolean(entitiesEl), anchorEl: entitiesEl, placement: "right-start", sx: { zIndex: 3 }, disablePortal: true }, { children: _jsx(TimezoneDropdown, { children: availableTimezones === null || availableTimezones === void 0 ? void 0 : availableTimezones.map((timeZone, idx) => {
+                        const isActive = (timeZone === null || timeZone === void 0 ? void 0 : timeZone.timezone) === (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone);
+                        return (_jsxs(TimezoneElement, Object.assign({ onClick: (e) => {
+                                onSelectTimezone(e, timeZone);
+                            }, sx: { gap: '4px' } }, { children: [isActive ? _jsx("img", { src: smallBlueCheckIcon, alt: "icon" }) : _jsx(Space, {}), _jsx(CountryFlag, { code: timeZone === null || timeZone === void 0 ? void 0 : timeZone.countryCode }), _jsx(Label, Object.assign({ className: isActive ? 'selected' : '' }, { children: timeZone === null || timeZone === void 0 ? void 0 : timeZone.label }))] }), `timezone-item-${idx}`));
+                    }) }) }))] })));
+}

package/build/components/RangeCalender/components/Timezone/components/UserTimezone.d.ts

@@ -0,0 +1,8 @@
+import type { Timezone } from '../../../../../types/index.js';
+interface UserTimezoneProps {
+    selectedTimezone: Timezone | null;
+    onChange: (selected: Timezone) => void;
+    browserTimezone?: string;
+}
+export default function UserTimezone({ onChange, selectedTimezone, browserTimezone }: UserTimezoneProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CountryFlag } from '../../../../index.js';
+import { userTimezoneIcon, smallBlueCheckIcon, COUNTRIES_TIMEZONES } from '../../../../../constants/index.js';
+import { Label, Space, TimezoneElement } from '../style';
+export default function UserTimezone({ onChange, selectedTimezone, browserTimezone }) {
+    const browserTimezoneInfo = useMemo(() => COUNTRIES_TIMEZONES.find(({ timezone }) => timezone === browserTimezone), [browserTimezone]);
+    const onSelectTimezone = () => {
+        if (browserTimezoneInfo)
+            onChange(browserTimezoneInfo);
+    };
+    const isBrowserTimezoneActive = (browserTimezoneInfo === null || browserTimezoneInfo === void 0 ? void 0 : browserTimezoneInfo.timezone) === (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone);
+    return (_jsxs(TimezoneElement, Object.assign({ onClick: onSelectTimezone }, { children: [isBrowserTimezoneActive ? _jsx("img", { src: smallBlueCheckIcon, alt: "icon" }) : _jsx(Space, {}), _jsx("img", { src: userTimezoneIcon, alt: "user-timezone" }), _jsx(CountryFlag, { code: browserTimezoneInfo === null || browserTimezoneInfo === void 0 ? void 0 : browserTimezoneInfo.countryCode }), _jsx(Label, Object.assign({ className: isBrowserTimezoneActive ? 'selected' : '' }, { children: browserTimezoneInfo === null || browserTimezoneInfo === void 0 ? void 0 : browserTimezoneInfo.label }))] })));
+}

package/build/components/RangeCalender/components/Timezone/index.d.ts

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

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

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

package/build/components/RangeCalender/components/Timezone/style.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const TimezoneWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const TimezoneDropdown: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const SelectedTimezone: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    open: boolean;
+}, {}, {}>;
+export declare const TimezoneElement: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Space: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

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

@@ -0,0 +1,61 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const TimezoneWrapper = styled(Box)(() => ({
+    '[class$="-IndicatorsContainer2"]': {
+        display: 'none',
+    },
+    '#react-select-2-listbox': {
+        width: 300,
+    },
+}));
+export const TimezoneDropdown = styled(Box)(({ theme }) => ({
+    borderRadius: theme.spacing(0.5),
+    border: `1px solid ${theme.palette.divider}`,
+    background: theme.palette.common.white,
+    boxShadow: theme.shadows[10],
+    minWidth: 200,
+    width: 'max-content',
+    overflow: 'auto',
+}));
+export const SelectedTimezone = styled(Box, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign(Object.assign({ width: 156, fontSize: '11px', color: theme.palette.text.primary, border: '1px solid', borderColor: theme.palette.divider, minHeight: 32, borderRadius: '4px', padding: theme.spacing(1), whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: theme.spacing(1), fontWeight: 500 }, (open && {
+    borderRadius: '4px',
+    boxShadow: theme.shadows[7],
+    border: '1px solid',
+    borderColor: theme.palette.info.dark,
+    background: theme.palette.common.white,
+})), { span: { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' } })));
+export const TimezoneElement = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(1),
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    height: 33,
+    cursor: 'pointer',
+    '&:hover': {
+        boxShadow: '0px 0px 16px 0px #00000021',
+    },
+    '&+&': {
+        borderTop: '1px solid',
+        borderColor: theme.palette.divider,
+    },
+    '&.active span': {
+        fontWeight: 500,
+    },
+    span: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+}));
+export const Space = styled(Box)(() => ({
+    width: 12,
+    height: 12,
+}));
+export const Label = styled(Box)(({ theme }) => ({
+    fontSize: '11px',
+    color: theme.palette.text.secondary,
+    lineHeight: '15.03px',
+    '&.selected': { color: theme.palette.info.dark },
+}));

package/build/components/RangeCalender/index.d.ts

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

package/build/components/RangeCalender/index.js

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

package/build/components/RangeCalender/style.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export declare const CalenderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const CancelButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const OkayButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ButtonsWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const SelectedDate: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    open: boolean;
+}, {}, {}>;
+export declare const Footer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const FiltersArea: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const TimeZone: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Main: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Settings: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/RangeCalender/style.js

@@ -0,0 +1,189 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+export const CalenderWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    marginTop: '8px',
+    background: theme.palette.common.white,
+    boxShadow: theme.shadows[9],
+    borderRadius: theme.spacing(1),
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    '.rmdp-calendar': {
+        padding: '8px 16px 16px',
+    },
+    '.rmdp-rtl *': {
+        fontFamily: 'Tajawal',
+    },
+    '.rmdp-rtl .sd': {
+        paddingTop: '4px',
+    },
+    '.rmdp-wrapper': {
+        position: 'relative',
+        borderRadius: '8px',
+        boxShadow: 'none',
+    },
+    '.rmdp-day span': {
+        fontSize: '11px',
+        fontWeight: 500,
+    },
+    '.rmdp-day, .rmdp-week-day': {
+        width: 40,
+        height: 40,
+        marginBottom: '2px',
+        padding: '4px',
+        fontSize: '11px',
+        color: theme.palette.grey[900],
+    },
+    '.rmdp-day-picker': {
+        padding: 0,
+    },
+    '.rmdp-day.rmdp-today span': {
+        backgroundColor: 'transparent',
+        color: theme.palette.info.dark,
+    },
+    '.rmdp-day.rmdp-today.end span, .rmdp-day.rmdp-today.end span': {
+        color: theme.palette.common.white,
+    },
+    '.rmdp-range, .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover': {
+        background: theme.palette.info.light,
+        boxShadow: 'none',
+        color: theme.palette.grey[900],
+    },
+    '.rmdp-range-hover.start, .rmdp-range.start, .rmdp-range-hover.end, .rmdp-range.end, .rmdp-rtl .rmdp-range-hover.start, .rmdp-rtl .rmdp-range.start, .rmdp-rtl .rmdp-range-hover.end, .rmdp-rtl .rmdp-range.end': {
+        borderRadius: '50%',
+        background: theme.palette.background.gradient.darkShadedBlue,
+        color: theme.palette.common.white,
+    },
+    '.rmdp-range.start:after': {
+        content: '""',
+        position: 'absolute',
+        background: theme.palette.info.light,
+        height: '100%',
+        width: '50%',
+        right: 0,
+        top: 0,
+        zIndex: -1,
+    },
+    '.rmdp-rtl .rmdp-range.start:after': {
+        right: 'unset',
+        left: 0,
+    },
+    '.rmdp-range.end:after': {
+        content: '""',
+        position: 'absolute',
+        background: theme.palette.info.light,
+        height: '100%',
+        width: '50%',
+        left: 0,
+        top: 0,
+        zIndex: -1,
+    },
+    '.rmdp-rtl .rmdp-range.end:after': {
+        left: 'unset',
+        right: 0,
+    },
+    '.rmdp-week-day': {
+        color: theme.palette.grey[700],
+        marginBottom: '4px',
+        fontSize: '11px',
+        padding: '4px',
+    },
+    '.rmdp-header-values': {
+        color: theme.palette.grey[900],
+        fontSize: '12px',
+        fontWeight: 500,
+        lineHeight: '20px',
+        letterSpacing: '0.1px',
+    },
+    '.rmdp-header-values span:nth-of-type(2)': {
+        display: 'none',
+    },
+    '.rmdp-header': {
+        padding: '4px 0',
+        margin: 0,
+        fontSize: '12px',
+    },
+    '.rmdp-top-class': {
+        display: 'block !important',
+    },
+    '.rmdp-day.rmdp-selected span:not(.highlight)': {
+        background: theme.palette.info.dark,
+    },
+    '.rmdp-day.start.end': {
+        overflow: 'hidden',
+    },
+}));
+export const CancelButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    padding: '8px 24px',
+    width: 75,
+    height: 32,
+    fontSize: '11px',
+    background: 'transparent',
+    color: theme.palette.text.primary,
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    fontWeight: 500,
+    borderRadius: '4px',
+    '&:hover': {
+        background: 'transparent',
+        color: theme.palette.text.primary,
+    },
+}));
+export const OkayButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    padding: '8px 24px',
+    width: 75,
+    height: 32,
+    fontSize: '11px',
+    borderRadius: '4px',
+    fontWeight: 700,
+    background: theme.palette.info.dark,
+    '&:hover': {
+        background: theme.palette.info.dark,
+    },
+}));
+export const ButtonsWrapper = styled(Box)(() => ({
+    display: 'flex',
+    gap: 8,
+}));
+export const SelectedDate = styled(Button, { shouldForwardProp: (props) => props !== 'open' })(({ open, theme }) => (Object.assign({ color: theme.palette.text.primary, fontSize: '11px', fontWeight: 500, padding: theme.spacing(1), borderRadius: '4px', border: '1px solid', borderColor: theme.palette.divider, background: theme.palette.common.white, textTransform: 'none', height: 32 }, (open && { border: '1px solid', borderColor: theme.palette.info.dark, boxShadow: theme.shadows[7] }))));
+export const Footer = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 10,
+    padding: '16px',
+    borderTop: '1px solid',
+    borderColor: theme.palette.divider,
+    borderBottomRightRadius: '8px',
+}));
+export const FiltersArea = styled(Box)(({ theme }) => ({
+    padding: 16,
+    paddingInlineEnd: '23px',
+    borderRight: '1px solid',
+    borderColor: theme.palette.divider,
+    background: theme.palette.common.white,
+    width: 'max-content',
+    borderTopLeftRadius: '8px',
+    borderBottomLeftRadius: '8px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    justifyContent: 'space-between',
+}));
+export const TimeZone = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+}));
+export const Main = styled(Box)(() => ({
+    position: 'relative',
+}));
+export const Settings = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+}));

package/build/components/RangeCalender/type.d.ts

@@ -0,0 +1,2 @@
+import type { DateObject } from 'react-multi-date-picker';
+export type Dates = [DateObject, DateObject];

package/build/components/RangeCalender/type.js

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

package/build/components/RangeCalender/utils.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react-date-object" />
+export declare const getLocale: ({ isHijri, isAr }: {
+    isHijri: boolean;
+    isAr?: boolean | undefined;
+}) => import("react-date-object").Locale;
+export declare const getCalender: (isHijri: boolean) => import("react-date-object").Calendar;

package/build/components/RangeCalender/utils.js

@@ -0,0 +1,15 @@
+import arabic from 'react-date-object/calendars/arabic';
+import gregorian from 'react-date-object/calendars/gregorian';
+import arabicAr from 'react-date-object/locales/arabic_ar';
+import arabicEn from 'react-date-object/locales/arabic_en';
+import gregorianAr from 'react-date-object/locales/gregorian_ar';
+import gregorianEn from 'react-date-object/locales/gregorian_en';
+export const getLocale = ({ isHijri, isAr = false }) => {
+    if (isHijri) {
+        return isAr ? arabicAr : arabicEn;
+    }
+    return isAr ? gregorianAr : gregorianEn;
+};
+export const getCalender = (isHijri) => {
+    return isHijri ? arabic : gregorian;
+};

package/build/components/index.d.ts

@@ -87,3 +87,4 @@ export { default as TapLoader } from './Loaders';
 export { default as Error } from './Error';
 export * from './Chip';
 export * from './TableHeader_V2';
+export { default as RangeCalender } from './RangeCalender';

package/build/components/index.js

@@ -87,3 +87,4 @@ export { default as TapLoader } from './Loaders';
 export { default as Error } from './Error';
 export * from './Chip';
 export * from './TableHeader_V2';
+export { default as RangeCalender } from './RangeCalender';