@fixefy/fixefy-ui-components 0.3.74 → 0.3.78

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export type SwitchPropsType = {
+    children: any;
+    [x: string]: any;
+};
+export declare function FxSwitch({ type, children, ...rest }: SwitchPropsType): React.JSX.Element;

package/dist/{src/FxButton/FxButton.js → FxSwitch/FxSwitch.js}

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "FxButton", {
+Object.defineProperty(exports, "FxSwitch", {
     enumerable: true,
     get: function() {
-        return FxButton;
+        return FxSwitch;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _buttonstyles = require("./styles/button.styles");
+const _switchstyles = require("./styles/switch.styles");
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -95,12 +95,12 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-function FxButton(_param) {
+function FxSwitch(_param) {
     var { type = 'primary', children } = _param, rest = _object_without_properties(_param, [
         "type",
         "children"
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_buttonstyles.ButtonStyled, _object_spread_props(_object_spread({}, rest), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_switchstyles.SwitchStyled, _object_spread_props(_object_spread({}, rest), {
         children: children
     }));
 }

package/dist/FxSwitch/index.d.ts

@@ -0,0 +1 @@
+export { FxSwitch, SwitchPropsType } from './FxSwitch';

package/dist/{src/FxChip → FxSwitch}/index.js

@@ -9,11 +9,11 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    ChipPropsType: function() {
-        return _FxChip.ChipPropsType;
+    FxSwitch: function() {
+        return _FxSwitch.FxSwitch;
     },
-    FxChip: function() {
-        return _FxChip.FxChip;
+    SwitchPropsType: function() {
+        return _FxSwitch.SwitchPropsType;
     }
 });
-const _FxChip = require("./FxChip");
+const _FxSwitch = require("./FxSwitch");

package/dist/FxSwitch/styles/switch.styles.d.ts

@@ -0,0 +1 @@
+export declare const SwitchStyled: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;

package/dist/FxSwitch/styles/switch.styles.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SwitchStyled", {
+    enumerable: true,
+    get: function() {
+        return SwitchStyled;
+    }
+});
+const _material = require("@mui/material");
+const _styles = require("@mui/material/styles");
+const SwitchStyled = (0, _styles.styled)(_material.Switch)(({ theme })=>({
+        width: '42px',
+        height: '24px',
+        padding: 0,
+        '& .MuiSwitch-switchBase': {
+            padding: '3px',
+            '&.Mui-checked': {
+                transform: 'translateX(18px)',
+                '& .MuiSwitch-thumb': {
+                    backgroundColor: theme.palette.common.white,
+                    width: '18px',
+                    height: '18px'
+                },
+                '& + .MuiSwitch-track': {
+                    backgroundColor: '#568793',
+                    opacity: 1
+                }
+            }
+        },
+        '& .MuiSwitch-thumb': {
+            backgroundColor: theme.palette.common.white,
+            width: '18px',
+            height: '18px'
+        },
+        '& .MuiSwitch-track': {
+            backgroundColor: '#C5C8C9',
+            borderRadius: '75px',
+            opacity: 1
+        }
+    }));

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'

package/dist/FxTag/FxTag.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "FxTag", {
 });
 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 _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
 const _tagstyles = require("./styles/tag.styles");
 function _interop_require_default(obj) {
@@ -18,7 +18,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const FxTag = ({ name, count = 0, type })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+const FxTag = ({ name, count = 0, type })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",

package/dist/FxTag/index.d.ts

@@ -1 +1 @@
-export { FxTag, TagPropsType } from "./FxTag";
+export { FxTag, TagPropsType } from './FxTag';

package/dist/FxTag/styles/tag.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 _Typography = /*#__PURE__*/ _interop_require_default(require("@mui/material/Typography"));
 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,7 +79,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const StyledTag = (0, _styles.styled)(_material.Box)(({ theme, name, type })=>{
+const StyledTag = (0, _styles.styled)(_Box.default)(({ theme, name, type })=>{
     var _theme_palette_type_name, _theme_palette_type, _theme_palette_tag_name, _theme_palette_type_name1, _theme_palette_type1, _theme_palette_tag_name1;
     return {
         background: type ? (_theme_palette_type = theme.palette[type]) === null || _theme_palette_type === void 0 ? void 0 : (_theme_palette_type_name = _theme_palette_type[name]) === null || _theme_palette_type_name === void 0 ? void 0 : _theme_palette_type_name.background : (_theme_palette_tag_name = theme.palette.tag[name]) === null || _theme_palette_tag_name === void 0 ? void 0 : _theme_palette_tag_name.background,
@@ -85,11 +91,11 @@ const StyledTag = (0, _styles.styled)(_material.Box)(({ theme, name, type })=>{
         width: 'fit-content'
     };
 });
-const StyledLabel = (0, _styles.styled)(_material.Typography)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
+const StyledLabel = (0, _styles.styled)(_Typography.default)(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
         lineHeight: '20px',
         color: theme.palette.common.white
     }));
-const StyledCount = (0, _styles.styled)(_material.Typography)(({ theme, name, type })=>{
+const StyledCount = (0, _styles.styled)(_Typography.default)(({ theme, name, type })=>{
     var _theme_palette_type_name, _theme_palette_type, _theme_palette_tag_name;
     return _object_spread_props(_object_spread({}, theme.typography.subtitle2), {
         lineHeight: '16px',

package/dist/FxTextField/FxTextField.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { InputBaseProps } from '@mui/material';
+import { InputBaseProps } from '@mui/material/InputBase';
 export interface TextFieldPropsType {
     autoFocus?: boolean;
     droppedItem?: {

package/dist/FxTextField/FxTextField.js

@@ -19,7 +19,10 @@ _export(exports, {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
-const _material = require("@mui/material");
+const _FormControl = /*#__PURE__*/ _interop_require_default(require("@mui/material/FormControl"));
+const _FormHelperText = /*#__PURE__*/ _interop_require_default(require("@mui/material/FormHelperText"));
+const _InputBase = /*#__PURE__*/ _interop_require_default(require("@mui/material/InputBase"));
+const _InputLabel = /*#__PURE__*/ _interop_require_default(require("@mui/material/InputLabel"));
 const _ErrorRounded = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/ErrorRounded"));
 function _define_property(obj, key, value) {
     if (key in obj) {
@@ -134,11 +137,11 @@ const FxTextField = ({ autoFocus, droppedItem, defaultValue = '', onChange, stru
         onChange && onChange(e);
         setValue(e.target.value);
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_FormControl.default, {
         variant: "standard",
         error: error,
         children: [
-            title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+            title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLabel.default, {
                 shrink: true,
                 htmlFor: title,
                 sx: (theme)=>_object_spread(_object_spread_props(_object_spread({
@@ -154,7 +157,7 @@ const FxTextField = ({ autoFocus, droppedItem, defaultValue = '', onChange, stru
                         }
                     }), required && {
                         '&:before': {
-                            content: "'*'",
+                            content: '\'*\'',
                             color: theme.palette.redscale.main,
                             display: 'inline-block',
                             marginRight: '5px'
@@ -162,7 +165,7 @@ const FxTextField = ({ autoFocus, droppedItem, defaultValue = '', onChange, stru
                     }),
                 children: (0, _fixefyuiutils.titleCase)(title)
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputBase, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputBase.default, {
                 endAdornment: endAdornment,
                 startAdornment: startAdornment,
                 id: title,
@@ -173,7 +176,7 @@ const FxTextField = ({ autoFocus, droppedItem, defaultValue = '', onChange, stru
                 value: value,
                 error: error
             }),
-            error && errorText ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormHelperText, {
+            error && errorText ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_FormHelperText.default, {
                 sx: (theme)=>({
                         '&.Mui-error': {
                             color: theme.palette.redscale.main
@@ -195,7 +198,7 @@ const FxTextField = ({ autoFocus, droppedItem, defaultValue = '', onChange, stru
                     }),
                     (0, _fixefyuiutils.titleCase)(errorText)
                 ]
-            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormHelperText, {
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_FormHelperText.default, {
                 sx: (theme)=>({
                         color: theme.palette.greyscale.light,
                         fontSize: '11px'

package/dist/FxTodo/FxTodo.js

@@ -12,7 +12,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _image = /*#__PURE__*/ _interop_require_default(require("next/image"));
 const _FxAvatar = require("../FxAvatar");
-const _material = require("@mui/material");
+const _Divider = /*#__PURE__*/ _interop_require_default(require("@mui/material/Divider"));
 const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
 const _todostyles = require("./styles/todo.styles");
 function _interop_require_default(obj) {
@@ -32,9 +32,9 @@ function FxTodo({ todo }) {
                                 alt: todo.title,
                                 width: 16,
                                 height: 16,
-                                loader: ()=>//@ts-ignore
-                                    (0, _fixefyuiutils.imageLoader)({
-                                        src: 'invoices/severity_low.svg'
+                                loader: ()=>(0, _fixefyuiutils.imageLoader)({
+                                        src: 'invoices/severity_low.svg',
+                                        width: 16
                                     }),
                                 src: `invoices/severity_${todo.priority}.svg`,
                                 onLoad: ()=>console.log('loaded'),
@@ -63,7 +63,7 @@ function FxTodo({ todo }) {
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {
                 sx: {
                     mb: '16px'
                 }

package/dist/FxToggleButtons/FxToggleButtons.js

@@ -10,14 +10,16 @@ Object.defineProperty(exports, "FxToggleButtons", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _material = require("@mui/material");
+const _Typography = /*#__PURE__*/ _interop_require_default(require("@mui/material/Typography"));
+const _ToggleButtonGroup = /*#__PURE__*/ _interop_require_default(require("@mui/material/ToggleButtonGroup"));
+const _ToggleButton = /*#__PURE__*/ _interop_require_default(require("@mui/material/ToggleButton"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const FxToggleButtons = ({ activeTab, tabsData, onChange, darkMode })=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButtonGroup, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToggleButtonGroup.default, {
         sx: {
             height: '40px',
             backgroundColor: darkMode ? '#323232' : '#fff'
@@ -33,9 +35,8 @@ const FxToggleButtons = ({ activeTab, tabsData, onChange, darkMode })=>{
         },
         children: tabsData.map((tab, i)=>{
             const { value, show, label, maxWidth, minWidth } = tab;
-            return show && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+            return show && /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToggleButton.default, {
                 disabled: activeTab === value,
-                //@ts-ignore
                 sx: {
                     '&.Mui-disabled': {
                         border: '1px solid #568793 !important'
@@ -51,7 +52,7 @@ const FxToggleButtons = ({ activeTab, tabsData, onChange, darkMode })=>{
                     }
                 },
                 value: value,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Typography.default, {
                     sx: {
                         textTransform: 'none'
                     },

package/dist/FxUserImage/FxUserImage.js

@@ -16,7 +16,7 @@ const _FxIcon = require("../FxIcon");
 const _nexts3upload = require("@fixefy/next-s3-upload");
 const _fixefyuiutils = require("@fixefy/fixefy-ui-utils");
 const _fixefyhooks = require("@fixefy/fixefy-hooks");
-const _material = require("@mui/material");
+const _CircularProgress = /*#__PURE__*/ _interop_require_default(require("@mui/material/CircularProgress"));
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
@@ -98,22 +98,25 @@ const FxUserImage = ({ bucketAddress, user, loading, setLoading })=>{
     const { downloadFromS3 } = (0, _nexts3upload.useS3Download)('download-bytearray');
     const { email, full_name, first_name, last_name } = user;
     var _ref;
-    // @ts-ignore
+    // @ts-expect-error try to write in a good manner - no trick no hacks
     const initials = (0, _fixefyuiutils.toInitials)((_ref = full_name !== null && full_name !== void 0 ? full_name : first_name && last_name) !== null && _ref !== void 0 ? _ref : 'unknown').slice(0, 2);
     const [file, setFile] = (0, _react.useState)(null);
     const [files, setFiles] = (0, _react.useState)([]);
     (0, _react.useEffect)(()=>{
         fetchFiles();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     (0, _react.useEffect)(()=>{
         if (file) {
             setLoading(false);
         }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         file
     ]);
     (0, _react.useEffect)(()=>{
         fetchFile(files);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     //// fetch single file from s3
     const fetchFile = function() {
@@ -183,7 +186,7 @@ const FxUserImage = ({ bucketAddress, user, loading, setLoading })=>{
             return _ref.apply(this, arguments);
         };
     }();
-    if (loading) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
+    if (loading) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CircularProgress.default, {
         size: 24
     });
     if (!file && !loading) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FxIcon.FxIcon, {
@@ -219,6 +222,7 @@ const ImageView = ({ data, fileName, type })=>{
             setImageSrc(null);
             return;
         }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         data
     ]);

package/dist/index.d.ts

@@ -33,4 +33,4 @@ export { FxTextField, TextFieldPropsType } from './FxTextField';
 export { FxTodo, TodoItemType, TodoPropsType } from './FxTodo';
 export { FxUserImage } from './FxUserImage';
 export { FxWizard, StepsLauncher } from './FxWizard';
-export { Card, PageHeader, Label, BoldValue, Value, PageTitle, Link, Text, ShowMore, ShowMoreContainer, DataWrapper, Bars, } from './FxStyledComponents';
+export { Card, PageHeader, Label, BoldValue, Value, PageTitle, FxLink, Text, ShowMore, ShowMoreContainer, DataWrapper, Bars, } from './FxStyledComponents';

package/dist/index.js

@@ -81,6 +81,9 @@ _export(exports, {
     FxIcon: function() {
         return _FxIcon.FxIcon;
     },
+    FxLink: function() {
+        return _FxStyledComponents.FxLink;
+    },
     FxMenuItemWithIcon: function() {
         return _FxMenuItemWithIcon.FxMenuItemWithIcon;
     },
@@ -147,9 +150,6 @@ _export(exports, {
     Label: function() {
         return _FxStyledComponents.Label;
     },
-    Link: function() {
-        return _FxStyledComponents.Link;
-    },
     ModalPropsType: function() {
         return _FxModal.ModalPropsType;
     },