@tap-payments/auth-jsconnect 2.11.15-development → 2.11.16-development

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DialogEdgeFormat, MerchantInfo } from '../../@types';
+export interface AnimationFlowProps {
+    open: boolean;
+    children: React.ReactNode;
+    isTapOrigin?: boolean;
+    type?: 'PUPOP' | 'BOTTOMSHEET' | 'CONTENT';
+    breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    loading?: boolean;
+    error?: string | null;
+    screenId?: string;
+    animationType?: 'slide' | 'fade' | 'collapse';
+    onClose?: () => void;
+    onConfirm?: () => void;
+    pointerEvents?: 'auto' | 'none';
+    merchantInfo?: MerchantInfo;
+    isMaturityExpress?: boolean;
+    animationDirection?: 'left' | 'right' | 'up' | 'down';
+    loaderColor?: string;
+    dialogEdgeFormat?: DialogEdgeFormat;
+    features?: {
+        poweredBy?: boolean;
+        merchantLogo?: boolean;
+        switchLanguage?: boolean;
+        overlay?: boolean;
+        loaderOverlay?: boolean;
+        tapTextLogo?: boolean;
+    };
+}
+export default function AnimationFlow({ open, children, breakpoint, type, loading, error, isTapOrigin, screenId, animationType, onClose, onConfirm, pointerEvents, merchantInfo, isMaturityExpress, animationDirection, loaderColor, dialogEdgeFormat, features }: AnimationFlowProps): JSX.Element;

package/build/components/AnimationFlow/AnimationFlow.js

@@ -0,0 +1,45 @@
+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 { useScreen } from '../../hooks';
+import Fade from '@mui/material/Fade';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Dialog from './Dialog';
+import BottomSheet from './BottomSheet';
+import Loader from './Loader';
+import Error from './Error';
+var BoxStyled = styled(Box)(function () { return ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+}); });
+export default function AnimationFlow(_a) {
+    var open = _a.open, children = _a.children, breakpoint = _a.breakpoint, type = _a.type, loading = _a.loading, error = _a.error, isTapOrigin = _a.isTapOrigin, screenId = _a.screenId, animationType = _a.animationType, onClose = _a.onClose, onConfirm = _a.onConfirm, _b = _a.pointerEvents, pointerEvents = _b === void 0 ? 'auto' : _b, merchantInfo = _a.merchantInfo, isMaturityExpress = _a.isMaturityExpress, animationDirection = _a.animationDirection, loaderColor = _a.loaderColor, dialogEdgeFormat = _a.dialogEdgeFormat, features = _a.features;
+    var small = useScreen(breakpoint).small;
+    if (loading) {
+        return _jsx(Loader, { color: loaderColor, hideLoaderOverlay: type === 'CONTENT' ? true : (features === null || features === void 0 ? void 0 : features.loaderOverlay) === false });
+    }
+    if (error) {
+        return _jsx(Error, { error: error });
+    }
+    if (type === 'CONTENT') {
+        return (_jsx(Fade, __assign({ in: true }, { children: _jsx(BoxStyled, { children: children }) })));
+    }
+    if (type === 'PUPOP') {
+        return (_jsx(Dialog, __assign({ pointerEvents: pointerEvents, onClose: onClose, onConfirm: onConfirm, open: open, isTapOrigin: isTapOrigin, animationType: animationType, merchantInfo: merchantInfo, isMaturityExpress: isMaturityExpress, hideTextLogo: (features === null || features === void 0 ? void 0 : features.tapTextLogo) === false, hideLanguage: (features === null || features === void 0 ? void 0 : features.switchLanguage) === false, hidePoweredBy: (features === null || features === void 0 ? void 0 : features.poweredBy) === false, hideMerchantLogo: (features === null || features === void 0 ? void 0 : features.merchantLogo) === false, animationDirection: animationDirection, dialogEdgeFormat: dialogEdgeFormat }, { children: children })));
+    }
+    if (type === 'BOTTOMSHEET') {
+        return (_jsx(BottomSheet, __assign({ pointerEvents: pointerEvents, open: open, onClose: onClose, isMaturityExpress: isMaturityExpress, merchantInfo: merchantInfo, hideMerchantLogo: (features === null || features === void 0 ? void 0 : features.merchantLogo) === false, hideFooter: (features === null || features === void 0 ? void 0 : features.switchLanguage) === false, hidePoweredBy: (features === null || features === void 0 ? void 0 : features.poweredBy) === false, dialogEdgeFormat: dialogEdgeFormat }, { children: children })));
+    }
+    return small ? (_jsx(BottomSheet, __assign({ pointerEvents: pointerEvents, open: open, onClose: onClose, screenId: screenId, isMaturityExpress: isMaturityExpress, merchantInfo: merchantInfo, hideMerchantLogo: (features === null || features === void 0 ? void 0 : features.merchantLogo) === false, hideFooter: (features === null || features === void 0 ? void 0 : features.switchLanguage) === false, hidePoweredBy: (features === null || features === void 0 ? void 0 : features.poweredBy) === false, dialogEdgeFormat: dialogEdgeFormat }, { children: children }))) : (_jsx(Dialog, __assign({ pointerEvents: pointerEvents, onClose: onClose, onConfirm: onConfirm, open: open, isTapOrigin: isTapOrigin, animationType: animationType, merchantInfo: merchantInfo, isMaturityExpress: isMaturityExpress, hideTextLogo: (features === null || features === void 0 ? void 0 : features.tapTextLogo) === false, hideLanguage: (features === null || features === void 0 ? void 0 : features.switchLanguage) === false, hidePoweredBy: (features === null || features === void 0 ? void 0 : features.poweredBy) === false, hideMerchantLogo: (features === null || features === void 0 ? void 0 : features.merchantLogo) === false, animationDirection: animationDirection, dialogEdgeFormat: dialogEdgeFormat }, { children: children })));
+}

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { BottomSheetProps as MainBottomSheetProps } from 'react-spring-bottom-sheet';
+import 'react-spring-bottom-sheet/dist/style.css';
+import { DialogEdgeFormat, MerchantInfo } from '../../@types';
+export interface BottomSheetProps extends MainBottomSheetProps {
+    children: React.ReactNode;
+    open: boolean;
+    screenId?: string;
+    pointerEvents?: 'none' | 'auto';
+    isMaturityExpress?: boolean;
+    merchantInfo?: MerchantInfo;
+    hideFooter?: boolean;
+    hidePoweredBy?: boolean;
+    hideMerchantLogo?: boolean;
+    dialogEdgeFormat?: DialogEdgeFormat;
+    onClose?: () => void;
+}
+declare const _default: React.MemoExoticComponent<({ open, children, screenId, pointerEvents, isMaturityExpress, merchantInfo, hideFooter, hideMerchantLogo, dialogEdgeFormat, hidePoweredBy, onClose, ...rest }: BottomSheetProps) => JSX.Element>;
+export default _default;

package/build/components/AnimationFlow/BottomSheet.js

@@ -0,0 +1,139 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { BottomSheet } from 'react-spring-bottom-sheet';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import 'react-spring-bottom-sheet/dist/style.css';
+import { ICONS_NAMES } from '../../constants';
+import { useLanguage } from '../../hooks';
+import Icon from '../Icon';
+import { DialogEdgeFormat } from '../../@types';
+import { CustomFooter, PoweredByFooter } from '../../features/shared/Footer';
+import LogoBadge from '../LogoBadge';
+var LanguageFooterStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        top: theme.spacing(2.5),
+        position: 'fixed',
+        alignItems: 'center',
+        width: '100%',
+        cursor: 'pointer',
+        zIndex: 99999
+    });
+});
+var BottomSheetStyled = styled(BottomSheet, {
+    shouldForwardProp: function (prop) { return !['isMaturityExpress', 'languageBarHeight', 'dialogEdgeFormat', 'showPoweredBy'].includes(prop.toString()); }
+})(function (_a) {
+    var theme = _a.theme, isMaturityExpress = _a.isMaturityExpress, languageBarHeight = _a.languageBarHeight, dialogEdgeFormat = _a.dialogEdgeFormat, showPoweredBy = _a.showPoweredBy;
+    return ({
+        '[data-rsbs-header]:before': __assign({ width: '75px', height: '5px' }, (isMaturityExpress && { width: '0px', height: '0px' })),
+        '[data-rsbs-backdrop]': {
+            backgroundColor: 'transparent'
+        },
+        '[data-rsbs-header]': __assign({ position: 'absolute', width: '100vw' }, (isMaturityExpress && { display: 'none' })),
+        '[data-rsbs-overlay]': __assign(__assign({ backgroundColor: theme.palette.background.paper, zIndex: 9999, maxHeight: "calc(100vh - ".concat(languageBarHeight, "px)"), borderTopLeftRadius: theme.spacing(1.5), borderTopRightRadius: theme.spacing(1.5) }, (isMaturityExpress && __assign(__assign({}, (showPoweredBy && {
+            marginBottom: theme.spacing(5.625)
+        })), { paddingTop: theme.spacing(5) }))), (dialogEdgeFormat === DialogEdgeFormat.STRAIGHT && { borderTopLeftRadius: theme.spacing(0), borderTopRightRadius: theme.spacing(0) })),
+        '[data-rsbs-scroll]': {
+            '&::-webkit-scrollbar': {
+                width: '0px'
+            },
+            '&::-webkit-scrollbar-track': {
+                boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+                webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'
+            },
+            '&::-webkit-scrollbar-thumb': {
+                backgroundColor: 'rgba(0,0,0,.1)',
+                outline: '1px solid slategrey'
+            }
+        }
+    });
+});
+var FooterStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ bottom: theme.spacing(-5.625), position: 'fixed', height: theme.spacing(5.625), display: 'flex' }, theme.typography.caption), { justifyContent: 'center', alignItems: 'center', width: '100vw', background: '#E6E7E9', borderTop: '1px solid rgba(156, 160, 169, 0.3)' }));
+});
+var CloseIconStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(3.75),
+        height: theme.spacing(3.75),
+        cursor: 'pointer'
+    });
+});
+var CloseBox = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'end',
+        marginBlockStart: theme.spacing(2),
+        marginInlineEnd: theme.spacing(2),
+        direction: theme.direction,
+        position: 'absolute',
+        right: 0,
+        left: 0,
+        zIndex: 9999,
+        top: 0
+    });
+});
+var BottomSheetComponent = function (_a) {
+    var open = _a.open, children = _a.children, screenId = _a.screenId, _b = _a.pointerEvents, pointerEvents = _b === void 0 ? 'auto' : _b, isMaturityExpress = _a.isMaturityExpress, merchantInfo = _a.merchantInfo, hideFooter = _a.hideFooter, hideMerchantLogo = _a.hideMerchantLogo, dialogEdgeFormat = _a.dialogEdgeFormat, hidePoweredBy = _a.hidePoweredBy, onClose = _a.onClose, rest = __rest(_a, ["open", "children", "screenId", "pointerEvents", "isMaturityExpress", "merchantInfo", "hideFooter", "hideMerchantLogo", "dialogEdgeFormat", "hidePoweredBy", "onClose"]);
+    var sheetRef = React.useRef(null);
+    var isAr = useLanguage().isAr;
+    var logo = (merchantInfo || {}).logo;
+    var handleOnCloseButton = function () {
+        onClose && onClose();
+    };
+    var getLanguageBarHeight = function () {
+        return isMaturityExpress && !hideFooter ? 150 : 70;
+    };
+    var getMinHeight = function (maxHeight) {
+        var el = document.getElementById('main-feature-container');
+        var footer = document.getElementById('bottom-sheet-powered_by_footer');
+        var height = el ? el.clientHeight : 0;
+        var footerHeight = 0;
+        if (footer)
+            footerHeight = footer.clientHeight + 20;
+        else if (hidePoweredBy && isMaturityExpress)
+            footerHeight = 40;
+        return (height || maxHeight * 0.7) + footerHeight;
+    };
+    React.useEffect(function () {
+        if (sheetRef.current && screenId) {
+            setTimeout(function () {
+                var _a, _b;
+                (_b = (_a = sheetRef === null || sheetRef === void 0 ? void 0 : sheetRef.current) === null || _a === void 0 ? void 0 : _a.snapTo) === null || _b === void 0 ? void 0 : _b.call(_a, function (_a) {
+                    var maxHeight = _a.maxHeight;
+                    return getMinHeight(maxHeight);
+                });
+            }, 500);
+        }
+    }, [screenId]);
+    return (_jsxs(BottomSheetStyled, __assign({ languageBarHeight: getLanguageBarHeight(), dialogEdgeFormat: dialogEdgeFormat, sibling: hideFooter ? (_jsx(_Fragment, {})) : (open && (_jsx(LanguageFooterStyled, { children: _jsx(CustomFooter, {}) }))), isMaturityExpress: isMaturityExpress, showPoweredBy: !hidePoweredBy, sx: { pointerEvents: pointerEvents }, ref: sheetRef, open: open, snapPoints: function (_a) {
+            var maxHeight = _a.maxHeight;
+            return [getMinHeight(maxHeight), maxHeight * 0.95];
+        } }, rest, { children: [isMaturityExpress && !hideMerchantLogo && (_jsx(LogoBadge, { src: isMaturityExpress ? logo || ICONS_NAMES.LOGO_ICON : ICONS_NAMES.LOGO_ICON })), onClose && (_jsx(CloseBox, __assign({ id: 'close-container' }, { children: _jsx(CloseIconStyled, { src: ICONS_NAMES.CLOSE_ICON, onClick: handleOnCloseButton }) }))), children, isMaturityExpress && !hidePoweredBy && (_jsx(FooterStyled, { children: _jsx(PoweredByFooter, { id: 'bottom-sheet-powered_by_footer', sx: { margin: '0px' }, textSx: { color: 'rgba(63, 66, 77, 0.6)' }, icon: isAr ? ICONS_NAMES.LOGO_WITH_NAME_DARK_AR_ICON : ICONS_NAMES.LOGO_WITH_NAME_DARK_EN_ICON }) }))] })));
+};
+export default React.memo(BottomSheetComponent);

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DialogProps as MUIDialogProps } from '@mui/material/Dialog';
+import { SxProps, Theme } from '@mui/material/styles';
+import { DialogEdgeFormat, MerchantInfo } from '../../@types';
+export interface DialogProps extends MUIDialogProps {
+    open: boolean;
+    isTapOrigin?: boolean;
+    children: React.ReactNode;
+    transitionDuration?: number;
+    animationType?: 'slide' | 'fade' | 'collapse';
+    onClose?: () => void;
+    onConfirm?: () => void;
+    pointerEvents?: 'none' | 'auto';
+    merchantInfo?: MerchantInfo;
+    isMaturityExpress?: boolean;
+    hideTextLogo?: boolean;
+    hideLanguage?: boolean;
+    hidePoweredBy?: boolean;
+    hideMerchantLogo?: boolean;
+    animationDirection?: 'left' | 'right' | 'up' | 'down';
+    showAsContent?: boolean;
+    sx?: SxProps<Theme>;
+    dialogEdgeFormat?: DialogEdgeFormat;
+}
+declare const _default: React.MemoExoticComponent<({ open, children, transitionDuration, isTapOrigin, animationType, onClose, onConfirm, pointerEvents, merchantInfo, isMaturityExpress, hideTextLogo, hideLanguage, hidePoweredBy, hideMerchantLogo, animationDirection, sx, dialogEdgeFormat, ...rest }: DialogProps) => JSX.Element>;
+export default _default;

package/build/components/AnimationFlow/Dialog.js

@@ -0,0 +1,132 @@
+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 * as React from 'react';
+import MuiDialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import { styled, useTheme } from '@mui/material/styles';
+import { DIALOG_ID, ICONS_NAMES } from '../../constants';
+import { useLanguage } from '../../hooks';
+import { DialogEdgeFormat } from '../../@types';
+import DialogContainer from '../../features/shared/Dialog';
+import { CustomFooter, PoweredByFooter } from '../../features/shared/Footer';
+import Slide from '../Slide';
+import LogoBadge from '../LogoBadge';
+import Icon from '../Icon';
+import Collapse from '../Collapse';
+var Transition = React.forwardRef(function Transition(props, ref) {
+    return _jsx(Slide, __assign({ direction: 'up', ref: ref }, props));
+});
+var PaperStyled = styled(Paper)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        boxShadow: theme.shadows[1],
+        borderRadius: theme.spacing(1.5),
+        backgroundColor: theme.palette.background.paper,
+        color: theme.palette.text.primary,
+        margin: "".concat(theme.spacing(5, 4, 5, 4), " !important"),
+        maxHeight: "calc(100% - ".concat(theme.spacing(10), ") !important"),
+        width: theme.spacing(46.875),
+        maxWidth: theme.spacing(46.875)
+    });
+});
+var DialogContentStyled = styled(DialogContent, { shouldForwardProp: function (prop) { return prop !== 'isTapOrigin'; } })(function (_a) {
+    var theme = _a.theme, isTapOrigin = _a.isTapOrigin;
+    return ({
+        padding: theme.spacing(0),
+        marginTop: isTapOrigin ? theme.spacing(3.75) : theme.spacing(4.375),
+        width: '100%',
+        '&::-webkit-scrollbar': {
+            width: '0px'
+        },
+        '&::-webkit-scrollbar-track': {
+            boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+            webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgba(0,0,0,.1)',
+            outline: '1px solid slategrey'
+        }
+    });
+});
+var LogoIconBoxStyled = styled(Box)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            paddingTop: theme.spacing(3.125),
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center'
+        },
+        _b[theme.transitions.create(['top'])] = {
+            duration: theme.transitions.duration.standard
+        },
+        _b);
+});
+var LogoIconStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(5.875),
+        height: '10%',
+        padding: theme.spacing(0)
+    });
+});
+var LanguageFooterStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'showLanguage'; } })(function (_a) {
+    var theme = _a.theme, showLanguage = _a.showLanguage;
+    return ({
+        position: 'fixed',
+        bottom: theme.spacing(7.5),
+        left: '50%',
+        transform: 'translateX(-50%)',
+        opacity: showLanguage ? 1 : 0,
+        transition: 'opacity 300ms'
+    });
+});
+var Dialog = function (_a) {
+    var open = _a.open, children = _a.children, transitionDuration = _a.transitionDuration, isTapOrigin = _a.isTapOrigin, _b = _a.animationType, animationType = _b === void 0 ? 'slide' : _b, onClose = _a.onClose, onConfirm = _a.onConfirm, _c = _a.pointerEvents, pointerEvents = _c === void 0 ? 'auto' : _c, merchantInfo = _a.merchantInfo, isMaturityExpress = _a.isMaturityExpress, hideTextLogo = _a.hideTextLogo, hideLanguage = _a.hideLanguage, hidePoweredBy = _a.hidePoweredBy, hideMerchantLogo = _a.hideMerchantLogo, _d = _a.animationDirection, animationDirection = _d === void 0 ? 'up' : _d, sx = _a.sx, dialogEdgeFormat = _a.dialogEdgeFormat, rest = __rest(_a, ["open", "children", "transitionDuration", "isTapOrigin", "animationType", "onClose", "onConfirm", "pointerEvents", "merchantInfo", "isMaturityExpress", "hideTextLogo", "hideLanguage", "hidePoweredBy", "hideMerchantLogo", "animationDirection", "sx", "dialogEdgeFormat"]);
+    var isAr = useLanguage().isAr;
+    var theme = useTheme();
+    var animation = {};
+    if (animationType === 'slide') {
+        Object.assign(animation, { TransitionComponent: Transition });
+    }
+    var logo = (merchantInfo || {}).logo;
+    var _e = React.useState(false), showLanguage = _e[0], setShowLanguage = _e[1];
+    React.useEffect(function () {
+        if (isMaturityExpress) {
+            setTimeout(function () {
+                setShowLanguage(true);
+            }, transitionDuration || 500);
+        }
+    }, []);
+    return (_jsxs(MuiDialog, __assign({ id: DIALOG_ID, PaperProps: {
+            elevation: 0
+        }, sx: __assign({ '& .MuiDialog-paper': __assign({ overflowY: 'visible' }, (dialogEdgeFormat === DialogEdgeFormat.STRAIGHT && { borderRadius: theme.spacing(0) })), '&.MuiDialog-root': {
+                marginBottom: isMaturityExpress && !hideLanguage ? '60px' : '0px'
+            }, '& .MuiDialog-container': {
+                outline: 'none !important'
+            }, pointerEvents: pointerEvents }, sx), hideBackdrop: true, PaperComponent: PaperStyled, open: open, transitionDuration: transitionDuration || 500, keepMounted: true, "aria-describedby": 'dialog-slide-description' }, rest, animation, (animationDirection && { TransitionProps: { direction: animationDirection } }), { children: [_jsx(DialogContainer, __assign({ isTapOrigin: isTapOrigin, onClose: onClose, onConfirm: onConfirm }, { children: _jsxs(DialogContentStyled, __assign({ isTapOrigin: isTapOrigin }, { children: [_jsxs(Collapse, __assign({ in: !isTapOrigin }, { children: [!hideMerchantLogo && _jsx(LogoBadge, { src: isMaturityExpress ? logo || ICONS_NAMES.LOGO_ICON : ICONS_NAMES.LOGO_ICON }), !isMaturityExpress && !hideTextLogo && (_jsx(LogoIconBoxStyled, { children: _jsx(LogoIconStyled, { src: isAr ? ICONS_NAMES.TAP_AR : ICONS_NAMES.TAP_EN, alt: 'tap logo' }) }))] })), children] })) })), isMaturityExpress && !hidePoweredBy ? _jsx(PoweredByFooter, {}) : !isMaturityExpress && !hideLanguage && _jsx(CustomFooter, {}), !hideLanguage && (_jsx(LanguageFooterStyled, __assign({ showLanguage: showLanguage }, { children: _jsx(CustomFooter, {}) })))] })));
+};
+export default React.memo(Dialog);

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,7 @@
+/// <reference types="react" />
+interface LoadingProps {
+    hideLoaderOverlay?: boolean;
+    color?: string;
+}
+export default function FlowLoading({ hideLoaderOverlay, color }: LoadingProps): JSX.Element;
+export {};

package/build/components/AnimationFlow/Loader.js

@@ -0,0 +1,36 @@
+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 Loader from '../Loader';
+var BoxStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'hideLoaderOverlay'; } })(function (_a) {
+    var _b;
+    var theme = _a.theme, hideLoaderOverlay = _a.hideLoaderOverlay;
+    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 = hideLoaderOverlay ? 'inherit' : 'rgba(0,0,0,0.5)',
+        _b.zIndex = 2,
+        _b);
+});
+export default function FlowLoading(_a) {
+    var hideLoaderOverlay = _a.hideLoaderOverlay, color = _a.color;
+    return (_jsx(BoxStyled, __assign({ hideLoaderOverlay: hideLoaderOverlay }, { children: _jsx(Loader, { style: { width: 60, height: 60 }, svgStyle: { width: 60, height: 60 }, innerColor: color !== null && color !== void 0 ? color : 'white', outerColor: color !== null && color !== void 0 ? color : '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,16 @@
+import React from 'react';
+import { CalendarProps } from 'react-multi-date-picker';
+import './style.css';
+export interface DatePickerProps extends CalendarProps {
+    open?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    dir?: string;
+    onDateChange?: (date: string) => void;
+    onClick?: () => void;
+    onDatePicked?: () => void;
+    isDob?: boolean;
+    isVerified?: boolean;
+}
+declare const _default: React.MemoExoticComponent<({ open, disabled, dir, readOnly, onDateChange, onClick, onDatePicked, value, isDob, isVerified, minDate, maxDate, ...rest }: DatePickerProps) => JSX.Element>;
+export default _default;

package/build/components/ArabicDatePicker/ArabicDatePicker.js

@@ -0,0 +1,116 @@
+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 Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Divider from '@mui/material/Divider';
+import Collapse from '../Collapse';
+import Icon from '../Icon';
+import { ICONS_NAMES } from '../../constants';
+import { getEighteenYearsAgo } from '../../utils';
+import { EndAdornmentExpanded } from '../../features/shared/EndAdornment';
+import Input from '../Input';
+import Text from '../Text';
+import arabic_en from './arabicEn';
+import arabic_ar from './arabicAr';
+import './style.css';
+var ContainerIcon = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: disabled ? 'auto' : 'pointer', width: theme.spacing(2), height: theme.spacing(2) }));
+});
+var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'disabled' && prop !== 'openCalender'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled, openCalender = _a.openCalender;
+    return ({
+        transition: 'min-height 0.5s',
+        cursor: disabled ? 'auto' : 'pointer',
+        opacity: disabled ? '0.6' : '1',
+        fontFamily: theme.typography.fontFamily,
+        minHeight: openCalender ? '345px' : '46px'
+    });
+});
+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',
+            cursor: disabled ? 'auto' : 'pointer'
+        }
+    });
+});
+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),
+        display: 'flex'
+    });
+});
+var DatePicker = function (_a) {
+    var _b = _a.open, open = _b === void 0 ? false : _b, disabled = _a.disabled, dir = _a.dir, readOnly = _a.readOnly, onDateChange = _a.onDateChange, onClick = _a.onClick, onDatePicked = _a.onDatePicked, value = _a.value, isDob = _a.isDob, isVerified = _a.isVerified, minDate = _a.minDate, maxDate = _a.maxDate, rest = __rest(_a, ["open", "disabled", "dir", "readOnly", "onDateChange", "onClick", "onDatePicked", "value", "isDob", "isVerified", "minDate", "maxDate"]);
+    var _c = React.useState(), date = _c[0], setDate = _c[1];
+    var _d = React.useState(null), anchor = _d[0], setAnchor = _d[1];
+    var _e = React.useState(open), openCalender = _e[0], setOpenCalender = _e[1];
+    var calenderIcon = _jsx(ContainerIcon, { disabled: disabled, src: ICONS_NAMES.SWITCH_HIJRI_CALENDER });
+    var defaultMax = new Date();
+    var defaultMin = new Date('1900-01-01');
+    var DATE_FORMAT = 'YYYY-MM-DD';
+    React.useEffect(function () {
+        if (value)
+            setDate(value);
+    }, [value]);
+    var toggleCalender = function (event) {
+        if (anchor || openCalender) {
+            onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
+            setOpenCalender(false);
+            return setAnchor(null);
+        }
+        setAnchor(event.currentTarget);
+        setOpenCalender(true);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var getEndAdornment = function () {
+        if (disabled && !isVerified)
+            return '';
+        return _jsx(EndAdornmentExpanded, { isVerified: isVerified, anchorEl: anchor });
+    };
+    var handleOnDateChange = function (date) {
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(date.toDate().toLocaleDateString('en-CA'));
+        setAnchor(null);
+        setOpenCalender(false);
+        onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
+    };
+    var formateDate = function (date) {
+        var dateObject = toDateObject(date);
+        return dateObject.convert(arabic).format(DATE_FORMAT);
+    };
+    return (_jsxs(Container, __assign({ openCalender: openCalender, disabled: disabled, id: 'arabic-container-calendar' }, { children: [_jsx(InputFieldStyled, { endAdornment: _jsx(ArrowIcon, __assign({ disabled: disabled }, { children: getEndAdornment() })), value: date ? formateDate(date) : '', placeholder: DATE_FORMAT, onClick: function (e) {
+                    if (!disabled)
+                        toggleCalender(e);
+                }, startAdornment: calenderIcon, disabled: disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: openCalender }, { children: [_jsx(Calendar, __assign({ calendar: arabic, locale: dir === 'rtl' ? arabic_ar : arabic_en, maxDate: maxDate || defaultMax, minDate: minDate || defaultMin, format: DATE_FORMAT, onChange: handleOnDateChange, value: date || (isDob ? new Date(getEighteenYearsAgo()) : undefined), className: 'custom-container' }, rest)), _jsx(Divider, {})] }))] })));
+};
+export default memo(DatePicker);

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

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