@fixefy/fixefy-ui-components 0.3.74 → 0.3.75

package/dist/FxSlider/FxSlider.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "FxSlider", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _material = require("@mui/material");
+const _Slider = /*#__PURE__*/ _interop_require_default(require("@mui/material/Slider"));
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -45,5 +45,5 @@ function _object_spread(target) {
     return target;
 }
 function FxSlider(props) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Slider, _object_spread({}, props));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Slider.default, _object_spread({}, props));
 }

package/dist/FxStatisticsBar/FxStatisticsBar.js

@@ -11,8 +11,9 @@ Object.defineProperty(exports, "FxStatisticsBar", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _graphqltag = require("graphql-tag");
-const _client = require("@apollo/client");
-const _material = require("@mui/material");
+const _hooks = require("@apollo/client/react/hooks");
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Skeleton = /*#__PURE__*/ _interop_require_default(require("@mui/material/Skeleton"));
 const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
 const _statisticsstyles = require("./styles/statistics.styles");
 function _define_property(obj, key, value) {
@@ -28,6 +29,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();
@@ -93,7 +99,7 @@ function FxStatisticsBar({ value, type = 'currency', label, structure, collapsed
     if (filter) {
         _filter = _object_spread({}, _filter, filter);
     }
-    const [fetchData, { data, loading }] = (0, _client.useLazyQuery)((0, _graphqltag.gql)(gqlOperation));
+    const [fetchData, { data, loading }] = (0, _hooks.useLazyQuery)((0, _graphqltag.gql)(gqlOperation));
     const convertValue = (value)=>{
         var _getCurrency;
         let newValue = '';
@@ -160,17 +166,17 @@ function FxStatisticsBar({ value, type = 'currency', label, structure, collapsed
     }, []);
     const statisticsTitle = label ? label : title;
     const statisticsValue = data && data[object_path] != null ? getValue(data[object_path]) : getValue(value);
-    return loading ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+    return loading ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
         sx: {
             width: 100
         },
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Skeleton.default, {
                 animation: "wave",
                 width: 100,
                 height: 30
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Skeleton.default, {
                 animation: "wave",
                 width: 100,
                 height: 20

package/dist/FxStatisticsBar/styles/statistics.styles.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "useStyles", {
         return useStyles;
     }
 });
-const _styles = require("@mui/styles");
+const _makeStyles = /*#__PURE__*/ _interop_require_default(require("@mui/styles/makeStyles"));
 require("@fixefy/fixefy-ui-utils");
 function _define_property(obj, key, value) {
     if (key in obj) {
@@ -23,6 +23,11 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -62,7 +67,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const useStyles = (0, _styles.makeStyles)((theme)=>({
+const useStyles = (0, _makeStyles.default)((theme)=>({
         container: {
             display: 'flex',
             alignItems: 'center',

package/dist/FxStatusBar/FxStatusBar.js

@@ -10,11 +10,16 @@ Object.defineProperty(exports, "FxStatusBar", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _material = require("@mui/material");
+const _Stack = /*#__PURE__*/ _interop_require_default(require("@mui/material/Stack"));
 const _FxChip = require("../FxChip");
 const _constants = require("./helpers/constants");
 const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
 const _statusBarstyles = require("./styles/statusBar.styles");
+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();
@@ -119,7 +124,7 @@ const FxStatusBar = ({ onChangeStatus, onSearch, defaultStatus, title, options,
                 },
                 children: (0, _fixefyuiutils.titleCase)(title)
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                 direction: "row",
                 spacing: 1,
                 children: [

package/dist/FxStatusBar/styles/statusBar.styles.js

@@ -20,7 +20,8 @@ _export(exports, {
     }
 });
 const _styles = require("@mui/material/styles");
-const _material = require("@mui/material");
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Chip = /*#__PURE__*/ _interop_require_default(require("@mui/material/Chip"));
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -34,6 +35,11 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -73,41 +79,41 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const StatusBarCard = (0, _styles.styled)(_material.Box)(({ theme })=>({
+const StatusBarCard = (0, _styles.styled)(_Box.default)(({ theme })=>({
         background: theme.palette.common.white,
         borderRadius: 4,
         padding: 16,
-        boxShadow: "0px 0px 10px rgba(86, 135, 147, 0.3)",
-        display: "flex",
-        alignItems: "center",
-        width: "fit-content"
+        boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.3)',
+        display: 'flex',
+        alignItems: 'center',
+        width: 'fit-content'
     }));
-const StatusBarTitle = (0, _styles.styled)("span")(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
+const StatusBarTitle = (0, _styles.styled)('span')(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
         color: theme.palette.common.black
     }));
-const StatusChipStyled = (0, _styles.styled)(_material.Chip)(({ theme, variant })=>{
-    let backgroundColor, border, labelColor;
-    if (variant === "filled") {
+const StatusChipStyled = (0, _styles.styled)(_Chip.default)(({ theme, variant })=>{
+    let backgroundColor, labelColor;
+    if (variant === 'filled') {
         backgroundColor = theme.palette.primary.light;
         labelColor = theme.palette.common.white;
     } else {
         backgroundColor = theme.palette.common.white;
     }
-    border = "#F0F0F0";
+    const border = '#F0F0F0';
     return {
         height: 20,
         minWidth: 34,
         maxWidth: 120,
-        ["& .MuiChip-label"]: {
+        ['& .MuiChip-label']: {
             fontSize: 9,
             fontWeight: 600,
-            lineHeight: "12px",
-            color: labelColor ? labelColor : theme.palette["statistics"].label
+            lineHeight: '12px',
+            color: labelColor ? labelColor : theme.palette['statistics'].label
         },
         backgroundColor,
         border: `1px solid ${border}`
     };
-}); // export const StatusBarSearchWrapper = styled("div")(({ theme }) => ({
+}) // export const StatusBarSearchWrapper = styled("div")(({ theme }) => ({
  //   position: "relative",
  //   display: "flex",
  //   alignItems: "center",
@@ -129,3 +135,4 @@ const StatusChipStyled = (0, _styles.styled)(_material.Chip)(({ theme, variant }
  //   borderRadius: 4,
  //   height: 36,
  // }));
+;

package/dist/FxStrStaticDropdown/FxStrStaticDropdown.js

@@ -1,4 +1,3 @@
-// @ts-ignore
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -11,12 +10,22 @@ Object.defineProperty(exports, "FxStrStaticDropdown", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _iconsmaterial = require("@mui/icons-material");
-const _material = require("@mui/material");
+const _CheckBoxOutlineBlank = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/CheckBoxOutlineBlank"));
+const _CheckBox = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/CheckBox"));
+const _Checkbox = /*#__PURE__*/ _interop_require_default(require("@mui/material/Checkbox"));
+const _styles = require("@mui/material/styles");
+const _Typography = /*#__PURE__*/ _interop_require_default(require("@mui/material/Typography"));
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Stack = /*#__PURE__*/ _interop_require_default(require("@mui/material/Stack"));
 const _FxChip = require("../FxChip");
 const _FxIcon = require("../FxIcon");
 const _dropdownstyles = require("./styles/dropdown.styles");
 const _helpers = require("./helpers/helpers");
+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();
@@ -58,16 +67,16 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const icon = /*#__PURE__*/ (0, _jsxruntime.jsx)(_iconsmaterial.CheckBoxOutlineBlank, {
+const icon = /*#__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 FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
     const { onAdd, onRemoveOne, onRemoveAll, type = 'text', modal_type, multiple, name, query, isInitialOpen, placeholder, data, rootStylesOverride } = props;
     const ref = (0, _react.useRef)(null);
-    const theme = (0, _material.useTheme)();
+    const theme = (0, _styles.useTheme)();
     const [displayed, setDisplayed] = (0, _react.useState)(multiple ? [] : '');
     const [isOpen, setIsOpen] = (0, _react.useState)(isInitialOpen);
     (0, _react.useEffect)(()=>{
@@ -161,7 +170,7 @@ const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                                 handleOptionClick(option);
                             },
                             children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
                                     icon: icon,
                                     checked: isChecked(option),
                                     checkedIcon: checkedIcon,
@@ -204,7 +213,7 @@ const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
     const DeleteButton = ({ option, isDisplay })=>{
         const isDisplayButton = isDisplay && multiple && (displayed === null || displayed === void 0 ? void 0 : displayed.length) > 0 || !multiple && displayed === option;
         if (isDisplayButton) {
-            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                 onClick: ()=>{
                     deleteOneItem(option);
                 },
@@ -238,7 +247,7 @@ const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
         return null;
     };
     const OneOption = ({ option, modal })=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
             sx: {
                 display: 'flex',
                 justifyContent: 'space-between',
@@ -248,7 +257,7 @@ const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                 cursor: 'pointer'
             },
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
                     sx: {
                         width: '100%',
                         display: 'flex',
@@ -256,7 +265,7 @@ const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                         gap: 1
                     },
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
                             variant: "subtitle2",
                             color: theme.palette.typography.title,
                             children: (0, _helpers.titleCase)(option)
@@ -296,7 +305,7 @@ const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
         }
     };
     const getMultipleDisplayedValues = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
             direction: 'row',
             sx: {
                 maxWidth: 214,
@@ -305,7 +314,7 @@ const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                 justifyContent: 'space-between'
             },
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
                     direction: 'row',
                     sx: {
                         overflow: 'hidden',
@@ -316,7 +325,7 @@ const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((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',
@@ -329,7 +338,7 @@ const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
                             onRemoveAll && onRemoveAll();
                             sessionStorage.removeItem(`dropdown-${query}-${name}`);
                         },
-                        icon: `filters/remove_all_button.svg`,
+                        icon: 'filters/remove_all_button.svg',
                         width: 16,
                         height: 16
                     })
@@ -340,7 +349,7 @@ const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((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.jsx)(_dropdownstyles.InputWrapper, {
@@ -366,3 +375,4 @@ const FxStrStaticDropdown = /*#__PURE__*/ _react.default.forwardRef((props)=>{
         ]
     });
 });
+FxStrStaticDropdown.displayName = 'FxStrStaticDropdown';

package/dist/FxStrStaticDropdown/styles/dropdown.styles.js

@@ -176,11 +176,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/FxStyledButton/FxStyledButton.d.ts

@@ -1,11 +1,11 @@
 export declare const FxStyledButton: ({ btnValue, btnType, disabled, onClick, startIcon, endIcon, iconSize, sx, variant, }: {
     btnValue?: string;
-    btnType?: 'text' | 'icon';
+    btnType?: "text" | "icon";
     disabled?: boolean;
     onClick: any;
     startIcon?: any;
     endIcon?: any;
     iconSize?: number;
     sx?: any;
-    variant?: 'contained' | 'outlined' | 'text' | 'contained:rounded';
+    variant?: "contained" | "outlined" | "text" | "contained:rounded";
 }) => any;

package/dist/FxStyledButton/FxStyledButton.js

@@ -10,7 +10,8 @@ Object.defineProperty(exports, "FxStyledButton", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _material = require("@mui/material");
+const _Button = /*#__PURE__*/ _interop_require_default(require("@mui/material/Button"));
+const _IconButton = /*#__PURE__*/ _interop_require_default(require("@mui/material/IconButton"));
 const _FxIcon = require("../FxIcon");
 const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
 function _interop_require_default(obj) {
@@ -19,7 +20,7 @@ function _interop_require_default(obj) {
     };
 }
 const FxStyledButton = ({ btnValue, btnType = 'text', disabled, onClick, startIcon, endIcon, iconSize, sx, variant })=>{
-    return btnType == 'text' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+    return btnType == 'text' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
         disabled: disabled,
         sx: sx,
         variant: variant || 'text',
@@ -37,7 +38,7 @@ const FxStyledButton = ({ btnValue, btnType = 'text', disabled, onClick, startIc
             icon: endIcon
         }) : null,
         children: (0, _fixefyuiutils.titleCase)(btnValue)
-    }) : btnType == 'icon' && startIcon && iconSize && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.IconButton, {
+    }) : btnType == 'icon' && startIcon && iconSize && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_IconButton.default, {
         onClick: onClick,
         sx: sx,
         disabled: disabled,

package/dist/FxStyledComponents/index.d.ts

@@ -5,7 +5,7 @@ export declare const Label: any;
 export declare const BoldValue: any;
 export declare const Value: any;
 export declare const PageTitle: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
-export declare const Link: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const FxLink: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
 export declare const Text: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
 export declare const ShowMore: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
 export declare const ShowMoreContainer: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;

package/dist/FxStyledComponents/index.js

@@ -21,12 +21,12 @@ _export(exports, {
     DataWrapper: function() {
         return DataWrapper;
     },
+    FxLink: function() {
+        return FxLink;
+    },
     Label: function() {
         return Label;
     },
-    Link: function() {
-        return Link;
-    },
     PageHeader: function() {
         return PageHeader;
     },
@@ -50,7 +50,11 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _styles = require("@mui/material/styles");
 const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
-const _material = require("@mui/material");
+const _Paper = /*#__PURE__*/ _interop_require_default(require("@mui/material/Paper"));
+const _Link = /*#__PURE__*/ _interop_require_default(require("@mui/material/Link"));
+const _Typography = /*#__PURE__*/ _interop_require_default(require("@mui/material/Typography"));
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
+const _Grid = /*#__PURE__*/ _interop_require_default(require("@mui/material/Grid"));
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -64,6 +68,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();
@@ -144,49 +153,49 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const Card = (0, _styles.styled)(_material.Paper)(({})=>({
+const Card = (0, _styles.styled)(_Paper.default)(({})=>({
         borderRadius: 8,
         padding: 16,
         // transition: "max-height 1000ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
         overflow: 'hidden',
         position: 'relative'
     }));
-const PageHeader = (0, _styles.styled)(_material.Box)(({})=>({
+const PageHeader = (0, _styles.styled)(_Box.default)(({})=>({
         backgroundColor: '#E2EEF1',
         width: '100%',
         height: 220,
         padding: 32
     }));
-const Label = (0, _styles.styled)(_material.Typography)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.overLineCaption), {
+const Label = (0, _styles.styled)(_Typography.default)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.overLineCaption), {
         color: theme.palette.statistics.label
     }));
-const BoldValue = (0, _styles.styled)(_material.Typography)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.subtitle2), {
+const BoldValue = (0, _styles.styled)(_Typography.default)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.subtitle2), {
         fontWeight: 700,
         lineHeight: '16px',
         color: theme.palette.typography.title
     }));
-const Value = (0, _styles.styled)(_material.Typography)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
+const Value = (0, _styles.styled)(_Typography.default)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
         fontFamily: theme.typography.fontFamily,
         lineHeight: '20px',
         color: theme.palette.typography.title
     }));
-const PageTitle = (0, _styles.styled)(_material.Typography)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.h4), {
+const PageTitle = (0, _styles.styled)(_Typography.default)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.h4), {
         color: theme.palette.common.black
     }));
-const Link = (0, _styles.styled)(_material.Link)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
+const FxLink = (0, _styles.styled)(_Link.default)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
         lineHeight: '20px',
         fontStyle: 'italic',
         color: theme.palette.primary[500],
         cursor: 'pointer',
         textDecoration: 'none'
     }));
-const Text = (0, _styles.styled)(_material.Typography)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
+const Text = (0, _styles.styled)(_Typography.default)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
         color: theme.palette.typography.title,
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
         overflow: 'hidden'
     }));
-const ShowMore = (0, _styles.styled)(_material.Typography)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
+const ShowMore = (0, _styles.styled)(_Typography.default)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
         color: theme.palette.primary['500'],
         fontWeight: 600,
         fontSize: '12px',
@@ -194,7 +203,7 @@ const ShowMore = (0, _styles.styled)(_material.Typography)(({ theme })=>_object_
         lineHeight: '24px',
         cursor: 'pointer'
     }));
-const ShowMoreContainer = (0, _styles.styled)(_material.Grid)(({ theme })=>({
+const ShowMoreContainer = (0, _styles.styled)(_Grid.default)(({ theme })=>({
         backgroundColor: theme.palette.common.white,
         width: '100%',
         display: 'flex',
@@ -208,10 +217,10 @@ const DataWrapper = ({ values = [], title, icon, columns = 4, cardStyle = {}, wr
     ] : values;
     const last4Items = normalizedValues.splice(-columns);
     const containerColumns = columns === 5 ? 10 : 12;
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
         sx: _object_spread({}, wrapperStyle),
         children: [
-            (title || icon) && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+            (title || icon) && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
                 display: "flex",
                 alignItems: "center",
                 sx: {
@@ -231,19 +240,19 @@ const DataWrapper = ({ values = [], title, icon, columns = 4, cardStyle = {}, wr
             /*#__PURE__*/ (0, _jsxruntime.jsx)(Card, {
                 elevation: 0,
                 sx: _object_spread({
-                    border: `1px solid #F0F0F0`
+                    border: '1px solid #F0F0F0'
                 }, cardStyle),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
                     container: true,
                     columns: containerColumns,
                     children: [
                         normalizedValues.map((value, index)=>{
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
                                 sx: {
                                     minHeight: 74,
                                     padding: 2,
-                                    borderRight: value && (index + 1) % columns !== 0 && `1px solid #F0F0F0`,
-                                    borderBottom: value && `1px solid #F0F0F0`,
+                                    borderRight: value && (index + 1) % columns !== 0 && '1px solid #F0F0F0',
+                                    borderBottom: value && '1px solid #F0F0F0',
                                     display: 'flex',
                                     alignItems: 'center'
                                 },
@@ -253,11 +262,11 @@ const DataWrapper = ({ values = [], title, icon, columns = 4, cardStyle = {}, wr
                             }, index);
                         }),
                         last4Items.map((value, index)=>{
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
                                 sx: {
                                     minHeight: 74,
                                     padding: 2,
-                                    borderRight: value && (index + 1) % columns !== 0 && `1px solid #F0F0F0`,
+                                    borderRight: value && (index + 1) % columns !== 0 && '1px solid #F0F0F0',
                                     display: 'flex',
                                     alignItems: 'center'
                                 },

package/dist/FxTabs/FxTabs.js

@@ -10,8 +10,12 @@ Object.defineProperty(exports, "FxTabs", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _lab = require("@mui/lab");
-const _material = require("@mui/material");
+const _TabContext = /*#__PURE__*/ _interop_require_default(require("@mui/lab/TabContext"));
+const _TabPanel = /*#__PURE__*/ _interop_require_default(require("@mui/lab/TabPanel"));
+const _TabList = /*#__PURE__*/ _interop_require_default(require("@mui/lab/TabList"));
+const _styles = require("@mui/material/styles");
+const _Tab = /*#__PURE__*/ _interop_require_default(require("@mui/material/Tab"));
+const _Box = /*#__PURE__*/ _interop_require_default(require("@mui/material/Box"));
 const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -19,11 +23,11 @@ function _interop_require_default(obj) {
     };
 }
 const FxTabs = ({ activeTab, tabsData, onChange, divider = false, adjecentComponent })=>{
-    const theme = (0, _material.useTheme)();
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_lab.TabContext, {
+    const theme = (0, _styles.useTheme)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_TabContext.default, {
         value: activeTab,
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_lab.TabList, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_TabList.default, {
                 sx: {
                     '.MuiTabs-flexContainer': {
                         gap: '28px',
@@ -33,7 +37,7 @@ const FxTabs = ({ activeTab, tabsData, onChange, divider = false, adjecentCompon
                 children: [
                     tabsData.map((tab, i)=>{
                         const { value, label } = tab;
-                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tab.default, {
                             onClick: ()=>{
                                 onChange(value);
                             },
@@ -42,7 +46,7 @@ const FxTabs = ({ activeTab, tabsData, onChange, divider = false, adjecentCompon
                                 p: '0 4px',
                                 textTransform: 'capitalize',
                                 '&.Mui-selected': {
-                                    //@ts-ignore
+                                    //@ts-expect-error 500 is a valid color
                                     color: theme.palette.primary[500],
                                     fontWeight: 700
                                 }
@@ -54,14 +58,14 @@ const FxTabs = ({ activeTab, tabsData, onChange, divider = false, adjecentCompon
                     adjecentComponent
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                 sx: {
                     borderTop: divider ? '1px solid #C5C8C9' : 'none',
                     margin: '0 32px'
                 },
                 children: tabsData.map((tab, i)=>{
                     const { value, tabContent } = tab;
-                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_lab.TabPanel, {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TabPanel.default, {
                         value: value,
                         sx: {
                             padding: '24px 0'