@tap-payments/auth-jsconnect 1.0.2 → 1.0.5

package/build/components/SimpleList/SimpleList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ListProps } from '@mui/material/List';
 import { ListItemProps } from '@mui/material/ListItem';
 export interface SimpleListProps<T> extends ListProps {
@@ -6,5 +6,13 @@ export interface SimpleListProps<T> extends ListProps {
     listItemProps?: ListItemProps;
     onSelectItem: (item: T) => void;
     renderItem: (item: T) => React.ReactElement;
+    searchKeyPath?: string;
 }
-export default function SimpleList<T>({ list, listItemProps, onSelectItem, renderItem, children, style, ...rest }: SimpleListProps<T>): JSX.Element;
+declare function SimpleList<T>({ list, listItemProps, onSelectItem, renderItem, children, searchKeyPath, ...rest }: SimpleListProps<T>): JSX.Element;
+declare namespace SimpleList {
+    var defaultProps: {
+        searchKeyPath: string;
+    };
+}
+declare const _default: typeof SimpleList;
+export default _default;

package/build/components/SimpleList/SimpleList.js

@@ -20,32 +20,40 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import * as React from 'react';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
-import { styled, useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-var TapList = styled(List)(function (_a) {
+import { styled } from '@mui/material/styles';
+import get from 'lodash-es/get';
+import { useEventListener } from '../../hooks';
+var ListStyled = styled(List)(function (_a) {
+    var _b;
     var theme = _a.theme;
-    return ({
-        overflowY: 'auto',
-        listStyle: 'none',
-        paddingTop: theme.spacing(2.125),
-        height: '100%',
-        '&::-webkit-scrollbar': {
+    return (_b = {
+            overflowY: 'auto',
+            listStyle: 'none',
+            paddingTop: theme.spacing(2.125),
+            height: theme.spacing(40)
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            height: "calc(100vh - ".concat(theme.spacing(34.875), ")")
+        },
+        _b['&::-webkit-scrollbar'] = {
             width: '0px'
         },
-        '&::-webkit-scrollbar-track': {
+        _b['&::-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': {
+        _b['&::-webkit-scrollbar-thumb'] = {
             backgroundColor: 'rgba(0,0,0,.1)',
             outline: '1px solid slategrey'
-        }
-    });
+        },
+        _b);
 });
-var TapListItem = styled(ListItem)(function (_a) {
+var ListItemStyled = styled(ListItem)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
@@ -57,15 +65,39 @@ var TapListItem = styled(ListItem)(function (_a) {
         justifyContent: 'space-between'
     });
 });
-export default function SimpleList(_a) {
-    var list = _a.list, listItemProps = _a.listItemProps, onSelectItem = _a.onSelectItem, renderItem = _a.renderItem, children = _a.children, style = _a.style, rest = __rest(_a, ["list", "listItemProps", "onSelectItem", "renderItem", "children", "style"]);
-    var theme = useTheme();
-    var matches = useMediaQuery(theme.breakpoints.down('sm'));
-    return (React.createElement(TapList, __assign({}, rest, { style: __assign({ height: matches ? "calc(100vh - ".concat(theme.spacing(34.875), ")") : theme.spacing(40) }, style) }), children ||
-        (list || []).map(function (item, idx) {
-            return (React.createElement(TapListItem, __assign({}, listItemProps, { onClick: function () {
-                    onSelectItem(item);
-                }, disableGutters: true, key: idx }), renderItem(item)));
-        })));
+function SimpleList(_a) {
+    var list = _a.list, listItemProps = _a.listItemProps, onSelectItem = _a.onSelectItem, renderItem = _a.renderItem, children = _a.children, searchKeyPath = _a.searchKeyPath, rest = __rest(_a, ["list", "listItemProps", "onSelectItem", "renderItem", "children", "searchKeyPath"]);
+    var _b = React.useState([]), items = _b[0], setItems = _b[1];
+    React.useEffect(function () {
+        setItems(list);
+    }, [list]);
+    var filterItems = function (arr, searchKey) {
+        return arr.filter(function (item) {
+            var searchValue = get(item, searchKeyPath || '') || '';
+            return searchValue.charAt(0).toLowerCase() === searchKey.charAt(searchKey.length - 1).toLowerCase();
+        });
+    };
+    var onKeySearch = function (_a) {
+        var code = _a.code;
+        if (code) {
+            var filteredArr = filterItems(items, code);
+            if (filteredArr.length === 0 || code === 'Backspace')
+                setItems(list);
+            else
+                setItems(filteredArr);
+        }
+    };
+    if (searchKeyPath)
+        useEventListener('keydown', onKeySearch);
+    return (_jsx(ListStyled, __assign({}, rest, { children: children ||
+            items.map(function (item, idx) {
+                return (_createElement(ListItemStyled, __assign({}, listItemProps, { onClick: function () {
+                        onSelectItem(item);
+                    }, disableGutters: true, key: idx }), renderItem(item)));
+            }) })));
 }
-//# sourceMappingURL=SimpleList.js.map
+SimpleList.defaultProps = {
+    searchKeyPath: ''
+};
+var typedMemo = React.memo;
+export default typedMemo(SimpleList);

package/build/components/SimpleList/index.js

@@ -1,3 +1,2 @@
 import SimpleList from './SimpleList';
 export default SimpleList;
-//# sourceMappingURL=index.js.map

package/build/components/Slide/Slide.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SlideProps as MUISlideProps } from '@mui/material/Slide';
+export interface SlideProps extends MUISlideProps {
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<SlideProps, "className" | "style" | "color" | "direction" | "translate" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "in" | "mountOnEnter" | "unmountOnExit" | "timeout" | "easing" | "addEndListener" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "appear" | "enter" | "exit" | "container"> & React.RefAttributes<unknown>>>;
+export default _default;

package/build/components/Slide/Slide.js

@@ -0,0 +1,30 @@
+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 React from 'react';
+import MUISlide from '@mui/material/Slide';
+var Slide = React.forwardRef(function (_a, ref) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (_jsx(MUISlide, __assign({ ref: ref, direction: 'up', timeout: { exit: 300, appear: 500, enter: 300 }, mountOnEnter: true, unmountOnExit: true }, rest, { children: children })));
+});
+export default React.memo(Slide);

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

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

package/build/components/Slide/index.js

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

package/build/components/SocialMediaGroup/SocialMediaGroup.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { SocialMediaTypes } from '../../@types';
+import { ToggleButtonGroupProps } from '../ToggleButtonGroup';
+import { ToggleButtonProps } from '../ToggleButton';
+export interface SocialMediaGroupProps extends ToggleButtonGroupProps {
+    toggleButtonProps?: ToggleButtonProps;
+}
+declare const _default: React.MemoExoticComponent<{
+    ({ children, defaultValue, onChange, toggleButtonProps, ...rest }: SocialMediaGroupProps): JSX.Element;
+    defaultProps: {
+        defaultValue: SocialMediaTypes;
+    };
+}>;
+export default _default;

package/build/components/SocialMediaGroup/SocialMediaGroup.js

@@ -0,0 +1,86 @@
+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 { styled } from '@mui/material/styles';
+import { ICONS_NAMES } from '../../constants';
+import { SocialMediaTypes } from '../../@types';
+import ToggleButtonGroup from '../ToggleButtonGroup';
+import ToggleButton from '../ToggleButton';
+import Icon from '../Icon';
+var WebToggleButton = styled(ToggleButton, {
+    shouldForwardProp: function (prop) { return prop !== 'isActive'; }
+})(function (_a) {
+    var theme = _a.theme, isActive = _a.isActive;
+    return ({
+        borderBottom: isActive ? "".concat(theme.spacing(0.25), " solid #3A4154") : 'none'
+    });
+});
+var TwitterToggleButton = styled(ToggleButton, {
+    shouldForwardProp: function (prop) { return prop !== 'isActive'; }
+})(function (_a) {
+    var theme = _a.theme, isActive = _a.isActive;
+    return ({
+        borderBottom: isActive ? "".concat(theme.spacing(0.25), " solid #1DA1F2") : 'none'
+    });
+});
+var InstagramToggleButton = styled(ToggleButton, {
+    shouldForwardProp: function (prop) { return prop !== 'isActive'; }
+})(function (_a) {
+    var theme = _a.theme, isActive = _a.isActive;
+    return ({
+        borderBottom: isActive ? "".concat(theme.spacing(0.25), " solid #8A3AB9") : 'none'
+    });
+});
+var WebTwitterIconStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(5.5),
+        height: theme.spacing(5.5)
+    });
+});
+var InstagramIconStyled = styled(Icon, {
+    shouldForwardProp: function (prop) { return prop !== 'isActive'; }
+})(function (_a) {
+    var theme = _a.theme, isActive = _a.isActive;
+    return ({
+        width: isActive ? '100%' : theme.spacing(5.5),
+        height: isActive ? '100%' : theme.spacing(5.5)
+    });
+});
+var SocialMediaGroupComponent = function (_a) {
+    var children = _a.children, defaultValue = _a.defaultValue, onChange = _a.onChange, toggleButtonProps = _a.toggleButtonProps, rest = __rest(_a, ["children", "defaultValue", "onChange", "toggleButtonProps"]);
+    var _b = React.useState(defaultValue), socialMediaType = _b[0], setSocialMediaType = _b[1];
+    var isWebActive = socialMediaType === SocialMediaTypes.WEB;
+    var isTwitterActive = socialMediaType === SocialMediaTypes.TWITTER;
+    var isInstagramActive = socialMediaType === SocialMediaTypes.INSTAGRAM;
+    var handleOnChange = function (event, value) {
+        setSocialMediaType(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
+    };
+    return (_jsxs(ToggleButtonGroup, __assign({ value: socialMediaType, exclusive: true }, rest, { onChange: handleOnChange }, { children: [children, " ||", _jsx(WebToggleButton, __assign({ isActive: isWebActive }, toggleButtonProps, { value: SocialMediaTypes.WEB }, { children: _jsx(WebTwitterIconStyled, { src: isWebActive ? ICONS_NAMES.WEB_ACTIVE_ICON : ICONS_NAMES.WEB_ICON }) })), _jsx(TwitterToggleButton, __assign({ isActive: isTwitterActive }, toggleButtonProps, { value: SocialMediaTypes.TWITTER }, { children: _jsx(WebTwitterIconStyled, { src: isTwitterActive ? ICONS_NAMES.TWITTER_ACTIVE_ICON : ICONS_NAMES.TWITTER_ICON }) })), _jsx(InstagramToggleButton, __assign({ isActive: isInstagramActive }, toggleButtonProps, { value: SocialMediaTypes.INSTAGRAM }, { children: _jsx(InstagramIconStyled, { isActive: isInstagramActive, src: isInstagramActive ? ICONS_NAMES.INSTAGRAM_ACTIVE_ICON : ICONS_NAMES.INSTAGRAM_ICON }) }))] })));
+};
+export default React.memo(SocialMediaGroupComponent);
+SocialMediaGroupComponent.defaultProps = {
+    defaultValue: SocialMediaTypes.WEB
+};

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

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

package/build/components/SocialMediaGroup/index.js

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

package/build/components/Text/Text.js

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
@@ -29,7 +30,6 @@ var TextStyled = styled(Typography)(function (_a) {
 });
 var Text = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return React.createElement(TextStyled, __assign({}, props), children);
+    return _jsx(TextStyled, __assign({}, props, { children: children }));
 };
 export default React.memo(Text);
-//# sourceMappingURL=Text.js.map

package/build/components/Text/index.js

@@ -1,3 +1,2 @@
 import Text from './Text';
 export default Text;
-//# sourceMappingURL=index.js.map

package/build/components/ToggleButton/ToggleButton.d.ts

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

package/build/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,44 @@
+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 ToggleButton from '@mui/material/ToggleButton';
+var ToggleButtonStyled = styled(ToggleButton)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(5.5),
+        height: theme.spacing(5.5),
+        border: 'none',
+        borderRadius: theme.spacing(0),
+        background: 'none',
+        '&.Mui-selected': {
+            background: 'none'
+        }
+    });
+});
+var ToggleButtonComponent = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (_jsx(ToggleButtonStyled, __assign({ disableFocusRipple: true, disableRipple: true, disableTouchRipple: true }, props, { children: children })));
+};
+export default React.memo(ToggleButtonComponent);

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

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

package/build/components/ToggleButton/index.js

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

package/build/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

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

package/build/components/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,37 @@
+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, alpha } from '@mui/material/styles';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+var ToggleButtonGroupStyled = styled(ToggleButtonGroup)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        background: alpha(theme.palette.secondary.main, 0.1)
+    });
+});
+var ToggleButtonGroupComponent = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return _jsx(ToggleButtonGroupStyled, __assign({}, props, { children: children }));
+};
+export default React.memo(ToggleButtonGroupComponent);

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

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

package/build/components/ToggleButtonGroup/index.js

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

package/build/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TooltipProps } from '@mui/material/Tooltip';
+export type { TooltipProps };
+declare const _default: React.MemoExoticComponent<{
+    ({ children, ...rest }: TooltipProps): JSX.Element;
+    defaultProps: {
+        placement: string;
+    };
+}>;
+export default _default;

package/build/components/Tooltip/Tooltip.js

@@ -0,0 +1,44 @@
+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, alpha } from '@mui/material/styles';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+var StyledTooltip = styled(function (_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(Tooltip, __assign({}, props, { classes: { popper: className } })));
+})(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {},
+        _b["& .".concat(tooltipClasses.tooltip)] = __assign(__assign({ color: alpha(theme.palette.text.primary, 0.5), width: 'fit-content', maxHeight: 'fit-content' }, theme.typography.body2), { fontWeight: theme.typography.fontWeightLight, backgroundColor: theme.palette.secondary.light, border: "1px solid ".concat(alpha(theme.palette.divider, 0.8)) }),
+        _b);
+});
+var TooltipComponent = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return _jsx(StyledTooltip, __assign({}, rest, { children: children }));
+};
+export default React.memo(TooltipComponent);
+TooltipComponent.defaultProps = {
+    placement: 'bottom-end'
+};

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

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

package/build/components/Tooltip/index.js

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

package/build/components/Warning/Warning.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { BoxProps } from '@mui/material/Box';
 export interface WarningProps extends BoxProps {
-    children: string;
+    children?: string;
     warningType?: 'alert' | 'error';
 }
 declare const _default: React.MemoExoticComponent<{
     ({ children, warningType, ...rest }: WarningProps): JSX.Element;
     defaultProps: {
         warningType: string;
+        children: string;
     };
 }>;
 export default _default;

package/build/components/Warning/Warning.js

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
@@ -49,10 +50,10 @@ var AlertStyled = styled(Box)(function (_a) {
 });
 var WarningComponent = function (_a) {
     var children = _a.children, warningType = _a.warningType, rest = __rest(_a, ["children", "warningType"]);
-    return warningType === 'alert' ? (React.createElement(AlertStyled, __assign({}, rest), children)) : (React.createElement(ErrorStyled, __assign({}, rest), children));
+    return warningType === 'alert' ? (_jsx(AlertStyled, __assign({}, rest, { children: children }))) : (_jsx(ErrorStyled, __assign({}, rest, { children: children })));
 };
 WarningComponent.defaultProps = {
-    warningType: 'error'
+    warningType: 'error',
+    children: 'default warning message'
 };
 export default React.memo(WarningComponent);
-//# sourceMappingURL=Warning.js.map

package/build/components/Warning/index.js

@@ -1,3 +1,2 @@
 import Warning from './Warning';
 export default Warning;
-//# sourceMappingURL=index.js.map

package/build/constants/app.d.ts

@@ -1,9 +1,10 @@
+import { ScreenStepNavigation } from '../@types';
 export declare const LOCAL_STORAGE_KEYS: {
     themeMode: string;
     languageMode: string;
 };
-export declare const LANGUAGE_MODE: {
-    AR: string;
-    EN: string;
+export declare const EXTERNAL_LINKS: {
+    TOS_EN: string;
+    TOS_AR: string;
 };
-export declare const ID_NUMBER_LENGTH = 10;
+export declare const CONNECT_SCREENS_NAVIGATION: Array<ScreenStepNavigation>;

package/build/constants/app.js

@@ -2,9 +2,39 @@ export var LOCAL_STORAGE_KEYS = {
     themeMode: 'themeMode',
     languageMode: 'languageMode'
 };
-export var LANGUAGE_MODE = {
-    AR: 'ar',
-    EN: 'en'
+export var EXTERNAL_LINKS = {
+    TOS_EN: 'https://www.tap.company/sa/en/terms-conditions',
+    TOS_AR: 'https://www.tap.company/sa/ar/terms-conditions'
 };
-export var ID_NUMBER_LENGTH = 10;
-//# sourceMappingURL=app.js.map
+export var CONNECT_SCREENS_NAVIGATION = [
+    {
+        name: 'CONNECT_MID_STEP',
+        next: 'CONNECT_OTP_STEP',
+        prev: '',
+        order: 1
+    },
+    {
+        name: 'CONNECT_OTP_STEP',
+        next: 'CONNECT_INDIVIDUAL_STEP',
+        prev: 'CONNECT_MID_STEP',
+        order: 2
+    },
+    {
+        name: 'CONNECT_INDIVIDUAL_STEP',
+        next: 'CONNECT_MERCHANT_INFO_STEP',
+        prev: 'CONNECT_OTP_STEP',
+        order: 3
+    },
+    {
+        name: 'CONNECT_MERCHANT_INFO_STEP',
+        next: 'CONNECT_THANK_YOU_STEP',
+        prev: 'CONNECT_INDIVIDUAL_STEP',
+        order: 4
+    },
+    {
+        name: 'CONNECT_THANK_YOU_STEP',
+        next: '',
+        prev: 'CONNECT_MERCHANT_INFO_STEP',
+        order: 5
+    }
+];

package/build/constants/assets.d.ts

@@ -15,9 +15,16 @@ export declare const ICONS_NAMES: {
     DOWN_ARROW_ICON_DARK: string;
     CLEAR_ICON: string;
     LOGO_ICON: string;
+    WEB_ICON: string;
+    WEB_ACTIVE_ICON: string;
+    TWITTER_ICON: string;
+    TWITTER_ACTIVE_ICON: string;
+    INSTAGRAM_ICON: string;
+    INSTAGRAM_ACTIVE_ICON: string;
     TAP_EN: string;
     TAP_AR: string;
     ID_IMAGE: string;
     MOBILE_IMAGE: string;
     WHITE_ARROW: string;
+    SUCCESS: string;
 };