@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.fix.1

package/build/components/ImageWrapper/ImageWrapper.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -13,20 +12,21 @@ declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -46,7 +46,7 @@ declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -62,7 +62,7 @@ declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -72,7 +72,7 @@ declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

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/InputBase/InputBase.d.ts

@@ -5,5 +5,5 @@ export interface InputBaseProps extends Omit<InputProps, 'onChange'> {
     onChange?: (value: string) => void;
     hasError: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Readonly<InputBaseProps>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export default _default;
+declare const InputBase: React.ForwardRefExoticComponent<Omit<InputBaseProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default InputBase;

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

@@ -13,7 +13,7 @@ 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';
-function InputBase(_a, ref) {
+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) => {
@@ -23,6 +23,6 @@ function InputBase(_a, ref) {
     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 React.forwardRef(InputBase);
+export default InputBase;

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

@@ -5,6 +5,7 @@ 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);
@@ -50,15 +51,15 @@ 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 && (_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}`));
-                        }) }))] })))] })));
+                } }, { 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/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,20 +18,23 @@ 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);
     };
     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({ 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: {
+    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({ value: (_a = (getOptionValue ? getOptionValue(option) : option === null || option === void 0 ? void 0 : option.id)) !== null && _a !== void 0 ? _a : '', onClick: () => {
+                                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',

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.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const FormControlStyles: import("@emotion/styled").StyledComponent<import("@mui/material/FormControl").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "disabled" | "error" | "style" | "color" | "className" | "classes" | "children" | "margin" | "sx" | "variant" | "size" | "fullWidth" | "required" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "color" | "margin" | "disabled" | "error" | "classes" | "className" | "style" | "children" | "sx" | "variant" | "size" | "fullWidth" | "required" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledSelect: import("@emotion/styled").StyledComponent<import("@mui/material/Select").SelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledErrorMessage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const MuiSelect: import("@emotion/styled").StyledComponent<import("@mui/material/Select").SelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

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/CountriesDropDown/CountriesDropdown.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import type { Country } from '../../../types/index.js';
-declare function CountriesCode({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries, isFetching, }: {
+type CountriesDropdownProps = {
     value?: Partial<Country>;
     defaultCountry?: string;
     onChangeCountry?: (country: Country) => void;
     required?: boolean;
     countries: Country[];
-    isFetching: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof CountriesCode>;
+    isLoading: boolean;
+};
+declare function CountriesDropdown({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries, isLoading, }: Readonly<CountriesDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CountriesDropdown>;
 export default _default;

package/build/components/Inputs/CountriesDropDown/CountriesDropdown.js

@@ -6,7 +6,7 @@ import Popper from '@mui/material/Popper';
 import Skeleton from '@mui/material/Skeleton';
 import { downArrowIcon, searchIcon } from '../../../constants/index.js';
 import { CountryStyled, CountriesWrapper, CountriesList, InputStyled, CountryButton, Required } from './style';
-function CountriesCode({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries = [], isFetching = false, }) {
+function CountriesDropdown({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries = [], isLoading = false, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const [filteredCountries, setFilteredCountries] = useState([]);
     const [searchValue, setSearchValue] = useState();
@@ -45,7 +45,7 @@ function CountriesCode({ defaultCountry, value: selectedCountry, onChangeCountry
         }
         setFilteredCountries(countries.filter((country) => country.idd_prefix.toString().startsWith(value.toString())));
     };
-    if (isFetching) {
+    if (isLoading) {
         return _jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } });
     }
     return (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeDropdown }, { children: _jsxs(Box, Object.assign({ "data-testid": "CountriesCode", sx: { position: 'relative' } }, { children: [_jsxs(CountryButton, Object.assign({ type: "button", onClick: openDropdown, sx: {
@@ -56,4 +56,4 @@ function CountriesCode({ defaultCountry, value: selectedCountry, onChangeCountry
                                         selectNewCode(country);
                                     } }, { children: [country.logo ? _jsx("img", { src: country.logo, alt: "c", className: "logo" }) : _jsx(Skeleton, { variant: "rectangular", className: "logo" }), _jsx("span", { children: `+${country.idd_prefix}` })] }), `country-code-${country.countryId}`))) })] })) }))] })) })));
 }
-export default memo(CountriesCode);
+export default memo(CountriesDropdown);

package/build/components/Inputs/FileInput/style.d.ts

@@ -8,4 +8,4 @@ export declare const StyledFileInput: import("@emotion/styled").StyledComponent<
 }, {}, {}>;
 export declare const BrowseButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "disabled" | "style" | "color" | "className" | "classes" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -18,7 +18,7 @@ export default function JSONViewer({ index, json, requestJson = {}, isWindowMini
     var _a, _b, _c, _d;
     const [isMaximized, setIsMaximized] = useState(false);
     const [isResized, setIsResized] = useState(false);
-    const [isResponseCollapsed, setIsResponseCollapsed] = useState(true);
+    const [isResponseCollapsed, setIsResponseCollapsed] = useState(false);
     const [isScrollingResponse, setIsScrollingResponse] = useState(false);
     const [newDimensions, setNewDimensions] = useState({ width: 0, height: 0 });
     const [isToolbarAnimationDisabled, setIsToolbarAnimationDisabled] = useState(true);
@@ -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/components/JSONTitleBar/JSONTitleBar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { JSONTitleBarProps } from './type';
-declare function JSONTitleBar({ title, onClose, onMaximize, maximized, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded, showRequestIcon, isHovered, }: JSONTitleBarProps): import("react/jsx-runtime").JSX.Element;
+declare function JSONTitleBar({ title, onClose, onMaximize, maximized, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded, showRequestIcon, isHovered, }: Readonly<JSONTitleBarProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof JSONTitleBar>;
 export default _default;

package/build/components/JSONViewer/components/JSONTitleBar/JSONTitleBar.js

@@ -4,6 +4,6 @@ import Toolbar, { StyledHeaderWrapperStyled } from '../../../Toolbar';
 import { CloseIcon, ExpandButton, MaximizeIcon } from '../../../ToolbarIcon';
 import { jsonIcon } from '../../../../constants/index.js';
 function JSONTitleBar({ title, onClose, onMaximize, maximized = false, id, onMouseHover, onMouseLeave, onRequestClick, isRequestExpanded = false, showRequestIcon = false, isHovered = false, }) {
-    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, maximized: maximized || false, sandboxMode: false }, { children: _jsx(Toolbar, { isHovered: true, onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, title: title, icon: jsonIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize }), showRequestIcon && (_jsx(ExpandButton, Object.assign({ onClick: onRequestClick, isExpanded: isRequestExpanded, isHovered: isHovered }, { children: "Request" })))] }) }) })));
+    return (_jsx(StyledHeaderWrapperStyled, Object.assign({ id: id, maximized: maximized || false }, { children: _jsx(Toolbar, { isHovered: true, onMouseEnter: onMouseHover, onMouseLeave: onMouseLeave, isMaximized: maximized, title: title, icon: jsonIcon, leftActions: _jsxs(_Fragment, { children: [_jsx(CloseIcon, { onClick: onClose }), _jsx(MaximizeIcon, { isMaximized: maximized, onClick: onMaximize }), showRequestIcon && (_jsx(ExpandButton, Object.assign({ onClick: onRequestClick, isExpanded: isRequestExpanded, isHovered: isHovered }, { children: "Request" })))] }) }) })));
 }
 export default memo(JSONTitleBar);

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/JSONViewer/style.d.ts

@@ -70,7 +70,7 @@ export declare const StyledCopyButton: import("@emotion/styled").StyledComponent
 export declare const StyledSearchInput: import("@emotion/styled").StyledComponent<import("@mui/material").InputProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledTitle: 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" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "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" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const SectionWrapper: 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> & {
@@ -92,11 +92,10 @@ export declare const StyledHeaderWrapper: import("@emotion/styled").StyledCompon
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const JSONViewerWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -104,20 +103,21 @@ export declare const JSONViewerWrapper: import("@emotion/styled").StyledComponen
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -137,7 +137,7 @@ export declare const JSONViewerWrapper: import("@emotion/styled").StyledComponen
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -153,7 +153,7 @@ export declare const JSONViewerWrapper: import("@emotion/styled").StyledComponen
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -163,7 +163,7 @@ export declare const JSONViewerWrapper: import("@emotion/styled").StyledComponen
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -357,11 +357,10 @@ export declare const JSONViewerWrapper: import("@emotion/styled").StyledComponen
 }, {}, {}>;
 export declare const JSONViewerWrapperRequest: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -369,20 +368,21 @@ export declare const JSONViewerWrapperRequest: import("@emotion/styled").StyledC
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -402,7 +402,7 @@ export declare const JSONViewerWrapperRequest: import("@emotion/styled").StyledC
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -418,7 +418,7 @@ export declare const JSONViewerWrapperRequest: import("@emotion/styled").StyledC
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -428,7 +428,7 @@ export declare const JSONViewerWrapperRequest: import("@emotion/styled").StyledC
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;