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

package/build/components/RFH/Inputs/PhoneInput/PhoneInput.js

@@ -1,30 +0,0 @@
-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 { useFormContext, Controller } from 'react-hook-form';
-import { PhoneInputBase } from '../../../InputBase';
-function PhoneInput(_a) {
-    var { phoneName, countries, countryName, helperText, isCountriesLoading, disabled } = _a, props = __rest(_a, ["phoneName", "countries", "countryName", "helperText", "isCountriesLoading", "disabled"]);
-    const { control, watch, setValue } = useFormContext();
-    const countryValue = watch(countryName);
-    const onCountryChange = (country) => {
-        setValue(countryName, country);
-    };
-    return (_jsx(Controller, { name: phoneName, control: control, render: ({ field: { onChange, value }, fieldState }) => {
-            var _a;
-            return (_jsx(PhoneInputBase, Object.assign({}, props, { phoneValue: value, countries: countries, hasError: !!fieldState.error, helperText: helperText !== null && helperText !== void 0 ? helperText : (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, onPhoneChange: (number) => {
-                    onChange(number);
-                }, disabled: disabled, countryValue: countryValue, onCountryChange: onCountryChange, isCountriesLoading: isCountriesLoading })));
-        } }));
-}
-PhoneInput.displayName = 'RFHPhoneInput';
-export default PhoneInput;

package/build/components/RFH/Inputs/PhoneInput/index.js

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

package/build/components/RFH/Inputs/SelectWithAccordion/SelectWithAccordion.js

@@ -1,62 +0,0 @@
-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 { useState } from 'react';
-import { blueCheckIcon } from '../../../../constants/index.js';
-import Icon from '../../../Icon';
-import { Caption, AccordionWrapper, Container, ItemStyled } from './style';
-import AccordionAdapter from '../../../AccordionAdapter';
-import SelectDropdown from '../../../SelectDropdown';
-import Select from '../FormSelect';
-import { useFormContext } from 'react-hook-form';
-function SelectWithAccordion(_a) {
-    var _b;
-    var { name, options } = _a, props = __rest(_a, ["name", "options"]);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [expandedParentGroupIndex, setExpandedParentGroupIndex] = useState(0);
-    const open = Boolean(anchorEl);
-    const openDropdown = (e) => {
-        setAnchorEl(open ? null : e.currentTarget);
-    };
-    const closeDropdown = () => {
-        setAnchorEl(null);
-    };
-    const { watch, setValue } = useFormContext();
-    const selectedOption = watch(name);
-    return (_jsx(SelectDropdown, Object.assign({ open: open, anchorEl: anchorEl, onOpen: openDropdown, onClose: closeDropdown, trigger: _jsx(Select, Object.assign({ name: name, options: [] }, props, { open: false })), hideArrow: true, listWrapperSx: { padding: 0, margin: 0 } }, { children: _jsx(Container, { children: _jsx(AccordionWrapper, Object.assign({ "data-testid": "AccordionWrapper" }, { children: (_b = options.map) === null || _b === void 0 ? void 0 : _b.call(options, (optionsGroup, parentIndex) => {
-                    const isExpanded = expandedParentGroupIndex === parentIndex;
-                    return (_jsx(AccordionAdapter, Object.assign({ Header: _jsx(Caption, Object.assign({ variant: "caption" }, { children: optionsGroup.group })), defaultExpanded: true, sx: Object.assign({ flexShrink: 0, border: 0 }, (isExpanded && {
-                            borderBottom: '1px solid #0000001A',
-                            borderTop: '1px solid #0000001A',
-                        })), summarySx: {
-                            backgroundColor: isExpanded ? '#F8F8F8' : '#ffffff',
-                            borderBottom: '1px solid #0000001A',
-                            minHeight: 28,
-                        }, expanded: isExpanded, onChange: (e, expanded) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            setExpandedParentGroupIndex(expanded ? parentIndex : null);
-                        } }, { children: ((optionsGroup === null || optionsGroup === void 0 ? void 0 : optionsGroup.options) || []).map((option, index) => {
-                            var _a, _b;
-                            const isSelected = (_a = props === null || props === void 0 ? void 0 : props.isOptionEqualToValue) === null || _a === void 0 ? void 0 : _a.call(props, option, selectedOption);
-                            return (_jsxs(ItemStyled, Object.assign({ onClick: () => {
-                                    setValue(name, option, {
-                                        shouldDirty: true,
-                                        shouldTouch: true,
-                                        shouldValidate: true,
-                                    });
-                                    closeDropdown();
-                                } }, { children: [((_b = props.renderOption) === null || _b === void 0 ? void 0 : _b.call(props, option)) || option.label, isSelected && _jsx(Icon, { src: blueCheckIcon, alt: "blue-check", sx: { width: 14, height: 10 } })] }), `${option.value}-${option.label}-${index}`));
-                        }) }), `${optionsGroup.group}-group-${parentIndex}`));
-                }) })) }) })));
-}
-export default SelectWithAccordion;

package/build/components/RFH/Inputs/SelectWithAccordion/index.js

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

package/build/components/RFH/Inputs/SelectWithAccordion/style.js

@@ -1,70 +0,0 @@
-import Box from '@mui/material/Box';
-import Input from '@mui/material/Input';
-import { styled } from '@mui/material/styles';
-import Text from '../../../Text';
-export const Caption = styled(Text)(({ theme }) => ({
-    fontSize: '10px',
-    color: theme.palette.grey[700],
-    fontWeight: 600,
-    lineHeight: '10px',
-}));
-export const Title = styled(Text)(({ theme }) => ({
-    fontSize: '11px',
-    color: theme.palette.text.primary,
-    fontWeight: 600,
-    lineHeight: '14.3px',
-    width: 200,
-}));
-export const AccordionWrapper = styled(Box)(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-    maxHeight: 180,
-    overflow: 'auto',
-    scrollbarWidth: 'thin',
-    scrollbarColor: '#E5E5E5 #E5E5E5',
-}));
-export const InputStyled = styled(Input)(({ theme }) => ({
-    width: 'inherit',
-    height: 32,
-    padding: '11px 12px',
-    fontSize: '10px',
-    borderRadius: '5px',
-    backgroundColor: '#F9F9F9',
-    border: '1px solid transparent',
-    '&.Mui-focused': {
-        borderColor: theme.palette.info.dark,
-    },
-}));
-export const Container = styled(Box)(() => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '8px',
-}));
-export const SelectedBadgesWrapper = styled(Box)(() => ({
-    display: 'flex',
-    gap: '8px',
-    padding: '4px',
-    flexWrap: 'wrap',
-    paddingInlineEnd: '20px',
-}));
-export const SelectedBadge = styled(Box)(({ theme, maxWidth }) => (Object.assign({ display: 'flex', padding: '4px 8px 4px 6px', alignItems: 'center', gap: '4px', borderRadius: '13px', backgroundColor: `${theme.palette.info.dark}1a`, fontSize: '10px', fontWeight: 500, cursor: 'pointer' }, (maxWidth && {
-    maxWidth: `${maxWidth}%`,
-}))));
-export const ItemStyled = styled(Text)(({ theme }) => ({
-    display: 'flex',
-    gap: '8px',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    fontSize: '10px',
-    fontWeight: 500,
-    color: theme.palette.common.black,
-    cursor: 'pointer',
-    padding: '8px 20px',
-}));
-export const TriggerWrapper = styled(Box)(({ theme }) => ({
-    width: '100%',
-    flexDirection: 'column',
-    border: `1px solid ${theme.palette.grey[100]}`,
-    borderRadius: '4px',
-    backgroundColor: theme.palette.grey[400],
-}));

package/build/components/RFH/Inputs/SelectWithAccordion/type.js

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

package/build/components/RFH/Inputs/Switch/Switch.js

@@ -1,22 +0,0 @@
-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 * as React from 'react';
-import { useFormContext, Controller } from 'react-hook-form';
-import IOSSwitch from '../../../IOSSwitch';
-function Switch(_a) {
-    var { name, disabled: disableSwitch } = _a, props = __rest(_a, ["name", "disabled"]);
-    const { control } = useFormContext();
-    return (_jsx(Controller, { name: name, control: control, render: ({ field: { name: fieldName, onBlur, onChange, value, disabled } }) => (_jsx(IOSSwitch, Object.assign({}, props, { onChange: onChange, onBlur: onBlur, name: fieldName, disabled: disabled || disableSwitch, checked: value !== null && value !== void 0 ? value : false }))) }));
-}
-Switch.displayName = 'RFHSWitch';
-export default React.memo(Switch);

package/build/components/RFH/Inputs/Switch/index.js

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

package/build/components/RFH/Inputs/index.js

@@ -1,7 +0,0 @@
-export { default as FormInput } from './FormInput';
-export { default as PhoneInput } from './PhoneInput';
-export { default as AmountInput } from './AmountInput';
-export { default as FormSelect } from './FormSelect';
-export { default as Switch } from './Switch';
-export { default as SelectWithAccordion } from './SelectWithAccordion';
-export { default as MultiSelect } from './MultiSelect';

package/build/components/RFH/hooks/index.js

@@ -1 +0,0 @@
-export * from './useRFHForm';

package/build/components/RFH/hooks/useRFHForm.js

@@ -1,2 +0,0 @@
-import { useForm } from 'react-hook-form';
-export const useRFHForm = useForm;

package/build/components/RadioButton/RadioButton.js

@@ -1,19 +0,0 @@
-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 { memo } from 'react';
-import { StyledRadio, StyledRadioCheckedIcon } from './style';
-function RadioButton(_a) {
-    var { size = 'small', customCheckedIcon, checkedColor, disabledColor, hoverColor, iconSize, showRipple = false, sx } = _a, props = __rest(_a, ["size", "customCheckedIcon", "checkedColor", "disabledColor", "hoverColor", "iconSize", "showRipple", "sx"]);
-    return (_jsx(StyledRadio, Object.assign({ size: size === 'large' ? 'medium' : size, disableRipple: !showRipple, checkedIcon: customCheckedIcon || _jsx(StyledRadioCheckedIcon, {}), iconSize: iconSize, checkedColor: checkedColor, disabledColor: disabledColor, hoverColor: hoverColor, sx: sx }, props)));
-}
-export default memo(RadioButton);

package/build/components/RadioButton/style.js

@@ -1,64 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Radio from '@mui/material/Radio';
-export const DEFAULT_COLORS = {
-    color: '#8C9196',
-    checkedColor: '#1F88D0',
-    disabledColor: '#C7C7CC',
-};
-export const SIZE_CONFIG = {
-    small: {
-        iconSize: 15,
-        maxWidth: '24px',
-    },
-    medium: {
-        iconSize: 18,
-        maxWidth: '28px',
-    },
-    large: {
-        iconSize: 20,
-        maxWidth: '32px',
-    },
-};
-const StyledRadioIcon = styled('span')(() => ({
-    borderRadius: '50%',
-    width: '12px',
-    height: '12px',
-    boxSizing: 'border-box',
-    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
-}));
-export const StyledRadioCheckedIcon = styled(StyledRadioIcon)({
-    backgroundColor: DEFAULT_COLORS.checkedColor,
-    '&::before': {
-        display: 'block',
-        width: '12px',
-        height: '12px',
-        backgroundColor: DEFAULT_COLORS.checkedColor,
-        borderRadius: '50%',
-        backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
-        content: '""',
-    },
-});
-export const StyledRadio = styled(Radio, {
-    shouldForwardProp: (prop) => !['iconSize', 'checkedColor', 'disabledColor', 'hoverColor'].includes(prop),
-})(({ iconSize, checkedColor, disabledColor, hoverColor }) => {
-    return {
-        '& .MuiSvgIcon-root': {
-            fontSize: iconSize || SIZE_CONFIG.small.iconSize,
-        },
-        maxWidth: SIZE_CONFIG.small.maxWidth,
-        cursor: 'pointer',
-        color: DEFAULT_COLORS.color,
-        '&.Mui-checked': {
-            color: checkedColor || DEFAULT_COLORS.checkedColor,
-        },
-        '&:hover': hoverColor
-            ? {
-                backgroundColor: 'transparent',
-                color: hoverColor,
-            }
-            : undefined,
-        '&.Mui-disabled': {
-            color: disabledColor || DEFAULT_COLORS.disabledColor,
-        },
-    };
-});

package/build/components/RadioButton/type.js

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

package/build/components/RadioGroup/RadioGroup.js

@@ -1,38 +0,0 @@
-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/style.js

@@ -1,16 +0,0 @@
-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

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

package/build/components/RangeCalender/RangeCalender.js

@@ -1,99 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

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

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

@@ -1,132 +0,0 @@
-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,
-}));