@tap-payments/auth-jsconnect 2.5.22-test → 3.0.0-test

package/build/components/FileInput/DragAndDrop.js

@@ -11,33 +11,41 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
-import { alpha, styled } from '@mui/material/styles';
-import Input from '../Input';
+import { alpha, styled, useTheme } from '@mui/material/styles';
+import Input from '../TextField';
 import Text from '../Text';
 import { useDropzone } from 'react-dropzone';
-import Icon from '../../components/Icon';
+import Icon from '../Icon';
 import { ICONS_NAMES } from '../../constants';
-import { CircularProgress } from '../../components/ProgressBar';
-import Collapse from '../../components/Collapse';
+import { CircularProgress } from '../ProgressBar';
+import Collapse from '../Collapse';
 import Fade from '@mui/material/Fade';
-var BoxStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'active'; } })(function (_a) {
-    var theme = _a.theme, active = _a.active;
-    return (__assign(__assign({ direction: theme.direction }, theme.typography.subtitle2), { color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightRegular, background: theme.palette.background.paper, paddingInline: theme.spacing(2.5), border: "2px dashed ".concat(active ? theme.palette.primary.main : alpha(theme.palette.divider, 0.8)), width: '350px', height: '158px', cursor: 'default', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: theme.spacing(2.5) }));
+import { ThemeMode } from '../../@types';
+var BoxStyled = styled(Box, { shouldForwardProp: function (prop) { return !['active', 'hasError'].includes(prop); } })(function (_a) {
+    var theme = _a.theme, active = _a.active, hasError = _a.hasError;
+    return (__assign(__assign(__assign({ direction: theme.direction }, theme.typography.subtitle2), { color: theme.palette.text.secondary, fontWeight: theme.typography.fontWeightRegular, background: theme.palette.background.paper, paddingInline: theme.spacing(2), border: "2px dashed ".concat(active ? theme.palette.primary.main : alpha(theme.palette.text.secondary, 0.3)), width: theme.spacing(40.875), minHeight: theme.spacing(12.75), cursor: 'default', display: 'flex', borderRadius: theme.spacing(1) }), (hasError && {
+        border: "1px dashed ".concat(alpha(theme.palette.warning.main, 0.3)),
+        background: alpha(theme.palette.warning.main, 0.07)
+    })));
 });
 var UploadInputStyled = styled(Input)(function () { return ({
     display: 'none'
 }); });
-var CenterBoxStyled = styled(Box)(function () { return ({
+var StartBoxStyled = styled(Box)(function () { return ({
     display: 'flex',
-    justifyContent: 'center',
+    justifyContent: 'start',
     alignItems: 'center'
 }); });
+var CenterBoxStyled = styled(StartBoxStyled)(function () { return ({
+    justifyContent: 'center'
+}); });
 var IconStyled = styled(Icon)(function (_a) {
     var theme = _a.theme;
     return ({
-        width: theme.spacing(11.25),
-        height: theme.spacing(10),
+        width: theme.spacing(6),
+        height: theme.spacing(6),
         cursor: 'pointer'
     });
 });
@@ -49,27 +57,24 @@ var DoneIconStyled = styled(Icon)(function (_a) {
         cursor: 'pointer'
     });
 });
-var VerticalCenterBox = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        justifyContent: 'center',
-        flexDirection: 'column',
-        alignItems: 'center'
-    });
-});
+var VerticalCenterBox = styled(Box)(function () { return ({
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    alignItems: 'start'
+}); });
 var DescTextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return ({
-        fontSize: theme.spacing(1.5),
-        textAlign: 'center',
+        textAlign: 'start',
         marginBlockStart: theme.spacing(1),
-        marginBlockEnd: theme.spacing(0)
+        marginBlockEnd: theme.spacing(0),
+        fontSize: theme.spacing(1.375)
     });
 });
 var SubTitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.primary.main, marginInlineStart: theme.spacing(0.5) }));
+    return (__assign({ textAlign: 'start', color: theme.palette.primary.main, marginInlineStart: theme.spacing(0.5) }, theme.typography.subtitle2));
 });
 var WarningIconStyled = styled(Icon)(function (_a) {
     var theme = _a.theme;
@@ -79,32 +84,31 @@ var WarningIconStyled = styled(Icon)(function (_a) {
         marginInline: theme.spacing(0.5)
     });
 });
-var DropFileIcon = styled(Icon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: theme.spacing(9.375),
-        height: theme.spacing(9.375),
-        zIndex: 2,
-        position: 'absolute',
-        right: 0,
-        marginInline: theme.spacing(-1.25)
-    });
-});
 var TextDoneStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return ({
         marginBlockStart: theme.spacing(1),
-        color: theme.palette.text.primary
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary
     });
 });
 var WarningContainer = styled(Box)(function (_a) {
     var theme = _a.theme;
-    return (__assign({ background: theme.palette.warning.dark, paddingBlock: theme.spacing(1.5), paddingInlineStart: theme.spacing(2.5), border: '0.5px solid', display: 'flex', justifyContent: 'space-around', borderColor: theme.palette.warning.main, color: theme.palette.warning.light, padding: theme.spacing(0.5, 1), borderRadius: theme.spacing(12.5), alignItems: 'center' }, theme.typography.caption));
+    return ({
+        flexDirection: 'row',
+        display: 'flex',
+        justifyContent: 'start',
+        color: theme.palette.warning.main,
+        alignItems: 'center',
+        marginTop: theme.spacing(1),
+        fontSize: theme.spacing(1.25)
+    });
 });
 var DragAndDrop = function (_a) {
     var title = _a.title, subTitle = _a.subTitle, description = _a.description, error = _a.error, uploadingTitle = _a.uploadingTitle, successTitle = _a.successTitle, progress = _a.progress, uploading = _a.uploading, fileExists = _a.fileExists, uploadSuccess = _a.uploadSuccess, onSuccess = _a.onSuccess, multiple = _a.multiple;
     var _b = React.useState(false), dragActive = _b[0], setDragActive = _b[1];
     var _c = React.useState(false), showDone = _c[0], setShowDone = _c[1];
+    var theme = useTheme();
+    var t = useTranslation().t;
     var _d = useDropzone({
         maxFiles: multiple ? undefined : 1,
         noKeyboard: true,
@@ -131,6 +135,6 @@ var DragAndDrop = function (_a) {
             }, 400);
         }
     }, [uploading]);
-    return (_jsx(Box, __assign({ id: 'upload-container' }, { children: _jsxs(BoxStyled, __assign({ active: dragActive }, getRootProps({ className: 'dropzone' }), { children: [_jsx(Fade, __assign({ in: (!uploading && !uploadSuccess) || !fileExists, unmountOnExit: true, timeout: 100 }, { children: _jsxs(Box, { children: [_jsx(CenterBoxStyled, { children: _jsx(IconStyled, { src: dragActive ? ICONS_NAMES.ACTIVE_UPLOAD_ICON : ICONS_NAMES.UPLOAD_ICON }) }), _jsxs(VerticalCenterBox, __assign({ sx: { marginBlockEnd: '20px' } }, { children: [_jsxs(CenterBoxStyled, { children: [_jsx(Text, __assign({ sx: { fontSize: '16px' } }, { children: title })), _jsx(SubTitleStyled, { children: subTitle })] }), _jsx(DescTextStyled, { children: description }), _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsxs(WarningContainer, { children: [_jsx(WarningIconStyled, { src: ICONS_NAMES.WARNING_ICON }), _jsx(Text, { children: error })] }) }))] })), _jsx(UploadInputStyled, { inputProps: __assign({}, getInputProps()) })] }) })), _jsx(CenterBoxStyled, { children: showDone ? (_jsxs(VerticalCenterBox, { children: [_jsx(DoneIconStyled, { src: ICONS_NAMES.DONE_ICON }), _jsx(TextDoneStyled, { children: successTitle })] })) : uploading ? (_jsxs(VerticalCenterBox, { children: [_jsx(CircularProgress, { value: progress, size: 54 }), _jsx(Text, { children: uploadingTitle })] })) : (_jsx(_Fragment, {})) })] })) })));
+    return (_jsxs(Box, __assign({ id: 'upload-container' }, { children: [_jsxs(BoxStyled, __assign({ hasError: !!error, sx: { justifyContent: (!uploading && !uploadSuccess) || !fileExists ? 'start' : 'center' }, active: dragActive }, getRootProps({ className: 'dropzone' }), { children: [_jsx(Fade, __assign({ in: (!uploading && !uploadSuccess) || !fileExists, unmountOnExit: true, timeout: 100 }, { children: _jsxs(Box, __assign({ sx: { display: 'flex', pt: 1.25, pb: 1.25 } }, { children: [_jsx(StartBoxStyled, __assign({ sx: { marginInlineEnd: theme.spacing(1.25) } }, { children: _jsx(IconStyled, { src: dragActive ? ICONS_NAMES.ACTIVE_UPLOAD_ICON : ICONS_NAMES.UPLOAD_ICON }) })), _jsxs(VerticalCenterBox, { children: [_jsxs(StartBoxStyled, { children: [_jsx(Text, __assign({ sx: __assign({}, theme.typography.subtitle2) }, { children: title })), _jsx(SubTitleStyled, { children: subTitle })] }), _jsx(DescTextStyled, { children: description })] }), _jsx(UploadInputStyled, { inputProps: __assign({}, getInputProps()) })] })) })), _jsx(CenterBoxStyled, { children: showDone ? (_jsxs(VerticalCenterBox, { children: [_jsx(DoneIconStyled, { src: ICONS_NAMES.DONE_ICON }), _jsx(TextDoneStyled, { children: successTitle })] })) : uploading ? (_jsxs(VerticalCenterBox, { children: [_jsx(CircularProgress, { value: progress, size: 54 }), _jsx(Text, { children: uploadingTitle })] })) : (_jsx(_Fragment, {})) })] })), _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsxs(WarningContainer, { children: [_jsx(WarningIconStyled, { src: ICONS_NAMES.WARNING_INFO_ICON }), error && t(error)] }) }))] })));
 };
 export default DragAndDrop;

package/build/components/Icon/Icon.js

@@ -21,6 +21,6 @@ var IconComponent = styled('img')(function (_a) {
     });
 });
 var Icon = React.forwardRef(function (props, ref) {
-    return _jsx(IconComponent, __assign({}, props, { ref: ref }));
+    return _jsx(IconComponent, __assign({ sx: props.sx }, props, { ref: ref }));
 });
 export default React.memo(Icon);

package/build/components/OTPField/OTPField.js

@@ -22,20 +22,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import OTPInput from 'react-otp-input';
+import { alpha, styled } from '@mui/material/styles';
+import { ThemeMode } from '../../@types';
 var OTPFieldStyled = styled(OTPInput)(function (_a) {
     var _b;
     var theme = _a.theme;
     return ({
-        input: __assign(__assign((_b = { borderRadius: theme.spacing(0), height: theme.spacing(4.75), color: theme.palette.text.primary, outline: 'none', border: 'none', borderLeft: theme.spacing(0), borderRight: theme.spacing(0), borderTop: theme.spacing(0), borderBottom: '1px solid ', borderColor: '#a6a6a6', textAlign: 'center', margin: '1.2%' }, _b[theme.breakpoints.down('sm')] = {
+        input: __assign(__assign((_b = { height: theme.spacing(6), color: theme.palette.secondary.main, outline: 'none', borderRadius: theme.spacing(1), border: '1px solid ', borderColor: alpha(theme.palette.text.secondary, 0.3), background: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.black : theme.palette.common.white, textAlign: 'center', margin: '1.2%' }, _b[theme.breakpoints.down('sm')] = {
             margin: '1%'
-        }, _b.background = 'transparent', _b.caretColor = theme.palette.primary.main, _b.marginInline = theme.spacing(0.6), _b), theme.typography.h6), { width: theme.spacing(5) })
+        }, _b.caretColor = theme.palette.primary.main, _b.marginInline = theme.spacing(0.6), _b), theme.typography.h6), { width: theme.spacing(5) })
     });
 });
 var OTPFieldComponent = function (_a) {
     var length = _a.length, value = _a.value, autoFocus = _a.autoFocus, isInputNum = _a.isInputNum, disabled = _a.disabled, rest = __rest(_a, ["length", "value", "autoFocus", "isInputNum", "disabled"]);
-    return (_jsx(OTPFieldStyled, __assign({ value: value, inputStyle: { width: '46px' }, numInputs: length, isDisabled: disabled, shouldAutoFocus: autoFocus, isInputNum: isInputNum }, rest)));
+    return (_jsx(OTPFieldStyled, __assign({ value: value, inputStyle: { width: '48px' }, numInputs: length, isDisabled: disabled, shouldAutoFocus: autoFocus, isInputNum: isInputNum }, rest)));
 };
 OTPFieldComponent.defaultProps = {
     length: 6,

package/build/components/OTPTimer/OTPTimer.js

@@ -29,7 +29,7 @@ var OTPTimerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
-        paddingInline: theme.spacing(2.5),
+        paddingInline: theme.spacing(3),
         justifyContent: 'flex-end',
         maxWidth: 'fit-content',
         marginLeft: 'auto'
@@ -37,11 +37,7 @@ var OTPTimerStyled = styled(Box)(function (_a) {
 });
 var OTPTimerTextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return ({
-        fontWeight: theme.typography.fontWeightBold,
-        fontSize: theme.typography.fontSize,
-        marginTop: theme.spacing(0.5)
-    });
+    return (__assign(__assign({ fontWeight: theme.typography.fontWeightRegular }, theme.typography.caption), { marginTop: theme.spacing(0.5) }));
 });
 var OTPTimerComponent = function (_a) {
     var timeInSeconds = _a.timeInSeconds, timeEndLabel = _a.timeEndLabel, onResetClick = _a.onResetClick, rest = __rest(_a, ["timeInSeconds", "timeEndLabel", "onResetClick"]);

package/build/components/Popover/Popover.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { PopoverProps } from '@mui/material/Popover';
+export interface CustomPopoverProps extends PopoverProps {
+    useDefaultStyle?: boolean;
+}
+export default function CustomPopover({ useDefaultStyle, anchorOrigin, transformOrigin, ...rest }: CustomPopoverProps): JSX.Element;

package/build/components/Popover/Popover.js

@@ -0,0 +1,79 @@
+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 Popover from '@mui/material/Popover';
+import { styled, useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { ThemeMode } from '../../@types';
+var IconStyled = styled('span')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            content: '""',
+            position: 'absolute',
+            width: 0,
+            height: 0,
+            borderBottom: "8px solid ".concat(theme.palette.mode === ThemeMode.DARK ? theme.palette.common.black : theme.palette.common.white),
+            borderLeft: '5px solid transparent',
+            borderRight: '5px solid transparent',
+            top: '0px',
+            left: theme.direction === 'ltr' ? 'calc(50% - -7px)' : 'unset',
+            right: theme.direction === 'rtl' ? 'calc(50% - -7px)' : 'unset'
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            left: theme.direction === 'ltr' ? 'calc(100% - 67px)' : 'unset',
+            right: theme.direction === 'rtl' ? 'calc(100% - 67px)' : 'unset'
+        },
+        _b);
+});
+var PopoverStyled = styled(Popover)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        zIndex: 99999,
+        '& .MuiPopover-paper': {
+            borderRadius: theme.spacing(0),
+            background: 'transparent',
+            boxShadow: 'none'
+        }
+    });
+});
+var ContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        background: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.black : theme.palette.common.white,
+        borderRadius: theme.spacing(1),
+        margin: theme.spacing(1),
+        boxShadow: theme.shadows[3]
+    });
+});
+export default function CustomPopover(_a) {
+    var _b = _a.useDefaultStyle, useDefaultStyle = _b === void 0 ? true : _b, anchorOrigin = _a.anchorOrigin, transformOrigin = _a.transformOrigin, rest = __rest(_a, ["useDefaultStyle", "anchorOrigin", "transformOrigin"]);
+    var theme = useTheme();
+    return (_jsxs(PopoverStyled, __assign({ dir: theme.direction, hideBackdrop: true, anchorOrigin: anchorOrigin || {
+            vertical: 'bottom',
+            horizontal: 'center'
+        }, transformOrigin: transformOrigin || {
+            vertical: 'top',
+            horizontal: 'center'
+        } }, rest, { children: [useDefaultStyle && _jsx(IconStyled, {}), useDefaultStyle ? _jsx(ContainerStyled, { children: rest.children }) : rest.children] })));
+}

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

@@ -0,0 +1,3 @@
+import CustomPopover, { CustomPopoverProps } from './Popover';
+export type { CustomPopoverProps };
+export default CustomPopover;

package/build/components/Popover/index.js

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

package/build/components/ProgressBar/CircularProgressBar.js

@@ -24,23 +24,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        position: 'absolute'
-    });
-});
+import { styled, useTheme } from '@mui/material/styles';
+import { ThemeMode } from '../../@types';
+var BoxStyled = styled(Box)(function () { return ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    position: 'absolute'
+}); });
 export default function CircularProgressWithLabel(_a) {
     var size = _a.size, value = _a.value, textSx = _a.textSx, props = __rest(_a, ["size", "value", "textSx"]);
-    return (_jsxs(Box, __assign({ sx: { position: 'relative', display: 'inline-flex' } }, { children: [_jsx(CircularProgress, __assign({ variant: 'determinate', size: size, value: value }, props)), _jsx(BoxStyled, { children: _jsx(Typography, __assign({ variant: 'caption', sx: textSx, component: 'div', color: 'text.primary' }, { children: "".concat(Math.round(value), "%") })) })] })));
+    var theme = useTheme();
+    return (_jsxs(Box, __assign({ sx: { position: 'relative', display: 'inline-flex' } }, { children: [_jsx(CircularProgress, __assign({ variant: 'determinate', size: size, value: value }, props)), _jsx(BoxStyled, { children: _jsx(Typography, __assign({ variant: 'caption', sx: textSx, component: 'div', color: theme.palette.mode === ThemeMode.DARK ? 'common.white' : 'text.primary' }, { children: "".concat(Math.round(value), "%") })) })] })));
 }
 CircularProgressWithLabel.defaultProps = {
     size: 54,

package/build/components/Radio/Radio.js

@@ -11,21 +11,31 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import Radio from '@mui/material/Radio';
+import { ICONS_NAMES } from '../../constants';
+import { ThemeMode } from '../../@types';
+import Icon from '../Icon';
 var RadioStyled = styled(Radio)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({ padding: theme.spacing(0), height: theme.spacing(4.375), width: theme.spacing(4.375) }, theme.typography.caption), { fontWeight: theme.typography.fontWeightMedium, fontStretch: 'normal', fontStyle: 'normal', letterSpacing: 'normal', color: theme.palette.secondary.dark, '& .MuiSvgIcon-root': {
+    return (__assign(__assign({ padding: theme.spacing(0), height: theme.spacing(4.375), width: theme.spacing(4.375) }, theme.typography.caption), { fontWeight: theme.typography.fontWeightMedium, fontStretch: 'normal', fontStyle: 'normal', letterSpacing: 'normal', color: theme.palette.text.secondary, '& .MuiSvgIcon-root': {
             fontSize: theme.spacing(3),
             width: theme.spacing(3),
             height: theme.spacing(3)
         }, '&.MuiRadio-colorPrimary': {
-            '&.Mui-checked': {
-                color: theme.palette.success.dark
-            }
+            '&.Mui-checked': {}
         } }));
 });
+var CheckedIconStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(2),
+        height: theme.spacing(2)
+    });
+});
 var RadioComponent = function (props) {
-    return _jsx(RadioStyled, __assign({ color: 'primary', disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, focusRipple: false }, props));
+    var theme = useTheme();
+    var icon = theme.palette.mode === ThemeMode.DARK ? ICONS_NAMES.radio_checked_dark : ICONS_NAMES.radio_checked;
+    return (_jsx(RadioStyled, __assign({ checkedIcon: _jsx(CheckedIconStyled, { src: icon }), color: 'primary', disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, focusRipple: false }, props)));
 };
 export default React.memo(RadioComponent);

package/build/components/RadioLabel/RadioLabel.js

@@ -12,8 +12,9 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import { ThemeMode } from '../../@types';
 import Radio from '../Radio';
 var RadioLabelStyled = styled(FormControlLabel)(function (_a) {
     var theme = _a.theme;
@@ -23,7 +24,7 @@ var RadioLabelStyled = styled(FormControlLabel)(function (_a) {
         paddingInlineEnd: theme.spacing(0.625),
         marginLeft: theme.direction === 'rtl' ? theme.spacing(2) : theme.spacing(-1.375),
         marginRight: theme.direction === 'rtl' ? theme.spacing(-1.375) : theme.spacing(2),
-        '& .MuiFormControlLabel-label': __assign({ color: alpha(theme.palette.text.primary, 0.8) }, theme.typography.body2)
+        '& .MuiFormControlLabel-label': __assign({ color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary, fontWeight: theme.typography.fontWeightRegular }, theme.typography.subtitle2)
     });
 });
 var RadioLabel = function (_a) {

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

@@ -2,6 +2,19 @@ import * as React from 'react';
 import { ListProps } from '@mui/material/List';
 import { ListItemProps } from '@mui/material/ListItem';
 import { SxProps, Theme } from '@mui/material/styles';
+export declare const NameContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
+    children?: React.ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: SxProps<Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
 export interface SimpleListProps<T> extends ListProps {
     list: Array<T>;
     selectedItems?: Array<T>;
@@ -13,8 +26,9 @@ export interface SimpleListProps<T> extends ListProps {
     getSelectedItemCondition?: (a: T, b: T) => boolean;
     sx?: SxProps<Theme>;
     space?: number;
+    isPopupMode?: boolean;
 }
-declare function SimpleList<T>({ list, listItemProps, onSelectItem, renderItem, children, searchKeyPath, searchValuePath, selectedItems, getSelectedItemCondition, space, ...rest }: SimpleListProps<T>): JSX.Element;
+declare function SimpleList<T>({ list, listItemProps, onSelectItem, renderItem, children, searchKeyPath, searchValuePath, selectedItems, getSelectedItemCondition, space, isPopupMode, ...rest }: SimpleListProps<T>): JSX.Element;
 declare namespace SimpleList {
     var defaultProps: {
         searchKeyPath: string;

package/build/components/SimpleList/SimpleList.js

@@ -32,54 +32,61 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import { styled } from '@mui/material/styles';
 import get from 'lodash-es/get';
 import { useEventListener } from '../../hooks';
+import { ThemeMode } from '../../@types';
+import Text from '../Text';
 import Search from '../../features/shared/Search';
-var ListStyled = styled(List, { shouldForwardProp: function (prop) { return prop !== 'height'; } })(function (_a) {
+var ListStyled = styled(List, { shouldForwardProp: function (prop) { return !['height', 'isPopupMode'].includes(prop); } })(function (_a) {
     var _b;
-    var theme = _a.theme, height = _a.height;
-    return (_b = {
-            overflowY: 'auto',
-            listStyle: 'none',
-            display: 'flow-root',
-            paddingTop: theme.spacing(2.125),
-            height: theme.spacing(40)
-        },
-        _b[theme.breakpoints.down('sm')] = {
-            height: 'unset',
-            maxHeight: height
-        },
-        _b['&::-webkit-scrollbar'] = {
-            width: '0px'
-        },
-        _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)'
-        },
-        _b['&::-webkit-scrollbar-thumb'] = {
-            backgroundColor: 'rgba(0,0,0,.1)',
-            outline: '1px solid slategrey'
-        },
-        _b);
+    var theme = _a.theme, height = _a.height, isPopupMode = _a.isPopupMode;
+    return (__assign(__assign({ overflowY: 'auto', overflowX: 'hidden', listStyle: 'none', display: 'flow-root', paddingTop: theme.spacing(2.125), height: theme.spacing(40) }, (isPopupMode && {
+        height: 'unset',
+        maxHeight: theme.spacing(40)
+    })), (_b = {}, _b[theme.breakpoints.down('sm')] = {
+        height: 'unset',
+        maxHeight: height
+    }, _b['&::-webkit-scrollbar'] = {
+        width: '0px'
+    }, _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)'
+    }, _b['&::-webkit-scrollbar-thumb'] = {
+        backgroundColor: 'rgba(0,0,0,.1)',
+        outline: '1px solid slategrey'
+    }, _b)));
 });
 var ListItemStyled = styled(ListItem)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
-        paddingInlineStart: theme.spacing(2.5),
-        paddingInlineEnd: theme.spacing(2.5),
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(1.875),
+        marginInlineStart: theme.spacing(1),
+        marginInlineEnd: theme.spacing(1),
+        paddingInlineStart: theme.spacing(2),
+        paddingInlineEnd: theme.spacing(2),
+        paddingTop: theme.spacing(1.375),
+        paddingBottom: theme.spacing(1.375),
         cursor: 'pointer',
-        justifyContent: 'space-between'
+        width: 'unset',
+        justifyContent: 'space-between',
+        borderRadius: theme.spacing(1),
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover
+        }
     });
 });
+export var NameContainer = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { fontWeight: theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25), textAlign: 'start' }));
+});
 function SimpleList(_a) {
-    var list = _a.list, listItemProps = _a.listItemProps, onSelectItem = _a.onSelectItem, renderItem = _a.renderItem, children = _a.children, searchKeyPath = _a.searchKeyPath, searchValuePath = _a.searchValuePath, selectedItems = _a.selectedItems, getSelectedItemCondition = _a.getSelectedItemCondition, _b = _a.space, space = _b === void 0 ? 187 : _b, rest = __rest(_a, ["list", "listItemProps", "onSelectItem", "renderItem", "children", "searchKeyPath", "searchValuePath", "selectedItems", "getSelectedItemCondition", "space"]);
+    var list = _a.list, listItemProps = _a.listItemProps, onSelectItem = _a.onSelectItem, renderItem = _a.renderItem, children = _a.children, searchKeyPath = _a.searchKeyPath, searchValuePath = _a.searchValuePath, selectedItems = _a.selectedItems, getSelectedItemCondition = _a.getSelectedItemCondition, _b = _a.space, space = _b === void 0 ? 187 : _b, isPopupMode = _a.isPopupMode, rest = __rest(_a, ["list", "listItemProps", "onSelectItem", "renderItem", "children", "searchKeyPath", "searchValuePath", "selectedItems", "getSelectedItemCondition", "space", "isPopupMode"]);
     var _c = React.useState(list), items = _c[0], setItems = _c[1];
+    var t = useTranslation().t;
     React.useEffect(function () {
         setItems(list);
     }, [list]);
@@ -122,12 +129,16 @@ function SimpleList(_a) {
         }
         setItems(list);
     };
-    return (_jsxs(_Fragment, { children: [(searchValuePath === null || searchValuePath === void 0 ? void 0 : searchValuePath.length) && _jsx(Search, { onSearchValue: onSearch }), _jsx(ListStyled, __assign({ height: maxHeight }, rest, { children: children ||
-                    mapSelectedItemBeginning.map(function (item, idx) {
-                        return (_createElement(ListItemStyled, __assign({}, listItemProps, { onClick: function (e) {
-                                onSelectItem(item, e);
-                            }, disableGutters: true, key: idx }), renderItem(item, idx)));
-                    }) }))] }));
+    return (_jsxs(_Fragment, { children: [(searchValuePath === null || searchValuePath === void 0 ? void 0 : searchValuePath.length) && _jsx(Search, { onSearchValue: onSearch }), _jsx(ListStyled, __assign({ isPopupMode: isPopupMode, height: maxHeight }, rest, { children: children || mapSelectedItemBeginning.length ? (mapSelectedItemBeginning.map(function (item, idx) {
+                    return (_createElement(ListItemStyled, __assign({}, listItemProps, { onClick: function (e) {
+                            onSelectItem(item, e);
+                        }, disableGutters: true, key: idx }), renderItem(item, idx)));
+                })) : (_jsx(ListItemStyled, __assign({ sx: {
+                        cursor: 'default',
+                        '&:hover': {
+                            backgroundColor: 'unset'
+                        }
+                    }, disableGutters: true }, { children: _jsx(NameContainer, { children: t('no_results') }) }))) }))] }));
 }
 SimpleList.defaultProps = {
     searchKeyPath: ''

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

@@ -5,7 +5,7 @@ export interface SocialMediaGroupProps extends ToggleButtonGroupProps {
     toggleButtonProps?: ToggleButtonProps;
 }
 declare const _default: React.MemoExoticComponent<{
-    ({ children, defaultValue, onChange, toggleButtonProps, ...rest }: SocialMediaGroupProps): JSX.Element;
+    ({ children, onChange, ...rest }: SocialMediaGroupProps): JSX.Element;
     defaultProps: {};
 }>;
 export default _default;

package/build/components/SocialMediaGroup/SocialMediaGroup.js

@@ -24,7 +24,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import ToggleButtonGroup from '../ToggleButtonGroup';
 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 children = _a.children, onChange = _a.onChange, rest = __rest(_a, ["children", "onChange"]);
     var handleOnChange = function (event, value) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event, value);
     };

package/build/components/TextField/TextField.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+interface Props {
+    onEnterPressed?: React.KeyboardEventHandler<HTMLDivElement>;
+    hide?: boolean;
+    warningType?: 'alert' | 'error' | 'hint';
+    warningMessage?: string;
+}
+export declare type CustomTextFieldProps = TextFieldProps & Props;
+declare const _default: React.MemoExoticComponent<{
+    ({ onEnterPressed, hide, warningType, warningMessage, ...rest }: CustomTextFieldProps): JSX.Element;
+    defaultProps: {
+        hide: boolean;
+        warningType: string;
+    };
+}>;
+export default _default;