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

package/build/components/IOSSwitch/styles.js

@@ -0,0 +1,49 @@
+import { Switch, styled } from '@mui/material';
+export const SwitchStyled = styled(Switch)(({ theme }) => ({
+    width: 32.903,
+    height: 20,
+    borderRadius: '13px',
+    padding: 0,
+    '& .MuiSwitch-switchBase': {
+        padding: 0,
+        margin: 2,
+        transitionDuration: '300ms',
+        '&.Mui-checked': {
+            transform: 'translateX(13px)',
+            color: theme.palette.common.white,
+            '& + .MuiSwitch-track': {
+                backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#34C759',
+                opacity: 1,
+                border: 0,
+            },
+            '&.Mui-disabled + .MuiSwitch-track': {
+                opacity: 0.5,
+            },
+        },
+        '&.Mui-focusVisible .MuiSwitch-thumb': {
+            color: '#33cf4d',
+            border: '6px solid',
+            borderColor: theme.palette.common.white,
+        },
+        '&.Mui-disabled .MuiSwitch-thumb': {
+            color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+            opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+        },
+    },
+    '& .MuiSwitch-thumb': {
+        boxSizing: 'border-box',
+        width: 16,
+        height: 16,
+        filter: 'drop-shadow(0px 1.9354851245880127px 0.6451616883277893px rgba(0, 0, 0, 0.06)) drop-shadow(0px 1.9354851245880127px 5.1612935066223145px rgba(0, 0, 0, 0.15))',
+    },
+    '& .MuiSwitch-track': {
+        borderRadius: 26 / 2,
+        backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
+        opacity: 1,
+        transition: theme.transitions.create(['background-color'], {
+            duration: 500,
+        }),
+    },
+}));

package/build/components/Icon/Icon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { styled } from '@mui/material/styles';
+const IconComponent = styled('img')(({ theme }) => ({
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+    verticalAlign: 'middle',
+}));
+const Icon = forwardRef((props, ref) => {
+    return _jsx(IconComponent, Object.assign({ sx: props.sx }, props, { ref: ref }));
+});
+export default memo(Icon);

package/build/components/Icon/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-HBY2XKKF.js';import'../../chunk-RWXGVZUC.js';
+import Icon from './Icon';
+export default Icon;

package/build/components/Icon/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/IconGallery/IconGallery.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as icons from '../../constants/index.js';
+import { Wrapper, IconWrapper, IconName } from './styles';
+const typedIcons = icons;
+function IconGallery({ theme = 'light' }) {
+    return (_jsx(Wrapper, Object.assign({ mode: theme }, { children: Object.keys(icons)
+            .sort()
+            .map((iconName) => {
+            const iconPath = typedIcons[iconName];
+            return (_jsxs(IconWrapper, { children: [_jsx("img", { src: iconPath, height: 42, width: 42, alt: `${iconName} icon` }), _jsx(IconName, Object.assign({ mode: theme }, { children: iconName }))] }, iconName));
+        }) })));
+}
+export default IconGallery;

package/build/components/IconGallery/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-XZORYOIS.js';import'../../chunk-5QGYWOQI.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import IconGallery from './IconGallery';
+export default IconGallery;

package/build/components/IconGallery/styles.js

@@ -0,0 +1,21 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { darkPalette, lightPalette } from '../../theme/index.js';
+export const Wrapper = styled(Box) `
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  justify-items: center;
+  align-items: center;
+  text-align: center;
+  background-color: ${({ mode }) => { var _a, _b; return (mode === 'light' ? (_a = lightPalette.background) === null || _a === void 0 ? void 0 : _a.default : (_b = darkPalette.background) === null || _b === void 0 ? void 0 : _b.default); }};
+`;
+export const IconName = styled('p') `
+  color: ${({ mode }) => { var _a, _b; return (mode === 'light' ? (_a = lightPalette.text) === null || _a === void 0 ? void 0 : _a.primary : (_b = darkPalette.text) === null || _b === void 0 ? void 0 : _b.primary); }};
+  font-size: 1rem;
+`;
+export const IconWrapper = styled(Box) `
+  border: 1px solid ${(props) => props.theme.palette.grey[100]};
+  width: 100%;
+  padding: 10px;
+`;

package/build/components/IconGallery/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/IconWithBadge/IconWithBadge.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Box from '@mui/material/Box';
+import { brandPlaceholderIcon } from '../../constants/index.js';
+import { Container, BadgeBox } from './style';
+import Tooltip from '../Tooltip';
+export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt = 'main icon', mainIconSize = 20, containerSize = 24, overlayPosition = { top: 10, left: 17 }, borderColor = '#F2F2F2', label = '', sx, onError, containerSx, }) {
+    const [isLoading, setIsLoading] = useState(true);
+    return (_jsx(Tooltip, Object.assign({ title: label }, { children: _jsx(Box, Object.assign({ display: "flex", alignItems: "center", gap: 1, sx: Object.assign({ position: 'relative' }, containerSx) }, { children: _jsxs(Container, Object.assign({ style: {
+                    borderColor,
+                    width: containerSize,
+                    height: containerSize,
+                } }, { children: [mainIconSize && isLoading && (_jsx(Box, Object.assign({ width: mainIconSize, height: mainIconSize }, { children: isLoading && _jsx(Skeleton, { variant: "circular", width: `${mainIconSize}px`, height: `${mainIconSize}px` }) }))), _jsxs(_Fragment, { children: [overlayIcon && _jsx(BadgeBox, Object.assign({ sx: overlayPosition }, { children: overlayIcon })), _jsx(Box, { width: mainIconSize, height: mainIconSize, component: "img", src: mainIcon || brandPlaceholderIcon, alt: mainIconAlt, sx: Object.assign({ borderRadius: '50%', objectFit: 'scale-down', opacity: isLoading ? 0 : 1 }, sx), onError: (e) => {
+                                    setIsLoading(false);
+                                    e.currentTarget.src = brandPlaceholderIcon;
+                                    onError === null || onError === void 0 ? void 0 : onError(e);
+                                }, onLoad: () => {
+                                    setIsLoading(false);
+                                } })] })] })) })) })));
+}

package/build/components/IconWithBadge/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-BTANFCN2.js';import'../../chunk-LLPG2AC6.js';import'../../chunk-E6XVMA37.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import IconWithBadge from './IconWithBadge';
+export default IconWithBadge;

package/build/components/IconWithBadge/style.js

@@ -0,0 +1,11 @@
+import { Box, styled } from '@mui/material';
+export const Container = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    border: '1.03px solid',
+}));
+export const BadgeBox = styled(Box) `
+  position: absolute;
+`;

package/build/components/IconWithBadge/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/IconWithHoverOverlays/IconWithHoverOverlays.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, memo } from 'react';
+import Box from '@mui/material/Box';
+import { HoverContainer, IconWrapper, PlusBadgeWrapper } from './style';
+import Tooltip from '../Tooltip';
+import startCase from 'lodash/startCase';
+function IconWithHoverOverlays({ mainIcon, overlayIcons }) {
+    const [isHovering, setIsHovering] = useState(false);
+    const handleMouseEnter = () => {
+        if ((overlayIcons === null || overlayIcons === void 0 ? void 0 : overlayIcons.length) > 0) {
+            setIsHovering(true);
+        }
+    };
+    const handleMouseLeave = () => setIsHovering(false);
+    return (_jsx(Box, Object.assign({ sx: { position: 'relative' } }, { children: _jsxs(HoverContainer, Object.assign({ sx: {
+                position: 'relative',
+            }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, isHovering: isHovering }, { children: [_jsx(Tooltip, Object.assign({ title: startCase(mainIcon === null || mainIcon === void 0 ? void 0 : mainIcon.title) }, { children: _jsx(IconWrapper, { children: _jsx("img", { src: mainIcon === null || mainIcon === void 0 ? void 0 : mainIcon.iconUrl, alt: mainIcon === null || mainIcon === void 0 ? void 0 : mainIcon.title }) }) })), isHovering && (_jsxs(_Fragment, { children: [overlayIcons === null || overlayIcons === void 0 ? void 0 : overlayIcons.slice(0, 5).map((icon) => (_jsx(Tooltip, Object.assign({ title: startCase(icon.title) }, { children: _jsx(IconWrapper, { children: _jsx("img", { src: icon === null || icon === void 0 ? void 0 : icon.iconUrl, alt: icon === null || icon === void 0 ? void 0 : icon.title }) }) }), icon.title))), (overlayIcons === null || overlayIcons === void 0 ? void 0 : overlayIcons.length) > 5 && _jsxs(PlusBadgeWrapper, { children: ["+", (overlayIcons === null || overlayIcons === void 0 ? void 0 : overlayIcons.length) - 6] })] }))] })) })));
+}
+export default memo(IconWithHoverOverlays);

package/build/components/IconWithHoverOverlays/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-YTBVTQNQ.js';import'../../chunk-E6XVMA37.js';import'../../chunk-EDMW226P.js';import'../../chunk-RWXGVZUC.js';
+import IconWithHoverOverlays from './IconWithHoverOverlays';
+export default IconWithHoverOverlays;

package/build/components/IconWithHoverOverlays/style.js

@@ -0,0 +1,45 @@
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+export const HoverContainer = styled(Box)(({ isHovering }) => ({
+    position: 'absolute',
+    zIndex: 1000,
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    borderRadius: '8px',
+    border: `1.03px solid ${isHovering ? '#F2F2F2' : 'transparent'}`,
+    padding: '4px 6px',
+    gap: '4px',
+    boxSizing: 'border-box',
+    whiteSpace: 'nowrap',
+    boxShadow: isHovering ? '10px 0px 8px 0px #F2F2F2' : 'none',
+}));
+export const IconWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '24px',
+    height: '24px',
+    borderRadius: '8px',
+    border: `1px solid ${theme.palette.divider}`,
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    '&.colored': {
+        border: 'none',
+        width: '24px',
+        height: '24px',
+    },
+    img: {
+        maxWidth: '24px',
+        maxHeight: '24px',
+        display: 'block',
+    },
+}));
+export const PlusBadgeWrapper = styled(IconWrapper)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    border: `1px solid ${theme.palette.divider}`,
+    fontWeight: 600,
+    fontSize: '9.78px',
+    lineHeight: '100%',
+    letterSpacing: '0%',
+}));

package/build/components/IconWithLabel/IconWithLabel.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import IconWithOverlay from '../IconWithBadge/IconWithBadge';
+import { IconWithLabelRow, IconWithLabelName } from './style';
+function IconWithLabel({ item }) {
+    return (_jsxs(IconWithLabelRow, { children: [_jsx(IconWithOverlay, { mainIcon: item === null || item === void 0 ? void 0 : item.mainIcon, overlayIcon: item === null || item === void 0 ? void 0 : item.overlayIcon }), _jsx(IconWithLabelName, { children: item === null || item === void 0 ? void 0 : item.label })] }));
+}
+export default IconWithLabel;

package/build/components/IconWithLabel/index.js

@@ -1 +1,2 @@
-import {a}from'../../chunk-LLPG2AC6.js';import'../../chunk-E6XVMA37.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';import {styled}from'@mui/material/styles';import i from'@mui/material/Box';import c from'@mui/material/Typography';import {jsxs,jsx}from'react/jsx-runtime';var r=styled(i)(({theme:o})=>({display:"flex",alignItems:"center",gap:o.spacing(1),overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),l=styled(c)(()=>({fontWeight:400,fontSize:14,lineHeight:"120%",letterSpacing:0,color:"#20232B",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}));function p({item:o}){return jsxs(r,{children:[jsx(a,{mainIcon:o==null?void 0:o.mainIcon,overlayIcon:o==null?void 0:o.overlayIcon}),jsx(l,{children:o==null?void 0:o.label})]})}var t=p;var v=t;export{v as default};
+import IconWithLabel from './IconWithLabel';
+export default IconWithLabel;

package/build/components/IconWithLabel/style.js

@@ -0,0 +1,21 @@
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+export const IconWithLabelRow = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+}));
+export const IconWithLabelName = styled(Typography)(() => ({
+    fontWeight: 400,
+    fontSize: 14,
+    lineHeight: '120%',
+    letterSpacing: 0,
+    color: '#20232B',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+}));

package/build/components/IconsDropdown/IconsDropdown.js

@@ -0,0 +1,31 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { ClickAwayListener } from '@mui/material';
+import CustomBackdrop from '../CustomBackdrop';
+import Menu from '../Menu';
+import IconWithOverlay from '../IconWithBadge';
+import { DropdownTriggerWrapper, MenuContent, MenuItem, ItemLabel, MenuWrapper, TriggerText } from './style';
+function IconsDropdown({ items = [], onSelect }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const onOpenDropdown = (event) => {
+        if (!open)
+            setAnchorEl(event.currentTarget);
+    };
+    const onCloseDropdown = () => {
+        if (open)
+            setAnchorEl(null);
+    };
+    const selectItem = (item) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
+        onCloseDropdown();
+    };
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs("div", { children: [items.length > 3 && (_jsx(DropdownTriggerWrapper, Object.assign({ open: open, onClick: onOpenDropdown }, { children: _jsxs(TriggerText, { children: ["+", items.length - 2] }) }))), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Menu, Object.assign({ anchorEl: anchorEl, open: open, placement: "bottom-end" }, { children: _jsx(MenuWrapper, { children: _jsx(MenuContent, { children: items === null || items === void 0 ? void 0 : items.map((item) => (_jsxs(MenuItem, Object.assign({ sx: {
+                                    overflow: 'hidden',
+                                }, maxWidth: 122.5, onClick: () => selectItem(item.label) }, { children: [_jsx(IconWithOverlay, { overlayPosition: { top: 6, left: 17 }, mainIcon: item.icon, overlayIcon: item.overlayIcon, mainIconSize: item.mainIconSize }), _jsx(ItemLabel, Object.assign({ sx: {
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap',
+                                        } }, { children: item.label }))] }), item.label))) }) }) }))] }) })));
+}
+export default memo(IconsDropdown);

package/build/components/IconsDropdown/index.js

@@ -1 +1,2 @@
-import {a as a$2}from'../../chunk-BTANFCN2.js';import'../../chunk-LLPG2AC6.js';import'../../chunk-E6XVMA37.js';import {a as a$1}from'../../chunk-ZCSUNBRA.js';import'../../chunk-A5FGRP2T.js';import {a}from'../../chunk-M7YGOEQF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';import {memo,useState}from'react';import {styled,Box,Typography,ClickAwayListener}from'@mui/material';import {jsx,jsxs}from'react/jsx-runtime';var u=styled(Box)(({open:o})=>({display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,borderRadius:12,border:"1.03px solid #F2F2F2",backgroundColor:o?"#1F88D0":"transparent",color:o?"#fff":"inherit",cursor:"pointer"})),x=styled(Typography)(()=>({fontWeight:600,fontSize:9.78,lineHeight:1,letterSpacing:0,textAlign:"center"})),I=styled(Box)(()=>({display:"flex",flexDirection:"column",gap:12})),h=styled(Box)(()=>({position:"relative",display:"flex",alignItems:"center",gap:8,cursor:"pointer"})),w=styled(Typography)(()=>({fontWeight:500,fontSize:12,letterSpacing:0,verticalAlign:"middle",color:"#1e1e1e"})),v=styled(Box)(()=>({padding:"8px 4px",width:122.5,marginTop:4.5,borderRadius:4,maxHeight:184,overflowY:"auto"}));function W({items:o=[],onSelect:l}){let[c,s]=useState(null),t=!!c,M=e=>{t||s(e.currentTarget);},p=()=>{t&&s(null);},b=e=>{l==null||l(e),p();};return jsx(ClickAwayListener,{onClickAway:p,children:jsxs("div",{children:[o.length>3&&jsx(u,{open:t,onClick:M,children:jsxs(x,{children:["+",o.length-2]})}),t&&jsx(a,{onClick:p}),jsx(a$1,{anchorEl:c,open:t,placement:"bottom-end",children:jsx(v,{children:jsx(I,{children:o==null?void 0:o.map(e=>jsxs(h,{sx:{overflow:"hidden"},maxWidth:122.5,onClick:()=>b(e.label),children:[jsx(a$2,{overlayPosition:{top:6,left:17},mainIcon:e.icon,overlayIcon:e.overlayIcon,mainIconSize:e.mainIconSize}),jsx(w,{sx:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:e.label})]},e.label))})})})]})})}var y=memo(W);var N=y;export{N as default};
+import IconsDropdown from './IconsDropdown';
+export default IconsDropdown;

package/build/components/IconsDropdown/style.js

@@ -0,0 +1,47 @@
+import { Box, Typography, styled } from '@mui/material';
+export const DropdownTriggerWrapper = styled(Box)(({ open }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    border: `1.03px solid #F2F2F2`,
+    backgroundColor: open ? '#1F88D0' : 'transparent',
+    color: open ? '#fff' : 'inherit',
+    cursor: 'pointer',
+}));
+export const TriggerText = styled(Typography)(() => ({
+    fontWeight: 600,
+    fontSize: 9.78,
+    lineHeight: 1,
+    letterSpacing: 0,
+    textAlign: 'center',
+}));
+export const MenuContent = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+}));
+export const MenuItem = styled(Box)(() => ({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    cursor: 'pointer',
+}));
+export const ItemLabel = styled(Typography)(() => ({
+    fontWeight: 500,
+    fontSize: 12,
+    letterSpacing: 0,
+    verticalAlign: 'middle',
+    color: '#1e1e1e',
+}));
+export const MenuWrapper = styled(Box)(() => ({
+    padding: '8px 4px',
+    width: 122.5,
+    marginTop: 4.5,
+    borderRadius: 4,
+    maxHeight: 184,
+    overflowY: 'auto',
+}));

package/build/components/ImageWrapper/ImageWrapper.js

@@ -0,0 +1,16 @@
+import { styled } from '@mui/material';
+import { motion } from 'framer-motion';
+const ImageWrapper = styled(motion.span)(({ theme, order }) => ({
+    position: 'absolute',
+    left: 0,
+    zIndex: order + 6,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: '12px',
+    backgroundColor: theme.palette.background.paper,
+    width: '24px',
+    height: '24px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export default ImageWrapper;

package/build/components/ImageWrapper/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-L3M6OM4B.js';import'../../chunk-RWXGVZUC.js';
+import ImageWrapper from './ImageWrapper';
+export default ImageWrapper;

package/build/components/Input/Input.js

@@ -0,0 +1,22 @@
+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 { memo } from 'react';
+import Box from '@mui/material/Box';
+import { InputStyled } from './style';
+function Input(_a) {
+    var { isError } = _a, props = __rest(_a, ["isError"]);
+    return (_jsx(Box, Object.assign({ sx: { flexGrow: 1 }, onClick: (e) => {
+            e.stopPropagation();
+        } }, { children: _jsx(InputStyled, Object.assign({}, props, { placeholder: props.placeholder, isError: isError, disableUnderline: true })) })));
+}
+export default memo(Input);

package/build/components/Input/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-LDIEOZVR.js';import'../../chunk-RWXGVZUC.js';
+import Input from './Input';
+export default Input;

package/build/components/Input/style.js

@@ -0,0 +1,18 @@
+import Input from '@mui/material/Input';
+import { styled } from '@mui/material/styles';
+export const InputStyled = styled(Input, { shouldForwardProp: (props) => props !== 'isError' })(({ theme }) => ({
+    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,
+    },
+}));

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

@@ -0,0 +1,30 @@
+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 CurrenciesList from './CurrencyList';
+import { InputNumberStyled, InputNumberWrapper, MobileWrapper, StyledErrorMessage, Wrapper } from './style';
+function AmountInputBase(_a, ref) {
+    var { amountValue, hasError, currencies, isCurrenciesLoading, currencyValue, onCurrencyChange, onAmountChange, onAmountBlur, helperText, required } = _a, props = __rest(_a, ["amountValue", "hasError", "currencies", "isCurrenciesLoading", "currencyValue", "onCurrencyChange", "onAmountChange", "onAmountBlur", "helperText", "required"]);
+    const handleOnChange = (e) => {
+        onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(e.target.value);
+    };
+    const handleOnBlur = (e) => {
+        onAmountBlur === null || onAmountBlur === void 0 ? void 0 : onAmountBlur(e.target.value);
+    };
+    const handleOnCurrencyChange = (currency) => {
+        onCurrencyChange === null || onCurrencyChange === void 0 ? void 0 : onCurrencyChange(currency);
+    };
+    return (_jsxs(Wrapper, Object.assign({ "data-testid": "AmountInput" }, { children: [_jsxs(MobileWrapper, Object.assign({ "data-testid": "AmountInput_MobileWrapper", hasError: hasError }, { children: [_jsx(CurrenciesList, { isLoading: isCurrenciesLoading, currencies: currencies, value: currencyValue, onCurrencyChange: handleOnCurrencyChange, required: required }), _jsx(InputNumberWrapper, { children: _jsx(InputNumberStyled, Object.assign({ value: amountValue, "data-testid": "AmountInput_InputNumberStyled", ref: ref, inputProps: { autoComplete: 'off' }, error: hasError }, props, { onChange: handleOnChange, onBlur: handleOnBlur, hideArrows: true })) })] })), _jsx(StyledErrorMessage, { children: helperText })] })));
+}
+AmountInputBase.displayName = 'AmountInputBase';
+export default React.forwardRef(AmountInputBase);

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

@@ -0,0 +1,50 @@
+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 } from '../../../../constants/index.js';
+import { CurrencyStyled, CurrenciesWrapper, CurrenciesListStyled, CurrencyButton, Required } from './style';
+function CurrenciesList({ isLoading, currencies, value: currencyValue, onCurrencyChange, required }) {
+    const [selectedCurrency, setSelectedCurrency] = useState();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [filteredCurrencies, setFilteredCurrencies] = useState([]);
+    const open = Boolean(anchorEl);
+    const openDropdown = (event) => {
+        event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    };
+    const closeDropdown = () => {
+        setAnchorEl(null);
+    };
+    const handleOnCurrencyChange = (currency) => {
+        onCurrencyChange === null || onCurrencyChange === void 0 ? void 0 : onCurrencyChange(currency);
+        setSelectedCurrency(currency);
+        closeDropdown();
+        setFilteredCurrencies(currencies);
+    };
+    useEffect(() => {
+        if (currencyValue)
+            setSelectedCurrency(currencyValue);
+    }, [currencyValue === null || currencyValue === void 0 ? void 0 : currencyValue.currencyId]);
+    useEffect(() => {
+        if (currencies.length)
+            setFilteredCurrencies(currencies);
+    }, [currencies.length]);
+    return (_jsxs(Box, Object.assign({ "data-testid": "currenciesList", sx: { position: 'relative' } }, { children: [_jsx(CurrencyButton, Object.assign({ type: "button", "aria-describedby": "currenciesList_currenciesWrapper", onClick: openDropdown, disabled: isLoading, 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: [selectedCurrency && (_jsxs(_Fragment, { children: [_jsx("img", { src: selectedCurrency.logo, alt: "c", className: "logo" }), _jsx("span", { children: selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.code.english })] })), 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 }), open && (_jsx(CurrenciesWrapper, Object.assign({ id: "currenciesList_currenciesWrapper", open: open, anchorEl: anchorEl, "data-testid": "currenciesList_currenciesWrapper", placement: "bottom-start" }, { children: _jsx(CurrenciesListStyled, Object.assign({ "data-testid": "currenciesList_currenciesListStyled" }, { children: filteredCurrencies.map((currency) => {
+                        const isSelected = (selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.currencyId) === currency.currencyId;
+                        return (_jsxs(CurrencyStyled, Object.assign({ onClick: () => {
+                                handleOnCurrencyChange(currency);
+                            }, sx: {
+                                backgroundColor: isSelected ? '#F9F9F9' : 'transparent',
+                                color: isSelected ? '#000' : '#8D8D94',
+                            } }, { children: [_jsx("img", { src: currency.logo, alt: "c", className: "logo" }), _jsx("span", { children: currency === null || currency === void 0 ? void 0 : currency.code.english })] }), `currency-code-${currency.currencyId}`));
+                    }) })) })))] })));
+}
+CurrenciesList.displayName = 'CurrenciesList';
+export default memo(CurrenciesList);

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

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

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

@@ -0,0 +1,42 @@
+import { Popper, styled, Box } from '@mui/material';
+export const CurrencyButton = styled('button')(({ 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 CurrenciesWrapper = styled(Popper)(({ theme }) => ({
+    // position: 'absolute',
+    // top: 30,
+    // left: 0,
+    zIndex: 99,
+    backgroundColor: theme.palette.common.white,
+    padding: '4px 8px',
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.divider}`,
+    width: 100,
+}));
+export const CurrenciesListStyled = styled('ul')(() => ({
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+    maxHeight: 100,
+    overflow: 'auto',
+}));
+export const CurrencyStyled = 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 Required = styled(Box)(() => ({
+    color: 'red !important',
+}));

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

@@ -0,0 +1,24 @@
+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 { forwardRef } from 'react';
+import { InputStyled, Wrapper } from './style';
+function InputNumber(_a, ref) {
+    var { hasError, hideArrows, inputProps } = _a, props = __rest(_a, ["hasError", "hideArrows", "inputProps"]);
+    return (_jsx(Wrapper, Object.assign({ onClick: (e) => {
+            e.stopPropagation();
+        } }, { children: _jsx(InputStyled, Object.assign({ ref: ref, placeholder: props.placeholder, hideArrows: true, hasError: hasError, disableUnderline: true, inputProps: Object.assign(Object.assign({}, inputProps), { type: 'number' }), onKeyDown: (evt) => {
+                if (['e', 'E', '+', '-'].includes(evt.key))
+                    evt.preventDefault();
+            } }, props)) })));
+}
+export default forwardRef(InputNumber);

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

@@ -0,0 +1,3 @@
+import InputNumber from './InputNumber';
+export * from './type';
+export default InputNumber;

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

@@ -0,0 +1,24 @@
+import Box from '@mui/material/Box';
+import Input from '@mui/material/Input';
+import { styled } from '@mui/material/styles';
+export const InputStyled = styled(Input, {
+    shouldForwardProp: (props) => !['hasError', '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,
+    },
+}))));
+export const Wrapper = styled(Box)(() => ({
+    flex: 1,
+}));

package/build/components/InputBase/AmountInputBase/InputNumber/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+import AmountInputBase from './AmountInputBase';
+export { default as CurrencyList } from './CurrencyList';
+export { default as InputNumber } from './InputNumber';
+export default AmountInputBase;