@tap-payments/os-micro-frontend-shared 0.1.63 → 0.1.65

package/LICENSE

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

package/README.md

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

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

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

package/build/components/ColorPicker/ColorPicker.js

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

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

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

package/build/components/ColorPicker/index.js

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

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

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

package/build/components/ColorPicker/style.js

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

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

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

package/build/components/FileUploader/FileUploader.js

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

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

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

package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.d.ts

@@ -1,3 +1,3 @@
 import { RightLeftExpandingCenterChipProps } from './type';
-declare function RightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter, expandedZIndex, ...props }: Readonly<RightLeftExpandingCenterChipProps>): import("react/jsx-runtime").JSX.Element;
+declare function RightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft, expandedZIndex, ...props }: Readonly<RightLeftExpandingCenterChipProps>): import("react/jsx-runtime").JSX.Element;
 export default RightLeftExpandingCenterChip;

package/build/components/RightLeftExpandingCenterChip/RightLeftExpandingCenterChip.js

@@ -15,22 +15,45 @@ import { AnimatePresence } from 'framer-motion';
 import { CenterIconWrapper, ExpandedSection, PeekContainer, CenterChip, LeftPeekChip, RightPeekChip, LeftExpandIcon, RightExpandIcon, ExpandChip, CenterShiftWrapper, CenterContent, ExpandableContainer, ExpandableInner, tableCellSx, CHIP_GAP, HoverBridge, } from './style';
 import { useRightLeftExpandingCenterChip, DEFAULT_CHIP_MIN_WIDTH } from './useRightLeftExpandingCenterChip';
 function RightLeftExpandingCenterChip(_a) {
-    var { leftIcons = [], rightIcons = [], centerIcon, expandableCenter, expandedZIndex = 1000 } = _a, props = __rest(_a, ["leftIcons", "rightIcons", "centerIcon", "expandableCenter", "expandedZIndex"]);
-    const { isHovering, handleMouseEnter, handleMouseLeave, centerWrapRef, centerContentRef, centerChipRef, anchors, leftChipRefs, rightChipRefs, leftOffsets, rightOffsets, expandableInnerRef, expandedMV, shiftX, rightShift, leftHoverWidth, rightHoverWidth, } = useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter });
+    var { leftIcons = [], rightIcons = [], centerIcon, expandableCenterRight, expandableCenterLeft, expandedZIndex = 1000 } = _a, props = __rest(_a, ["leftIcons", "rightIcons", "centerIcon", "expandableCenterRight", "expandableCenterLeft", "expandedZIndex"]);
+    const { isHovering, handleMouseEnter, handleMouseLeave, centerWrapRef, centerContentRef, centerChipRef, anchors, leftChipRefs, rightChipRefs, leftOffsets, rightOffsets, expandableRightInnerRef, expandableLeftInnerRef, expandedRightMV, expandedLeftMV, shiftX, rightShift, leftShift, leftHoverWidth, rightHoverWidth, } = useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft });
     return (_jsx(Box, Object.assign({}, props, { "data-testid": "RightLeftExpandingCenterChipBox", sx: tableCellSx }, { children: _jsx(CenterShiftWrapper, Object.assign({ "data-testid": "CenterShiftWrapper", initial: false, style: { x: shiftX } }, { children: _jsxs(CenterIconWrapper, Object.assign({ "data-testid": "CenterIconWrapper", ref: centerWrapRef, onMouseLeave: handleMouseLeave }, { children: [_jsxs(PeekContainer, Object.assign({ "data-testid": "PeekContainer" }, { children: [_jsx(AnimatePresence, Object.assign({ initial: false }, { children: leftIcons.length > 0 && (_jsx(LeftPeekChip, { "data-testid": "LeftPeekChip", initial: { opacity: 0, scale: 0.95, x: -4 }, animate: isHovering ? { opacity: 0, scale: 0.9, x: -6 } : { opacity: 1, scale: 1, x: -5 }, exit: { opacity: 0, scale: 0.95, x: -4 }, transition: { duration: 0.18, ease: 'easeOut' } }, "left-peek")) })), _jsx(CenterChip, Object.assign({ "data-testid": "CenterChip", ref: centerChipRef, onMouseEnter: handleMouseEnter, style: {
-                                    borderRadius: expandableCenter && isHovering ? '12px 0 0 12px' : '12px',
-                                    borderRight: expandableCenter && isHovering ? 'none' : undefined,
-                                    paddingInlineEnd: '2px',
-                                } }, { children: _jsx(CenterContent, Object.assign({ "data-testid": "CenterContent", ref: centerContentRef }, { children: centerIcon })) })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: expandableCenter && (_jsx(ExpandableContainer, Object.assign({ "data-testid": "ExpandableContainer", style: {
-                                        width: expandedMV,
-                                        position: 'absolute',
-                                        left: 'calc(100% - 1px)',
-                                        top: 0,
-                                        height: '24px',
-                                        zIndex: 1,
-                                        opacity: isHovering ? 1 : 0,
-                                        pointerEvents: isHovering ? 'auto' : 'none',
-                                    }, initial: false, transition: { duration: 0.2, ease: 'easeOut' } }, { children: _jsx(ExpandableInner, Object.assign({ "data-testid": "ExpandableInner", ref: expandableInnerRef }, { children: expandableCenter })) }))) })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: rightIcons.length > 0 && (_jsx(RightPeekChip, { "data-testid": "RightPeekChip", initial: { opacity: 0, scale: 0.95, x: 4 }, animate: isHovering ? { opacity: 0, scale: 0.9, x: 6 } : { opacity: 1, scale: 1, x: 5 }, exit: { opacity: 0, scale: 0.95, x: 4 }, transition: { duration: 0.18, ease: 'easeOut' } }, "right-peek")) }))] })), isHovering && leftIcons.length > 0 && (_jsx(HoverBridge, { "data-testid": "LeftHoverBridge", side: "left", style: { width: leftHoverWidth, right: `calc(100% - ${anchors.left}px)`, zIndex: expandedZIndex, pointerEvents: 'auto' } })), isHovering && rightIcons.length > 0 && (_jsx(HoverBridge, { "data-testid": "RightHoverBridge", side: "right", style: { width: rightHoverWidth, left: `${anchors.right}px`, zIndex: expandedZIndex, pointerEvents: 'auto' } })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: leftIcons.length > 0 && (_jsx(ExpandedSection, Object.assign({ "data-testid": "LeftExpandedSection", side: "left", style: {
+                                    borderRadius: (() => {
+                                        const hasLeftExpanded = expandableCenterLeft && isHovering;
+                                        const hasRightExpanded = expandableCenterRight && isHovering;
+                                        if (hasLeftExpanded && hasRightExpanded)
+                                            return '0';
+                                        if (hasLeftExpanded)
+                                            return '0 12px 12px 0';
+                                        if (hasRightExpanded)
+                                            return '12px 0 0 12px';
+                                        return '12px';
+                                    })(),
+                                    borderLeft: expandableCenterLeft && isHovering ? 'none' : undefined,
+                                    borderRight: expandableCenterRight && isHovering ? 'none' : undefined,
+                                } }, { children: _jsx(CenterContent, Object.assign({ "data-testid": "CenterContent", ref: centerContentRef }, { children: centerIcon })) })), expandableCenterLeft && (_jsx(ExpandableContainer, Object.assign({ "data-testid": "ExpandableLeftContainer", style: {
+                                    width: expandedLeftMV,
+                                    position: 'absolute',
+                                    right: '100%',
+                                    top: 0,
+                                    height: '24px',
+                                    zIndex: 1,
+                                    opacity: isHovering ? 1 : 0,
+                                    pointerEvents: isHovering ? 'auto' : 'none',
+                                    borderRadius: '12px 0 0 12px',
+                                    borderRight: 'none',
+                                }, initial: false, transition: { duration: 0.2, ease: 'easeOut' } }, { children: _jsx(ExpandableInner, Object.assign({ "data-testid": "ExpandableLeftInner", ref: expandableLeftInnerRef }, { children: expandableCenterLeft })) }))), expandableCenterRight && (_jsx(ExpandableContainer, Object.assign({ "data-testid": "ExpandableRightContainer", style: {
+                                    width: expandedRightMV,
+                                    position: 'absolute',
+                                    left: '100%',
+                                    top: 0,
+                                    height: '24px',
+                                    zIndex: 1,
+                                    opacity: isHovering ? 1 : 0,
+                                    pointerEvents: isHovering ? 'auto' : 'none',
+                                    borderRadius: '0 12px 12px 0',
+                                    borderLeft: 'none',
+                                }, initial: false, transition: { duration: 0.2, ease: 'easeOut' } }, { children: _jsx(ExpandableInner, Object.assign({ "data-testid": "ExpandableRightInner", ref: expandableRightInnerRef }, { children: expandableCenterRight })) }))), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: rightIcons.length > 0 && (_jsx(RightPeekChip, { "data-testid": "RightPeekChip", initial: { opacity: 0, scale: 0.95, x: 4 }, animate: isHovering ? { opacity: 0, scale: 0.9, x: 6 } : { opacity: 1, scale: 1, x: 5 }, exit: { opacity: 0, scale: 0.95, x: 4 }, transition: { duration: 0.18, ease: 'easeOut' } }, "right-peek")) }))] })), isHovering && leftIcons.length > 0 && (_jsx(HoverBridge, { "data-testid": "LeftHoverBridge", side: "left", style: { width: leftHoverWidth, right: `calc(100% - ${anchors.left}px)`, zIndex: expandedZIndex, pointerEvents: 'auto' } })), isHovering && rightIcons.length > 0 && (_jsx(HoverBridge, { "data-testid": "RightHoverBridge", side: "right", style: { width: rightHoverWidth, left: `${anchors.right}px`, zIndex: expandedZIndex, pointerEvents: 'auto' } })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: leftIcons.length > 0 && (_jsx(ExpandedSection, Object.assign({ "data-testid": "LeftExpandedSection", side: "left", style: {
                                 right: `calc(100% - ${anchors.left}px)`,
                                 top: '50%',
                                 position: 'absolute',
@@ -39,7 +62,8 @@ function RightLeftExpandingCenterChip(_a) {
                             }, initial: { opacity: 0, x: 0, y: '-50%' }, animate: isHovering ? { opacity: 1, x: 0, y: '-50%' } : { opacity: 0, x: 0, y: '-50%' }, exit: { opacity: 0, x: 0, y: '-50%' }, transition: { duration: 0.25, ease: 'easeOut' } }, { children: leftIcons.map((icon, index) => {
                                 var _a;
                                 const leftOffset = (_a = leftOffsets[index]) !== null && _a !== void 0 ? _a : (DEFAULT_CHIP_MIN_WIDTH + CHIP_GAP) * (index + 1);
-                                return (_jsx(LeftExpandIcon, Object.assign({ "data-testid": `LeftExpandIcon-${index}`, initial: { opacity: 0, x: 0 }, animate: isHovering ? { opacity: 1, x: -leftOffset } : { opacity: 0, x: 0 }, exit: { opacity: 0, x: 0 }, transition: { duration: 0.25 + index * 0.04, ease: 'easeOut' }, style: { zIndex: expandedZIndex + (leftIcons.length - index) } }, { children: _jsx(ExpandChip, Object.assign({ "data-testid": `LeftExpandChip-${index}`, ref: (el) => (leftChipRefs.current[index] = el) }, { children: icon })) }), `left-${index}`));
+                                const totalOffset = leftOffset + leftShift;
+                                return (_jsx(LeftExpandIcon, Object.assign({ "data-testid": `LeftExpandIcon-${index}`, initial: { opacity: 0, x: 0 }, animate: isHovering ? { opacity: 1, x: -totalOffset } : { opacity: 0, x: 0 }, exit: { opacity: 0, x: 0 }, transition: { duration: 0.25 + index * 0.04, ease: 'easeOut' }, style: { zIndex: expandedZIndex + (leftIcons.length - index) } }, { children: _jsx(ExpandChip, Object.assign({ "data-testid": `LeftExpandChip-${index}`, ref: (el) => (leftChipRefs.current[index] = el) }, { children: icon })) }), `left-${index}`));
                             }) }), "left-expanded")) })), _jsx(AnimatePresence, Object.assign({ initial: false }, { children: rightIcons.length > 0 && (_jsx(ExpandedSection, Object.assign({ "data-testid": "RightExpandedSection", side: "right", style: {
                                 left: `${anchors.right}px`,
                                 top: '50%',

package/build/components/RightLeftExpandingCenterChip/style.js

@@ -85,17 +85,14 @@ export const ExpandableContainer = styled(motion.span)(({ theme }) => ({
     boxSizing: 'border-box',
     willChange: 'width',
     border: `1px solid ${theme.palette.divider}`,
-    borderLeft: 'none',
-    borderRadius: '0 12px 12px 0',
     backgroundColor: theme.palette.background.paper,
     height: '24px',
     alignItems: 'center',
+    paddingInline: '0px',
 }));
 export const ExpandableInner = styled(motion.span)(() => ({
     display: 'inline-flex',
     whiteSpace: 'nowrap',
-    paddingLeft: '1px',
-    paddingRight: '8px',
     alignItems: 'center',
     height: '100%',
 }));

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

@@ -4,7 +4,8 @@ export interface RightLeftExpandingCenterChipProps {
     leftIcons?: React.ReactNode[];
     rightIcons?: React.ReactNode[];
     centerIcon: React.ReactNode;
-    expandableCenter?: React.ReactNode;
+    expandableCenterRight?: React.ReactNode;
+    expandableCenterLeft?: React.ReactNode;
     sx?: SxProps;
     expandedZIndex?: number;
 }

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.d.ts

@@ -4,9 +4,10 @@ export type UseRightLeftExpandingCenterChipArgs = {
     leftIcons: ReactNode[];
     rightIcons: ReactNode[];
     centerIcon: ReactNode;
-    expandableCenter?: ReactNode;
+    expandableCenterRight?: ReactNode;
+    expandableCenterLeft?: ReactNode;
 };
-export declare function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter }: UseRightLeftExpandingCenterChipArgs): {
+export declare function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft, }: UseRightLeftExpandingCenterChipArgs): {
     isHovering: boolean;
     handleMouseEnter: () => void;
     handleMouseLeave: () => void;
@@ -21,11 +22,15 @@ export declare function useRightLeftExpandingCenterChip({ leftIcons, rightIcons,
     rightChipRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
     leftOffsets: number[];
     rightOffsets: number[];
-    expandableInnerRef: import("react").MutableRefObject<HTMLSpanElement | null>;
-    expandableWidth: number;
-    expandedMV: import("framer-motion").MotionValue<number>;
+    expandableRightInnerRef: import("react").MutableRefObject<HTMLSpanElement | null>;
+    expandableLeftInnerRef: import("react").MutableRefObject<HTMLSpanElement | null>;
+    expandableRightWidth: number;
+    expandableLeftWidth: number;
+    expandedRightMV: import("framer-motion").MotionValue<number>;
+    expandedLeftMV: import("framer-motion").MotionValue<number>;
     shiftX: import("framer-motion").MotionValue<number>;
     rightShift: number;
+    leftShift: number;
     leftHoverWidth: number;
     rightHoverWidth: number;
 };

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.js

@@ -2,19 +2,21 @@ import { useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect } fr
 import { animate, useMotionValue } from 'framer-motion';
 import { CHIP_GAP } from './style';
 export const DEFAULT_CHIP_MIN_WIDTH = 24;
-export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter }) {
+export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenterRight, expandableCenterLeft, }) {
     const [isHovering, setIsHovering] = useState(false);
     const [anchors, setAnchors] = useState({ left: 0, right: 0 });
     const [leftWidths, setLeftWidths] = useState([]);
     const [rightWidths, setRightWidths] = useState([]);
-    const [expandableWidth, setExpandableWidth] = useState(0);
+    const [expandableRightWidth, setExpandableRightWidth] = useState(0);
+    const [expandableLeftWidth, setExpandableLeftWidth] = useState(0);
     const hoverTimeoutRef = useRef(null);
     const centerWrapRef = useRef(null);
     const centerContentRef = useRef(null);
     const centerChipRef = useRef(null);
     const leftChipRefs = useRef([]);
     const rightChipRefs = useRef([]);
-    const expandableInnerRef = useRef(null);
+    const expandableRightInnerRef = useRef(null);
+    const expandableLeftInnerRef = useRef(null);
     const resizeRaf = useRef(null);
     const arraysEqual = useCallback((a, b) => {
         if (a === b)
@@ -29,7 +31,8 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
     const anchorsEqual = useCallback((a, b) => {
         return a.left === b.left && a.right === b.right;
     }, []);
-    const expandedMV = useMotionValue(0);
+    const expandedRightMV = useMotionValue(0);
+    const expandedLeftMV = useMotionValue(0);
     const shiftX = useMotionValue(0);
     const leftOffsets = useMemo(() => {
         if (!leftWidths.length)
@@ -55,8 +58,9 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         }
         return acc;
     }, [rightWidths]);
-    const rightShift = isHovering && expandableCenter ? expandableWidth + CHIP_GAP : 0;
-    const maxRightShift = expandableCenter ? expandableWidth + CHIP_GAP : 0;
+    const rightShift = isHovering && expandableCenterRight ? expandableRightWidth : 0;
+    const leftShift = isHovering && expandableCenterLeft ? expandableLeftWidth : 0;
+    const maxRightShift = expandableCenterRight ? expandableRightWidth : 0;
     const handleMouseEnter = useCallback(() => {
         if (hoverTimeoutRef.current)
             clearTimeout(hoverTimeoutRef.current);
@@ -68,7 +72,7 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 120);
     }, []);
     const measureAll = useCallback(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const wrap = centerWrapRef.current;
         const chip = centerChipRef.current;
         const content = centerContentRef.current;
@@ -84,16 +88,19 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         }
         const nextLeftWidths = leftChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH));
         const nextRightWidths = rightChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH));
-        const nextExpandableWidth = (_c = (_b = expandableInnerRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _c !== void 0 ? _c : 0;
+        const nextExpandableRightWidth = (_c = (_b = expandableRightInnerRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) !== null && _c !== void 0 ? _c : 0;
+        const nextExpandableLeftWidth = (_e = (_d = expandableLeftInnerRef.current) === null || _d === void 0 ? void 0 : _d.scrollWidth) !== null && _e !== void 0 ? _e : 0;
         if (!anchorsEqual(anchors, nextAnchors))
             setAnchors(nextAnchors);
         if (!arraysEqual(leftWidths, nextLeftWidths))
             setLeftWidths(nextLeftWidths);
         if (!arraysEqual(rightWidths, nextRightWidths))
             setRightWidths(nextRightWidths);
-        if (expandableWidth !== nextExpandableWidth)
-            setExpandableWidth(nextExpandableWidth);
-    }, [anchors, leftWidths, rightWidths, expandableWidth, anchorsEqual, arraysEqual]);
+        if (expandableRightWidth !== nextExpandableRightWidth)
+            setExpandableRightWidth(nextExpandableRightWidth);
+        if (expandableLeftWidth !== nextExpandableLeftWidth)
+            setExpandableLeftWidth(nextExpandableLeftWidth);
+    }, [anchors, leftWidths, rightWidths, expandableRightWidth, expandableLeftWidth, anchorsEqual, arraysEqual]);
     const onResize = useCallback(() => {
         if (resizeRaf.current)
             cancelAnimationFrame(resizeRaf.current);
@@ -109,7 +116,7 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
     }, []);
     useLayoutEffect(() => {
         measureAll();
-    }, [centerIcon, leftIcons, rightIcons, expandableCenter, measureAll]);
+    }, [centerIcon, leftIcons, rightIcons, expandableCenterRight, expandableCenterLeft, measureAll]);
     useEffect(() => {
         onResize();
         window.addEventListener('resize', onResize);
@@ -120,19 +127,24 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         };
     }, [onResize]);
     useEffect(() => {
-        const target = isHovering && expandableCenter ? expandableWidth + CHIP_GAP : 0;
-        const controls = animate(expandedMV, target, { duration: 0.2, ease: 'easeOut' });
+        const target = isHovering && expandableCenterRight ? expandableRightWidth : 0;
+        const controls = animate(expandedRightMV, target, { duration: 0.2, ease: 'easeOut' });
         return () => controls.stop();
-    }, [isHovering, expandableCenter, expandableWidth, expandedMV]);
+    }, [isHovering, expandableCenterRight, expandableRightWidth, expandedRightMV]);
+    useEffect(() => {
+        const target = isHovering && expandableCenterLeft ? expandableLeftWidth : 0;
+        const controls = animate(expandedLeftMV, target, { duration: 0.2, ease: 'easeOut' });
+        return () => controls.stop();
+    }, [isHovering, expandableCenterLeft, expandableLeftWidth, expandedLeftMV]);
     const leftHoverWidth = useMemo(() => {
         var _a;
         if (!leftOffsets.length)
             return 0;
         const last = leftOffsets.length - 1;
         const lastWidth = (_a = leftWidths[last]) !== null && _a !== void 0 ? _a : DEFAULT_CHIP_MIN_WIDTH;
-        const farthest = leftOffsets[last] + lastWidth / 2;
+        const farthest = leftOffsets[last] + lastWidth / 2 + leftShift;
         return farthest + CHIP_GAP;
-    }, [leftOffsets, leftWidths]);
+    }, [leftOffsets, leftWidths, leftShift]);
     const rightHoverWidth = useMemo(() => {
         var _a;
         if (!rightOffsets.length)
@@ -154,11 +166,15 @@ export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerI
         rightChipRefs,
         leftOffsets,
         rightOffsets,
-        expandableInnerRef,
-        expandableWidth,
-        expandedMV,
+        expandableRightInnerRef,
+        expandableLeftInnerRef,
+        expandableRightWidth,
+        expandableLeftWidth,
+        expandedRightMV,
+        expandedLeftMV,
         shiftX,
         rightShift,
+        leftShift,
         leftHoverWidth,
         rightHoverWidth,
     };

package/build/components/index.d.ts

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

package/build/components/index.js

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

package/build/constants/assets.d.ts

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

package/build/constants/assets.js

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

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

@@ -70,9 +70,9 @@ export declare const refundTableCellWidth: {
         readonly sheet: "100px";
     };
     readonly merchant: {
-        readonly default: "100px";
-        readonly text: "100px";
-        readonly sheet: "100px";
+        readonly default: "110px";
+        readonly text: "150px";
+        readonly sheet: "150px";
     };
     readonly reference: {
         readonly default: "95px";

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

@@ -70,9 +70,9 @@ export const refundTableCellWidth = {
         sheet: '100px',
     },
     merchant: {
-        default: '100px',
-        text: '100px',
-        sheet: '100px',
+        default: '110px',
+        text: '150px',
+        sheet: '150px',
     },
     reference: {
         default: '95px',

package/package.json

@@ -1,135 +1,137 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.63",
-  "testVersion": 2,
-  "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.js"
-    },
-    "./constants": {
-      "types": "./build/constants/index.d.ts",
-      "import": "./build/constants/index.js",
-      "require": "./build/constants/index.js"
-    },
-    "./components": {
-      "types": "./build/components/index.d.ts",
-      "import": "./build/components/index.js",
-      "require": "./build/components/index.js"
-    },
-    "./components/*": {
-      "types": "./build/components/*/index.d.ts",
-      "import": "./build/components/*/index.js",
-      "require": "./build/components/*/index.js"
-    },
-    "./hooks": {
-      "types": "./build/hooks/index.d.ts",
-      "import": "./build/hooks/index.js",
-      "require": "./build/hooks/index.js"
-    },
-    "./utils": {
-      "types": "./build/utils/index.d.ts",
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.js"
-    },
-    "./theme": {
-      "types": "./build/theme/index.d.ts",
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.js"
-    },
-    "./types": {
-      "types": "./build/types/index.d.ts",
-      "import": "./build/types/index.js",
-      "require": "./build/types/index.js"
-    }
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Ahmed Sharkawy",
-    "email": "a.elsharkawy@tap.company"
-  },
-  "files": [
-    "build",
-    "readme.md"
-  ],
-  "scripts": {
-    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
-    "push:local": "yarn ts:build && yalc publish --push",
-    "push": "npm run ts:build && npm publish --access public",
-    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
-    "dev": "vite",
-    "build": "tsc -b && vite build ",
-    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
-    "lint": "eslint . --color",
-    "lint:fix": "eslint src --fix --color",
-    "preview": "vite preview",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.12.3",
-    "@uiw/react-json-view": "^2.0.0-alpha.16",
-    "axios": "^1.4.0",
-    "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.1.65",
+  "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:local": "yarn ts:build && yalc publish --push",
+    "push": "npm run ts:build && npm publish --access public",
+    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
+    "dev": "vite",
+    "build": "tsc -b && vite build ",
+    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
+    "lint": "eslint . --color",
+    "lint:fix": "eslint src --fix --color",
+    "preview": "vite preview",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.1",
+    "@mui/material": "^5.12.3",
+    "@uiw/react-json-view": "^2.0.0-alpha.16",
+    "axios": "^1.4.0",
+    "color": "^5.0.0",
+    "dayjs": "^1.11.8",
+    "framer-motion": "10.11.0",
+    "i18next": "^22.4.15",
+    "memoize-one": "^6.0.0",
+    "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-currency-input-field": "^3.6.11",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.45.4",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.2.2",
+    "react-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/"
+  }
+}