@tap-payments/os-micro-frontend-shared 0.1.64-test.4 → 0.1.65-test.1-test.2

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

@@ -0,0 +1,10 @@
+import { type SxProps } from '@mui/material/styles';
+type ColorPickerProps = {
+    id: string;
+    value?: string;
+    onChange: (value: string) => void;
+    onReset?: () => void;
+    sx?: SxProps;
+};
+declare const ColorPicker: ({ id, value, onChange, onReset, sx }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default ColorPicker;

package/build/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,59 @@
+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 { useCallback, useRef, useState } from 'react';
+import { RgbaColorPicker } from 'react-colorful';
+import { useTranslation } from 'react-i18next';
+import Color from 'color';
+import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Divider from '@mui/material/Divider';
+import Popper from '@mui/material/Popper';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CancelButton, ConfirmButton, Footer, StyledCloseButtonWrapper, StyledColorWidgetWrapper } from './style';
+import { closeXIcon } from '../../constants/index.js';
+const hexa2Rgba = (value) => {
+    const colorInstance = Color(value).rgb();
+    const { r, g, b, alpha = 1 } = colorInstance.object();
+    return {
+        value: { r, g, b, alpha },
+        stringified: `rgba(${r},${g},${b},${alpha})`,
+    };
+};
+const rgba2Hexa = (value) => Color(value).hexa();
+const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx }) => {
+    const { t } = useTranslation();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const rootRef = useRef(null);
+    const [color, setColor] = useState(() => {
+        const _a = hexa2Rgba(value).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
+        return Object.assign(Object.assign({}, rest), { a });
+    });
+    const handleOpen = useCallback(() => {
+        setAnchorEl(rootRef.current);
+        const _a = hexa2Rgba(value).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
+        setColor(Object.assign(Object.assign({}, rest), { a }));
+    }, [value]);
+    const handleCancel = useCallback(() => {
+        const _a = hexa2Rgba(value).value, { alpha: a } = _a, rest = __rest(_a, ["alpha"]);
+        setColor(Object.assign(Object.assign({}, rest), { a }));
+        setAnchorEl(null);
+    }, [value]);
+    const handleConfirm = useCallback(() => {
+        const { a: alpha } = color, rest = __rest(color, ["a"]);
+        onChange(rgba2Hexa(Object.assign(Object.assign({}, rest), { alpha })));
+        setAnchorEl(null);
+    }, [onChange, color]);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker" }, { children: [_jsxs(Stack, Object.assign({ sx: sx, direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), _jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) })), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(RgbaColorPicker, { color: color, onChange: setColor }), _jsx(Divider, { sx: { my: '12px' } }), _jsxs(Footer, Object.assign({ className: "color-picker__widget-actions" }, { children: [_jsx(CancelButton, Object.assign({ className: "color-picker__widget-actions__cancel", onClick: handleCancel }, { children: t('cancel') })), _jsx(ConfirmButton, Object.assign({ className: "color-picker__widget-actions__confirm", onClick: handleConfirm }, { children: t('okay') }))] }))] })) }))] })) })));
+};
+export default ColorPicker;

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

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

package/build/components/ColorPicker/index.js

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const StyledCloseButtonWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const StyledColorWidgetWrapper: 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>, {}, {}>;
+export declare const Footer: 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>, {}, {}>;
+export declare const ConfirmButton: 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>, {}, {}>;
+export declare const CancelButton: 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>, {}, {}>;

package/build/components/ColorPicker/style.js

@@ -0,0 +1,85 @@
+import { Box, Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const StyledCloseButtonWrapper = styled('button')({
+    background: 'transparent',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    cursor: 'pointer',
+    width: 10,
+    height: 10,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+});
+export const StyledColorWidgetWrapper = styled(Box)(({ theme }) => ({
+    boxShadow: '0px 8px 30px rgba(0, 0, 0, 0.16)',
+    minWidth: 264,
+    backgroundColor: '#ffffff',
+    padding: '12px',
+    borderRadius: theme.spacing(1),
+    '& .react-colorful': {
+        width: '100%',
+        '&__saturation': {
+            minHeight: 152,
+            borderRadius: '4px',
+            marginBottom: theme.spacing(2),
+            border: 0,
+            '&-pointer': {
+                width: 13,
+                height: 13,
+            },
+        },
+        '&__hue': {
+            marginBottom: theme.spacing(2),
+            borderRadius: '4px',
+            height: '16px',
+            '&-pointer': {
+                width: 10,
+                height: 10,
+            },
+        },
+        '&__alpha': {
+            border: 0,
+            borderRadius: '4px',
+            height: '16px',
+            '&-pointer': {
+                width: 10,
+                height: 10,
+            },
+        },
+    },
+}));
+export const Footer = styled(Box)(() => ({
+    display: 'flex',
+    gap: '8px',
+    justifyContent: 'flex-end',
+}));
+export const ConfirmButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    minWidth: 'auto',
+    width: 74,
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.info.dark}`,
+    backgroundColor: theme.palette.info.dark,
+    fontWeight: 700,
+    fontSize: '11px',
+    color: theme.palette.common.white,
+    '&:hover': {
+        backgroundColor: theme.palette.info.dark,
+    },
+}));
+export const CancelButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    minWidth: 'auto',
+    width: 74,
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.common.white,
+    fontWeight: 500,
+    fontSize: '11px',
+    color: theme.palette.text.primary,
+    '&:hover': {
+        background: 'transparent',
+    },
+}));

package/build/components/FileUploader/FileUploader.d.ts

@@ -1,3 +1,3 @@
 import type { FileUploaderComponentProps } from './type';
-declare const FileUploader: ({ getRootProps, getInputProps, open, onChangeFiles, processFiles, disabled, errorMessage, maxFileSize, preventDuplicates, }: FileUploaderComponentProps) => import("react/jsx-runtime").JSX.Element;
+declare const FileUploader: ({ getRootProps, getInputProps, open, onChangeFiles, processFiles, disabled, errorMessage, maxFileSize, preventDuplicates, label, hintText, sx, }: FileUploaderComponentProps) => import("react/jsx-runtime").JSX.Element;
 export default FileUploader;

package/build/components/FileUploader/FileUploader.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Box from '@mui/material/Box';
 import { redVerifyIcon, uploadBlueIcon } from '../../constants/index.js';
 import { Content, ErrorMessage, StyledFileUploader, IconWrapper, Maximum, TextWrapper, Upload } from './style';
-const FileUploader = ({ getRootProps, getInputProps, open, onChangeFiles, processFiles, disabled, errorMessage, maxFileSize, preventDuplicates, }) => {
-    return (_jsxs(StyledFileUploader, Object.assign({}, getRootProps(), { onClick: open }, { children: [_jsx("input", Object.assign({}, getInputProps(), { onChange: (e) => {
+const FileUploader = ({ getRootProps, getInputProps, open, onChangeFiles, processFiles, disabled, errorMessage, maxFileSize, preventDuplicates, label = 'Click to upload', hintText, sx, }) => {
+    return (_jsxs(StyledFileUploader, Object.assign({}, getRootProps(), { sx: sx, onClick: open }, { children: [_jsx("input", Object.assign({ "data-slot": "input" }, getInputProps(), { onChange: (e) => {
                     const processedFiles = processFiles(Array.from(e.target.files || []));
                     if (processedFiles.length > 0 || !preventDuplicates) {
                         onChangeFiles(processedFiles);
                     }
-                }, disabled: disabled })), _jsxs(Content, { children: [_jsx(IconWrapper, { children: _jsx(Box, { component: "img", src: errorMessage ? redVerifyIcon : uploadBlueIcon, width: 16, height: 16 }) }), errorMessage ? (_jsxs(TextWrapper, { children: [_jsx(ErrorMessage, { children: errorMessage }), _jsx(Upload, { children: "Click to upload again" })] })) : (_jsxs(TextWrapper, { children: [_jsx(Upload, { children: "Click to upload" }), _jsxs(Maximum, { children: ["PDF, JPG or PNG files up to ", maxFileSize] })] }))] })] })));
+                }, disabled: disabled })), _jsxs(Content, Object.assign({ "data-slot": "content" }, { children: [_jsx(IconWrapper, Object.assign({ "data-slot": "icon-wrapper" }, { children: _jsx(Box, { component: "img", src: errorMessage ? redVerifyIcon : uploadBlueIcon, width: 16, height: 16 }) })), errorMessage ? (_jsxs(TextWrapper, { children: [_jsx(ErrorMessage, { children: errorMessage }), _jsx(Upload, { children: "Click to upload again" })] })) : (_jsxs(TextWrapper, { children: [_jsx(Upload, { children: label }), _jsx(Maximum, { children: hintText || `PDF, JPG or PNG files up to ${maxFileSize}` })] }))] }))] })));
 };
 export default FileUploader;

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

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import type { DropzoneInputProps, DropzoneRootProps } from 'react-dropzone';
 import type { FileType } from '../../types/index.js';
+import { SxProps, Theme } from '@mui/material/styles';
 export interface FileUploaderComponentProps {
     getRootProps: <T extends DropzoneRootProps>(props?: T | undefined) => T;
     getInputProps: <T extends DropzoneInputProps>(props?: T | undefined) => T;
@@ -10,4 +12,7 @@ export interface FileUploaderComponentProps {
     errorMessage?: string;
     maxFileSize: string;
     preventDuplicates?: boolean;
+    label?: React.ReactNode;
+    hintText?: React.ReactNode;
+    sx?: SxProps<Theme>;
 }

package/build/components/FilteredIds/FilteredIds.js

@@ -8,7 +8,7 @@ function FilteredIds({ Ids, onCancelClick, isShown, cardNumber }) {
     var _a;
     if (!isShown)
         return null;
-    return (_jsxs(FilteredIdsContainer, Object.assign({ isLongerString: ((_a = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.length) !== null && _a !== void 0 ? _a : 0) > 11 }, { children: [cardNumber ? _jsx(StyledFilterName, { children: cardNumber }) : _jsx("span", { children: Ids === null || Ids === void 0 ? void 0 : Ids.join(',') }), _jsx(StyledBadge, Object.assign({ pointer: true, round: true, onClick: onCancelClick, variant: BadgeVariants.ACTIVE, sx: { position: 'absolute', right: '8px' } }, { children: _jsx("img", { src: whiteCloseIcon, alt: "close", style: {
+    return (_jsxs(FilteredIdsContainer, Object.assign({ centered: !!cardNumber, isLongerString: ((_a = cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.length) !== null && _a !== void 0 ? _a : 0) > 11 }, { children: [cardNumber ? _jsx(StyledFilterName, { children: cardNumber }) : _jsx("span", { children: Ids === null || Ids === void 0 ? void 0 : Ids.join(',') }), _jsx(StyledBadge, Object.assign({ pointer: true, round: true, onClick: onCancelClick, variant: BadgeVariants.ACTIVE }, { children: _jsx("img", { src: whiteCloseIcon, alt: "close", style: {
                         width: '8px',
                         height: '7px',
                     } }) }))] })));

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 interface FilteredIdsContainerProps {
+    centered: boolean;
     isLongerString: boolean;
 }
 export declare const FilteredIdsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/build/components/FilteredIds/style.js

@@ -1,11 +1,12 @@
 import { Box, styled } from '@mui/material';
 export const FilteredIdsContainer = styled(Box, {
-    shouldForwardProp: (props) => props !== 'isLongerString',
-})(({ theme, isLongerString }) => ({
+    shouldForwardProp: (props) => props !== 'centered' && props !== 'isLongerString',
+})(({ theme, centered, isLongerString }) => ({
     display: 'flex',
-    justifyContent: 'center',
+    justifyContent: centered ? 'space-between' : 'flex-start',
     alignItems: 'center',
-    padding: '6px 16px',
+    paddingRight: theme.spacing(1.3),
+    paddingLeft: theme.spacing(3),
     height: '32px',
     background: theme.palette.background.gradient.shadedBlue,
     color: theme.palette.common.white,

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(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: 16, containerSize: 16, borderColor: "transparent", containerSx: { marginLeft: 'auto' } }))] })) })) })) })));
 }

package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useSynchronizedScroll.js

@@ -5,8 +5,6 @@ export const useSynchronizedScroll = () => {
     const pinnedEndVirtualListRef = useRef(null);
     const isScrollingSyncRef = useRef(false);
     const handleScroll = useCallback(({ scrollOffset }, source) => {
-        if (isScrollingSyncRef.current)
-            return;
         isScrollingSyncRef.current = true;
         if (source !== 'start' && pinnedStartVirtualListRef.current) {
             pinnedStartVirtualListRef.current.scrollTo(scrollOffset);

package/build/components/index.d.ts

@@ -102,3 +102,4 @@ export { default as StatusChipWithCopy } from './StatusChipWithCopy';
 export * from './RadioButton';
 export * from './RadioGroup';
 export * from './LeftPeekRightExpandingChip';
+export { default as ColorPicker } from './ColorPicker';

package/build/components/index.js

@@ -102,3 +102,4 @@ export { default as StatusChipWithCopy } from './StatusChipWithCopy';
 export * from './RadioButton';
 export * from './RadioGroup';
 export * from './LeftPeekRightExpandingChip';
+export { default as ColorPicker } from './ColorPicker';

package/build/constants/assets.d.ts

@@ -525,3 +525,12 @@ export declare const exclamationOutlinedCircle: string;
 export declare const outlinedCircle: string;
 export declare const greenCheck2ACE00: string;
 export declare const blueCopyIcon: string;
+export declare const blackLinkIcon: string;
+export declare const blackSettingsIcon: string;
+export declare const blackWallet: string;
+export declare const blueGradientBrushIcon: string;
+export declare const gadientLink: string;
+export declare const gradientSettings: string;
+export declare const gradientWallet: string;
+export declare const manyCurrencyCoin: string;
+export declare const manyCurrencyCoinGradient: string;

package/build/constants/assets.js

@@ -529,3 +529,12 @@ export const exclamationOutlinedCircle = `${lightUrl}/exclamationOutlinedCircle.
 export const outlinedCircle = `${lightUrl}/outlinedCircle.svg`;
 export const greenCheck2ACE00 = `${lightUrl}/greenCheck2ACE00.svg`;
 export const blueCopyIcon = `${lightUrl}/blueCopyIcon.svg`;
+export const blackLinkIcon = `${lightUrl}/blackLinkIcon.svg`;
+export const blackSettingsIcon = `${lightUrl}/blackSettingsIcon.svg`;
+export const blackWallet = `${lightUrl}/blackWallet.svg`;
+export const blueGradientBrushIcon = `${lightUrl}/blueGradientBrushIcon.svg`;
+export const gadientLink = `${lightUrl}/gadientLink.svg`;
+export const gradientSettings = `${lightUrl}/gradientSettings.svg`;
+export const gradientWallet = `${lightUrl}/gradientWallet.svg`;
+export const manyCurrencyCoin = `${lightUrl}/manyCurrencyCoin.svg`;
+export const manyCurrencyCoinGradient = `${lightUrl}/manyCurrencyCoinGradient.svg`;

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

@@ -5,19 +5,19 @@ export declare const merchantsTableCellWidth: {
         readonly sheet: "225px";
     };
     readonly entity: {
-        readonly default: "146px";
+        readonly default: "150px";
         readonly text: "180px";
         readonly sheet: "180px";
     };
     readonly created: {
-        readonly default: "160px";
+        readonly default: "170px";
         readonly text: "170px";
         readonly sheet: "170px";
     };
     readonly brands: {
-        readonly default: "140px";
-        readonly text: "140px";
-        readonly sheet: "140px";
+        readonly default: "116px";
+        readonly text: "120px";
+        readonly sheet: "120px";
     };
     readonly marketplace: {
         readonly default: "110px";
@@ -25,9 +25,9 @@ export declare const merchantsTableCellWidth: {
         readonly sheet: "110px";
     };
     readonly individuals: {
-        readonly default: "185px";
-        readonly text: "185px";
-        readonly sheet: "185px";
+        readonly default: "116px";
+        readonly text: "120px";
+        readonly sheet: "120px";
     };
     readonly segments: {
         readonly default: "70px";
@@ -35,17 +35,17 @@ export declare const merchantsTableCellWidth: {
         readonly sheet: "180px";
     };
     readonly psp: {
-        readonly default: "70px";
+        readonly default: "60px";
         readonly text: "180px";
         readonly sheet: "180px";
     };
     readonly status: {
-        readonly default: "64px";
+        readonly default: "80px";
         readonly text: "100px";
         readonly sheet: "100px";
     };
     readonly partners: {
-        readonly default: "88px";
+        readonly default: "75px";
         readonly text: "100px";
         readonly sheet: "100px";
     };
@@ -65,13 +65,8 @@ export declare const merchantsTableCellWidth: {
         readonly sheet: "180px";
     };
     readonly channels: {
-        readonly default: "94px";
+        readonly default: "110px";
         readonly text: "120px";
         readonly sheet: "120px";
     };
-    readonly merchant: {
-        readonly default: "175px";
-        readonly text: "180px";
-        readonly sheet: "180px";
-    };
 };

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

@@ -5,19 +5,19 @@ export const merchantsTableCellWidth = {
         sheet: '225px',
     },
     entity: {
-        default: '146px',
+        default: '150px',
         text: '180px',
         sheet: '180px',
     },
     created: {
-        default: '160px',
+        default: '170px',
         text: '170px',
         sheet: '170px',
     },
     brands: {
-        default: '140px',
-        text: '140px',
-        sheet: '140px',
+        default: '116px',
+        text: '120px',
+        sheet: '120px',
     },
     marketplace: {
         default: '110px',
@@ -25,9 +25,9 @@ export const merchantsTableCellWidth = {
         sheet: '110px',
     },
     individuals: {
-        default: '185px',
-        text: '185px',
-        sheet: '185px',
+        default: '116px',
+        text: '120px',
+        sheet: '120px',
     },
     segments: {
         default: '70px',
@@ -35,17 +35,17 @@ export const merchantsTableCellWidth = {
         sheet: '180px',
     },
     psp: {
-        default: '70px',
+        default: '60px',
         text: '180px',
         sheet: '180px',
     },
     status: {
-        default: '64px',
+        default: '80px',
         text: '100px',
         sheet: '100px',
     },
     partners: {
-        default: '88px',
+        default: '75px',
         text: '100px',
         sheet: '100px',
     },
@@ -65,13 +65,8 @@ export const merchantsTableCellWidth = {
         sheet: '180px',
     },
     channels: {
-        default: '94px',
+        default: '110px',
         text: '120px',
         sheet: '120px',
     },
-    merchant: {
-        default: '175px',
-        text: '180px',
-        sheet: '180px',
-    },
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.64-test.4",
-  "testVersion": 4,
+  "version": "0.1.65-test.1-test.2",
+  "testVersion": 2,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -79,12 +79,14 @@
     "@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",