flipper-ui 0.33.1 → 0.34.0

package/core/data-display/data-table/data-table.d.ts

@@ -28,5 +28,5 @@ export type DataTableProps<D extends Data, V extends StackView = Record<string,
     };
     onRowClick?: (event: MouseEvent<HTMLTableRowElement>, rowData: D) => void;
 };
-export declare const DataTable: <D extends Data, V extends import("./types").RecordUnknown>(props: DataTableProps<D, V>) => React.JSX.Element;
+export declare const DataTable: <D extends Data, V extends StackView>(props: DataTableProps<D, V>) => React.JSX.Element;
 export default DataTable;

package/core/data-display/data-table/data-table.js

@@ -6,20 +6,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.DataTable = void 0;
-var _Checkbox2 = _interopRequireDefault(require("@material-ui/core/Checkbox"));
 var _last2 = _interopRequireDefault(require("ramda/es/last"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
-var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
-var _TableBody = _interopRequireDefault(require("@material-ui/core/TableBody"));
-var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
-var _TableContainer = _interopRequireDefault(require("@material-ui/core/TableContainer"));
-var _TableFooter = _interopRequireDefault(require("@material-ui/core/TableFooter"));
-var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));
-var _TablePagination = _interopRequireDefault(require("@material-ui/core/TablePagination"));
-var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _Table = _interopRequireDefault(require("@mui/material/Table"));
+var _TableBody = _interopRequireDefault(require("@mui/material/TableBody"));
+var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
+var _TableContainer = _interopRequireDefault(require("@mui/material/TableContainer"));
+var _TableFooter = _interopRequireDefault(require("@mui/material/TableFooter"));
+var _TableHead = _interopRequireDefault(require("@mui/material/TableHead"));
+var _TablePagination = _interopRequireDefault(require("@mui/material/TablePagination"));
+var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
 var _dataTablePaginationActions = require("./data-table-pagination-actions");
 var _rows = require("./rows");
 var _types = require("./types");
@@ -188,8 +188,7 @@ var DataTable = exports.DataTable = function DataTable(props) {
         }
       }, checkbox && /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
         padding: "checkbox"
-      }, /*#__PURE__*/_react["default"].createElement(_Checkbox2["default"], {
-        color: "primary",
+      }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
         checked: (checkboxProps === null || checkboxProps === void 0 || (_checkboxProps$checkR = checkboxProps.checkRow) === null || _checkboxProps$checkR === void 0 ? void 0 : _checkboxProps$checkR[index]) !== undefined ? checkboxProps.checkRow[index] : false,
         onChange: function onChange() {
           if (checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.setSelectedRow && checkboxProps.setSelectedAllRows) {
@@ -253,8 +252,7 @@ var DataTable = exports.DataTable = function DataTable(props) {
     style: headRowStyle
   }, checkbox && /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
     padding: "checkbox"
-  }, /*#__PURE__*/_react["default"].createElement(_Checkbox2["default"], {
-    color: "primary",
+  }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
     checked: (checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.checkAllRows) !== undefined ? checkboxProps.checkAllRows : false,
     onChange: function onChange() {
       if (checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.setSelectedRow && checkboxProps.setSelectedAllRows) {

package/core/data-display/data-table/data-table.stories.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("./data-table").DataTableProps<import("./types").Data, import("./types").RecordUnknown>>;
+import type { Meta } from '@storybook/react';
+import { default as DataTable } from './data-table';
+declare const _default: Meta<typeof DataTable>;
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const Custom: () => React.JSX.Element;

package/core/data-display/data-table/rows.js

@@ -9,8 +9,8 @@ exports.StatefulRow = exports.NewRow = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
-var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
+var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
 var _dateTime = _interopRequireDefault(require("../../inputs/date-time"));
 var _maskField = _interopRequireDefault(require("../../inputs/mask-field"));
 var _textField = _interopRequireDefault(require("../../inputs/text-field"));

package/core/data-display/data-table/styles.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { TableCell } from '@mui/material';
 export declare const FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const PaginationWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableCellRows: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material").TableCellProps, never>> & string & Omit<typeof TableCell, keyof import("react").Component<any, {}, any>>;
 export declare const RowTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
-    ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
-}, "children" | "style" | "className" | "classes" | "selected" | "sx" | "hover">, never>> & string & Omit<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TableRowTypeMap<{}, "tr">>, keyof import("react").Component<any, {}, any>>;
+    ref?: ((instance: HTMLTableRowElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
+}, "children" | "style" | "className" | "classes" | "sx" | "selected" | "hover">, never>> & string & Omit<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TableRowTypeMap<{}, "tr">>, keyof import("react").Component<any, {}, any>>;

package/core/data-display/data-table/use-paginated.d.ts

@@ -7,7 +7,7 @@ export interface IDataProps {
     quantity: number;
     date: Date;
 }
-export declare const generateRandomDate: (size: number) => Data[];
+export declare const generateRandomData: (size: number) => Data[];
 export declare const usePaginated: () => {
     data: Data[];
     setData: Dispatch<SetStateAction<Data[]>>;

package/core/data-display/data-table/use-paginated.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.usePaginated = exports.generateRandomDate = void 0;
+exports.usePaginated = exports.generateRandomData = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _splitEvery2 = _interopRequireDefault(require("ramda/es/splitEvery"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -12,26 +12,29 @@ var _react = require("react");
 var _faker = require("@faker-js/faker");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var generateRandomDate = exports.generateRandomDate = function generateRandomDate(size) {
+var generateRandomData = exports.generateRandomData = function generateRandomData(size) {
   var content = [];
   for (var i = 0; i < size; i++) {
     content.push({
       id: i,
       product: _faker.faker.vehicle.model(),
-      price: _faker.faker.datatype["float"]({
+      price: _faker.faker.number["float"]({
         min: 0,
         max: 100000
       }),
-      quantity: _faker.faker.datatype.number({
-        min: 0,
+      quantity: _faker.faker.number["int"]({
+        min: 1,
         max: 30
       }),
-      date: _faker.faker.date.recent(2)
+      date: _faker.faker.date.recent({
+        days: 5,
+        refDate: new Date()
+      })
     });
   }
   return content;
 };
-var mockData = generateRandomDate(35);
+var mockData = generateRandomData(35);
 var INITIAL_STATE = {
   items: [],
   size: 5,

package/core/data-display/data-table/use-rows-state.d.ts

@@ -1,5 +1,5 @@
-import type { Data, Identifier, RowState } from './types';
-export declare const useRowsState: <D extends Data, V extends import("./types").RecordUnknown>(rows: D[], isHidden?: boolean, newRow?: Partial<D>) => {
+import type { Data, Identifier, RowState, StackView } from './types';
+export declare const useRowsState: <D extends Data, V extends StackView>(rows: D[], isHidden?: boolean, newRow?: Partial<D>) => {
     getRowState: (id: Identifier) => RowState<D, V> | undefined;
     setEditableRowState: (id: Identifier) => (patch: Partial<D>) => void;
     setRowState: (id: Identifier, partial: Partial<RowState<D, V>>) => void;

package/core/data-display/divider/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-import type { DividerProps as MuiDividerProps } from '@material-ui/core';
-export interface DividerProps extends DefaultProps, MuiDividerProps {
+import type { DividerProps } from '@mui/material/Divider';
+export interface IDividerProps extends DefaultProps, DividerProps {
     'data-testid'?: string;
 }
-declare const Divider: ({ margin, padding, style, ...otherProps }: DividerProps) => React.JSX.Element;
+declare const Divider: ({ margin, padding, style, ...otherProps }: IDividerProps) => React.JSX.Element;
 export default Divider;

package/core/data-display/divider/index.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Divider2 = _interopRequireDefault(require("@material-ui/core/Divider"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _excluded = ["margin", "padding", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -19,7 +19,7 @@ var Divider = function Divider(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Divider2["default"], (0, _extends2["default"])({}, otherProps, {
+  return /*#__PURE__*/_react["default"].createElement(_Divider["default"], (0, _extends2["default"])({}, otherProps, {
     style: _objectSpread({
       margin: margin,
       padding: padding

package/core/data-display/fab/fab.stories.d.ts

@@ -1,3 +1,5 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").FabProps>;
+import type { Meta } from '@storybook/react';
+import Fab from '.';
+declare const _default: Meta<typeof Fab>;
 export default _default;
 export declare const Default: any;

package/core/data-display/fab/index.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { MouseEvent, ReactElement } from 'react';
 import type { DefaultProps } from '../../types';
-import type { FabProps as MuiFabProps } from '@material-ui/core';
-export interface FabProps extends DefaultProps, MuiFabProps {
+import type { FabProps } from '@mui/material/Fab';
+export interface IFabProps extends DefaultProps, FabProps {
     onClick?: (event?: MouseEvent<HTMLElement>) => void;
     children: ReactElement<Record<string, unknown>>;
 }
-declare const Fab: ({ children, margin, padding, style, ...otherProps }: FabProps) => React.JSX.Element;
+declare const Fab: ({ children, margin, padding, style, ...otherProps }: IFabProps) => React.JSX.Element;
 export default Fab;

package/core/data-display/fab/index.js

@@ -5,14 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Fab2 = _interopRequireDefault(require("@material-ui/core/Fab"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
+var _Fab = _interopRequireDefault(require("@mui/material/Fab"));
 var _excluded = ["children", "margin", "padding", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useStyles = (0, _makeStyles2["default"])(function () {
+  return {
+    root: {
+      '&:hover': {
+        backgroundColor: '#d5d5d5'
+      }
+    }
+  };
+});
 var Fab = function Fab(_ref) {
   var children = _ref.children,
     margin = _ref.margin,
@@ -20,7 +30,10 @@ var Fab = function Fab(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Fab2["default"], (0, _extends2["default"])({}, otherProps, {
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement(_Fab["default"], (0, _extends2["default"])({}, otherProps, {
+    color: "inherit",
+    classes: classes,
     style: _objectSpread({
       margin: margin,
       padding: padding

package/core/data-display/fab-v2/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { MouseEvent, CSSProperties } from 'react';
-import type { FabProps } from '@/core/data-display/fab';
-export interface IProps extends FabProps {
+import type { IFabProps } from '@/core/data-display/fab';
+export interface IProps extends IFabProps {
     mini?: boolean;
     className?: string;
     name?: string;

package/core/data-display/list/index.d.ts

@@ -3,7 +3,7 @@ import type { DefaultProps } from '../../types';
 export interface ListProps extends DefaultProps {
     title?: string;
     dense?: boolean;
-    color?: 'primary' | 'secondary' | 'default' | 'inherit';
+    color?: 'default' | 'inherit';
 }
-declare const List: ({ title, padding, margin, style, children, className, color, ...otherProps }: ListProps) => React.JSX.Element;
+declare const List: ({ title, padding, margin, style, color, className, children, ...otherProps }: ListProps) => React.JSX.Element;
 export default List;

package/core/data-display/list/index.js

@@ -5,33 +5,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _List2 = _interopRequireDefault(require("@material-ui/core/List"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _ListSubheader2 = _interopRequireDefault(require("@material-ui/core/ListSubheader"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _createStyles2 = _interopRequireDefault(require("@mui/styles/createStyles"));
+var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("@material-ui/core/styles");
-var _excluded = ["title", "padding", "margin", "style", "children", "className", "color"];
+var _List = _interopRequireDefault(require("@mui/material/List"));
+var _ListSubheader = _interopRequireDefault(require("@mui/material/ListSubheader"));
+var _theme = require("../../../theme");
+var _excluded = ["title", "padding", "margin", "style", "color", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return (0, _styles.createStyles)({
+var app = _theme.theme.colors.app;
+var useStyles = (0, _makeStyles2["default"])(function () {
+  return (0, _createStyles2["default"])({
     "default": {
-      backgroundColor: theme.palette.background["default"],
-      color: theme.palette.text.primary
+      backgroundColor: app.background.main
     },
     inherit: {
       backgroundColor: 'inherit',
       color: 'inherit'
-    },
-    primary: {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText
-    },
-    secondary: {
-      backgroundColor: theme.palette.secondary.main,
-      color: theme.palette.secondary.contrastText
     }
   });
 });
@@ -41,16 +35,16 @@ var List = function List(_ref) {
     margin = _ref.margin,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
-    children = _ref.children,
-    className = _ref.className,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
+    className = _ref.className,
+    children = _ref.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var classes = useStyles();
-  return /*#__PURE__*/_react["default"].createElement(_List2["default"], (0, _extends2["default"])({
-    subheader: title ? /*#__PURE__*/_react["default"].createElement(_ListSubheader2["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_List["default"], (0, _extends2["default"])({
+    subheader: title && /*#__PURE__*/_react["default"].createElement(_ListSubheader["default"], {
       className: classes[color]
-    }, title) : undefined,
+    }, title),
     className: "".concat(classes[color], " ").concat(className),
     style: _objectSpread({
       padding: padding,

package/core/data-display/list/list.stories.d.ts

@@ -1,4 +1,6 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").ListProps>;
+import type { Meta } from '@storybook/react';
+import List from '.';
+declare const _default: Meta<typeof List>;
 export default _default;
 export declare const Default: any;
 export declare const WithIcons: any;

package/core/data-display/list-item/index.js

@@ -5,22 +5,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _ListItem2 = _interopRequireDefault(require("@material-ui/core/ListItem"));
-var _MenuItem2 = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-var _ListItemSecondaryAction2 = _interopRequireDefault(require("@material-ui/core/ListItemSecondaryAction"));
-var _ListItemText2 = _interopRequireDefault(require("@material-ui/core/ListItemText"));
-var _ListItemIcon2 = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));
-var _ListItemAvatar2 = _interopRequireDefault(require("@material-ui/core/ListItemAvatar"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("@material-ui/core/styles");
+var _ListItemAvatar = _interopRequireDefault(require("@mui/material/ListItemAvatar"));
+var _ListItemButton = _interopRequireDefault(require("@mui/material/ListItemButton"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _ListItemSecondaryAction = _interopRequireDefault(require("@mui/material/ListItemSecondaryAction"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useStyles = (0, _styles.makeStyles)(function (theme) {
+var useStyles = (0, _makeStyles2["default"])(function () {
   return {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, theme.breakpoints.up('sm'), {
+    root: {
+      color: 'inherit',
       minHeight: '48px'
-    }), "color", 'inherit')),
+    },
     "default": {
       color: 'inherit'
     }
@@ -38,52 +39,50 @@ var ListItem = function ListItem(props) {
     var typographyProps = {
       className: className
     };
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.avatar && /*#__PURE__*/_react["default"].createElement(_ListItemAvatar2["default"], null, props.avatar), props.icon && /*#__PURE__*/_react["default"].createElement(_ListItemIcon2["default"], {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.avatar && /*#__PURE__*/_react["default"].createElement(_ListItemAvatar["default"], null, props.avatar), props.icon && /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], {
       className: className,
       style: {
         minWidth: minWidth
       }
-    }, props.icon), (props.title || props.subtitle) && /*#__PURE__*/_react["default"].createElement(_ListItemText2["default"], {
+    }, props.icon), (props.title || props.subtitle) && /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
+      primary: props.title,
+      secondary: props.subtitle,
       primaryTypographyProps: typographyProps,
       secondaryTypographyProps: typographyProps,
       "data-testid": "list-item-".concat(props.subtitle),
-      primary: props.title,
-      secondary: props.subtitle,
       style: props.action ? {
         marginRight: '36px'
       } : {}
-    }), props.action && /*#__PURE__*/_react["default"].createElement(_ListItemSecondaryAction2["default"], {
+    }), props.action && /*#__PURE__*/_react["default"].createElement(_ListItemSecondaryAction["default"], {
       className: className
     }, props.action));
   };
-  return props.children ? /*#__PURE__*/_react["default"].createElement(_MenuItem2["default"], {
-    button: true,
+  return props.children ? /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
     id: props.id,
-    style: _objectSpread({
-      padding: padding,
-      margin: margin
-    }, style),
+    value: props.value,
     className: className,
+    selected: props.selected,
+    disabled: props.disabled,
     classes: {
       root: classes.root
     },
-    selected: props.selected,
-    disabled: props.disabled,
-    value: props.value,
-    onClick: props.onClick
-  }, props.children) : /*#__PURE__*/_react["default"].createElement(_ListItem2["default"], {
-    button: true,
-    id: props.id,
     style: _objectSpread({
       padding: padding,
       margin: margin
     }, style),
+    onClick: props.onClick
+  }, props.children) : /*#__PURE__*/_react["default"].createElement(_ListItemButton["default"], {
+    id: props.id,
     className: className,
+    selected: props.selected,
+    disabled: props.disabled,
     classes: {
       root: classes.root
     },
-    selected: props.selected,
-    disabled: props.disabled,
+    style: _objectSpread({
+      padding: padding,
+      margin: margin
+    }, style),
     onClick: props.onClick
   }, renderCustomItem());
 };

package/core/data-display/menu-item/index.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
 import type { MouseEvent, MutableRefObject, ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
-import type { MenuItemClassKey } from '@material-ui/core/MenuItem';
-import type { ClassNameMap } from '@material-ui/core/styles/withStyles';
-export interface ListItemProps extends Omit<DefaultProps, 'name'> {
+export interface MenuItemProps extends Omit<DefaultProps, 'name'> {
     title?: string;
     value?: string | number;
     selected?: boolean;
@@ -11,7 +9,6 @@ export interface ListItemProps extends Omit<DefaultProps, 'name'> {
     onClick?: (event?: MouseEvent) => void;
     children?: string | ReactNode;
     ref?: MutableRefObject<null>;
-    classes?: Partial<ClassNameMap<MenuItemClassKey>> | undefined;
 }
-declare const MenuItem: (props: ListItemProps) => React.JSX.Element;
+declare const MenuItem: (props: MenuItemProps) => React.JSX.Element;
 export default MenuItem;

package/core/data-display/menu-item/index.js

@@ -7,14 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("./styles");
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MenuItem = function MenuItem(props) {
   var padding = props.padding,
     margin = props.margin,
     style = props.style;
-  return /*#__PURE__*/_react["default"].createElement(_styles.MenuItems, {
+  return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+    ref: null,
     id: props.id,
     title: props.title,
     style: _objectSpread({

package/core/data-display/password-visibility/styles.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/inputs/icon-button").IconButtonProps, never>> & string & Omit<({ children, padding, margin, style, ...otherProps }: import("@/core/inputs/icon-button").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/inputs/icon-button").IconButtonProps, never>> & string & Omit<({ children, padding, margin, size, style, ...otherProps }: import("@/core/inputs/icon-button").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/core/data-display/table/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-import type { TableProps as MuiTableProps } from '@material-ui/core/Table';
-export interface TableProps extends DefaultProps, Omit<MuiTableProps, 'padding'> {
-    spacing?: MuiTableProps['padding'];
+import type { TableProps } from '@mui/material/Table';
+export interface ITableProps extends DefaultProps, Omit<TableProps, 'padding'> {
+    spacing?: 'normal' | 'checkbox' | 'none';
 }
-declare const Table: ({ style, margin, padding, spacing, children, ...otherProps }: MuiTableProps & TableProps) => React.JSX.Element;
+declare const Table: ({ style, margin, padding, spacing, children, ...otherProps }: ITableProps) => React.JSX.Element;
 export default Table;

package/core/data-display/table/index.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
+var _Table = _interopRequireDefault(require("@mui/material/Table"));
 var _theme = require("../../../theme");
 var _excluded = ["style", "margin", "padding", "spacing", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

package/core/data-display/table/table-body.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _TableBody = _interopRequireDefault(require("@material-ui/core/TableBody"));
+var _TableBody = _interopRequireDefault(require("@mui/material/TableBody"));
 var _excluded = ["style", "margin", "padding", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

package/core/data-display/table/table-cell.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-import type { TableCellProps as MuiTableProps } from '@material-ui/core/TableCell';
-export interface TableCellProps extends DefaultProps {
+import type { TableCellProps } from '@mui/material/TableCell';
+export interface ITableCellProps extends DefaultProps, Omit<TableCellProps, 'padding'> {
     numeric?: boolean;
     variant?: 'head' | 'body' | 'footer';
-    spacing?: MuiTableProps['padding'];
+    spacing?: 'normal' | 'checkbox' | 'none';
     padding?: number | string;
     align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
 }
-declare const TableCell: ({ style, margin, padding, children, spacing, ...otherProps }: Omit<MuiTableProps, 'padding'> & TableCellProps) => React.JSX.Element;
+declare const TableCell: ({ style, margin, padding, children, spacing, ...otherProps }: ITableCellProps) => React.JSX.Element;
 export default TableCell;

package/core/data-display/table/table-cell.js

@@ -10,8 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
-var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSortLabel"));
+var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
+var _TableSortLabel = _interopRequireDefault(require("@mui/material/TableSortLabel"));
 var _tableHead = require("./table-head");
 var _excluded = ["style", "margin", "padding", "children", "spacing"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

package/core/data-display/table/table-head.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));
+var _TableHead = _interopRequireDefault(require("@mui/material/TableHead"));
 var _excluded = ["style", "margin", "padding", "children", "color", "active", "direction", "onSort"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }