@tap-payments/os-micro-frontend-shared 0.1.125 → 0.1.127-test.7

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

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 }), 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/SearchListInput/SearchListInput.d.ts

@@ -0,0 +1,10 @@
+import { BoxProps } from '@mui/material/Box';
+type Props = BoxProps & {
+    value: string;
+    apiKey: string;
+    placeholder: string;
+    onSearchChange: (value: string) => void;
+    onSearchReset: () => void;
+};
+declare const SearchListInput: ({ value, apiKey, placeholder, onSearchChange, onSearchReset, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SearchListInput;

package/build/components/SearchListInput/SearchListInput.js

@@ -0,0 +1,20 @@
+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 Box from '@mui/material/Box';
+import { grayCloseIcon, searchIcon } from '../../constants/index.js';
+import { InputsWrapper, InputStyled } from './style';
+const SearchListInput = (_a) => {
+    var { value, apiKey, placeholder, onSearchChange, onSearchReset } = _a, props = __rest(_a, ["value", "apiKey", "placeholder", "onSearchChange", "onSearchReset"]);
+    return (_jsx(InputsWrapper, Object.assign({ component: "main" }, props, { children: _jsx(InputStyled, { className: "input", name: apiKey, placeholder: placeholder, onChange: (e) => onSearchChange(e.target.value), value: value, inputProps: { autoComplete: 'off' }, endAdornment: _jsx(Box, { component: "img", "data-icon": value ? 'close' : 'search', src: value ? grayCloseIcon : searchIcon, alt: "search", className: "icon", sx: { cursor: value ? 'pointer' : 'default' }, onClick: onSearchReset }) }) })));
+};
+export default SearchListInput;

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

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

package/build/components/SearchListInput/index.js

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const InputStyled: import("@emotion/styled").StyledComponent<Readonly<import("@mui/material").InputProps & {
+    isError?: boolean | undefined;
+}> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const InputsWrapper: 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/SearchListInput/style.js

@@ -0,0 +1,15 @@
+import { styled } from '@mui/material/styles';
+import Input from '../Input';
+import Box from '@mui/material/Box';
+export const InputStyled = styled(Input)(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    '.icon': {
+        width: 14,
+    },
+}));
+export const InputsWrapper = styled(Box)(() => ({
+    padding: '8px 16px',
+    '> div + div': {
+        marginTop: '8px',
+    },
+}));

package/build/components/TableCells/CustomCells/BrandsCell/BrandsCell.js

@@ -19,5 +19,5 @@ import IconWithBadge from '../../../IconWithBadge';
 export default function BrandsCell(_a) {
     var { brand, verificationStatus, hideStatus } = _a, props = __rest(_a, ["brand", "verificationStatus", "hideStatus"]);
     const icon = verificationIcon[verificationStatus !== null && verificationStatus !== void 0 ? verificationStatus : 'incomplete'];
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(BrandsWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(IconWithBadge, { mainIcon: brand.logo, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }), _jsx(Label, Object.assign({ sx: Object.assign({}, (!brand.name && { color: '#B1B1B1' })) }, { children: brand.name || 'Not Available' })), !hideStatus && (_jsx(IconWithBadge, { mainIcon: icon, mainIconSize: 10, containerSize: 10, borderColor: "transparent", containerSx: { marginLeft: 'auto' } }))] })) })) })) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsx(BrandsWrapper, Object.assign({ sx: { cursor: props.onClick ? 'pointer' : 'default' } }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden', width: '100%' } }, { children: [_jsx(IconWithBadge, { mainIcon: brand.logo, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }), _jsx(Label, Object.assign({ sx: Object.assign({}, (!brand.name && { color: '#B1B1B1' })) }, { children: brand.name || 'Not Available' })), !hideStatus && (_jsx(IconWithBadge, { mainIcon: icon, mainIconSize: 10, containerSize: 10, borderColor: "transparent", containerSx: { marginLeft: 'auto' } }))] })) })) })) })));
 }

package/build/components/TableCells/CustomCells/IndividualsCell/IndividualsCell.js

@@ -17,5 +17,5 @@ import Tooltip from '../../../Tooltip';
 export default function IndividualsCell(_a) {
     var { id, status, count, name } = _a, props = __rest(_a, ["id", "status", "count", "name"]);
     const icon = verificationIcons[status !== null && status !== void 0 ? status : 'incomplete'];
-    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(IndividualsWrapper, { children: id ? (_jsxs(IndividualContainer, { children: [_jsx(Tooltip, Object.assign({ title: name }, { children: _jsx(IndividualName, { children: id }) })), _jsxs(VerificationContainer, { children: [_jsx(VerificationIcon, { src: icon }), count > 1 && (_jsx("div", { children: _jsxs(Count, { children: ["+", count - 1] }) }))] })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { sx: { cursor: 'pointer' } }, { children: _jsx(Tooltip, Object.assign({ title: name }, { children: _jsx(IndividualsWrapper, { children: id ? (_jsxs(IndividualContainer, { children: [_jsx(IndividualName, { children: id }), _jsxs(VerificationContainer, { children: [_jsx(VerificationIcon, { src: icon }), count > 1 && (_jsx("div", { children: _jsxs(Count, { children: ["+", count - 1] }) }))] })] })) : (_jsx(EmptyCell, { children: "Not Available" })) }) })) })));
 }

package/build/components/TableCells/CustomCells/MarketPlaceCell/MarketPlaceCell.d.ts

@@ -1,2 +1,2 @@
 import { MarketPlaceCellProps } from './type';
-export default function MarketPlaceCell({ marketPlaceIcon, marketPlaceName, isTextShown, ...props }: MarketPlaceCellProps): import("react/jsx-runtime").JSX.Element;
+export default function MarketPlaceCell({ marketPlaceIcon, marketPlaceName, ...props }: MarketPlaceCellProps): import("react/jsx-runtime").JSX.Element;

package/build/components/TableCells/CustomCells/MarketPlaceCell/MarketPlaceCell.js

@@ -14,10 +14,10 @@ import Tooltip from '../../../Tooltip';
 import TableCell from '../../TableCell';
 import { Box } from '@mui/material';
 import { marketPlaceBlueIcon } from '../../../../constants/index.js';
-import { TextLabel } from '../style';
 export default function MarketPlaceCell(_a) {
-    var { marketPlaceIcon, marketPlaceName, isTextShown } = _a, props = __rest(_a, ["marketPlaceIcon", "marketPlaceName", "isTextShown"]);
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Tooltip, Object.assign({ title: marketPlaceName }, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: isTextShown ? (_jsx(TextLabel, { children: marketPlaceName })) : (_jsx(Box, Object.assign({ sx: {
+    var { marketPlaceIcon, marketPlaceName } = _a, props = __rest(_a, ["marketPlaceIcon", "marketPlaceName"]);
+    const logo = marketPlaceIcon !== null && marketPlaceIcon !== void 0 ? marketPlaceIcon : (_jsx("img", { src: marketPlaceBlueIcon, alt: "marketplace", style: { maxWidth: '18px', maxHeight: '18px', objectFit: 'cover' } }));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: marketPlaceName && (_jsx(Tooltip, Object.assign({ title: marketPlaceName }, { children: _jsx(Box, Object.assign({ sx: {
                         width: '24px',
                         height: '24px',
                         border: '1px solid #F2F2F2',
@@ -25,5 +25,5 @@ export default function MarketPlaceCell(_a) {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
-                    } }, { children: _jsx("img", { src: marketPlaceIcon || marketPlaceBlueIcon, alt: "marketplace", style: { maxWidth: '18px', maxHeight: '18px', objectFit: 'cover' } }) }))) })) })) })));
+                    } }, { children: logo })) }))) })) })));
 }

package/build/components/TableCells/CustomCells/MarketPlaceCell/type.d.ts

@@ -1,6 +1,6 @@
 import { TableCellProps } from '@mui/material';
+import React from 'react';
 export type MarketPlaceCellProps = TableCellProps & {
-    marketPlaceIcon?: string;
+    marketPlaceIcon?: React.ReactNode;
     marketPlaceName?: string;
-    isTextShown?: boolean;
 };

package/build/components/TableCells/CustomCells/SalesChannelCell/SalesChannelCell.js

@@ -15,6 +15,7 @@ import { ImageWrapper } from '../../../index.js';
 import { TableCell } from '../../../TableCells';
 import { openUrl } from '../../../../utils/index.js';
 import { ChannelTextLabel, ChannelTextWrapper, salesChannelAnimation, SalesChannelsContainer, StyledSourceCell, StyledSourceImage } from './style';
+import { NON_CLICKABLE_CHANNELS } from './constants';
 function SalesChannelCell(_a) {
     var _b;
     var { channels, isTextShown } = _a, props = __rest(_a, ["channels", "isTextShown"]);
@@ -23,9 +24,11 @@ function SalesChannelCell(_a) {
         const sourceTooltip = channel.address;
         const channelCode = (_a = channel.code) === null || _a === void 0 ? void 0 : _a.replace(/_/g, '');
         const isLastChannel = index === (channels === null || channels === void 0 ? void 0 : channels.length) - 1;
-        return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index, isTextShown ? 74 : 0), sx: Object.assign({ width: isTextShown ? '70px' : '36px', cursor: 'pointer' }, (isLastChannel && {
+        return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index, isTextShown ? 74 : 0), sx: Object.assign({ width: isTextShown ? '70px' : '36px', cursor: NON_CLICKABLE_CHANNELS.includes(channel.code) ? 'default' : 'pointer' }, (isLastChannel && {
                     boxShadow: '7px 0px 8px 0px #F2F2F2',
                 })), onClick: () => {
+                    if (NON_CLICKABLE_CHANNELS.includes(channel.code))
+                        return;
                     if (channel === null || channel === void 0 ? void 0 : channel.address)
                         openUrl(channel.address);
                 } }, { children: isTextShown ? (_jsx(ChannelTextWrapper, { children: _jsx(ChannelTextLabel, { children: channelCode }) })) : (_jsx(StyledSourceImage, { src: channel.logo, alt: channelCode })) })) }), `${channel}-${index}`));

package/build/components/TableCells/CustomCells/SalesChannelCell/constants.d.ts

@@ -0,0 +1,2 @@
+import { SalesChannelTypes } from '../../../../types/index.js';
+export declare const NON_CLICKABLE_CHANNELS: SalesChannelTypes[];

package/build/components/TableCells/CustomCells/SalesChannelCell/constants.js

@@ -0,0 +1,2 @@
+import { SalesChannelTypes } from '../../../../types/index.js';
+export const NON_CLICKABLE_CHANNELS = [SalesChannelTypes.CALL_CENTER, SalesChannelTypes.PHYSICAL_STORE, SalesChannelTypes.IOS];

package/build/components/TableCells/CustomCells/SegmentsCell/SegmentsCell.d.ts

@@ -1,3 +1,3 @@
 import type { SegmentsCellProps } from './type';
-declare function SegmentsCell({ isTextShown, ...props }: SegmentsCellProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentsCell({ isTextShown, segments, ...props }: SegmentsCellProps): import("react/jsx-runtime").JSX.Element;
 export default SegmentsCell;

package/build/components/TableCells/CustomCells/SegmentsCell/SegmentsCell.js

@@ -20,25 +20,23 @@ import { segmentsIcons } from './constant';
 import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, referenceSourceAnimation } from './style';
 import IconWithBadge from '../../../IconWithBadge';
 function SegmentsCell(_a) {
-    var { isTextShown } = _a, props = __rest(_a, ["isTextShown"]);
+    var { isTextShown, segments } = _a, props = __rest(_a, ["isTextShown", "segments"]);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
     const theme = useTheme();
-    const segments = useMemo(() => Object.keys(segmentsIcons).filter((key) => { var _a; return !!((_a = props[key]) === null || _a === void 0 ? void 0 : _a.name); }), [props]);
-    const ReferenceSources = useMemo(() => segments.map((segment, index) => {
-        const prefixKey = ['technology', 'institution'].includes(segment) ? 'Payment' : '';
-        const segmentData = props[segment];
-        const sourceTooltip = `${prefixKey} ${startCase(segment)} - ${segmentData === null || segmentData === void 0 ? void 0 : segmentData.name}`;
+    const ReferenceSources = useMemo(() => segments === null || segments === void 0 ? void 0 : segments.filter((segment) => !!segment.name).map((segment, index) => {
+        const prefixKey = ['technology', 'institution'].includes(segment.type) ? 'Payment' : '';
+        const sourceTooltip = segment.tooltip || `${prefixKey} ${startCase(segment.type)} - ${segment.name}`;
         return (_jsx(Tooltip, Object.assign({ onOpen: () => {
                 setIsTooltipOpen(true);
             }, onClose: () => {
                 setIsTooltipOpen(false);
             }, title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: referenceSourceAnimation(index, theme.shadows[4], isTextShown ? 83 : 0), sx: {
                     width: isTextShown ? '79px' : '36px',
-                } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment) }) })) : (_jsx(IconWithBadge, { mainIcon: (segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) || segmentsIcons[segment], mainIconSize: segment === 'order' ? 11.82 : 16, containerSize: segment === 'order' ? 11.82 : 16, sx: Object.assign({}, ((segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) ? { borderRadius: '40px' } : { borderRadius: '0px' })), onError: (e) => {
-                        e.currentTarget.src = segmentsIcons[segment];
+                } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment.name) }) })) : (_jsx(IconWithBadge, { mainIcon: segment.icon || segmentsIcons[segment.type], mainIconSize: 16, containerSize: 16, sx: Object.assign({}, (segment.icon ? { borderRadius: '40px' } : { borderRadius: '0px' })), onError: (e) => {
+                        e.currentTarget.src = segmentsIcons[segment.type];
                         e.currentTarget.style.borderRadius = '0px';
-                    }, borderColor: "transparent" })) })) }), `${segment}-${index}`));
-    }), [props, segments, isTextShown, theme]);
+                    }, borderColor: "transparent" })) })) }), `${segment.name}-${index}`));
+    }), [segments, isTextShown, theme]);
     const referenceSourcesCount = (ReferenceSources === null || ReferenceSources === void 0 ? void 0 : ReferenceSources.length) || 0;
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
                     zIndex: 29,

package/build/components/TableCells/CustomCells/SegmentsCell/type.d.ts

@@ -4,12 +4,10 @@ export type SegmentsType = keyof typeof segmentsIcons;
 export interface SegmentInfo {
     name?: string;
     icon?: string;
+    type: SegmentsType;
+    tooltip?: string;
 }
 export interface SegmentsCellProps extends TableCellProps {
-    technology?: SegmentInfo;
-    institution?: SegmentInfo;
-    payment?: SegmentInfo;
-    developmentHouse?: SegmentInfo;
-    platform?: SegmentInfo;
     isTextShown?: boolean;
+    segments: SegmentInfo[];
 }

package/build/components/VirtualTables/components/ColumnFilter/Inputs/Inputs.js

@@ -43,6 +43,8 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
                             setValues(Object.assign(Object.assign({}, values), { [apiKey]: e.target.value }));
                         }, disabled: isDisabled || isInputDisabled(apiKey, filterGroup), value: getInputValue(apiKey), inputProps: { autoComplete: 'off', 'data-testid': 'ColumnFilterInputs_input' }, endAdornment: _jsx(Box, { component: "img", "data-testid": "ColumnFilterInputs_icon", "data-icon": isInputHasValue(apiKey) ? 'close' : 'search', src: isInputHasValue(apiKey) ? grayCloseIcon : searchIcon, alt: "search", className: "icon", sx: { cursor: isInputHasValue(apiKey) ? 'pointer' : 'default' }, onClick: () => {
                                 onClickResetInput(apiKey);
-                            } }) })) }, apiKey))) })), _jsx(Collapse, Object.assign({ in: showClearButton, component: "section", "data-testid": "ColumnFilterInputs_Collapse" }, { children: _jsx(ClearWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_ClearWrapper" }, { children: _jsx(ClearButton, Object.assign({ type: "button", onClick: onClickClear, "data-testid": "ColumnFilterInputs_ClearButton" }, { children: t('clear') })) })) })), _jsxs(Footer, Object.assign({ component: "footer", "data-testid": "ColumnFilterInputs_footer" }, { children: [_jsx(CancelButton, Object.assign({ type: "button", onClick: onClickCancel, "data-testid": "ColumnFilterInputs_CancelButton" }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ type: "button", onClick: onClickOkay, "data-testid": "ColumnFilterInputs_OkayButton" }, { children: t('okay') }))] }))] })));
+                            } }) })) }, apiKey))) })), _jsx(Collapse, Object.assign({ in: showClearButton, component: "section", "data-testid": "ColumnFilterInputs_Collapse", sx: {
+                    borderTop: '0',
+                } }, { children: _jsx(ClearWrapper, Object.assign({ "data-testid": "ColumnFilterInputs_ClearWrapper" }, { children: _jsx(ClearButton, Object.assign({ type: "button", onClick: onClickClear, "data-testid": "ColumnFilterInputs_ClearButton" }, { children: t('clear') })) })) })), _jsxs(Footer, Object.assign({ component: "footer", "data-testid": "ColumnFilterInputs_footer" }, { children: [_jsx(CancelButton, Object.assign({ type: "button", onClick: onClickCancel, "data-testid": "ColumnFilterInputs_CancelButton" }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ type: "button", onClick: onClickOkay, "data-testid": "ColumnFilterInputs_OkayButton" }, { children: t('okay') }))] }))] })));
 }
 export default Inputs;

package/build/components/index.d.ts

@@ -108,3 +108,4 @@ export { default as LazyImage } from './LazyImage';
 export { default as AmountStatusChip, type AmountStatusChipProps } from './AmountStatusChip';
 export { default as AuthenticationTypeChip, type AuthenticationTypeChipProps } from './AuthenticationTypeChip';
 export * from './LazyImage';
+export { default as SearchListInput } from './SearchListInput';

package/build/components/index.js

@@ -108,3 +108,4 @@ export { default as LazyImage } from './LazyImage';
 export { default as AmountStatusChip } from './AmountStatusChip';
 export { default as AuthenticationTypeChip } from './AuthenticationTypeChip';
 export * from './LazyImage';
+export { default as SearchListInput } from './SearchListInput';

package/build/constants/table/cell/merchantsTableCellWidth.d.ts

@@ -5,17 +5,17 @@ export declare const merchantsTableCellWidth: {
         readonly sheet: "225px";
     };
     readonly entity: {
-        readonly default: "146px";
+        readonly default: "137px";
         readonly text: "180px";
         readonly sheet: "180px";
     };
     readonly created: {
-        readonly default: "160px";
+        readonly default: "144px";
         readonly text: "170px";
         readonly sheet: "170px";
     };
     readonly brands: {
-        readonly default: "140px";
+        readonly default: "131px";
         readonly text: "140px";
         readonly sheet: "140px";
     };
@@ -25,7 +25,7 @@ export declare const merchantsTableCellWidth: {
         readonly sheet: "110px";
     };
     readonly individuals: {
-        readonly default: "185px";
+        readonly default: "147px";
         readonly text: "185px";
         readonly sheet: "185px";
     };
@@ -40,7 +40,7 @@ export declare const merchantsTableCellWidth: {
         readonly sheet: "180px";
     };
     readonly status: {
-        readonly default: "64px";
+        readonly default: "55px";
         readonly text: "100px";
         readonly sheet: "100px";
     };

package/build/constants/table/cell/merchantsTableCellWidth.js

@@ -5,17 +5,17 @@ export const merchantsTableCellWidth = {
         sheet: '225px',
     },
     entity: {
-        default: '146px',
+        default: '137px',
         text: '180px',
         sheet: '180px',
     },
     created: {
-        default: '160px',
+        default: '144px',
         text: '170px',
         sheet: '170px',
     },
     brands: {
-        default: '140px',
+        default: '131px',
         text: '140px',
         sheet: '140px',
     },
@@ -25,7 +25,7 @@ export const merchantsTableCellWidth = {
         sheet: '110px',
     },
     individuals: {
-        default: '185px',
+        default: '147px',
         text: '185px',
         sheet: '185px',
     },
@@ -40,7 +40,7 @@ export const merchantsTableCellWidth = {
         sheet: '180px',
     },
     status: {
-        default: '64px',
+        default: '55px',
         text: '100px',
         sheet: '100px',
     },

package/build/types/merchant.d.ts

@@ -67,6 +67,7 @@ export interface BusinessMerchant {
                 };
                 platforms: Array<{
                     id: string;
+                    segment: string;
                     brand: {
                         logo?: string;
                         name: Array<{

package/package.json

@@ -1,139 +1,139 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.125",
-  "testVersion": 6,
-  "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.js"
-    },
-    "./constants": {
-      "types": "./build/constants/index.d.ts",
-      "import": "./build/constants/index.js",
-      "require": "./build/constants/index.js"
-    },
-    "./components": {
-      "types": "./build/components/index.d.ts",
-      "import": "./build/components/index.js",
-      "require": "./build/components/index.js"
-    },
-    "./components/*": {
-      "types": "./build/components/*/index.d.ts",
-      "import": "./build/components/*/index.js",
-      "require": "./build/components/*/index.js"
-    },
-    "./hooks": {
-      "types": "./build/hooks/index.d.ts",
-      "import": "./build/hooks/index.js",
-      "require": "./build/hooks/index.js"
-    },
-    "./utils": {
-      "types": "./build/utils/index.d.ts",
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.js"
-    },
-    "./theme": {
-      "types": "./build/theme/index.d.ts",
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.js"
-    },
-    "./types": {
-      "types": "./build/types/index.d.ts",
-      "import": "./build/types/index.js",
-      "require": "./build/types/index.js"
-    }
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Ahmed Sharkawy",
-    "email": "a.elsharkawy@tap.company"
-  },
-  "files": [
-    "build",
-    "readme.md"
-  ],
-  "scripts": {
-    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
-    "push:local": "yarn ts:build && yalc publish --push",
-    "push": "npm run ts:build && npm publish --access public",
-    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
-    "dev": "vite",
-    "build": "tsc -b && vite build ",
-    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
-    "lint": "eslint . --color",
-    "lint:fix": "eslint src --fix --color",
-    "preview": "vite preview",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.12.3",
-    "@uiw/react-json-view": "^2.0.0-alpha.16",
-    "axios": "^1.4.0",
-    "color": "^5.0.0",
-    "dayjs": "^1.11.8",
-    "framer-motion": "10.11.0",
-    "i18next": "^22.4.15",
-    "memoize-one": "^6.0.0",
-    "re-resizable": "^6.9.9",
-    "react": "^18.2.0",
-    "react-colorful": "^5.6.1",
-    "react-currency-input-field": "^3.6.11",
-    "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.45.4",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.2.2",
-    "react-lazy-load-image-component": "^1.6.3",
-    "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^7.7.0",
-    "react-virtualized-auto-sizer": "^1.0.20",
-    "react-window": "^1.8.9",
-    "react-window-infinite-loader": "^1.0.9",
-    "react18-input-otp": "^1.1.4",
-    "recharts": "^2.15.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/lodash": "^4.17.15",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-lazy-load-image-component": "^1.6.4",
-    "@types/react-virtualized-auto-sizer": "^1.0.8",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
-    "tsc-alias": "^1.8.16",
-    "typescript": "5.0.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "6.0.5",
-    "vite-tsconfig-paths": "^4.2.0"
-  },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,js,jsx}": [
-      "yarn run prettier:fix",
-      "yarn run lint"
-    ]
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{
+  "name": "@tap-payments/os-micro-frontend-shared",
+  "description": "Shared components and utilities for Tap Payments micro frontends",
+  "version": "0.1.127-test.7",
+  "testVersion": 7,
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js",
+      "require": "./build/index.js"
+    },
+    "./constants": {
+      "types": "./build/constants/index.d.ts",
+      "import": "./build/constants/index.js",
+      "require": "./build/constants/index.js"
+    },
+    "./components": {
+      "types": "./build/components/index.d.ts",
+      "import": "./build/components/index.js",
+      "require": "./build/components/index.js"
+    },
+    "./components/*": {
+      "types": "./build/components/*/index.d.ts",
+      "import": "./build/components/*/index.js",
+      "require": "./build/components/*/index.js"
+    },
+    "./hooks": {
+      "types": "./build/hooks/index.d.ts",
+      "import": "./build/hooks/index.js",
+      "require": "./build/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./build/utils/index.d.ts",
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js"
+    },
+    "./theme": {
+      "types": "./build/theme/index.d.ts",
+      "import": "./build/theme/index.js",
+      "require": "./build/theme/index.js"
+    },
+    "./types": {
+      "types": "./build/types/index.d.ts",
+      "import": "./build/types/index.js",
+      "require": "./build/types/index.js"
+    }
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Ahmed Sharkawy",
+    "email": "a.elsharkawy@tap.company"
+  },
+  "files": [
+    "build",
+    "readme.md"
+  ],
+  "scripts": {
+    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
+    "push:local": "yarn ts:build && yalc publish --push",
+    "push": "npm run ts:build && npm publish --access public",
+    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
+    "dev": "vite",
+    "build": "tsc -b && vite build ",
+    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
+    "lint": "eslint . --color",
+    "lint:fix": "eslint src --fix --color",
+    "preview": "vite preview",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.1",
+    "@mui/material": "^5.12.3",
+    "@uiw/react-json-view": "^2.0.0-alpha.16",
+    "axios": "^1.4.0",
+    "color": "^5.0.0",
+    "dayjs": "^1.11.8",
+    "framer-motion": "10.11.0",
+    "i18next": "^22.4.15",
+    "memoize-one": "^6.0.0",
+    "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-currency-input-field": "^3.6.11",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.45.4",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.2.2",
+    "react-lazy-load-image-component": "^1.6.3",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^7.7.0",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "react18-input-otp": "^1.1.4",
+    "recharts": "^2.15.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-lazy-load-image-component": "^1.6.4",
+    "@types/react-virtualized-auto-sizer": "^1.0.8",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "tsc-alias": "^1.8.16",
+    "typescript": "5.0.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "6.0.5",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,json,js,jsx}": [
+      "yarn run prettier:fix",
+      "yarn run lint"
+    ]
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}