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

package/build/components/InputBase/AmountInputBase/style.js

@@ -0,0 +1,26 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import InputNumber from './InputNumber';
+export const MobileWrapper = styled(Box, { shouldForwardProp: (props) => props !== 'hasError' })(({ theme, hasError }) => (Object.assign({ border: `1px solid ${theme.palette.divider}`, display: 'flex', justifyContent: 'space-between', position: 'relative', paddingInline: '8px', paddingInlineStart: '0px', alignItems: 'center', borderRadius: '4px', height: '40px' }, (hasError && {
+    border: `1px solid ${theme.palette.error.main}`,
+}))));
+export const InputNumberWrapper = styled(Box)(() => ({
+    width: '50px',
+}));
+export const InputNumberStyled = styled(InputNumber)(({ error }) => (Object.assign({ border: 'none', paddingInlineEnd: 0, img: {
+        cursor: 'pointer',
+    } }, (error && {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottom: 'none',
+}))));
+export const StyledErrorMessage = styled('small')(({ theme }) => ({
+    color: theme.palette.error.main,
+    fontSize: '10px',
+    lineHeight: '10px',
+    marginTop: '4px',
+    display: 'block',
+}));
+export const Wrapper = styled(Box)(() => ({
+    flex: 1,
+}));

package/build/components/InputBase/InputBase/InputBase.js

@@ -0,0 +1,28 @@
+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 from 'react';
+import Box from '@mui/material/Box';
+import { StyledInput, StyledWrapper, StyledErrorMessage } from './style';
+const InputBase = React.forwardRef((_a, ref) => {
+    var _b;
+    var { name, onChange, hasError, helperText, hideArrows } = _a, props = __rest(_a, ["name", "onChange", "hasError", "helperText", "hideArrows"]);
+    const handleChange = (e) => {
+        var _a;
+        onChange === null || onChange === void 0 ? void 0 : onChange((_a = e.target.value) !== null && _a !== void 0 ? _a : '');
+    };
+    return (_jsxs(Box, { children: [_jsx(StyledWrapper, Object.assign({ "data-testid": "InputBase" }, { children: _jsx(StyledInput, Object.assign({ rows: 1, error: hasError, fullWidth: true, size: "small", variant: "standard", ref: ref, name: name, type: (_b = props.type) !== null && _b !== void 0 ? _b : 'text', label: props.placeholder || props.label, onChange: handleChange, InputProps: {
+                        disableUnderline: true,
+                    }, hideArrows: hideArrows }, props)) })), _jsx(StyledErrorMessage, { children: helperText })] }));
+});
+InputBase.displayName = 'InputBase';
+export default InputBase;

package/build/components/InputBase/InputBase/index.js

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

package/build/components/InputBase/InputBase/style.js

@@ -0,0 +1,68 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+export const StyledWrapper = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+    width: '100%',
+    height: 40,
+    '& *': {
+        flex: 1,
+        margin: '0 !important',
+    },
+}));
+export const StyledInput = styled(TextField, {
+    shouldForwardProp: (props) => 'hideArrows' !== props,
+})(({ theme, error, hideArrows, disabled }) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ border: `1px solid ${theme.palette.divider}` }, (disabled && {
+    backgroundColor: theme.palette.grey[400],
+})), { borderRadius: '4px' }), (!!error && {
+    border: `1px solid ${theme.palette.error.main}`,
+})), (hideArrows && {
+    '& input[type=number]': {
+        MozAppearance: 'textfield',
+    },
+    '& input[type=number]::-webkit-outer-spin-button': {
+        WebkitAppearance: 'none',
+        margin: 0,
+    },
+    '& input[type=number]::-webkit-inner-spin-button': {
+        WebkitAppearance: 'none',
+        margin: 0,
+    },
+})), { '& .MuiFormLabel-asterisk': {
+        color: 'red',
+    }, '& .MuiInputBase-root': {
+        maxHeight: '40px !important',
+        alignItems: 'flex-end !important',
+        fontSize: '11px',
+        height: '40px',
+        padding: '8px',
+        borderRadius: '4px',
+    }, '& .MuiInputBase-input': {
+        margin: 0,
+        padding: 0,
+        color: theme.palette.text.primary,
+    }, '& .MuiFormLabel-root': {
+        fontSize: '10px',
+        fontWeight: 500,
+        lineHeight: '100%',
+        transform: 'translate(0, 8px) scale(1)',
+        color: theme.palette.grey[700],
+        padding: '8px',
+        '&.MuiFormLabel-filled, &.Mui-focused': {
+            transform: 'translate(0, -1.5px) scale(0.75) ',
+        },
+        '&.Mui-focused': {
+            fontSize: '10px',
+            fontWeight: 500,
+            lineHeight: '100%',
+        },
+    } })));
+export const StyledErrorMessage = styled('small')(({ theme }) => ({
+    color: theme.palette.error.main,
+    fontSize: '10px',
+    lineHeight: '10px',
+    marginTop: '4px',
+    display: 'block',
+}));

package/build/components/InputBase/PhoneInputBase/CountriesList/CountriesList.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import Skeleton from '@mui/material/Skeleton';
+import CustomBackdrop from '../../../CustomBackdrop';
+import { downArrowIcon, searchIcon } from '../../../../constants/index.js';
+import { CountryStyled, CountriesWrapper, CountriesListStyled, InputStyled, CountryButton, Required } from './style';
+import { ClickAwayListener } from '@mui/material';
+function CountriesList({ isLoading, countries, value: countryValue, onCountryChange, required, disabled }) {
+    const [selectedCountry, setSelectedCountry] = useState();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [filteredCountries, setFilteredCountries] = useState([]);
+    const [searchValue, setSearchValue] = useState('');
+    const open = Boolean(anchorEl) && !disabled;
+    const openDropdown = (event) => {
+        event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    };
+    const closeDropdown = () => {
+        setAnchorEl(null);
+    };
+    const handleOnCountryChange = (country) => {
+        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(country);
+        setSelectedCountry(country);
+        closeDropdown();
+        setFilteredCountries(countries);
+    };
+    const handleSearch = (e) => {
+        var _a;
+        const value = (_a = e.target.value.toString()) !== null && _a !== void 0 ? _a : '';
+        setSearchValue(value);
+        if (!value) {
+            setFilteredCountries(countries);
+            return;
+        }
+        const filteredData = countries.filter((country) => {
+            return country.idd_prefix.toString().startsWith(value) || country.iso2.toLowerCase().startsWith(value.toLowerCase());
+        });
+        setFilteredCountries(filteredData);
+    };
+    useEffect(() => {
+        if (countryValue)
+            setSelectedCountry(countryValue);
+    }, [countryValue === null || countryValue === void 0 ? void 0 : countryValue.countryId]);
+    useEffect(() => {
+        if (countries.length)
+            setFilteredCountries(countries);
+    }, [countries.length]);
+    return (_jsxs(Box, Object.assign({ "data-testid": "CountriesList", sx: { position: 'relative' } }, { children: [_jsx(CountryButton, Object.assign({ type: "button", "aria-describedby": "CountriesList_CountriesWrapper", onClick: openDropdown, disabled: isLoading || disabled, sx: {
+                    backgroundColor: 'transparent',
+                    border: 'none',
+                    height: 34,
+                    paddingInlineStart: '8px',
+                } }, { children: isLoading ? (_jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } })) : (_jsxs(_Fragment, { children: [selectedCountry && (_jsxs(_Fragment, { children: [_jsx("img", { src: selectedCountry.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.idd_prefix}` })] })), required && _jsx(Required, Object.assign({ component: "span" }, { children: "*" })), _jsx(Box, { component: "img", src: downArrowIcon, alt: "d", className: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })) })), open && _jsx(CustomBackdrop, { onClick: closeDropdown, sx: { zIndex: 9999 } }), open && (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeDropdown }, { children: _jsxs(CountriesWrapper, Object.assign({ id: "CountriesList_CountriesWrapper", open: open, anchorEl: anchorEl, "data-testid": "CountriesList_CountriesWrapper", placement: "bottom-start" }, { children: [_jsx(InputStyled, { endAdornment: _jsx("img", { src: searchIcon, alt: "arrow" }), onChange: handleSearch, hideArrows: true, "data-testid": "CountriesList_InputStyled", value: searchValue }), _jsx(CountriesListStyled, Object.assign({ "data-testid": "CountriesList_CountriesListStyled" }, { children: filteredCountries.map((country) => {
+                                const isSelected = (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.countryId) === country.countryId;
+                                return (_jsxs(CountryStyled, Object.assign({ onClick: () => {
+                                        handleOnCountryChange(country);
+                                    }, sx: {
+                                        backgroundColor: isSelected ? '#F9F9F9' : 'transparent',
+                                        color: isSelected ? '#000' : '#8D8D94',
+                                    } }, { children: [_jsx("img", { src: country.logo, alt: "c", className: "logo" }), _jsx("span", { children: `+${country.idd_prefix}` })] }), `country-code-${country.countryId}`));
+                            }) }))] })) })))] })));
+}
+CountriesList.displayName = 'CountriesList';
+export default memo(CountriesList);

package/build/components/InputBase/PhoneInputBase/CountriesList/index.js

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

package/build/components/InputBase/PhoneInputBase/CountriesList/style.js

@@ -0,0 +1,49 @@
+import { Popper, styled, Box } from '@mui/material';
+import InputNumber from '../../../InputNumber';
+export const CountryButton = styled('button')(({ theme, disabled }) => ({
+    display: 'flex',
+    gap: '4px',
+    alignItems: 'center',
+    '.logo': { width: '15.568px', height: '10.889px', borderRadius: '3px' },
+    '.arrow': { width: 14 },
+    span: { color: theme.palette.text.primary, fontWeight: 500, fontSize: '11px' },
+    height: 24,
+    cursor: disabled ? 'default' : 'pointer',
+    opacity: disabled ? 0.5 : 1,
+}));
+export const CountriesWrapper = styled(Popper)(({ theme }) => ({
+    // position: 'absolute',
+    // top: 30,
+    // left: 0,
+    zIndex: 9999,
+    backgroundColor: theme.palette.common.white,
+    padding: '4px 8px',
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.divider}`,
+    width: 100,
+}));
+export const CountriesListStyled = styled('ul')(() => ({
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+    maxHeight: 100,
+    overflow: 'auto',
+}));
+export const CountryStyled = styled('li')(({ theme }) => ({
+    display: 'flex',
+    gap: '4px',
+    alignItems: 'center',
+    '.logo': { width: '15.568px', height: '10.889px', borderRadius: '3px' },
+    '.arrow': { width: 14 },
+    span: { color: theme.palette.text.primary, fontWeight: 500, fontSize: '11px' },
+    height: 24,
+    cursor: 'pointer',
+}));
+export const InputStyled = styled(InputNumber)(() => ({
+    height: 24,
+    padding: '4px',
+    marginBottom: '4px',
+}));
+export const Required = styled(Box)(() => ({
+    color: 'red !important',
+}));

package/build/components/InputBase/PhoneInputBase/PhoneInputBase.js

@@ -0,0 +1,27 @@
+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 from 'react';
+import CountriesList from './CountriesList';
+import { InputNumberStyled, MobileWrapper, StyledErrorMessage, Wrapper } from './style';
+function PhoneInputBase(_a, ref) {
+    var { phoneValue, hasError, countries, isCountriesLoading, countryValue, onCountryChange, onPhoneChange, helperText, countryError, required, disabled } = _a, props = __rest(_a, ["phoneValue", "hasError", "countries", "isCountriesLoading", "countryValue", "onCountryChange", "onPhoneChange", "helperText", "countryError", "required", "disabled"]);
+    const handleOnChange = (e) => {
+        onPhoneChange === null || onPhoneChange === void 0 ? void 0 : onPhoneChange(e.target.value);
+    };
+    const handleOnCountryChange = (country) => {
+        onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange(country);
+    };
+    return (_jsxs(Wrapper, Object.assign({ "data-testid": "PhoneInput" }, { children: [_jsxs(MobileWrapper, Object.assign({ "data-testid": "PhoneInput_MobileWrapper", hasError: hasError }, { children: [_jsx(CountriesList, { isLoading: isCountriesLoading, countries: countries, value: countryValue, onCountryChange: handleOnCountryChange, required: required, disabled: disabled }), _jsx(InputNumberStyled, Object.assign({ value: phoneValue, "data-testid": "PhoneInput_InputNumberStyled", ref: ref, inputProps: { autoComplete: 'off' }, error: hasError, disabled: disabled }, props, { onChange: handleOnChange, hideArrows: true }))] })), _jsx(StyledErrorMessage, { children: helperText })] })));
+}
+PhoneInputBase.displayName = 'PhoneInputBase';
+export default React.forwardRef(PhoneInputBase);

package/build/components/InputBase/PhoneInputBase/index.js

@@ -0,0 +1,3 @@
+import PhoneInputBase from './PhoneInputBase';
+export { default as CountriesList } from './CountriesList';
+export default PhoneInputBase;

package/build/components/InputBase/PhoneInputBase/style.js

@@ -0,0 +1,23 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import InputNumber from '../../InputNumber';
+export const MobileWrapper = styled(Box, { shouldForwardProp: (props) => props !== 'hasError' })(({ theme, hasError }) => (Object.assign({ border: `1px solid ${theme.palette.divider}`, display: 'flex', position: 'relative', paddingInline: '8px', paddingInlineStart: '0px', alignItems: 'center', borderRadius: '4px', height: '40px' }, (hasError && {
+    border: `1px solid ${theme.palette.error.main}`,
+}))));
+export const InputNumberStyled = styled(InputNumber)(({ error }) => (Object.assign({ border: 'none', paddingInlineEnd: 0, img: {
+        cursor: 'pointer',
+    } }, (error && {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottom: 'none',
+}))));
+export const StyledErrorMessage = styled('small')(({ theme }) => ({
+    color: theme.palette.error.main,
+    fontSize: '10px',
+    lineHeight: '10px',
+    marginTop: '4px',
+    display: 'block',
+}));
+export const Wrapper = styled(Box)(() => ({
+    flex: 1,
+}));

package/build/components/InputBase/SelectBase/SelectBase.js

@@ -0,0 +1,45 @@
+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 from 'react';
+import { CircularProgress } from '@mui/material';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import { FormControlStyles, StyledErrorMessage, MuiSelect, Wrapper } from './style';
+function SelectBase(_a, ref) {
+    var _b;
+    var { required, hasError, label, value, helperText, onChange, options, isOptionEqualToValue, renderOption, getOptionValue, isLoading, children, getOptionLabel } = _a, props = __rest(_a, ["required", "hasError", "label", "value", "helperText", "onChange", "options", "isOptionEqualToValue", "renderOption", "getOptionValue", "isLoading", "children", "getOptionLabel"]);
+    // eslint-disable-next-line
+    const handleChange = (option) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(option);
+    };
+    const getRenderedValue = () => {
+        return renderOption ? renderOption(value) : getOptionLabel ? getOptionLabel(value) : value.label;
+    };
+    return (_jsxs(Wrapper, { children: [_jsxs(FormControlStyles, Object.assign({ variant: "filled", "data-testid": "SelectBase", required: required }, { children: [_jsx(InputLabel, Object.assign({ sx: {
+                            height: '100%',
+                        }, id: `select-label-${label.trim()}`, "data-testid": "SelectBase_InputLabel" }, { children: label })), _jsx(MuiSelect, Object.assign({ "data-testid": "SelectBase_Select", ref: ref, value: (_b = (getOptionValue ? getOptionValue(value) : value === null || value === void 0 ? void 0 : value.id)) !== null && _b !== void 0 ? _b : '', error: hasError, disableUnderline: true, required: required, labelId: `select-label-${label.trim()}`, id: `select-label-${label.trim()}`, renderValue: getRenderedValue }, props, { disabled: props.disabled || isLoading, endAdornment: isLoading ? (_jsx(CircularProgress, { size: 20, sx: {
+                                backgroundColor: 'transparent',
+                                color: (theme) => theme.palette.grey.A400,
+                            } })) : null }, { children: children ||
+                            (options === null || options === void 0 ? void 0 : options.map((option, idx) => {
+                                var _a;
+                                const isSelected = isOptionEqualToValue ? isOptionEqualToValue(option, value) : (option === null || option === void 0 ? void 0 : option.id) === (value === null || value === void 0 ? void 0 : value.id);
+                                return (_jsx(MenuItem, Object.assign({ disabled: !!option.disabled, value: (_a = (getOptionValue ? getOptionValue(option) : option === null || option === void 0 ? void 0 : option.id)) !== null && _a !== void 0 ? _a : '', onClick: () => {
+                                        handleChange(option);
+                                    }, sx: {
+                                        fontSize: '12px',
+                                        backgroundColor: (theme) => (isSelected ? theme.palette.action.hover : theme.palette.common.white),
+                                    } }, { children: renderOption ? renderOption(option) : option.label }), `country-item-${idx}`));
+                            })) }))] })), _jsx(StyledErrorMessage, { children: helperText })] }));
+}
+export default React.forwardRef(SelectBase);

package/build/components/InputBase/SelectBase/SelectBaseMultiple.js

@@ -0,0 +1,64 @@
+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, { useMemo } from 'react';
+import { CircularProgress } from '@mui/material';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import { FormControlStyles, StyledErrorMessage, MuiSelect, Wrapper } from './style';
+function SelectBaseMultiple(_a, ref) {
+    var _b;
+    var { required, hasError, label, value, helperText, onChange, options, isOptionEqualToValue, renderOption, getOptionValue, isLoading, children, getOptionLabel } = _a, props = __rest(_a, ["required", "hasError", "label", "value", "helperText", "onChange", "options", "isOptionEqualToValue", "renderOption", "getOptionValue", "isLoading", "children", "getOptionLabel"]);
+    // eslint-disable-next-line
+    const handleChange = (option) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(option);
+    };
+    const getMultipleValues = () => {
+        // eslint-disable-next-line
+        return getOptionValue ? value === null || value === void 0 ? void 0 : value.map(getOptionValue) : value === null || value === void 0 ? void 0 : value.map((v) => v === null || v === void 0 ? void 0 : v.id);
+    };
+    const selectedOptions = useMemo(() => options === null || options === void 0 ? void 0 : options.filter((option) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return value === null || value === void 0 ? void 0 : value.some((v) => {
+            return isOptionEqualToValue ? isOptionEqualToValue(option, v) : option.id === (v === null || v === void 0 ? void 0 : v.id);
+        });
+    }), [options, value, isOptionEqualToValue]);
+    const getRenderedValue = () => {
+        var _a;
+        return (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((option) => {
+            return getOptionLabel ? getOptionLabel(option) : option.label;
+        })) === null || _a === void 0 ? void 0 : _a.join(', ');
+    };
+    return (_jsxs(Wrapper, { children: [_jsxs(FormControlStyles, Object.assign({ variant: "filled", "data-testid": "SelectBase", required: required }, { children: [_jsx(InputLabel, Object.assign({ id: `select-label-${label.trim()}`, "data-testid": "SelectBase_InputLabel" }, { children: label })), _jsx(MuiSelect, Object.assign({ multiple: true, "data-testid": "SelectBase_Select", ref: ref, value: (_b = getMultipleValues()) !== null && _b !== void 0 ? _b : '', error: hasError, disableUnderline: true, required: required, labelId: `select-label-${label.trim()}`, id: `select-label-${label.trim()}`, renderValue: getRenderedValue }, props, { disabled: props.disabled || isLoading, endAdornment: isLoading ? (_jsx(CircularProgress, { size: 20, sx: {
+                                backgroundColor: 'transparent',
+                                color: (theme) => theme.palette.grey.A400,
+                            } })) : null, onChange: (e) => {
+                            const values = e.target.value;
+                            const currentOptions = values === null || values === void 0 ? void 0 : values.map((v) => {
+                                return options === null || options === void 0 ? void 0 : options.find((option) => {
+                                    return getOptionValue ? getOptionValue(option) === v : option.id === v;
+                                });
+                            });
+                            onChange === null || onChange === void 0 ? void 0 : onChange([...currentOptions]);
+                        } }, { children: children ||
+                            (options === null || options === void 0 ? void 0 : options.map((option, idx) => {
+                                var _a;
+                                const isSelected = isOptionEqualToValue ? isOptionEqualToValue(option, value) : (option === null || option === void 0 ? void 0 : option.id) === (value === null || value === void 0 ? void 0 : value.id);
+                                return (_jsx(MenuItem, Object.assign({ value: (_a = (getOptionValue ? getOptionValue(option) : option === null || option === void 0 ? void 0 : option.id)) !== null && _a !== void 0 ? _a : '', onClick: () => {
+                                        handleChange(option);
+                                    }, sx: {
+                                        fontSize: '12px',
+                                        backgroundColor: (theme) => (isSelected ? theme.palette.action.hover : theme.palette.common.white),
+                                    } }, { children: renderOption ? renderOption(option) : option.label }), `country-item-${idx}`));
+                            })) }))] })), _jsx(StyledErrorMessage, { children: helperText })] }));
+}
+export default React.forwardRef(SelectBaseMultiple);

package/build/components/InputBase/SelectBase/index.js

@@ -0,0 +1,3 @@
+import SelectBase from './SelectBase';
+export { default as SelectBaseMultiple } from './SelectBaseMultiple';
+export default SelectBase;

package/build/components/InputBase/SelectBase/style.js

@@ -0,0 +1,109 @@
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import { styled } from '@mui/material/styles';
+export const FormControlStyles = styled(FormControl)(({ theme }) => ({
+    minWidth: 52,
+    height: '40px !important',
+    maxHeight: '40px !important',
+    backgroundColor: 'transparent',
+    width: '100%',
+    '& .MuiFormLabel-asterisk': {
+        color: 'red',
+    },
+    '& .MuiFormLabel-root': {
+        fontSize: '10px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '100%',
+        transform: 'translate(8px, 15px) scale(1)',
+        color: `${theme.palette.grey[700]} !important`,
+    },
+    '.MuiFormLabel-root.MuiFormLabel-filled': {
+        transform: 'translate(8px, 8px) scale(0.75) ',
+    },
+    '.MuiFormLabel-root.Mui-focused': {
+        transform: 'translate(8px, 8px) scale(0.75)',
+        fontSize: '10px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '100%',
+    },
+}));
+export const StyledSelect = styled(Select)(({ theme }) => ({
+    fontSize: '11px',
+    lineHeight: '11px',
+    color: theme.palette.common.black,
+    borderRadius: '4px',
+    boxShadow: theme.shadows[17],
+    border: 'none',
+    outline: 'none',
+    '&:focus': {
+        border: '1px solid #1F88D0',
+    },
+    '& .MuiOutlinedInput-root': {
+        '& fieldset': {
+            borderColor: 'rgba(0, 0, 0, 0.23)', // default
+        },
+        '&.Mui-focused fieldset': {
+            border: '2px solid red', // focus
+        },
+    },
+    minWidth: 52,
+    height: '40px !important',
+    maxHeight: '40px !important',
+    width: '100%',
+    '& .MuiFormLabel-asterisk': {
+        color: 'red',
+    },
+    //  style form label
+    '& .MuiFormLabel-root': {
+        fontSize: '10px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '100%',
+        transform: 'translate(8px, 15px) scale(1)',
+    },
+    '.MuiFormLabel-root.MuiFormLabel-filled': {
+        transform: 'translate(8px, 8px) scale(0.75) ',
+    },
+    '.MuiFormLabel-root.Mui-focused': {
+        transform: 'translate(8px, 8px) scale(0.75)',
+        fontSize: '10px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        lineHeight: '100%',
+    },
+}));
+export const StyledErrorMessage = styled('small')(({ theme }) => ({
+    color: theme.palette.error.main,
+    fontSize: '10px',
+    lineHeight: '10px',
+    marginTop: '4px',
+    display: 'block',
+}));
+export const MuiSelect = styled(Select)(({ theme, error }) => (Object.assign({ width: '100%', height: '40px !important', maxHeight: '40px !important', borderRadius: '4px', overflow: 'hidden', backgroundColor: theme.palette.grey[400], '&.Mui-disabled': {
+        backgroundColor: theme.palette.grey[400],
+    }, '.MuiSelect-select': {
+        padding: '0 8px !important',
+        height: '40px !important',
+        maxHeight: '40px !important',
+        display: 'flex',
+        alignItems: 'flex-end !important',
+        backgroundColor: `${theme.palette.grey[400]} !important`,
+        borderRadius: '4px',
+        fontSize: '11px',
+    }, '.MuiSelect-filled': {
+        padding: '0 8px !important',
+    }, '&.MuiInputBase-adornedStart > div:nth-of-type(1)': {
+        backgroundColor: 'red',
+    } }, (error && {
+    border: `1px solid ${theme.palette.error.main}`,
+}))));
+export const Wrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'stretch',
+    height: '100%',
+    flexDirection: 'column',
+    flex: 1,
+}));

package/build/components/InputBase/index.js

@@ -1 +1,4 @@
-export{f as AmountInputBase,d as CountriesList,a as InputBase,e as PhoneInputBase,c as SelectBase,b as SelectBaseMultiple}from'../../chunk-NLOKMDQY.js';import'../../chunk-JYJ3D2X6.js';import'../../chunk-M7YGOEQF.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-7IW25XZP.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+export { default as InputBase } from './InputBase';
+export { default as SelectBase, SelectBaseMultiple } from './SelectBase';
+export { default as PhoneInputBase, CountriesList } from './PhoneInputBase';
+export { default as AmountInputBase } from './AmountInputBase';

package/build/components/InputNumber/InputNumber.js

@@ -0,0 +1,40 @@
+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 Box from '@mui/material/Box';
+import { isSafariBrowser } from '../../utils/index.js';
+import { InputStyled } from './style';
+const isSafari = isSafariBrowser();
+function InputNumber(_a, ref) {
+    var { isError, hideArrows, inputProps, onKeyDown } = _a, props = __rest(_a, ["isError", "hideArrows", "inputProps", "onKeyDown"]);
+    const handleKeyDown = (evt) => {
+        if (['e', 'E', '+', '-'].includes(evt.key)) {
+            evt.preventDefault();
+        }
+        if (onKeyDown) {
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
+            return;
+        }
+        // eslint-disable-next-line
+        if (isSafari && isNaN(evt.key) && evt.key !== 'Backspace') {
+            evt.preventDefault();
+        }
+    };
+    return (_jsx(Box, Object.assign({ sx: { flexGrow: 1 }, onClick: (e) => {
+            e.stopPropagation();
+        } }, { children: _jsx(InputStyled, Object.assign({}, props, { ref: ref, value: props.value || '', placeholder: props.placeholder, hideArrows: true, isError: isError, disableUnderline: true, inputProps: Object.assign(Object.assign({}, inputProps), { type: 'number' }), onKeyDown: handleKeyDown, onWheel: (e) => {
+                // eslint-disable-next-line
+                e.target instanceof HTMLElement && e.target.blur();
+            } })) })));
+}
+export default React.forwardRef(InputNumber);

package/build/components/InputNumber/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-JYJ3D2X6.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-7IW25XZP.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import InputNumber from './InputNumber';
+export default InputNumber;

package/build/components/InputNumber/style.js

@@ -0,0 +1,20 @@
+import Input from '@mui/material/Input';
+import { styled } from '@mui/material/styles';
+export const InputStyled = styled(Input, {
+    shouldForwardProp: (props) => !['isError', 'hideArrows'].includes(props),
+})(({ theme, hideArrows }) => (Object.assign({ padding: '8px', border: `1px solid ${theme.palette.divider}`, borderRadius: '4px', height: 32, color: theme.palette.text.primary, fontSize: '11px', outline: 0, maxWidth: '100%', display: 'flex', flexGrow: 1, '::placeholder': {
+        color: theme.palette.grey[700],
+        fontWeight: 400,
+    } }, (hideArrows && {
+    '& input[type=number]': {
+        MozAppearance: 'textfield',
+    },
+    '& input[type=number]::-webkit-outer-spin-button': {
+        WebkitAppearance: 'none',
+        margin: 0,
+    },
+    '& input[type=number]::-webkit-inner-spin-button': {
+        WebkitAppearance: 'none',
+        margin: 0,
+    },
+}))));