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

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

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

package/build/components/IconWithBadge/IconWithBadge.js

@@ -1,17 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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';
-export default function IconWithBadge({ mainIcon, overlayIcon, mainIconAlt = 'main icon', mainIconSize = 20, containerSize = 24, overlayPosition = { top: 10, left: 17 }, borderColor = '#F2F2F2', label = '', }) {
+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);
     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: [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;
-                        } })] })) })) })));
+                } }, { 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);
+                                } })] })] })) })) })));
 }

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SxProps } from '@mui/material';
 export interface IconWithBadgeProps {
     mainIcon: string;
     overlayIcon?: React.ReactNode;
@@ -13,4 +14,6 @@ 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 { ApplicationStatusCellProps } from './type';
+import type { 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,14 +9,40 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { acceptanceDisabledRoundedIcon, payoutDisabledRoundedIcon, acceptanceEnabledIcon, payoutGreenIcon } from '../../../../constants/index.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { useTheme } from '@mui/material/styles';
 import Tooltip from '../../../Tooltip';
-import TableCell from '../../TableCell';
-import { AppsWrapper, IconWrapper } from './style';
+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';
 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';
-    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))] }) })));
+    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 }) })));
 }

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

@@ -1,5 +1,287 @@
 /// <reference types="react" />
-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>, {}, {}>;
+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;
+    };
+};

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

@@ -1,22 +1,51 @@
-import { Box, styled } from '@mui/material';
-export const AppsWrapper = styled('div')(({ theme }) => ({
+import { styled } from '@mui/material';
+import { motion } from 'framer-motion';
+export const StyledAppsCell = styled('span')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'flex-start',
     gap: theme.spacing(1),
-    borderRadius: '44px',
-    lineHeight: '120%',
 }));
-export const IconWrapper = styled(Box)(({ theme }) => ({
+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')(() => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '23px',
-    height: '23px',
-    borderRadius: '50%',
-    border: `1px solid ${theme.palette.divider}`,
-    img: {
-        width: '18.5px',
-        height: '18.5px',
-        borderRadius: '50%',
-    },
+    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,
+    },
+});

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 }, 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, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }, item.label), _jsx(Label, { children: brand.name })] })) })) }) })));
 }

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

@@ -3,9 +3,10 @@ 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 { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Tooltip from '../../../Tooltip';
 import { destinationSolidIcon } from '../../../../constants/index.js';
 import { formatAmount } from '../../../../utils/index.js';
@@ -25,12 +25,19 @@ 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.map((dest) => {
+        const sheetViewChips = destinations === null || destinations === void 0 ? void 0 : destinations.reduce((acc, dest) => {
             const formattedDestAmount = formatAmount((dest === null || dest === void 0 ? void 0 : dest.amount) || 0);
-            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 [
+                ...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 (_jsx(TableCell, Object.assign({ sx: {
                 width: 'fit-content',

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

@@ -17,7 +17,8 @@ import Tooltip from '../../../Tooltip';
 import { ImageWrapper } from '../../../index.js';
 import { TableCell } from '../../../TableCells';
 import { segmentsIcons } from './constant';
-import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, StyledSourceImage, referenceSourceAnimation, } from './style';
+import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, referenceSourceAnimation } from './style';
+import IconWithBadge from '../../../IconWithBadge';
 function SegmentsCell(_a) {
     var { isTextShown } = _a, props = __rest(_a, ["isTextShown"]);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -32,11 +33,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' : '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) => {
+                    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) => {
                         e.currentTarget.src = segmentsIcons[segment];
                         e.currentTarget.style.borderRadius = '0px';
-                    } })) })) }), `${segment}-${index}`));
+                    }, borderColor: "transparent" })) })) }), `${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,6 +1,5 @@
 /// <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,10 +6,6 @@ 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',
@@ -44,7 +40,7 @@ export const referenceSourceAnimation = (index, shadow, xDelta) => ({
         },
     },
     animate: {
-        x: xDelta ? index * xDelta : index * 28,
+        x: xDelta ? index * xDelta : index * 40,
         transition: {
             duration: 0.3,
             type: 'tween',

package/package.json

@@ -1,134 +1,134 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.296",
-  "testVersion": 0,
-  "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": "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",
-    "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-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-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-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.0.297-test.9",
+  "testVersion": 9,
+  "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": "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",
+    "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-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-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-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/"
+  }
+}