@tap-payments/os-micro-frontend-shared 0.0.297-test.9 → 0.0.298

package/build/components/IconWithBadge/IconWithBadge.d.ts

@@ -1,2 +1,2 @@
 import { IconWithBadgeProps } from './type';
-export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt, mainIconSize, containerSize, overlayPosition, borderColor, label, sx, onError, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;
+export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt, mainIconSize, containerSize, overlayPosition, borderColor, label, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;

package/build/components/IconWithBadge/IconWithBadge.js

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

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { SxProps } from '@mui/material';
 export interface IconWithBadgeProps {
     mainIcon: string;
     overlayIcon?: React.ReactNode;
@@ -14,6 +13,4 @@ export interface IconWithBadgeProps {
     };
     borderColor?: string;
     label?: string;
-    sx?: SxProps;
-    onError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 }

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

@@ -1,2 +1,2 @@
-import type { ApplicationStatusCellProps } from './type';
+import { ApplicationStatusCellProps } from './type';
 export default function ApplicationStatusCell({ acceptance, payout, hideAcceptance, hidePayout, ...props }: ApplicationStatusCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,40 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
-import { useTheme } from '@mui/material/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { acceptanceDisabledRoundedIcon, payoutDisabledRoundedIcon, acceptanceEnabledIcon, payoutGreenIcon } from '../../../../constants/index.js';
 import Tooltip from '../../../Tooltip';
-import { ImageWrapper } from '../../../index.js';
-import { TableCell } from '../../../TableCells';
-import { AppsStatusContainer, StyledAppsCell, appStatusAnimation } from './style';
-import IconWithBadge from '../../../IconWithBadge';
-import { acceptanceEnabledIcon, acceptanceWindowIcon, payoutEnabledIcon, payoutWindowIcon, } from '../../../../constants/index.js';
+import TableCell from '../../TableCell';
+import { AppsWrapper, IconWrapper } from './style';
 export default function ApplicationStatusCell(_a) {
     var { acceptance, payout, hideAcceptance, hidePayout } = _a, props = __rest(_a, ["acceptance", "payout", "hideAcceptance", "hidePayout"]);
     const isAcceptanceEnabled = (acceptance === null || acceptance === void 0 ? void 0 : acceptance.toLowerCase()) === 'enabled';
     const isPayoutEnabled = (payout === null || payout === void 0 ? void 0 : payout.toLowerCase()) === 'enabled';
-    const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-    const theme = useTheme();
-    const apps = useMemo(() => [
-        { icon: isAcceptanceEnabled && !hideAcceptance ? acceptanceEnabledIcon : acceptanceWindowIcon, tooltip: 'Acceptance' },
-        { icon: isPayoutEnabled && !hidePayout ? payoutEnabledIcon : payoutWindowIcon, tooltip: 'Payout' },
-    ], [isAcceptanceEnabled, isPayoutEnabled, hideAcceptance, hidePayout]);
-    const appsStatus = useMemo(() => apps.map((app, index) => {
-        const sourceTooltip = app.tooltip;
-        return (_jsx(Tooltip, Object.assign({ onOpen: () => {
-                setIsTooltipOpen(true);
-            }, onClose: () => {
-                setIsTooltipOpen(false);
-            }, title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: appStatusAnimation(index, theme.shadows[4], 40), sx: {
-                    width: '36px',
-                } }, { children: _jsx(IconWithBadge, { mainIcon: app.icon, mainIconSize: 16, containerSize: 16, sx: { borderRadius: '40px' }, onError: (e) => {
-                        e.currentTarget.src = app.icon;
-                        e.currentTarget.style.borderRadius = '0px';
-                    }, borderColor: "transparent" }) })) }), `${app}-${index}`));
-    }), [apps, theme]);
-    const appsCount = (apps === null || apps === void 0 ? void 0 : apps.length) || 0;
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledAppsCell, { children: appsCount > 0 ? (_jsx(AppsStatusContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: appsCount, variants: { animate: { width: appsCount * (6 + 32) } }, style: {
-                    zIndex: 29,
-                } }, { children: appsStatus }))) : null }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AppsWrapper, { children: [!hideAcceptance && (_jsx(Tooltip, Object.assign({ title: 'Acceptance' }, { children: _jsxs(IconWrapper, { children: [_jsx("img", { src: isAcceptanceEnabled ? acceptanceEnabledIcon : acceptanceDisabledRoundedIcon, alt: acceptance }), ' '] }) }), acceptance)), !hidePayout && (_jsx(Tooltip, Object.assign({ title: 'Payouts' }, { children: _jsx(IconWrapper, { children: _jsx("img", { src: isPayoutEnabled ? payoutGreenIcon : payoutDisabledRoundedIcon, alt: payout }) }) }), payout))] }) })));
 }

package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.d.ts

@@ -1,287 +1,5 @@
 /// <reference types="react" />
-export declare const StyledAppsCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const AppsStatusContainer: import("@emotion/styled").StyledComponent<{
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
-    color?: string | undefined;
-    className?: string | undefined;
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
-    autoFocus?: boolean | 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;
-    lang?: string | undefined;
-    nonce?: string | undefined;
-    spellCheck?: (boolean | "false" | "true") | undefined;
-    tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
-    radioGroup?: string | undefined;
-    role?: import("react").AriaRole | undefined;
-    about?: string | undefined;
-    content?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
-    is?: string | undefined;
-    exportparts?: string | undefined;
-    part?: string | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: (boolean | "false" | "true") | undefined;
-    "aria-autocomplete"?: "none" | "list" | "both" | "inline" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
-    "aria-busy"?: (boolean | "false" | "true") | undefined;
-    "aria-checked"?: boolean | "false" | "true" | "mixed" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
-    "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-hidden"?: (boolean | "false" | "true") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-label"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
-    "aria-modal"?: (boolean | "false" | "true") | undefined;
-    "aria-multiline"?: (boolean | "false" | "true") | undefined;
-    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "false" | "true" | "mixed" | undefined;
-    "aria-readonly"?: (boolean | "false" | "true") | undefined;
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    "aria-required"?: (boolean | "false" | "true") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-selected"?: (boolean | "false" | "true") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined;
-    onCopy?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
-    onCopyCapture?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
-    onCut?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
-    onCutCapture?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
-    onPaste?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
-    onPasteCapture?: import("react").ClipboardEventHandler<HTMLSpanElement> | undefined;
-    onCompositionEnd?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
-    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
-    onCompositionStart?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
-    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
-    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
-    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLSpanElement> | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
-    onFocusCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
-    onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
-    onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
-    onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onInput?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onReset?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onResetCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onSubmit?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onSubmitCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onInvalid?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onInvalidCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
-    onLoad?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onLoadCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onError?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onErrorCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
-    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
-    onKeyPress?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
-    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
-    onKeyUp?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
-    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLSpanElement> | undefined;
-    onAbort?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onAbortCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onCanPlay?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onCanPlayCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onCanPlayThrough?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onDurationChange?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onEmptied?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onEmptiedCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onEncrypted?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onEncryptedCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onEnded?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onEndedCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onLoadedData?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onLoadedMetadata?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onLoadStart?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onLoadStartCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onPause?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onPauseCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onPlay?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onPlayCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onPlaying?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onPlayingCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onProgress?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onProgressCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onRateChange?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onRateChangeCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onSeeked?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onSeekedCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onSeeking?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onSeekingCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onStalled?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onStalledCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onSuspend?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onSuspendCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onTimeUpdate?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onVolumeChange?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onWaiting?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onWaitingCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onAuxClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onAuxClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onContextMenu?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onContextMenuCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onDoubleClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onDragCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDragEndCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDragEnter?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDragEnterCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDragExit?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDragExitCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDragLeave?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDragLeaveCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDragOver?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDragOverCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDragStartCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDrop?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onDropCapture?: import("react").DragEventHandler<HTMLSpanElement> | undefined;
-    onMouseDown?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onMouseDownCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onMouseMove?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onMouseOut?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onMouseOutCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onMouseOver?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onMouseOverCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onMouseUp?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onMouseUpCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-    onSelect?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onSelectCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
-    onTouchCancel?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
-    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
-    onTouchEnd?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
-    onTouchEndCapture?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
-    onTouchMove?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
-    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
-    onTouchStart?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
-    onTouchStartCapture?: import("react").TouchEventHandler<HTMLSpanElement> | undefined;
-    onPointerDown?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerDownCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerMove?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerUp?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerUpCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerCancel?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerEnter?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerLeave?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerOver?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerOverCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerOut?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onPointerOutCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onGotPointerCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onLostPointerCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
-    onScroll?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
-    onScrollCapture?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
-    onWheel?: import("react").WheelEventHandler<HTMLSpanElement> | undefined;
-    onWheelCapture?: import("react").WheelEventHandler<HTMLSpanElement> | undefined;
-    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
-    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
-    onAnimationIteration?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
-    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
-    onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
-    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
-} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLSpanElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    sourcesCount: number;
-}, {}, {}>;
-export declare const AppTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const AppTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const appStatusAnimation: (index: number, shadow: string, xDelta?: number) => {
-    start: {
-        x: number;
-        transition: {
-            duration: number;
-            type: string;
-            ease: string;
-        };
-    };
-    animate: {
-        x: number;
-        transition: {
-            duration: number;
-            type: string;
-            ease: string;
-        };
-        boxShadow: string;
-    };
-};
+export declare const AppsWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: 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>, {}, {}>;

package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.js

@@ -1,51 +1,22 @@
-import { styled } from '@mui/material';
-import { motion } from 'framer-motion';
-export const StyledAppsCell = styled('span')(({ theme }) => ({
+import { Box, styled } from '@mui/material';
+export const AppsWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'flex-start',
     gap: theme.spacing(1),
+    borderRadius: '44px',
+    lineHeight: '120%',
 }));
-export const AppsStatusContainer = styled(motion.span)(({ theme, sourcesCount }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    position: 'absolute',
-    minWidth: `${sourcesCount * 6 + 36}px `,
-    minHeight: '24px',
-    cursor: 'default',
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: '16px',
-}));
-export const AppTextLabel = styled('span')(() => ({
-    fontSize: '11px',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    padding: '2px 0',
-}));
-export const AppTextWrapper = styled('div')(() => ({
+export const IconWrapper = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingInline: '4px',
-}));
-export const appStatusAnimation = (index, shadow, xDelta) => ({
-    start: {
-        x: index * 6,
-        transition: {
-            duration: 0.3,
-            type: 'tween',
-            ease: 'easeIn',
-        },
-    },
-    animate: {
-        x: xDelta ? index * xDelta : index * 40,
-        transition: {
-            duration: 0.3,
-            type: 'tween',
-            ease: 'easeOut',
-        },
-        boxShadow: shadow,
+    width: '23px',
+    height: '23px',
+    borderRadius: '50%',
+    border: `1px solid ${theme.palette.divider}`,
+    img: {
+        width: '18.5px',
+        height: '18.5px',
+        borderRadius: '50%',
     },
-});
+}));

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

@@ -24,5 +24,5 @@ export default function BrandsCell(_a) {
         overlayIcon: icon ? _jsx(VerificationIcon, { src: icon }) : null,
         label: brand.name,
     };
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(BrandsWrapper, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden' } }, { children: [_jsx(IconWithBadge, { mainIcon: item.icon, overlayIcon: item.overlayIcon, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }, item.label), _jsx(Label, { children: brand.name })] })) })) }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(BrandsWrapper, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden' } }, { children: [_jsx(IconWithBadge, { mainIcon: item.icon, overlayIcon: item.overlayIcon }, item.label), _jsx(Label, { children: brand.name })] })) })) }) })));
 }

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

@@ -3,10 +3,9 @@ export const BrandsWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
-    border: '1px solid #F2F2F2',
     borderRadius: '44px',
-    padding: '4px 8px',
     lineHeight: '120%',
+    cursor: 'pointer',
 }));
 export const BrandName = styled('div')(({ theme }) => ({
     fontSize: '14px',

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import Tooltip from '../../../Tooltip';
 import { destinationSolidIcon } from '../../../../constants/index.js';
 import { formatAmount } from '../../../../utils/index.js';
@@ -25,19 +25,12 @@ function DestinationCell(_a) {
     const firstDestinationFormattedAmount = formatAmount(((_b = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _b === void 0 ? void 0 : _b.amount) || 0);
     const isSheetView = tableMode === 'sheet';
     if (isSheetView) {
-        const sheetViewChips = destinations === null || destinations === void 0 ? void 0 : destinations.reduce((acc, dest) => {
+        const sheetViewChips = destinations === null || destinations === void 0 ? void 0 : destinations.map((dest) => {
             const formattedDestAmount = formatAmount((dest === null || dest === void 0 ? void 0 : dest.amount) || 0);
-            return [
-                ...acc,
-                {
-                    key: 'id',
-                    content: dest === null || dest === void 0 ? void 0 : dest.id,
-                },
-                {
-                    key: 'amount',
-                    content: (_jsxs(_Fragment, { children: [_jsx(CurrencyIcon, { currency: dest === null || dest === void 0 ? void 0 : dest.currency }), _jsxs("span", { children: [formattedDestAmount.integerAmount, ".", formattedDestAmount.decimalAmount] })] })),
-                },
-            ];
+            return {
+                key: 'destination',
+                content: (_jsxs(_Fragment, { children: [_jsxs("div", { children: [dest === null || dest === void 0 ? void 0 : dest.id, " |"] }), _jsx(CurrencyIcon, { currency: dest === null || dest === void 0 ? void 0 : dest.currency }), _jsxs("span", { children: [formattedDestAmount.integerAmount, ".", formattedDestAmount.decimalAmount] })] })),
+            };
         }, []);
         return (_jsx(TableCell, Object.assign({ sx: {
                 width: 'fit-content',

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

@@ -17,8 +17,7 @@ import Tooltip from '../../../Tooltip';
 import { ImageWrapper } from '../../../index.js';
 import { TableCell } from '../../../TableCells';
 import { segmentsIcons } from './constant';
-import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, referenceSourceAnimation } from './style';
-import IconWithBadge from '../../../IconWithBadge';
+import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, StyledSourceImage, referenceSourceAnimation, } from './style';
 function SegmentsCell(_a) {
     var { isTextShown } = _a, props = __rest(_a, ["isTextShown"]);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -33,11 +32,11 @@ function SegmentsCell(_a) {
             }, 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' })), onError: (e) => {
+                    width: isTextShown ? '79px' : '24px',
+                } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment) }) })) : (_jsx(StyledSourceImage, { src: (segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) || segmentsIcons[segment], alt: segment, sx: Object.assign(Object.assign({}, (segment === 'order' && { width: '11.82px' })), ((segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) && { borderRadius: '40px' })), onError: (e) => {
                         e.currentTarget.src = segmentsIcons[segment];
                         e.currentTarget.style.borderRadius = '0px';
-                    }, borderColor: "transparent" })) })) }), `${segment}-${index}`));
+                    } })) })) }), `${segment}-${index}`));
     }), [props, 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: {

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -6,6 +6,10 @@ export const StyledSourceCell = styled('span')(({ theme }) => ({
     justifyContent: 'flex-start',
     gap: theme.spacing(1),
 }));
+export const StyledSourceImage = styled('img')(() => ({
+    maxWidth: '12px',
+    maxHeight: '12px',
+}));
 export const ReferenceSourcesContainer = styled(motion.span)(({ theme, sourcesCount }) => ({
     display: 'flex',
     alignItems: 'center',
@@ -40,7 +44,7 @@ export const referenceSourceAnimation = (index, shadow, xDelta) => ({
         },
     },
     animate: {
-        x: xDelta ? index * xDelta : index * 40,
+        x: xDelta ? index * xDelta : index * 28,
         transition: {
             duration: 0.3,
             type: 'tween',

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

@@ -20,9 +20,9 @@ export declare const terminalsTableCellWidth: {
         readonly sheet: "80px";
     };
     readonly platform: {
-        readonly default: "60px";
-        readonly text: "60px";
-        readonly sheet: "60px";
+        readonly default: "80px";
+        readonly text: "80px";
+        readonly sheet: "80px";
     };
     readonly branding: {
         readonly default: "80px";

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

@@ -20,9 +20,9 @@ export const terminalsTableCellWidth = {
         sheet: '80px',
     },
     platform: {
-        default: '60px',
-        text: '60px',
-        sheet: '60px',
+        default: '80px',
+        text: '80px',
+        sheet: '80px',
     },
     branding: {
         default: '80px',

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.0.297-test.9",
-  "testVersion": 9,
+  "version": "0.0.298",
+  "testVersion": 0,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}