@tap-payments/auth-jsconnect 2.1.12-test → 2.1.14-test

package/build/components/AnimationFlow/Error.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface Props {
+    error: string;
+}
+export default function Error({ error }: Props): JSX.Element;
+export {};

package/build/components/AnimationFlow/Error.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Text from '../Text';
+var BoxStyled = styled(Box)(function () { return ({
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    zIndex: 2
+}); });
+export default function Error(_a) {
+    var error = _a.error;
+    return (_jsx(BoxStyled, { children: _jsx(Text, __assign({ sx: {
+                fontSize: '17px',
+                color: '#fff',
+                textAlign: 'center'
+            } }, { children: error })) }));
+}

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function FlowLoading(): JSX.Element;

package/build/components/AnimationFlow/Loader.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Loader from '../Loader';
+var BoxStyled = styled(Box)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            width: '100%',
+            height: '100%'
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            height: window.innerHeight
+        },
+        _b.display = 'flex',
+        _b.justifyContent = 'center',
+        _b.alignItems = 'center',
+        _b.backgroundColor = 'rgba(0,0,0,0.5)',
+        _b.zIndex = 2,
+        _b);
+});
+export default function FlowLoading() {
+    return (_jsx(BoxStyled, { children: _jsx(Loader, { style: { width: 60, height: 60 }, svgStyle: { width: 60, height: 60 }, innerColor: 'white', outerColor: 'white', toggleAnimation: true }) }));
+}

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

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

package/build/components/AnimationFlow/index.js

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CalendarProps } from 'react-multi-date-picker';
+import './style.css';
+export interface DatePickerProps extends CalendarProps {
+    disabled?: boolean;
+    readOnly?: boolean;
+    dir?: string;
+    onDateChange?: (date: string) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onDatePicked?: () => void;
+}
+declare const _default: React.MemoExoticComponent<({ disabled, dir, readOnly, onDateChange, onClick, onDatePicked, value, ...rest }: DatePickerProps) => JSX.Element>;
+export default _default;

package/build/components/ArabicDatePicker/ArabicDatePicker.js

@@ -0,0 +1,94 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 React, { memo } from 'react';
+import { Calendar, toDateObject } from 'react-multi-date-picker';
+import arabic from 'react-date-object/calendars/arabic';
+import arabic_ar from 'react-date-object/locales/arabic_ar';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Divider from '@mui/material/Divider';
+import Collapse from '../Collapse';
+import ExpandIcon from '../ExpandIcon';
+import CalendarTodayOutlined from '@mui/icons-material/CalendarTodayOutlined';
+import Input from '../Input';
+import Text from '../Text';
+import './style.css';
+var ContainerIcon = styled(CalendarTodayOutlined)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: 'pointer', width: theme.spacing(2.5), height: theme.spacing(2.5) }));
+});
+var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return ({
+        cursor: disabled ? 'auto' : 'pointer',
+        fontFamily: theme.typography.fontFamily
+    });
+});
+var InputFieldStyled = styled(Input)(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return ({
+        cursor: disabled ? 'auto' : 'pointer',
+        '&::placeholder': __assign(__assign({ opacity: 1, color: theme.palette.text.primary, lineHeight: theme.spacing(2.125) }, theme.typography.body2), { fontWeight: theme.typography.fontWeightLight }),
+        '& .MuiInputBase-input': {
+            WebkitTextFillColor: 'inherit'
+        }
+    });
+});
+var ArrowIcon = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return ({
+        cursor: disabled ? 'auto' : 'pointer',
+        marginInlineEnd: theme.spacing(2.5)
+    });
+});
+var DatePicker = function (_a) {
+    var disabled = _a.disabled, dir = _a.dir, readOnly = _a.readOnly, onDateChange = _a.onDateChange, onClick = _a.onClick, onDatePicked = _a.onDatePicked, value = _a.value, rest = __rest(_a, ["disabled", "dir", "readOnly", "onDateChange", "onClick", "onDatePicked", "value"]);
+    var _b = React.useState(null), anchor = _b[0], setAnchor = _b[1];
+    var calenderIcon = _jsx(ContainerIcon, {});
+    var defaultMax = new Date();
+    var defaultMin = new Date('1900-01-01');
+    var DATE_FORMAT = 'YYYY-MM-DD';
+    var toggleCalender = function (event) {
+        if (disabled)
+            return;
+        if (anchor) {
+            onDatePicked && onDatePicked();
+            setAnchor(null);
+            return;
+        }
+        setAnchor(event.currentTarget);
+        onClick && onClick(event);
+    };
+    var handleOnDateChange = function (date) {
+        onDateChange && onDateChange(date.toDate().toLocaleDateString('en-CA'));
+        setAnchor(null);
+        onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
+    };
+    var formateDate = function (date) {
+        var dateObject = toDateObject(date);
+        return dateObject.convert(arabic).format(DATE_FORMAT);
+    };
+    return (_jsxs(Container, __assign({ disabled: disabled, id: 'container-calendar' }, { children: [_jsx(InputFieldStyled, { endAdornment: _jsx(ArrowIcon, __assign({ disabled: disabled }, { children: disabled ? '' : _jsx(ExpandIcon, { anchorEl: !!anchor }) })), value: value ? formateDate(value) : '', placeholder: DATE_FORMAT, onClick: toggleCalender, startAdornment: calenderIcon, disabled: !disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: !!anchor }, { children: [_jsx(Calendar, __assign({ calendar: arabic, locale: arabic_ar, maxDate: defaultMax, minDate: defaultMin, format: DATE_FORMAT, onChange: handleOnDateChange, value: value, className: 'custom-container' }, rest)), _jsx(Divider, {})] }))] })));
+};
+export default memo(DatePicker);

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

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

package/build/components/ArabicDatePicker/index.js

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

package/build/components/ArabicDatePicker/style.css

@@ -0,0 +1,24 @@
+.rmdp-wrapper {
+	box-shadow: none !important;
+	width: 100% !important;
+	z-index: 0 !important;
+}
+
+.rmdp-day-picker > div {
+	width: 100%;
+}
+
+.rmdp-calendar {
+	width: 100%;
+}
+/* .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
+	background: radial-gradient(circle closest-side, #fafafa 0%, #fafafa 98%, rgba(0, 0, 0, 0) 100%);
+	color: black !important;
+	background-color: unset !important;
+} */
+
+.rmdp-day.rmdp-selected span:not(.highlight) {
+	/* background: radial-gradient(circle closest-side, #3a4154 0%, #3a4154 98%, rgba(0, 0, 0, 0) 100%) !important; */
+	color: #ffffff !important;
+	background-color: black !important;
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ButtonProps as MUIButtonProps } from '@mui/material/Button';
+export interface ButtonStyledProps {
+    touched?: boolean;
+    outLineColor?: string;
+}
+export interface ButtonProps extends MUIButtonProps {
+    outLineColor?: string;
+}
+declare const _default: React.MemoExoticComponent<{
+    ({ children, startIcon, outLineColor, endIcon, ...rest }: ButtonProps): JSX.Element;
+    defaultProps: {};
+}>;
+export default _default;

package/build/components/Button/Button.js

@@ -0,0 +1,101 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 Button from '@mui/material/Button';
+import { styled, alpha } from '@mui/material/styles';
+var ButtonStyled = styled(Button, {
+    shouldForwardProp: function (prop) { return !['outLineColor', 'touched'].includes(prop.toString()); }
+})(function (_a) {
+    var _b;
+    var theme = _a.theme, touched = _a.touched, outLineColor = _a.outLineColor;
+    return ({
+        '&.MuiButton-contained': {
+            color: theme.palette.common.white,
+            backgroundColor: theme.palette.primary.main,
+            '&:hover': {
+                backgroundColor: theme.palette.primary.main
+            },
+            '&:active': {
+                backgroundColor: theme.palette.primary.main
+            },
+            ':disabled': {
+                backgroundColor: alpha(theme.palette.primary.main, 0.3),
+                borderColor: alpha(theme.palette.primary.main, 0.2),
+                color: theme.palette.common.white
+            },
+            '& .MuiButton-endIcon': {
+                margin: theme.spacing(0)
+            },
+            '& .MuiButton-startIcon': {
+                margin: theme.spacing(0)
+            }
+        },
+        minHeight: theme.spacing(5.5),
+        maxHeight: theme.spacing(5.5),
+        borderRadius: theme.spacing(4.1),
+        fontWeight: 'bold',
+        lineHeight: 1.7,
+        display: 'flex',
+        justifyContent: 'space-between',
+        paddingInlineStart: theme.spacing(0.75),
+        textTransform: 'none',
+        '&.MuiButton-outlined': (_b = {
+                backgroundColor: theme.palette.common.white,
+                border: "1px solid ".concat(!!outLineColor ? outLineColor : theme.palette.primary.main),
+                color: !!outLineColor ? outLineColor : theme.palette.primary.main,
+                '&:hover': {
+                    backgroundColor: !!outLineColor ? outLineColor : theme.palette.primary.main,
+                    color: theme.palette.common.white,
+                    img: {
+                        filter: 'brightness(0) invert(1)'
+                    }
+                }
+            },
+            _b[theme.breakpoints.down('sm')] = {
+                '&:hover': {
+                    backgroundColor: touched
+                        ? !!outLineColor
+                            ? outLineColor
+                            : theme.palette.primary.main
+                        : theme.palette.common.white,
+                    color: touched ? theme.palette.common.white : !!outLineColor ? outLineColor : theme.palette.primary.main,
+                    img: {
+                        filter: touched ? 'brightness(0) invert(1)' : 'none'
+                    }
+                }
+            },
+            _b['&:disabled'] = {
+                backgroundColor: theme.palette.common.white,
+                color: alpha(!!outLineColor ? outLineColor : theme.palette.primary.main, 0.3)
+            },
+            _b)
+    });
+});
+var ButtonComponent = function (_a) {
+    var children = _a.children, startIcon = _a.startIcon, outLineColor = _a.outLineColor, endIcon = _a.endIcon, rest = __rest(_a, ["children", "startIcon", "outLineColor", "endIcon"]);
+    var _b = React.useState(false), isTouched = _b[0], setIsTouched = _b[1];
+    return (_jsx(ButtonStyled, __assign({ onTouchStart: function () { return setIsTouched(true); }, touched: isTouched, outLineColor: outLineColor, variant: 'contained', startIcon: startIcon || _jsx("span", {}), endIcon: endIcon || _jsx("span", {}), disableFocusRipple: true, disableElevation: true, disableRipple: true, disableTouchRipple: true, fullWidth: true }, rest, { children: children })));
+};
+ButtonComponent.defaultProps = {};
+export default React.memo(ButtonComponent);

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

@@ -0,0 +1,4 @@
+import Button from './Button';
+import { ButtonProps } from './Button';
+export type { ButtonProps };
+export default Button;

package/build/components/Button/index.js

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

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { CheckboxProps } from '@mui/material/Checkbox/Checkbox';
+export type { CheckboxProps };
+declare const _default: React.MemoExoticComponent<({ ...rest }: CheckboxProps) => JSX.Element>;
+export default _default;

package/build/components/CheckBox/CheckBox.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { styled } from '@mui/material/styles';
+import Checkbox from '@mui/material/Checkbox/Checkbox';
+var CheckBoxStyled = styled(Checkbox)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        paddingInlineStart: theme.spacing(2.5),
+        paddingInlineEnd: theme.spacing(1.25),
+        marginBlockStart: theme.spacing(1.9)
+    });
+});
+var CheckBoxComponent = function (_a) {
+    var rest = __rest(_a, []);
+    return _jsx(CheckBoxStyled, __assign({}, rest));
+};
+export default React.memo(CheckBoxComponent);

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

@@ -0,0 +1,4 @@
+import CheckBox from './CheckBox';
+import { CheckboxProps } from './CheckBox';
+export type { CheckboxProps };
+export default CheckBox;

package/build/components/CheckBox/index.js

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

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

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

package/build/components/Collapse/Collapse.js

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 MUICollapse from '@mui/material/Collapse';
+export default function Collapse(_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (_jsx(MUICollapse, __assign({ unmountOnExit: true, timeout: 500 }, rest, { children: children })));
+}

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

@@ -0,0 +1,3 @@
+import Collapse, { CollapseProps } from './Collapse';
+export type { CollapseProps };
+export default Collapse;

package/build/components/Collapse/index.js

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CalendarProps } from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+import './customStyle.css';
+export interface DatePickerProps extends CalendarProps {
+    onDateChange?: (date: string) => void;
+    onClick?: () => void;
+    onDatePicked?: () => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    dir?: string;
+}
+declare const _default: React.MemoExoticComponent<({ onDateChange, disabled, readOnly, onClick, onDatePicked, dir, defaultValue, ...rest }: DatePickerProps) => JSX.Element>;
+export default _default;

package/build/components/DatePicker/DatePicker.js

@@ -0,0 +1,101 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 React, { useEffect, useState, memo } from 'react';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Divider from '@mui/material/Divider';
+import Collapse from '../Collapse';
+import ExpandIcon from '../ExpandIcon';
+import CalendarTodayOutlined from '@mui/icons-material/CalendarTodayOutlined';
+import { scrollDown, scrollUp } from '../../utils';
+import Input from '../Input';
+import Text from '../Text';
+import './customStyle.css';
+var ContainerIcon = styled(CalendarTodayOutlined)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: 'pointer', width: theme.spacing(2.5), height: theme.spacing(2.5) }));
+});
+var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return ({
+        cursor: disabled ? 'auto' : 'pointer',
+        fontFamily: theme.typography.fontFamily
+    });
+});
+var InputFieldStyled = styled(Input)(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return ({
+        cursor: disabled ? 'auto' : 'pointer',
+        '&::placeholder': __assign(__assign({ opacity: 1, color: theme.palette.text.primary, lineHeight: theme.spacing(2.125) }, theme.typography.body2), { fontWeight: theme.typography.fontWeightLight }),
+        '& .MuiInputBase-input': {
+            WebkitTextFillColor: 'inherit'
+        }
+    });
+});
+var ArrowIcon = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return ({
+        cursor: disabled ? 'auto' : 'pointer',
+        marginInlineEnd: theme.spacing(2.5)
+    });
+});
+var DatePicker = function (_a) {
+    var onDateChange = _a.onDateChange, disabled = _a.disabled, readOnly = _a.readOnly, onClick = _a.onClick, onDatePicked = _a.onDatePicked, dir = _a.dir, defaultValue = _a.defaultValue, rest = __rest(_a, ["onDateChange", "disabled", "readOnly", "onClick", "onDatePicked", "dir", "defaultValue"]);
+    var _b = useState(), date = _b[0], setDate = _b[1];
+    var _c = React.useState(null), anchor = _c[0], setAnchor = _c[1];
+    useEffect(function () {
+        if (defaultValue)
+            setDate(defaultValue);
+    }, [defaultValue]);
+    var calenderIcon = _jsx(ContainerIcon, {});
+    var defaultMax = new Date();
+    var defaultMin = new Date('1900-01-01');
+    var toggleCalender = function (event) {
+        var elementId = 'animation-flow-template-content';
+        if (anchor) {
+            onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
+            setTimeout(function () { return scrollDown(elementId); }, 500);
+            return setAnchor(null);
+        }
+        setAnchor(event.currentTarget);
+        setTimeout(function () { return scrollUp(elementId); }, 550);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var formattedDate = function (date) {
+        return new Date(date).toLocaleDateString('en-CA');
+    };
+    var handleOnDateChange = function (date) {
+        setDate(date);
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(formattedDate(date));
+        setAnchor(null);
+        onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
+    };
+    return (_jsxs(Container, __assign({ disabled: disabled, id: 'container-calendar' }, { children: [_jsx(InputFieldStyled, { endAdornment: _jsx(ArrowIcon, __assign({ disabled: disabled }, { children: disabled ? '' : _jsx(ExpandIcon, { anchorEl: !!anchor }) })), value: date ? formattedDate(date) : '', placeholder: 'YYYY-MM-DD', onClick: function (e) {
+                    if (!disabled)
+                        toggleCalender(e);
+                }, startAdornment: calenderIcon, disabled: !disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: !!anchor }, { children: [_jsx(Calendar, __assign({}, rest, { value: date, calendarType: 'Hebrew', onChange: handleOnDateChange, locale: rest.locale, maxDate: rest.maxDate || defaultMax, minDate: rest.minDate || defaultMin })), _jsx(Divider, {})] }))] })));
+};
+export default memo(DatePicker);

package/build/components/DatePicker/customStyle.css

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

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

@@ -0,0 +1,3 @@
+import DatePicker, { DatePickerProps } from './DatePicker';
+export type { DatePickerProps };
+export default DatePicker;

package/build/components/DatePicker/index.js

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