@fixefy/fixefy-ui-components 0.3.108 → 0.3.110

package/dist/fixefy-ui-components/src/FxButtonModalWithComponent/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxButtonModalWithComponent", {
+    enumerable: true,
+    get: function() {
+        return _FxButtonModalWithComponent.FxButtonModalWithComponent;
+    }
+});
+const _FxButtonModalWithComponent = require("./FxButtonModalWithComponent");

package/dist/fixefy-ui-components/src/FxButtonModalWithMenu/FxButtonModalWithMenu.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxButtonModalWithMenu", {
+    enumerable: true,
+    get: function() {
+        return FxButtonModalWithMenu;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _Fade = /*#__PURE__*/ _interop_require_default(require("@mui/material/Fade"));
+const _Menu = /*#__PURE__*/ _interop_require_default(require("@mui/material/Menu"));
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _FxMenuItemWithIcon = require("../FxMenuItemWithIcon");
+const _FxStyledButton = require("../FxStyledButton");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const FxButtonModalWithMenu = ({ assetUrl, btnType = 'text', btnValue, modalData, onClick, disabled, startIcon, endIcon, shouldShowModal = true, buttonSx, menuItemSx, iconSize })=>{
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const [AnchorEl, setAnchorEl] = (0, _react.useState)(null);
+    const handleClick = (e)=>{
+        if (onClick) {
+            onClick();
+            setIsOpen((prev)=>!prev);
+            setAnchorEl(e.currentTarget);
+        } else {
+            setIsOpen((prev)=>!prev);
+            setAnchorEl(e.currentTarget);
+        }
+    };
+    const handleClose = ()=>{
+        setIsOpen(false);
+        setAnchorEl(null);
+    };
+    (0, _react.useEffect)(()=>{
+        setIsOpen(false);
+    }, [
+        btnValue
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxStyledButton.FxStyledButton, {
+                assetUrl: assetUrl,
+                sx: buttonSx,
+                btnType: btnType,
+                btnValue: btnValue,
+                onClick: handleClick,
+                startIcon: startIcon,
+                endIcon: endIcon,
+                iconSize: iconSize || 20,
+                disabled: disabled
+            }),
+            shouldShowModal && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Menu.default, {
+                id: "fade-menu",
+                MenuListProps: {
+                    'aria-labelledby': 'fade-button',
+                    sx: {
+                        padding: 0
+                    }
+                },
+                anchorEl: AnchorEl,
+                open: isOpen,
+                onClose: handleClose,
+                TransitionComponent: _Fade.default,
+                children: isOpen && (modalData === null || modalData === void 0 ? void 0 : modalData.map((item, i)=>{
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxMenuItemWithIcon.FxMenuItemWithIcon, {
+                        assetUrl: assetUrl,
+                        icon: item.icon,
+                        title: item.title,
+                        onClick: ()=>{
+                            handleClose();
+                            item.onClick();
+                        },
+                        sx: menuItemSx
+                    }, i);
+                }))
+            })
+        ]
+    });
+};

package/dist/fixefy-ui-components/src/FxButtonModalWithMenu/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxButtonModalWithMenu", {
+    enumerable: true,
+    get: function() {
+        return _FxButtonModalWithMenu.FxButtonModalWithMenu;
+    }
+});
+const _FxButtonModalWithMenu = require("./FxButtonModalWithMenu");

package/dist/fixefy-ui-components/src/FxChip/FxChip.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxChip", {
+    enumerable: true,
+    get: function() {
+        return FxChip;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
+const _CloseRounded = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/CloseRounded"));
+const _chipstyles = require("./styles/chip.styles");
+const _FxIcon = require("../FxIcon");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const FxChip = (props)=>{
+    const { assetUrl, status, label, type = 'status', scoreValue = 0, minimized = false, variant = 'outlined', onClick, onDelete, icon } = props;
+    const newStatus = status ? status.split(' ').join('_') : status;
+    const value = typeof label === 'number' ? label.toFixed(2) : label;
+    switch(type){
+        case 'reco':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_chipstyles.RecoChipStyled, {
+                status: newStatus,
+                label: (0, _fixefyuiutils.titleCase)(value),
+                variant: variant
+            });
+        case 'status':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_chipstyles.StatusChipStyled, {
+                status: newStatus,
+                label: (0, _fixefyuiutils.titleCase)(value),
+                variant: variant,
+                onClick: onClick,
+                onDelete: onDelete,
+                deleteIcon: onDelete ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_CloseRounded.default, {
+                    sx: {
+                        width: 11,
+                        height: 11
+                    }
+                }) : null
+            });
+        case 'priority':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_chipstyles.PriorityChipStyled, {
+                status: newStatus,
+                label: (0, _fixefyuiutils.titleCase)(value),
+                variant: variant
+            });
+        case 'dimension':
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_chipstyles.DimensionChipStyled, {
+                label: (0, _fixefyuiutils.titleCase)(value),
+                minimized: minimized,
+                variant: variant,
+                icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
+                    icon: `${icon}.svg`,
+                    width: 15,
+                    height: 15,
+                    assetUrl: assetUrl
+                })
+            });
+        default:
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_chipstyles.ScoreChipStyled, {
+                score: scoreValue,
+                scoreLabel: (0, _fixefyuiutils.getScoreColor)(scoreValue),
+                label: (0, _fixefyuiutils.titleCase)(value),
+                minimized: minimized,
+                variant: variant,
+                onClick: onClick
+            });
+    }
+};

package/dist/fixefy-ui-components/src/FxChip/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ChipPropsType: function() {
+        return _FxChip.ChipPropsType;
+    },
+    FxChip: function() {
+        return _FxChip.FxChip;
+    }
+});
+const _FxChip = require("./FxChip");

package/dist/fixefy-ui-components/src/FxChip/styles/chip.styles.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DimensionChipStyled: function() {
+        return DimensionChipStyled;
+    },
+    PriorityChipStyled: function() {
+        return PriorityChipStyled;
+    },
+    RecoChipStyled: function() {
+        return RecoChipStyled;
+    },
+    ScoreChipStyled: function() {
+        return ScoreChipStyled;
+    },
+    StatusChipStyled: function() {
+        return StatusChipStyled;
+    }
+});
+const _Chip = /*#__PURE__*/ _interop_require_default(require("@mui/material/Chip"));
+const _styles = require("@mui/material/styles");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ScoreChipStyled = (0, _styles.styled)(_Chip.default)(({ theme, scoreLabel, minimized })=>{
+    const color = theme.palette.score[scoreLabel];
+    return {
+        height: 20,
+        minWidth: minimized ? 35 : 80,
+        maxWidth: 120,
+        backgroundColor: color,
+        ['& .MuiChip-label']: {
+            color: theme.palette.common.white,
+            fontSize: 9,
+            fontWeight: 600,
+            paddingLeft: minimized ? 0 : 'inherit',
+            paddingRight: minimized ? 0 : 'inherit'
+        }
+    };
+});
+const StatusChipStyled = (0, _styles.styled)(_Chip.default)(({ theme, status, variant })=>{
+    let backgroundColor, border, labelColor;
+    if (theme.palette.status[status]) {
+        if (variant === 'filled') {
+            backgroundColor = theme.palette.status[status]['border'];
+            labelColor = theme.palette.common.white;
+        } else {
+            backgroundColor = theme.palette.status[status]['background'];
+        }
+        border = theme.palette.status[status]['border'];
+    }
+    return {
+        height: 24,
+        minWidth: 96,
+        maxWidth: 120,
+        boxSizing: 'border-box',
+        paddingLeft: '9.6px',
+        paddingRight: '9.6px',
+        paddingTop: '6px',
+        paddingBottom: '6px',
+        borderRadius: '60px',
+        ['& .MuiChip-label']: {
+            fontSize: 10.8,
+            fontWeight: 600,
+            lineHeight: 'normal',
+            letterSpacing: '0.24px',
+            textTransform: 'capitalize',
+            fontFamily: 'Open Sans',
+            wordWrap: 'break-word',
+            padding: 0,
+            color: labelColor ? labelColor : '#5C6467'
+        },
+        backgroundColor,
+        border: `1.2px solid ${border}`
+    };
+});
+const PriorityChipStyled = (0, _styles.styled)(_Chip.default)(({ theme, status })=>{
+    var _theme_palette_chipPriority_status, _theme_palette_chipPriority, _theme_palette, _theme_palette_chipPriority_status1, _theme_palette_chipPriority1, _theme_palette1, _theme_palette_chipPriority_status2, _theme_palette_chipPriority2, _theme_palette2;
+    var _theme_palette_chipPriority_status_background;
+    const backgroundColor = (_theme_palette_chipPriority_status_background = theme === null || theme === void 0 ? void 0 : (_theme_palette = theme.palette) === null || _theme_palette === void 0 ? void 0 : (_theme_palette_chipPriority = _theme_palette.chipPriority) === null || _theme_palette_chipPriority === void 0 ? void 0 : (_theme_palette_chipPriority_status = _theme_palette_chipPriority[status]) === null || _theme_palette_chipPriority_status === void 0 ? void 0 : _theme_palette_chipPriority_status.background) !== null && _theme_palette_chipPriority_status_background !== void 0 ? _theme_palette_chipPriority_status_background : '#F6F9FA';
+    var _theme_palette_chipPriority_status_label;
+    const labelColor = (_theme_palette_chipPriority_status_label = theme === null || theme === void 0 ? void 0 : (_theme_palette1 = theme.palette) === null || _theme_palette1 === void 0 ? void 0 : (_theme_palette_chipPriority1 = _theme_palette1.chipPriority) === null || _theme_palette_chipPriority1 === void 0 ? void 0 : (_theme_palette_chipPriority_status1 = _theme_palette_chipPriority1[status]) === null || _theme_palette_chipPriority_status1 === void 0 ? void 0 : _theme_palette_chipPriority_status1.label) !== null && _theme_palette_chipPriority_status_label !== void 0 ? _theme_palette_chipPriority_status_label : '#8B9092';
+    var _theme_palette_chipPriority_status_border;
+    const border = (_theme_palette_chipPriority_status_border = theme === null || theme === void 0 ? void 0 : (_theme_palette2 = theme.palette) === null || _theme_palette2 === void 0 ? void 0 : (_theme_palette_chipPriority2 = _theme_palette2.chipPriority) === null || _theme_palette_chipPriority2 === void 0 ? void 0 : (_theme_palette_chipPriority_status2 = _theme_palette_chipPriority2[status]) === null || _theme_palette_chipPriority_status2 === void 0 ? void 0 : _theme_palette_chipPriority_status2.border) !== null && _theme_palette_chipPriority_status_border !== void 0 ? _theme_palette_chipPriority_status_border : '#8B9092';
+    return {
+        height: 20,
+        minWidth: 80,
+        maxWidth: 120,
+        ['& .MuiChip-label']: {
+            fontSize: 9,
+            fontWeight: 600,
+            lineHeight: '12px',
+            color: labelColor ? labelColor : theme.palette.statistics.label
+        },
+        backgroundColor,
+        border: `1px solid ${border}`
+    };
+});
+const RecoChipStyled = (0, _styles.styled)(_Chip.default)(({ theme, status })=>{
+    var _theme_palette_recoState_status, _theme_palette_recoState, _theme_palette, _theme_palette_recoState_status1, _theme_palette_recoState1, _theme_palette1, _theme_palette_recoState_status2, _theme_palette_recoState2, _theme_palette2;
+    var _theme_palette_recoState_status_background;
+    const backgroundColor = (_theme_palette_recoState_status_background = theme === null || theme === void 0 ? void 0 : (_theme_palette = theme.palette) === null || _theme_palette === void 0 ? void 0 : (_theme_palette_recoState = _theme_palette.recoState) === null || _theme_palette_recoState === void 0 ? void 0 : (_theme_palette_recoState_status = _theme_palette_recoState[status]) === null || _theme_palette_recoState_status === void 0 ? void 0 : _theme_palette_recoState_status.background) !== null && _theme_palette_recoState_status_background !== void 0 ? _theme_palette_recoState_status_background : '#8B9092';
+    var _theme_palette_recoState_status_label;
+    const labelColor = (_theme_palette_recoState_status_label = theme === null || theme === void 0 ? void 0 : (_theme_palette1 = theme.palette) === null || _theme_palette1 === void 0 ? void 0 : (_theme_palette_recoState1 = _theme_palette1.recoState) === null || _theme_palette_recoState1 === void 0 ? void 0 : (_theme_palette_recoState_status1 = _theme_palette_recoState1[status]) === null || _theme_palette_recoState_status1 === void 0 ? void 0 : _theme_palette_recoState_status1.label) !== null && _theme_palette_recoState_status_label !== void 0 ? _theme_palette_recoState_status_label : '#F6F9FA';
+    var _theme_palette_recoState_status_border;
+    const border = (_theme_palette_recoState_status_border = theme === null || theme === void 0 ? void 0 : (_theme_palette2 = theme.palette) === null || _theme_palette2 === void 0 ? void 0 : (_theme_palette_recoState2 = _theme_palette2.recoState) === null || _theme_palette_recoState2 === void 0 ? void 0 : (_theme_palette_recoState_status2 = _theme_palette_recoState2[status]) === null || _theme_palette_recoState_status2 === void 0 ? void 0 : _theme_palette_recoState_status2.border) !== null && _theme_palette_recoState_status_border !== void 0 ? _theme_palette_recoState_status_border : '#8B9092';
+    return {
+        height: 20,
+        minWidth: 80,
+        maxWidth: 120,
+        ['& .MuiChip-label']: {
+            fontSize: 9,
+            fontWeight: 600,
+            lineHeight: '12px',
+            color: labelColor ? labelColor : theme.palette.statistics.label
+        },
+        backgroundColor,
+        border: `1px solid ${border}`
+    };
+});
+const DimensionChipStyled = (0, _styles.styled)(_Chip.default)(({ minimized })=>{
+    return {
+        height: '36px',
+        minWidth: minimized ? 35 : 80,
+        maxWidth: 120,
+        backgroundColor: '#F6F9FA',
+        borderColor: '#C6DDE2',
+        ['& .MuiChip-label']: {
+            color: '#172326',
+            fontSize: 14
+        },
+        '& .MuiChip-icon': {
+            width: 11,
+            height: 11
+        }
+    };
+});

package/dist/fixefy-ui-components/src/FxDatesProgress/FxDatesProgress.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxDatesProgress", {
+    enumerable: true,
+    get: function() {
+        return FxDatesProgress;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _FxStyledComponents = require("../FxStyledComponents");
+const _progressstyles = require("./styles/progress.styles");
+const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Typography = /*#__PURE__*/ _interop_require_default(require("@mui/material/Typography"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const FxDatesProgress = ({ start, end, progressValue, width, height, oneLine })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+        sx: {
+            width: width || '199px',
+            height: height || '44px'
+        },
+        children: [
+            oneLine ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    mb: 1,
+                    gap: 1
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                        sx: {
+                            display: 'flex',
+                            gap: 0.5,
+                            alignItems: 'center'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxStyledComponents.Label, {
+                                children: (0, _fixefyuiutils.titleCase)(start.label)
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
+                                children: start.value || (0, _fixefyuiutils.titleCase)(start.placeholder)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                        sx: {
+                            display: 'flex',
+                            gap: 0.5,
+                            alignItems: 'center'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxStyledComponents.Label, {
+                                style: {
+                                    textAlign: 'right',
+                                    display: 'block'
+                                },
+                                children: (0, _fixefyuiutils.titleCase)(end.label)
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
+                                style: {
+                                    textAlign: 'right',
+                                    display: 'block'
+                                },
+                                children: end.value || (0, _fixefyuiutils.titleCase)(end.placeholder)
+                            })
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                sx: {
+                    width: width || '199px',
+                    height: height || '44px'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        mb: 1
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxStyledComponents.Label, {
+                                    children: (0, _fixefyuiutils.titleCase)(start.label)
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
+                                    children: start.value || (0, _fixefyuiutils.titleCase)(start.placeholder)
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxStyledComponents.Label, {
+                                    style: {
+                                        textAlign: 'right',
+                                        display: 'block'
+                                    },
+                                    children: (0, _fixefyuiutils.titleCase)(end.label)
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
+                                    style: {
+                                        textAlign: 'right',
+                                        display: 'block'
+                                    },
+                                    children: end.value || (0, _fixefyuiutils.titleCase)(end.placeholder)
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_progressstyles.Progress, {
+                value: progressValue,
+                variant: "determinate"
+            })
+        ]
+    });
+};

package/dist/fixefy-ui-components/src/FxDatesProgress/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxDatesProgress", {
+    enumerable: true,
+    get: function() {
+        return _FxDatesProgress.FxDatesProgress;
+    }
+});
+const _FxDatesProgress = require("./FxDatesProgress");

package/dist/fixefy-ui-components/src/FxDatesProgress/styles/progress.styles.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Progress", {
+    enumerable: true,
+    get: function() {
+        return Progress;
+    }
+});
+const _LinearProgress = /*#__PURE__*/ _interop_require_default(require("@mui/material/LinearProgress"));
+const _styles = require("@mui/material/styles");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const Progress = (0, _styles.styled)(_LinearProgress.default)(({ theme })=>({
+        borderRadius: '20px',
+        backgroundColor: '#E7EEF0',
+        '& .MuiLinearProgress-barColorPrimary': {
+            backgroundColor: theme.palette.primary['300']
+        }
+    }));

package/dist/fixefy-ui-components/src/FxGeneralModal/FxGeneralModal.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxGeneralModal", {
+    enumerable: true,
+    get: function() {
+        return FxGeneralModal;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _Fade = /*#__PURE__*/ _interop_require_default(require("@mui/material/Fade"));
+const _Menu = /*#__PURE__*/ _interop_require_default(require("@mui/material/Menu"));
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const FxGeneralModal = ({ buttonComponent, modalComponent, onClick, closeOnButtonChange = true })=>{
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const [AnchorEl, setAnchorEl] = (0, _react.useState)(null);
+    const handleClick = (e)=>{
+        if (onClick) {
+            e.stopPropagation();
+            onClick();
+            setIsOpen((prev)=>!prev);
+            setAnchorEl(e.currentTarget);
+        } else {
+            e.stopPropagation();
+            setIsOpen((prev)=>!prev);
+            setAnchorEl(e.currentTarget);
+        }
+    };
+    const handleClose = ()=>{
+        setIsOpen(false);
+        setAnchorEl(null);
+    };
+    (0, _react.useEffect)(()=>{
+        if (closeOnButtonChange) {
+            setIsOpen(false);
+        }
+    }, [
+        buttonComponent
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                onClick: handleClick,
+                children: buttonComponent
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Menu.default, {
+                id: "fade-menu",
+                MenuListProps: {
+                    'aria-labelledby': 'fade-button'
+                },
+                anchorEl: AnchorEl,
+                open: isOpen,
+                onClose: handleClose,
+                TransitionComponent: _Fade.default,
+                children: isOpen && modalComponent
+            })
+        ]
+    });
+};

package/dist/fixefy-ui-components/src/FxGeneralModal/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxGeneralModal", {
+    enumerable: true,
+    get: function() {
+        return _FxGeneralModal.FxGeneralModal;
+    }
+});
+const _FxGeneralModal = require("./FxGeneralModal");