@fixefy/fixefy-ui-components 0.3.73 → 0.3.75

package/dist/FxActionsTray/FxActionsTray.js

@@ -12,7 +12,12 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
 const _actionsTraystyle = require("./styles/actionsTray.style");
-const _material = require("@mui/material");
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Divider = /*#__PURE__*/ _interop_require_default(require("@mui/material/Divider"));
+const _Paper = /*#__PURE__*/ _interop_require_default(require("@mui/material/Paper"));
+const _Slide = /*#__PURE__*/ _interop_require_default(require("@mui/material/Slide"));
+const _Typography = /*#__PURE__*/ _interop_require_default(require("@mui/material/Typography"));
+const _Button = /*#__PURE__*/ _interop_require_default(require("@mui/material/Button"));
 const _pluralize = /*#__PURE__*/ _interop_require_default(require("pluralize"));
 const _FxIcon = require("../FxIcon");
 function _interop_require_default(obj) {
@@ -26,32 +31,32 @@ const FxActionsTray = ({ ctx, entityType = 'item', show = false, actions = [], o
     const selectedCount = selectAll === true && ultraSelectAll === true ? totalCount : selection.length;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: classes.container,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Slide, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Slide.default, {
             direction: "up",
             in: show,
             mountOnEnter: true,
             unmountOnExit: true,
             timeout: 400,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Paper, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Paper.default, {
                 elevation: 4,
                 className: classes.paper,
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         className: classes.selected,
                         children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
                                 sx: {
                                     fontWeight: 700,
                                     marginRight: '7px'
                                 },
                                 children: selectedCount
                             }),
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
                                 children: `${(0, _pluralize.default)(entityType, selectedCount)} selected`
                             })
                         ]
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {
                         className: classes.divider,
                         orientation: "vertical"
                     }),
@@ -65,14 +70,14 @@ const FxActionsTray = ({ ctx, entityType = 'item', show = false, actions = [], o
                                 onClick: onClick
                             }, index))
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {
                         className: classes.divider,
                         orientation: "vertical"
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                         className: classes.close,
                         onClick: onClose,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
                             textAlign: 'center',
                             children: (0, _fixefyuiutils.titleCase)('close')
                         })
@@ -82,13 +87,13 @@ const FxActionsTray = ({ ctx, entityType = 'item', show = false, actions = [], o
         })
     });
 };
-const ActionButton = ({ title, name, icon, classes, onClick })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Button, {
+const ActionButton = ({ title, name, icon, classes, onClick })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_Button.default, {
         id: name,
         className: classes.actionButton,
         title: (0, _fixefyuiutils.titleCase)(title),
         onClick: (event)=>onClick(event, name),
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                 width: '16px',
                 height: '16px',
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
@@ -97,7 +102,7 @@ const ActionButton = ({ title, name, icon, classes, onClick })=>/*#__PURE__*/ (0
                     icon: `actions/${icon}.svg`
                 })
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
                 children: (0, _fixefyuiutils.titleCase)(title)
             })
         ]

package/dist/FxAggregationsBar/helpers/structureReader.js

@@ -10,7 +10,9 @@ Object.defineProperty(exports, "structureReader", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _material = require("@mui/material");
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Stack = /*#__PURE__*/ _interop_require_default(require("@mui/material/Stack"));
+const _Divider = /*#__PURE__*/ _interop_require_default(require("@mui/material/Divider"));
 const _FxScore = require("../../FxScore");
 const _FxStatisticsBar = require("../../FxStatisticsBar");
 const _FxProgressCounter = require("../../FxProgressCounter");
@@ -33,7 +35,7 @@ const structureReader = (structure, filter, collapsed, initialValues)=>{
                     structure: child,
                     filter: filter,
                     values: initialValues
-                }, index) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                }, index) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                     sx: {
                         display: 'flex',
                         justifyContent: 'center',
@@ -53,9 +55,9 @@ const structureReader = (structure, filter, collapsed, initialValues)=>{
             });
         case 'aggregations_secondary_container':
             var _extended_variables;
-            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
                 direction: "row",
-                divider: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+                divider: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {
                     orientation: "vertical",
                     flexItem: true
                 }),

package/dist/FxAsyncDropdown/FxAsyncDropdown.js

@@ -10,12 +10,15 @@ Object.defineProperty(exports, "FxAsyncDropdown", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _material = require("@mui/material");
+const _Button = /*#__PURE__*/ _interop_require_default(require("@mui/material/Button"));
+const _CircularProgress = /*#__PURE__*/ _interop_require_default(require("@mui/material/CircularProgress"));
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Stack = /*#__PURE__*/ _interop_require_default(require("@mui/material/Stack"));
 const _FxIcon = require("../FxIcon");
 const _graphqltag = require("graphql-tag");
 const _dropdownstyles = require("./styles/dropdown.styles");
 const _helpers = require("./helpers/helpers");
-const _client = require("@apollo/client");
+const _hooks = require("@apollo/client/react/hooks");
 const _nookies = require("nookies");
 const _components = require("./components");
 function _define_property(obj, key, value) {
@@ -31,6 +34,11 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+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();
@@ -156,7 +164,7 @@ const FxAsyncDropdown = (props)=>{
         setPage((prevPage)=>prevPage + 1);
         setPrevPage((prevPage)=>prevPage + 1);
     };
-    const [fetch, { data, loading }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(gqlQuery), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
+    const [fetch, { data, loading }] = (0, _hooks.useLazyQuery)((0, _graphqltag.gql)(gqlQuery), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
         variables: {
             where: getWhere(),
             skip: page * pageSize - pageSize,
@@ -164,7 +172,7 @@ const FxAsyncDropdown = (props)=>{
             sort: sort || {}
         }
     }));
-    const [defaultValueFetch, { data: defaultValueData }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(gqlQuery), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
+    const [defaultValueFetch, { data: defaultValueData }] = (0, _hooks.useLazyQuery)((0, _graphqltag.gql)(gqlQuery), _object_spread_props(_object_spread({}, fetcher.queryOptions), {
         variables: {
             where: defaultValueWhere,
             sort: sort || {}
@@ -401,14 +409,14 @@ const FxAsyncDropdown = (props)=>{
         }
     };
     const getDisplayedValuesMultiple = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
             direction: 'row',
             sx: {
                 display: 'flex',
                 justifyContent: 'space-between'
             },
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
                     direction: 'row',
                     sx: {
                         overflow: 'hidden',
@@ -420,7 +428,7 @@ const FxAsyncDropdown = (props)=>{
                         return getSingleOptionFromListOrDisplayed(item, 'displayed');
                     }))
                 }),
-                (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                     sx: {
                         minWidth: '20px',
                         maxWidth: '20px',
@@ -446,7 +454,7 @@ const FxAsyncDropdown = (props)=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.Root, {
         style: rootStylesOverride,
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
                 children: [
                     getCurrentValues(),
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_dropdownstyles.InputWrapper, {
@@ -465,7 +473,7 @@ const FxAsyncDropdown = (props)=>{
                                 }
                             }),
                             loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_dropdownstyles.Loading, {
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CircularProgress.default, {})
                             })
                         ]
                     })
@@ -476,7 +484,7 @@ const FxAsyncDropdown = (props)=>{
                 children: [
                     displayListOptions(),
                     !isLastPage && /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                             onClick: ()=>{
                                 setReason('loaded more');
                                 loadMore();

package/dist/FxAsyncDropdown/components/CheckboxIcon.js

@@ -10,22 +10,24 @@ Object.defineProperty(exports, "CheckboxIcon", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _material = require("@mui/material");
-const _iconsmaterial = require("@mui/icons-material");
+const _Checkbox = /*#__PURE__*/ _interop_require_default(require("@mui/material/Checkbox"));
+const _styles = require("@mui/material/styles");
+const _CheckBoxOutlineBlank = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/CheckBoxOutlineBlank"));
+const _CheckBox = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/CheckBox"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const uncheckedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBoxOutlineBlank, {
+const uncheckedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckBoxOutlineBlank.default, {
     fontSize: "small"
 });
-const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBox, {
+const checkedIcon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckBox.default, {
     fontSize: "small"
 });
 const CheckboxIcon = ({ checked })=>{
-    const theme = (0, _material.useTheme)();
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+    const theme = (0, _styles.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
         icon: uncheckedIcon,
         checked: checked,
         checkedIcon: checkedIcon,

package/dist/FxAsyncDropdown/components/ChipOption.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export declare const ChipOption: ({ option, curValue, modal, fetchedProps, displayed, setDisplayed }: {
     option: any;
     curValue: any;
-    modal: 'displayed' | 'list';
+    modal: "displayed" | "list";
     fetchedProps: any;
     displayed: any;
     setDisplayed: any;

package/dist/FxAsyncDropdown/components/DeleteButton.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "DeleteButton", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _material = require("@mui/material");
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
 const _helpers = require("../helpers/helpers");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -22,7 +22,7 @@ const DeleteButton = ({ option, isDisplay, fetchedProps, displayed, setDisplayed
     const isDisplayButton = isDisplay && (multiple && (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 || !multiple && displayed[search_path] === (0, _helpers.getOption)(option, title_path));
     switch(isDisplayButton){
         case true:
-            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                 sx: {
                     margin: '0 5px'
                 },

package/dist/FxAsyncDropdown/components/LogoOption.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export declare const LogoOption: ({ option, curValue, modal, fetchedProps, displayed, setDisplayed }: {
     option: any;
     curValue: any;
-    modal: 'displayed' | 'list';
+    modal: "displayed" | "list";
     fetchedProps: any;
     displayed: any;
     setDisplayed: any;

package/dist/FxAsyncDropdown/components/LogoOption.js

@@ -11,8 +11,9 @@ Object.defineProperty(exports, "LogoOption", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _FxIcon = require("../../FxIcon");
-const _material = require("@mui/material");
-const _styles = require("@mui/styles");
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Typography = /*#__PURE__*/ _interop_require_default(require("@mui/material/Typography"));
+const _styles = require("@mui/material/styles");
 const _helpers = require("../helpers/helpers");
 const _fixefyhooks = require("@fixefy/fixefy-hooks");
 const _DeleteButton = require("./DeleteButton");
@@ -24,7 +25,7 @@ function _interop_require_default(obj) {
 }
 const LogoOption = ({ option, curValue, modal, fetchedProps, displayed, setDisplayed })=>{
     const theme = (0, _styles.useTheme)();
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
         sx: {
             display: 'flex',
             justifyContent: 'space-between',
@@ -34,7 +35,7 @@ const LogoOption = ({ option, curValue, modal, fetchedProps, displayed, setDispl
             cursor: 'pointer'
         },
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
                 sx: {
                     width: '100%',
                     display: 'flex',
@@ -47,14 +48,14 @@ const LogoOption = ({ option, curValue, modal, fetchedProps, displayed, setDispl
                         option: option,
                         fetchedProps: fetchedProps
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
                         sx: {
                             display: 'flex',
                             justifyContent: 'space-between',
                             width: '100%'
                         },
                         children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
                                 variant: "subtitle2",
                                 color: theme.palette.typography.title,
                                 children: (0, _helpers.titleCase)(curValue)

package/dist/FxAsyncDropdown/components/TextOption.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export declare const TextOption: ({ option, curValue, modal, fetchedProps, displayed, setDisplayed }: {
     option: any;
     curValue: any;
-    modal: 'displayed' | 'list';
+    modal: "displayed" | "list";
     fetchedProps: any;
     displayed: any;
     setDisplayed: any;

package/dist/FxAsyncDropdown/components/TextOption.js

@@ -10,8 +10,9 @@ Object.defineProperty(exports, "TextOption", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _material = require("@mui/material");
-const _styles = require("@mui/styles");
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Typography = /*#__PURE__*/ _interop_require_default(require("@mui/material/Typography"));
+const _styles = require("@mui/material/styles");
 const _helpers = require("../helpers/helpers");
 const _DeleteButton = require("./DeleteButton");
 const _ChosenIcon = require("./ChosenIcon");
@@ -22,7 +23,7 @@ function _interop_require_default(obj) {
 }
 const TextOption = ({ option, curValue, modal, fetchedProps, displayed, setDisplayed })=>{
     const theme = (0, _styles.useTheme)();
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
         sx: {
             display: 'flex',
             justifyContent: 'space-between',
@@ -32,7 +33,7 @@ const TextOption = ({ option, curValue, modal, fetchedProps, displayed, setDispl
             cursor: 'pointer'
         },
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                 sx: {
                     width: '100%',
                     display: 'flex',
@@ -40,14 +41,14 @@ const TextOption = ({ option, curValue, modal, fetchedProps, displayed, setDispl
                     gap: 1,
                     alignItems: 'center'
                 },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
                     sx: {
                         display: 'flex',
                         justifyContent: 'space-between',
                         width: '100%'
                     },
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
                             variant: "subtitle2",
                             color: theme.palette.typography.title,
                             children: (0, _helpers.titleCase)(curValue)

package/dist/FxAsyncDropdown/styles/dropdown.styles.js

@@ -196,11 +196,11 @@ const StyledListBox = (0, _styles.styled)('ul')(({ theme })=>{
         ['& li:hover']: {
             backgroundColor: '#F6F9FA'
         },
-        ["& li[aria-selected='true']"]: {
+        ['& li[aria-selected=\'true\']']: {
             fontWeight: 900,
             backgroundColor: '#F6F9FA'
         },
-        ["& li[data-focus='true']"]: {
+        ['& li[data-focus=\'true\']']: {
             backgroundColor: '#F6F9FA',
             cursor: 'pointer',
             ['& svg ']: {

package/dist/FxAvatar/helpers/stringToColor.js

@@ -11,13 +11,13 @@ Object.defineProperty(exports, "stringToColor", {
 const stringToColor = (string, callBack)=>{
     let hash = 0;
     let color = '#';
-    /* eslint-disable no-bitwise */ for(let i = 0; i < string.length; i += 1){
+    for(let i = 0; i < string.length; i += 1){
         hash = string.charCodeAt(i) + ((hash << 5) - hash);
     }
     for(let i = 0; i < 3; i += 1){
         const value = hash >> i * 8 & 0xff;
         color += `00${value.toString(16)}`.substr(-2);
     }
-    /* eslint-enable no-bitwise */ callBack && callBack(color);
+    callBack && callBack(color);
     return color;
 };

package/dist/FxAvatar/styles/avatar.styles.js

@@ -31,8 +31,8 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _styles = require("@mui/material/styles");
-const _material = require("@mui/material");
-const _Tooltip = /*#__PURE__*/ _interop_require_default(require("@mui/material/Tooltip"));
+const _Avatar = /*#__PURE__*/ _interop_require_default(require("@mui/material/Avatar"));
+const _Tooltip = /*#__PURE__*/ _interop_require_wildcard(require("@mui/material/Tooltip"));
 const _EditOutlined = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/EditOutlined"));
 function _define_property(obj, key, value) {
     if (key in obj) {
@@ -52,6 +52,47 @@ function _interop_require_default(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;
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -118,49 +159,49 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const AvatarWrapper = (0, _styles.styled)("div")(()=>({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexDirection: "row"
+const AvatarWrapper = (0, _styles.styled)('div')(()=>({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexDirection: 'row'
     }));
-const AvatarGroup = (0, _styles.styled)("div")(()=>({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexDirection: "row",
-        "&>:first-of-type": {
+const AvatarGroup = (0, _styles.styled)('div')(()=>({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexDirection: 'row',
+        '&>:first-of-type': {
             marginLeft: 0
         }
     }));
-const StyledAvatar = (0, _styles.styled)(_material.Avatar)(({ theme })=>({
+const StyledAvatar = (0, _styles.styled)(_Avatar.default)(({ theme })=>({
         width: 32,
         height: 32,
         border: `2px solid ${theme.palette.common.white}`,
-        marginLeft: "-8px",
-        fontFamily: "Open Sans",
-        fontStyle: "normal",
-        fontWeight: "normal",
+        marginLeft: '-8px',
+        fontFamily: 'Open Sans',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
         fontSize: 14,
-        lineHeight: "20px",
-        letterSpacing: "0.15px"
+        lineHeight: '20px',
+        letterSpacing: '0.15px'
     }));
-const StyledMoreAvatar = (0, _styles.styled)(_material.Avatar)(({ theme })=>({
+const StyledMoreAvatar = (0, _styles.styled)(_Avatar.default)(({ theme })=>({
         width: 32,
         height: 32,
         border: `2px solid ${theme.palette.common.white}`,
-        marginLeft: "-8px",
-        fontFamily: "Open Sans",
-        fontStyle: "normal",
-        fontWeight: "normal",
+        marginLeft: '-8px',
+        fontFamily: 'Open Sans',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
         fontSize: 11,
-        lineHeight: "16px",
-        letterSpacing: "0.1px",
+        lineHeight: '16px',
+        letterSpacing: '0.1px',
         color: theme.palette.greyscale.dark,
         backgroundColor: theme.palette.greyscale.light
     }));
 const EditIcon = (0, _styles.styled)(_EditOutlined.default)(({ theme })=>({
-        cursor: "pointer",
+        cursor: 'pointer',
         color: theme.palette.primary.light
     }));
 const FxTooltip = (0, _styles.styled)((_param)=>{
@@ -175,18 +216,18 @@ const FxTooltip = (0, _styles.styled)((_param)=>{
         }
     }));
 })(({ theme })=>({
-        [`& .${_material.tooltipClasses.arrow}`]: {
+        [`& .${_Tooltip.tooltipClasses.arrow}`]: {
             color: theme.palette.primary.main
         },
-        [`& .${_material.tooltipClasses.tooltip}`]: {
+        [`& .${_Tooltip.tooltipClasses.tooltip}`]: {
             backgroundColor: theme.palette.primary.main,
             padding: 12,
-            fontFamily: "Open Sans",
-            fontStyle: "normal",
-            fontWeight: "normal",
+            fontFamily: 'Open Sans',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
             fontSize: 14,
-            lineHeight: "20px",
-            textAlign: "center",
-            letterSpacing: "0.15px"
+            lineHeight: '20px',
+            textAlign: 'center',
+            letterSpacing: '0.15px'
         }
     }));

package/dist/FxButton/styles/button.styles.js

@@ -8,10 +8,15 @@ Object.defineProperty(exports, "ButtonStyled", {
         return ButtonStyled;
     }
 });
-const _material = require("@mui/material");
+const _Button = /*#__PURE__*/ _interop_require_default(require("@mui/material/Button"));
 const _styles = require("@mui/material/styles");
-const ButtonStyled = (0, _styles.styled)(_material.Button)(({ theme, variant })=>{
-    const border = variant === 'text' ? `0px solid #0000` : `1px solid ${theme.palette.primary.main}`;
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const ButtonStyled = (0, _styles.styled)(_Button.default)(({ theme, variant })=>{
+    const border = variant === 'text' ? '0px solid #0000' : `1px solid ${theme.palette.primary.main}`;
     return {
         border,
         minHeight: '40px',

package/dist/FxButtonModalWithComponent/FxButtonModalWithComponent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const FxButtonModalWithComponent: ({ btnType, btnValue, modalData, onClick, disabled, startIcon, endIcon, sx, iconSize, }: {
-    btnType?: 'text' | 'icon';
+    btnType?: "text" | "icon";
     btnValue?: string;
     modalData: any;
     onClick?: any;