@tap-payments/os-micro-frontend-shared 0.1.96-test.24 → 0.1.96-test.26

package/build/components/AmountInput/AmountInput.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material/Box';
+import { Currency } from '../../types/index.js';
+interface AmountInputI extends BoxProps {
+    amount: number | string;
+    setAmount: (value?: number) => void;
+    maxAmount?: number;
+    isError?: boolean;
+    placeholder?: string;
+    selectedCurrency: Currency;
+}
+declare function AmountInput({ amount, setAmount, placeholder, maxAmount, isError, selectedCurrency, ...props }: AmountInputI): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof AmountInput>;
+export default _default;

package/build/components/AmountInput/AmountInput.js

@@ -0,0 +1,43 @@
+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, useMemo, useState } from 'react';
+import { isSafariBrowser, getAmountPlaceholder } from '../../utils/index.js';
+import { DisplayAmount } from '../index.js';
+import { Wrapper, InputStyled } from './style';
+const isSafari = isSafariBrowser();
+function AmountInput(_a) {
+    var { amount, setAmount, placeholder, maxAmount, isError, selectedCurrency } = _a, props = __rest(_a, ["amount", "setAmount", "placeholder", "maxAmount", "isError", "selectedCurrency"]);
+    const [editMode, setEditMode] = useState(false);
+    const [value, setValue] = useState(amount || '');
+    const currencyPlaceholder = useMemo(() => getAmountPlaceholder(selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.decimals), [selectedCurrency]);
+    const onChange = (e) => {
+        const newValue = Number(e.target.value) || 0;
+        if (!!maxAmount && newValue > maxAmount)
+            return false;
+        setValue(newValue);
+        setAmount(newValue);
+    };
+    const onBlur = () => {
+        setEditMode(false);
+        setAmount(Number(value));
+    };
+    const onKeyDown = (evt) => {
+        if (isSafari && isNaN(Number(evt.key)) && evt.key !== 'Backspace' && evt.key !== '.') {
+            evt.preventDefault();
+        }
+    };
+    return (_jsx(Wrapper, Object.assign({ sx: props.sx }, { children: editMode ? (_jsx(InputStyled, { placeholder: currencyPlaceholder, value: value, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, isError: isError, inputProps: { step: '0.01' }, hideArrows: true, autoFocus: true })) : (_jsx(DisplayAmount, { selectedCurrency: selectedCurrency, amount: amount, onClick: () => {
+                setEditMode(true);
+            } })) })));
+}
+export default memo(AmountInput);

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

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

package/build/components/AmountInput/index.js

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

package/build/components/AmountInput/style.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const InputStyled: import("@emotion/styled").StyledComponent<Omit<Readonly<import("@mui/material").InputProps & {
+    isError?: boolean | undefined;
+    hideArrows?: boolean | undefined;
+}>, "ref"> & import("react").RefAttributes<HTMLInputElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/AmountInput/style.js

@@ -0,0 +1,30 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { InputNumber } from '../index.js';
+export const Wrapper = styled(Box)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    border: `1px solid ${theme.palette.divider}`,
+    padding: theme.spacing(1),
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    width: 93,
+    height: 32,
+    textAlign: 'right',
+    input: {
+        fontSize: '11px',
+        border: 'none',
+        color: theme.palette.text.primary,
+        height: 30,
+        padding: 0,
+        textAlign: 'right',
+    },
+    img: { cursor: 'pointer' },
+}));
+export const InputStyled = styled(InputNumber)(() => ({
+    padding: 0,
+    border: 'none',
+    height: 24,
+    input: { textAlign: 'right', width: '100%' },
+}));

package/build/components/AppServices/AppServices.js

@@ -30,6 +30,8 @@ function AppServices({ isMaximized, serviceCode, dimensions, appCode, services,
     const handleOpenDropdown = () => {
         setOpenDropdown((prev) => !prev);
     };
+    // NOTE: Removed `pathname` from deps — tab title now updates based on serviceCode changes.
+    // Revisit if issues arise with tab title updates during navigation.
     const activeTabTitle = useMemo(() => {
         var _a, _b;
         return getNameText((_b = (_a = servicesList.filter((service) => service.code.toLowerCase() === decodeURIComponent(serviceCode).toLowerCase())) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name, i18n.language);

package/build/components/BackgroundAnimation/BackgroundAnimation.js

@@ -11,6 +11,34 @@ const Wrapper = styled(Box)(({ theme }) => ({
     width: '100%',
     height: '100%',
     backgroundColor: theme.palette.grey[100],
+    // '.blob_right': {
+    // 	animation: 'right 35s ease infinite alternate'
+    // },
+    // '.blob_left': {
+    // 	animation: 'left 35s ease infinite alternate'
+    // },
+    // '@keyframes right': {
+    // 	'0%': {
+    // 		transform: 'translate(0, 0) scale(1)'
+    // 	},
+    // 	'50%': {
+    // 		transform: 'translate(-50%, -200%) scale(1.5)'
+    // 	},
+    // 	'100%': {
+    // 		transform: 'translate(0, 0) scale(1)'
+    // 	}
+    // },
+    // '@keyframes left': {
+    // 	'0%': {
+    // 		transform: 'translate(0, 0) scale(1)'
+    // 	},
+    // 	'50%': {
+    // 		transform: 'translate(50%, 100%) scale(1.5)'
+    // 	},
+    // 	'100%': {
+    // 		transform: 'translate(0, 0) scale(1)'
+    // 	}
+    // }
 }));
 function BackgroundAnimation({ gradient = 'purpleBlue', blobHeight = '30vw', blobWidth = '30vw' }) {
     return (_jsxs(Wrapper, Object.assign({ "aria-label": "Background-Animation-section", className: "blobContainer", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, { children: [_jsx(Blob, { "aria-label": "Background-Animation-Blob-right", gradient: gradient, width: blobWidth, height: blobHeight, className: "blob_right", style: {

package/build/components/BackgroundAnimation/Blob/Blob.js

@@ -26,6 +26,8 @@ const Wrapper = styled(Box)(() => ({
 function Blob(_a) {
     var { gradient = 'blueGreen', height = 500, width = 500, style } = _a, props = __rest(_a, ["gradient", "height", "width", "style"]);
     const theme = useTheme();
+    // TODO: need to add direction of gradient translate.
+    // example Blob one will have a translateX of 100% and Blob two will have a translateX of -100%.
     return (_jsx(Wrapper, Object.assign({}, props, { className: props.className || '', sx: Object.assign({ backgroundImage: theme.palette.background.gradient[gradient], width,
             height }, style) })));
 }

package/build/components/Chip/style.js

@@ -49,6 +49,7 @@ export const SourcesContainer = styled(motion.span)(({ sourcesCount }) => ({
     backgroundColor: 'transparent',
     borderRadius: '16px',
 }));
+// eslint-disable-next-line react-refresh/only-export-components
 export const defaultGetSourceAnimation = (params) => {
     const { index, xDelta = 39, shadow, itemsCount = 0, expandDirection = 'RIGHT' } = params;
     const startDisplacement = (itemsCount - 1) * 6;

package/build/components/ColorPicker/HexaFields.js

@@ -13,6 +13,7 @@ const HexaFields = ({ value, onChange }) => {
     }, [value]);
     const [hexInput, setHexInput] = useState(colorAsHex);
     const alphaPercent = Math.round(value.a * 100);
+    // Sync hexInput whenever `value` changes externally
     useEffect(() => {
         const newHex = Color.rgb(value.r, value.g, value.b).hex().replace('#', '');
         setHexInput(newHex);
@@ -26,6 +27,7 @@ const HexaFields = ({ value, onChange }) => {
     const handleHexBlur = () => {
         let formattedValue = hexInput;
         if (formattedValue.length === 3) {
+            // Expand shorthand like FFF -> FFFFFF
             formattedValue = formattedValue
                 .split('')
                 .map((ch) => ch + ch)
@@ -43,10 +45,12 @@ const HexaFields = ({ value, onChange }) => {
                 });
             }
             catch (_a) {
+                // invalid hex -> revert to current value
                 setHexInput(colorAsHex);
             }
         }
         else {
+            // revert to current value if incomplete
             setHexInput(colorAsHex);
         }
     };

package/build/components/ColorPicker/style.js

@@ -115,7 +115,7 @@ export const StyledInput = styled(TextField)(({ theme }) => ({
                 margin: 0,
             },
             '&[type=number]': {
-                MozAppearance: 'textfield',
+                MozAppearance: 'textfield', // Firefox
             },
         },
         '& .MuiOutlinedInput-notchedOutline': {

package/build/components/Dialog/style.js

@@ -28,6 +28,7 @@ export const DialogContent = styled(Box)(({ theme }) => ({
 export const DialogHeader = styled(Box)(({ theme }) => ({
     minHeight: 95,
     background: theme.palette.grey[400],
+    // backdropFilter: 'blur(4px)',
     paddingInline: '24px',
     paddingTop: '23px',
     paddingBottom: '23px',

package/build/components/DisplayAmount/DisplayAmount.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material/Box';
+import { Currency } from '../../types/index.js';
+interface DisplayAmountI extends BoxProps {
+    amount: number;
+    selectedCurrency: Currency;
+}
+declare function DisplayAmount({ amount, selectedCurrency, ...props }: DisplayAmountI): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof DisplayAmount>;
+export default _default;

package/build/components/DisplayAmount/DisplayAmount.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, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { formatAmountWithCurrency } from '../../utils/index.js';
+import { DecimalSpan, CurrencySpan } from './style';
+function DisplayAmount(_a) {
+    var _b;
+    var { amount, selectedCurrency } = _a, props = __rest(_a, ["amount", "selectedCurrency"]);
+    const { integerAmount, decimalAmount } = formatAmountWithCurrency(amount, (_b = selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.code) === null || _b === void 0 ? void 0 : _b.english);
+    return (_jsxs(CurrencySpan, Object.assign({}, props, { children: [_jsx("span", { children: integerAmount }), _jsx("span", { children: "." }), _jsx(DecimalSpan, { children: decimalAmount })] })));
+}
+export default memo(DisplayAmount);

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

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

package/build/components/DisplayAmount/index.js

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

package/build/components/DisplayAmount/style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const DecimalSpan: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const CurrencySpan: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/DisplayAmount/style.js

@@ -0,0 +1,14 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const DecimalSpan = styled('span')(() => ({
+    fontWeight: 400,
+}));
+export const CurrencySpan = styled(Box)(() => ({
+    fontWeight: 700,
+    fontSize: '11px',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'default',
+    whiteSpace: 'nowrap',
+    overflow: 'auto',
+}));

package/build/components/Dropdown2/style.js

@@ -12,11 +12,13 @@ export const Info = styled(Box)(() => ({
 export const Label = styled(Box)(() => ({
     fontWeight: 600,
     fontSize: '8px',
+    // lineHeight: '10.93px',
     color: '#8D8D94',
 }));
 export const Value = styled(Box)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '11px',
     lineHeight: 1.1,
+    // lineHeight: '15.03px',
     color: theme.palette.text.primary,
 }));

package/build/components/ErrorToast/ErrorToast.d.ts

@@ -0,0 +1,3 @@
+import { ErrorToastProps } from './type';
+declare function ErrorToast({ message, onRetry, position, iconSrc }: ErrorToastProps): import("react/jsx-runtime").JSX.Element;
+export default ErrorToast;

package/build/components/ErrorToast/ErrorToast.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { reloadIcon } from '../../constants/index.js';
+import { ToastContainer, ToastIcon, ToastText } from './style';
+function ErrorToast({ message = 'Something went wrong', onRetry, position = 'bottom-center', iconSrc }) {
+    return (_jsxs(ToastContainer, Object.assign({ toastPosition: position }, { children: [_jsx(ToastText, { children: message }), _jsx(ToastIcon, { onClick: onRetry, src: iconSrc || reloadIcon, alt: "toast-icon" })] })));
+}
+export default ErrorToast;

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

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

package/build/components/ErrorToast/index.js

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

package/build/components/ErrorToast/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ToastContainerProps } from './type';
+export declare const ToastContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToastContainerProps, {}, {}>;
+export declare const ToastIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const ToastText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "style" | "className" | "classes" | "children" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/ErrorToast/style.js

@@ -0,0 +1,33 @@
+import { Box, styled, Typography } from '@mui/material';
+export const ToastContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'toastPosition',
+})(({ theme, toastPosition }) => (Object.assign(Object.assign(Object.assign(Object.assign({ width: 160, position: 'absolute', bottom: 12, zIndex: 1000, display: 'flex', justifyContent: 'space-between', alignItems: 'center', backgroundColor: theme.palette.background.paper, height: 31, gap: theme.spacing(1), borderRadius: theme.shape.borderRadius, borderWidth: 1, padding: theme.spacing(1), border: `1px solid ${theme.palette.divider}`, boxShadow: '0px 0px 16px 0px #00000014', animation: 'slideIn 0.5s ease-out' }, (toastPosition === 'bottom-center' && {
+    left: '50%',
+    transform: 'translateX(-50%)',
+})), (toastPosition === 'bottom-right' && {
+    right: 12,
+    transform: 'none',
+})), (toastPosition === 'bottom-left' && {
+    left: 12,
+    transform: 'none',
+})), { '@keyframes slideIn': {
+        '0%': {
+            opacity: 0,
+            transform: toastPosition === 'bottom-center' ? 'translate(-50%, 100%)' : toastPosition === 'bottom-right' ? 'translateX(100%)' : 'translateX(-100%)',
+        },
+        '100%': {
+            opacity: 1,
+            transform: toastPosition === 'bottom-center' ? 'translate(-50%, 0)' : 'translateX(0)',
+        },
+    } })));
+export const ToastIcon = styled('img')({
+    cursor: 'pointer',
+});
+export const ToastText = styled(Typography)(({ theme }) => ({
+    fontSize: 11,
+    fontWeight: 500,
+    color: theme.palette.text.primary,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+}));

package/build/components/ErrorToast/type.d.ts

@@ -0,0 +1,10 @@
+export type ToastPosition = 'bottom-center' | 'bottom-right' | 'bottom-left';
+export interface ErrorToastProps {
+    message?: string;
+    onRetry?: () => void;
+    position?: ToastPosition;
+    iconSrc?: string;
+}
+export interface ToastContainerProps {
+    toastPosition: ToastPosition;
+}

package/build/components/ErrorToast/type.js

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

package/build/components/HeatMap/constant.js

@@ -1 +1 @@
-export const COLOR_OPACITY_DEGREE = [0.06, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
+export const COLOR_OPACITY_DEGREE = [0.06, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]; // 0 - 10 so we have a fixed color degrees as per the design

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

@@ -10,6 +10,9 @@ export const CurrencyButton = styled('button')(({ theme }) => ({
     cursor: 'pointer',
 }));
 export const CurrenciesWrapper = styled(Popper)(({ theme }) => ({
+    // position: 'absolute',
+    // top: 30,
+    // left: 0,
     zIndex: 99,
     backgroundColor: theme.palette.common.white,
     padding: '4px 8px',

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

@@ -51,7 +51,7 @@ function CountriesList({ isLoading, countries, value: countryValue, onCountryCha
                     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 }), 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) => {
+                } }, { 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);

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

@@ -12,6 +12,9 @@ export const CountryButton = styled('button')(({ theme, disabled }) => ({
     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',

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

@@ -18,6 +18,7 @@ import { FormControlStyles, StyledErrorMessage, MuiSelect, Wrapper } from './sty
 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);
     };

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

@@ -18,13 +18,16 @@ import { FormControlStyles, StyledErrorMessage, MuiSelect, Wrapper } from './sty
 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);
         });

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

@@ -43,10 +43,10 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
     },
     '& .MuiOutlinedInput-root': {
         '& fieldset': {
-            borderColor: 'rgba(0, 0, 0, 0.23)',
+            borderColor: 'rgba(0, 0, 0, 0.23)', // default
         },
         '&.Mui-focused fieldset': {
-            border: '2px solid red',
+            border: '2px solid red', // focus
         },
     },
     minWidth: 52,
@@ -56,6 +56,7 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
     '& .MuiFormLabel-asterisk': {
         color: 'red',
     },
+    //  style form label
     '& .MuiFormLabel-root': {
         fontSize: '10px',
         fontStyle: 'normal',

package/build/components/InputNumber/InputNumber.js

@@ -25,6 +25,7 @@ function InputNumber(_a, ref) {
             onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
             return;
         }
+        // eslint-disable-next-line
         if (isSafari && isNaN(evt.key) && evt.key !== 'Backspace') {
             evt.preventDefault();
         }
@@ -32,6 +33,7 @@ function InputNumber(_a, ref) {
     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();
             } })) })));
 }

package/build/components/Inputs/Input/style.js

@@ -23,7 +23,9 @@ export const StyledInput = styled(TextField, {
         border: '1px solid green',
     }, '&.Mui-focused fieldset': {
         border: '1px solid blue',
-    }, border: '1px solid #F2F2F2', borderRadius: '4px', '& .MuiInputBase-input': {
+    }, border: '1px solid #F2F2F2', borderRadius: '4px', 
+    // input style
+    '& .MuiInputBase-input': {
         margin: '0px !important',
         padding: '0px !important',
         color: '#20232B !important',
@@ -31,7 +33,9 @@ export const StyledInput = styled(TextField, {
         fontStyle: 'normal !important',
         fontWeight: '500 !important',
         lineHeight: '130%  !important',
-    }, '& .MuiFormLabel-root': {
+    }, 
+    //  style form label
+    '& .MuiFormLabel-root': {
         fontSize: '10px',
         fontStyle: 'normal',
         fontWeight: 500,

package/build/components/Inputs/Select/Select.js

@@ -20,6 +20,7 @@ export default function Select(props) {
                             '& .MuiFormLabel-asterisk': {
                                 color: 'red',
                             },
+                            //  style form label
                             '& .MuiFormLabel-root': {
                                 fontSize: '10px',
                                 fontStyle: 'normal',

package/build/components/Inputs/Select/style.js

@@ -5,6 +5,7 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
     color: theme.palette.common.black,
     borderRadius: '4px',
     boxShadow: '0px 0px 6px 0px rgba(0, 0, 0, 0.11);',
+    // padding: '4px 8px',
     height: '32px',
     border: 'none',
     outline: 'none',
@@ -14,10 +15,10 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
     },
     '& .MuiOutlinedInput-root': {
         '& fieldset': {
-            borderColor: 'rgba(0, 0, 0, 0.23)',
+            borderColor: 'rgba(0, 0, 0, 0.23)', // default
         },
         '&.Mui-focused fieldset': {
-            border: '2px solid red',
+            border: '2px solid red', // focus
         },
     },
 }));

package/build/components/JSONViewer/JSONViewer.js

@@ -201,7 +201,11 @@ export default function JSONViewer({ index, json, requestJson = {}, isWindowMini
                                                             if (!keyName) {
                                                                 return _jsx("span", {});
                                                             }
-                                                        } }), _jsx(JsonView.Copied, { render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
+                                                        } }), _jsx(JsonView.Copied
+                                                    // @ts-expect-error Type is not supported
+                                                    , { 
+                                                        // @ts-expect-error Type is not supported
+                                                        render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
                                                             if (!keyName) {
                                                                 return _jsx("span", {});
                                                             }
@@ -253,7 +257,11 @@ export default function JSONViewer({ index, json, requestJson = {}, isWindowMini
                                                         if (!keyName) {
                                                             return _jsx("span", {});
                                                         }
-                                                    } }), _jsx(JsonView.Copied, { render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
+                                                    } }), _jsx(JsonView.Copied
+                                                // @ts-expect-error Type is not supported
+                                                , { 
+                                                    // @ts-expect-error Type is not supported
+                                                    render: ({ 'data-copied': copied, style, onClick }, { keyName }) => {
                                                         if (!keyName) {
                                                             return _jsx("span", {});
                                                         }

package/build/components/JSONViewer/context/Provider.js

@@ -11,9 +11,11 @@ export const JsonViewerDialogContextProvider = ({ children }) => {
             alert('Maximum allowed active Json Viewer is 7 per table.');
             return;
         }
+        // Prevent duplicate JsonViewer that's currently open
         if (jsonViewerList.some((item) => item.json.id === jsonViewer.json.id)) {
             return;
         }
+        // Create a copy to avoid mutating the original object
         const jsonCopy = structuredClone(jsonViewer.json);
         const requestData = jsonCopy.request_body;
         const jsonViewerPreservedRequest = {

package/build/components/LanguageDropdown/LanguageDropdown.d.ts

@@ -0,0 +1,6 @@
+interface LanguageDropdownProps {
+    defaultLanguage?: string;
+    onChange?: (language: string) => void;
+}
+export default function LanguageDropdown({ defaultLanguage, onChange }: LanguageDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};