flipper-ui 0.33.1 → 0.34.0

package/core/inputs/checkbox/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { ChangeEvent, ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
-import type { CheckboxProps as MuiCheckboxProps } from '@material-ui/core';
-export interface CheckboxProps extends DefaultProps {
+import type { CheckboxProps } from '@mui/material/Checkbox';
+export interface ICheckboxProps extends DefaultProps {
     name: string;
     label?: ReactNode;
     color?: 'primary' | 'secondary' | 'default';
@@ -14,7 +14,7 @@ export interface CheckboxProps extends DefaultProps {
     helperIcon?: ReactNode;
     onHelperClick?: () => void;
     onChange?: (event: ChangeEvent<HTMLElement>) => void;
-    checkboxProps?: MuiCheckboxProps;
+    checkboxProps?: CheckboxProps;
 }
-declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;
+declare const Checkbox: (props: ICheckboxProps) => React.JSX.Element;
 export default Checkbox;

package/core/inputs/checkbox/index.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _FormControlLabel2 = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _Typography2 = _interopRequireDefault(require("@material-ui/core/Typography"));
-var _Switch2 = _interopRequireDefault(require("@material-ui/core/Switch"));
-var _Checkbox2 = _interopRequireDefault(require("@material-ui/core/Checkbox"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _textField = require("../text-field");
 var _styles = require("./styles");
 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; }
@@ -30,23 +30,23 @@ var Checkbox = function Checkbox(props) {
     onHelperClick: onHelperClick
   }));
   var renderCheckbox = function renderCheckbox(checkboxProps) {
-    return /*#__PURE__*/_react["default"].createElement(_Checkbox2["default"], (0, _extends2["default"])({}, checkboxProps, {
+    return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({}, checkboxProps, {
       name: props.name,
       checked: props.checked,
       value: props.name,
-      color: props.color,
+      color: props.color || 'secondary',
       style: props.dense ? _styles.DENSE : {},
       disabled: props.disabled,
       onChange: props.onChange
     }));
   };
   var renderSwitch = function renderSwitch(checkboxProps) {
-    return /*#__PURE__*/_react["default"].createElement(_Switch2["default"], (0, _extends2["default"])({}, checkboxProps, {
+    return /*#__PURE__*/_react["default"].createElement(_Switch["default"], (0, _extends2["default"])({}, checkboxProps, {
+      role: "switch",
       name: props.name,
-      checked: props.checked,
       value: props.name,
-      color: props.color,
-      role: "switch",
+      checked: props.checked,
+      color: props.color || 'secondary',
       disabled: props.disabled,
       onChange: props.onChange
     }));
@@ -55,13 +55,13 @@ var Checkbox = function Checkbox(props) {
     return type === 'checkbox' ? renderCheckbox(props) : renderSwitch(props);
   };
   var renderLabel = function renderLabel() {
-    return typeof props.label === 'string' && props.dense ? /*#__PURE__*/_react["default"].createElement(_Typography2["default"], {
+    return typeof props.label === 'string' && props.dense ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       variant: "body2"
     }, props.label) : props.label;
   };
   return /*#__PURE__*/_react["default"].createElement(_styles.CheckFieldsWrapper, {
     id: props.id
-  }, props.label ? /*#__PURE__*/_react["default"].createElement(_FormControlLabel2["default"], {
+  }, props.label ? /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
     style: _objectSpread({
       padding: padding,
       margin: margin

package/core/inputs/checkbox/styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const DENSE: {
     padding: string;
     margin: string;

package/core/inputs/date-time/index.d.ts

@@ -1,19 +1,16 @@
 import React from 'react';
-import type { MouseEvent } from 'react';
-import DateFnsUtils from '@date-io/date-fns';
 import type { DefaultProps } from '../../types';
-import type { KeyboardDatePickerProps } from '@material-ui/pickers/DatePicker';
-import type { KeyboardDateTimePickerProps } from '@material-ui/pickers/DateTimePicker';
-import type { KeyboardTimePickerProps } from '@material-ui/pickers/TimePicker';
-import type { MaterialUiPickersDate } from '@material-ui/pickers/typings/date';
+import type { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
+import type { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
+import type { TimePickerProps } from '@mui/x-date-pickers/TimePicker';
 export interface IProps {
-    locale?: DateFnsUtils['locale'];
     type?: 'date' | 'time' | 'datetime';
-    inputProps?: object;
-    onAuxClick?(event: MouseEvent<HTMLDivElement, MouseEvent>): void;
-    onAuxClickCapture?(event: MouseEvent<HTMLDivElement, MouseEvent>): void;
-    onChange(date: MaterialUiPickersDate | null, value?: string): void;
+    error?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    fullWidth?: boolean;
 }
-export type DateTimeProps = Omit<KeyboardDatePickerProps, 'margin' | 'onChange'> & Omit<KeyboardDateTimePickerProps, 'margin' | 'onChange'> & Omit<KeyboardTimePickerProps, 'margin' | 'onChange'> & IProps & DefaultProps;
-declare const DateTime: ({ padding, margin, style, format, variant, inputVariant, ampm, invalidDateMessage, minDateMessage, maxDateMessage, locale, type, ...otherProps }: DateTimeProps) => React.JSX.Element;
+export type TDateTime = DatePickerProps<Date> & TimePickerProps<Date> & DateTimePickerProps<Date> & IProps & DefaultProps;
+declare const DateTime: ({ padding, margin, style, value, onChange, error, minDate, minDateTime, maxDate, maxDateTime, required, disabled, placeholder, fullWidth, type, ...otherProps }: TDateTime) => React.JSX.Element;
 export default DateTime;

package/core/inputs/date-time/index.js

@@ -7,94 +7,299 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
-var _pickers = require("@material-ui/pickers");
-var _textField = require("../text-field");
-var _excluded = ["padding", "margin", "style", "format", "variant", "inputVariant", "ampm", "invalidDateMessage", "minDateMessage", "maxDateMessage", "locale", "type"];
+var _xDatePickers = require("@mui/x-date-pickers");
+var _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
+var _DatePicker = require("@mui/x-date-pickers/DatePicker");
+var _DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
+var _locales = require("@mui/x-date-pickers/locales");
+var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+var _TimePicker = require("@mui/x-date-pickers/TimePicker");
+var _format = _interopRequireDefault(require("date-fns/format"));
+var _ptBR = _interopRequireDefault(require("date-fns/locale/pt-BR"));
+var _styles = require("./styles");
+var _theme = require("../../../theme");
+var _excluded = ["padding", "margin", "style", "value", "onChange", "error", "minDate", "minDateTime", "maxDate", "maxDateTime", "required", "disabled", "placeholder", "fullWidth", "type"];
+/* eslint-disable import/no-duplicates */
 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 DEFAULT_FORMATS = {
-  date: 'dd/MM/yyyy',
-  time: 'HH:mm',
-  datetime: 'dd/MM/yyyy HH:mm'
+var primary = _theme.theme.colors.primary;
+var formatter = function formatter(weekday) {
+  return (0, _format["default"])(weekday, 'eee', {
+    locale: _ptBR["default"]
+  }).slice(0, 3);
+};
+var CustomDatePickerToolbar = function CustomDatePickerToolbar(props) {
+  return /*#__PURE__*/_react["default"].createElement(_DatePicker.DatePickerToolbar, (0, _extends2["default"])({}, props, {
+    sx: {
+      backgroundColor: primary.main,
+      borderRadius: '4px 4px 0 0',
+      padding: '16px',
+      '.MuiTypography-root': {
+        color: "".concat(primary.contrast, "90")
+      },
+      '.MuiDatePickerToolbar-title': {
+        color: primary.contrast
+      }
+    }
+  }));
+};
+var CustomTimePickerToolbar = function CustomTimePickerToolbar(props) {
+  return /*#__PURE__*/_react["default"].createElement(_TimePicker.TimePickerToolbar, (0, _extends2["default"])({}, props, {
+    sx: {
+      backgroundColor: primary.main,
+      borderRadius: '4px 4px 0 0',
+      padding: '16px',
+      '.MuiTypography-root': {
+        color: "".concat(primary.contrast, "90")
+      },
+      '.MuiPickersToolbarText-root': {
+        color: primary.contrast
+      },
+      '.MuiPickersToolbarText-root.Mui-selected': {
+        color: "".concat(primary.contrast, "90")
+      }
+    }
+  }));
+};
+var CustomDateTimePickerToolbar = function CustomDateTimePickerToolbar(props) {
+  return /*#__PURE__*/_react["default"].createElement(_DateTimePicker.DateTimePickerToolbar, (0, _extends2["default"])({}, props, {
+    sx: {
+      backgroundColor: primary.main,
+      borderRadius: '4px 4px 0 0',
+      padding: '16px',
+      '.MuiTypography-root': {
+        display: 'none'
+      },
+      '.MuiPickersToolbarText-root': {
+        color: primary.contrast,
+        display: 'block'
+      },
+      '.MuiPickersToolbarText-root.Mui-selected': {
+        color: "".concat(primary.contrast, "90"),
+        display: 'block'
+      }
+    }
+  }));
+};
+var CustomStaticDateTimePicker = function CustomStaticDateTimePicker(props) {
+  return /*#__PURE__*/_react["default"].createElement(_styles.CustomWrapper, null, /*#__PURE__*/_react["default"].createElement(_xDatePickers.StaticDateTimePicker, {
+    value: props.value,
+    slots: {
+      toolbar: CustomDateTimePickerToolbar,
+      actionBar: function actionBar() {
+        return null;
+      }
+    },
+    slotProps: {
+      toolbar: {
+        toolbarFormat: 'dd MMM'
+      },
+      layout: {
+        sx: {
+          '.MuiTimeClock-root': {
+            width: 'auto',
+            padding: '0 4px',
+            '& .MuiPickersArrowSwitcher-root': {
+              display: 'none'
+            }
+          },
+          '.MuiClock-clock': {
+            padding: '6px'
+          },
+          '.MuiClockPointer-thumb': {
+            left: 'calc(50% - 16px)',
+            borderWidth: '14px',
+            top: '-20px'
+          },
+          '.css-18tn1jy-MuiClockNumber-root': {
+            fontSize: '13px'
+          },
+          '.MuiDateTimePickerTabs-root': {
+            minHeight: '36px'
+          },
+          '.MuiTab-root': {
+            padding: '8px 16px',
+            minHeight: '36px'
+          },
+          '.MuiDateCalendar-root': {
+            maxHeight: '300px'
+          }
+        }
+      }
+    },
+    dayOfWeekFormatter: function dayOfWeekFormatter(day) {
+      return formatter(day);
+    },
+    onChange: props.onChange,
+    onViewChange: props.onViewChange
+  }));
 };
 var DateTime = function DateTime(_ref) {
   var padding = _ref.padding,
     margin = _ref.margin,
     style = _ref.style,
-    format = _ref.format,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'inline' : _ref$variant,
-    _ref$inputVariant = _ref.inputVariant,
-    inputVariant = _ref$inputVariant === void 0 ? 'outlined' : _ref$inputVariant,
-    _ref$ampm = _ref.ampm,
-    ampm = _ref$ampm === void 0 ? false : _ref$ampm,
-    _ref$invalidDateMessa = _ref.invalidDateMessage,
-    invalidDateMessage = _ref$invalidDateMessa === void 0 ? '' : _ref$invalidDateMessa,
-    _ref$minDateMessage = _ref.minDateMessage,
-    minDateMessage = _ref$minDateMessage === void 0 ? '' : _ref$minDateMessage,
-    _ref$maxDateMessage = _ref.maxDateMessage,
-    maxDateMessage = _ref$maxDateMessage === void 0 ? '' : _ref$maxDateMessage,
-    locale = _ref.locale,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    error = _ref.error,
+    minDate = _ref.minDate,
+    minDateTime = _ref.minDateTime,
+    maxDate = _ref.maxDate,
+    maxDateTime = _ref.maxDateTime,
+    required = _ref.required,
+    disabled = _ref.disabled,
+    placeholder = _ref.placeholder,
+    fullWidth = _ref.fullWidth,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'date' : _ref$type,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = (0, _textField.useStyles)();
-  var fieldProps = _objectSpread(_objectSpread({}, otherProps), {}, {
-    format: format ? format : DEFAULT_FORMATS[type],
-    variant: variant,
-    inputVariant: inputVariant,
-    ampm: ampm,
-    invalidDateMessage: invalidDateMessage,
-    minDateMessage: minDateMessage,
-    maxDateMessage: maxDateMessage,
-    style: _objectSpread({
+  var commonProps = _objectSpread(_objectSpread({}, otherProps), {}, {
+    value: typeof value === 'string' ? new Date(value) : value,
+    error: error,
+    sx: _objectSpread({
+      '.MuiInputBase-root': {
+        fontSize: '14px'
+      },
+      '.MuiSvgIcon-root': {
+        fontSize: '1.4rem'
+      },
+      '.MuiFormLabel-root': {
+        fontSize: '14px'
+      },
       margin: margin,
       padding: padding
     }, style),
-    inputProps: _objectSpread({
-      autoComplete: 'off',
-      role: 'date-picker'
-    }, otherProps.inputProps),
-    InputAdornmentProps: _objectSpread({
-      style: {
-        width: '32px'
-      }
-    }, otherProps.InputAdornmentProps),
-    InputLabelProps: _objectSpread({
-      classes: {
-        outlined: inputVariant === 'outlined' ? classes.outlinedLabel : ''
-      }
-    }, otherProps.InputLabelProps),
-    InputProps: _objectSpread({
-      classes: {
-        input: inputVariant === 'outlined' ? classes.outlinedInput : '',
-        multiline: inputVariant === 'outlined' ? classes.outlinedMultiline : ''
-      }
-    }, otherProps.InputProps)
+    onChange: onChange
   });
-  var renderDatePicker = function renderDatePicker() {
-    return /*#__PURE__*/_react["default"].createElement(_pickers.KeyboardDatePicker, fieldProps);
-  };
-  var renderTimePicker = function renderTimePicker() {
-    return /*#__PURE__*/_react["default"].createElement(_pickers.KeyboardTimePicker, fieldProps);
-  };
-  var renderDateTimePicker = function renderDateTimePicker() {
-    return /*#__PURE__*/_react["default"].createElement(_pickers.KeyboardDateTimePicker, fieldProps);
-  };
   var renderChildren = function renderChildren() {
     if (type === 'date') {
-      return renderDatePicker();
+      return /*#__PURE__*/_react["default"].createElement(_DatePicker.DatePicker, (0, _extends2["default"])({}, commonProps, {
+        disabled: disabled,
+        minDate: typeof minDate === 'string' ? new Date(minDate) : minDate,
+        maxDate: typeof maxDate === 'string' ? new Date(maxDate) : maxDate,
+        slots: {
+          toolbar: CustomDatePickerToolbar
+        },
+        slotProps: {
+          textField: {
+            size: 'small',
+            error: error,
+            required: required,
+            placeholder: placeholder,
+            fullWidth: fullWidth !== null && fullWidth !== void 0 ? fullWidth : true,
+            inputProps: {
+              role: 'date-picker'
+            }
+          },
+          toolbar: {
+            hidden: false,
+            toolbarFormat: 'eee, dd MMM'
+          },
+          popper: {
+            placement: 'bottom-end'
+          },
+          layout: {
+            sx: {
+              '.MuiDateCalendar-root': {
+                maxHeight: '300px'
+              }
+            }
+          }
+        },
+        dayOfWeekFormatter: function dayOfWeekFormatter(day) {
+          return formatter(day);
+        }
+      }));
     }
     if (type === 'time') {
-      return renderTimePicker();
+      return /*#__PURE__*/_react["default"].createElement(_TimePicker.TimePicker, (0, _extends2["default"])({}, commonProps, {
+        disabled: disabled,
+        slots: {
+          toolbar: CustomTimePickerToolbar,
+          actionBar: function actionBar() {
+            return null;
+          },
+          leftArrowIcon: function leftArrowIcon() {
+            return null;
+          },
+          rightArrowIcon: function rightArrowIcon() {
+            return null;
+          }
+        },
+        slotProps: {
+          textField: {
+            size: 'small',
+            error: error,
+            required: required,
+            placeholder: placeholder,
+            fullWidth: fullWidth !== null && fullWidth !== void 0 ? fullWidth : true,
+            inputProps: {
+              role: 'date-picker'
+            }
+          },
+          toolbar: {
+            hidden: false
+          },
+          popper: {
+            placement: 'bottom-end'
+          },
+          layout: {
+            sx: {
+              '.MuiTimeClock-root': {
+                width: 'auto',
+                padding: '0 4px'
+              },
+              '.MuiClock-clock': {
+                padding: '6px'
+              },
+              '.MuiClockPointer-thumb': {
+                left: 'calc(50% - 16px)',
+                borderWidth: '14px',
+                top: '-20px'
+              },
+              '.css-18tn1jy-MuiClockNumber-root': {
+                fontSize: '13px'
+              }
+            }
+          }
+        },
+        viewRenderers: {
+          hours: _xDatePickers.renderTimeViewClock,
+          minutes: _xDatePickers.renderTimeViewClock
+        }
+      }));
     }
-    return renderDateTimePicker();
+    return /*#__PURE__*/_react["default"].createElement(_DateTimePicker.DateTimePicker, (0, _extends2["default"])({}, commonProps, {
+      disabled: disabled,
+      minDate: typeof minDate === 'string' ? new Date(minDate) : minDate,
+      maxDate: typeof maxDate === 'string' ? new Date(maxDate) : maxDate,
+      minDateTime: typeof minDateTime === 'string' ? new Date(minDateTime) : minDateTime,
+      maxDateTime: typeof maxDate === 'string' ? new Date(maxDateTime) : maxDateTime,
+      slots: {
+        layout: CustomStaticDateTimePicker
+      },
+      slotProps: {
+        textField: {
+          size: 'small',
+          error: error,
+          required: required,
+          placeholder: placeholder,
+          fullWidth: fullWidth !== null && fullWidth !== void 0 ? fullWidth : true,
+          inputProps: {
+            role: 'date-picker'
+          }
+        },
+        popper: {
+          placement: 'bottom-end'
+        }
+      }
+    }));
   };
-  return /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
-    utils: _dateFns["default"],
-    locale: locale
+  return /*#__PURE__*/_react["default"].createElement(_LocalizationProvider.LocalizationProvider, {
+    adapterLocale: _ptBR["default"],
+    dateAdapter: _AdapterDateFns.AdapterDateFns,
+    localeText: _locales.ptBR.components.MuiLocalizationProvider.defaultProps.localeText
   }, renderChildren());
 };
 var _default = exports["default"] = DateTime;

package/core/inputs/date-time/styles.d.ts

@@ -0,0 +1 @@
+export declare const CustomWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/inputs/date-time/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = require("styled-components");
+var _templateObject;
+var CustomWrapper = exports.CustomWrapper = _styledComponents.styled.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    border-radius: 5px;\n    overflow: hidden;\n"])));

package/core/inputs/icon-button/icon-button.stories.d.ts

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

package/core/inputs/icon-button/index.d.ts

@@ -2,11 +2,12 @@ import React from 'react';
 import type { MouseEvent } from 'react';
 import type { DefaultProps } from '../../types';
 export interface IconButtonProps extends DefaultProps {
-    color?: 'default' | 'inherit' | 'primary' | 'secondary';
+    color?: 'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+    role?: string;
     disabled?: boolean;
     'data-testid'?: string;
-    role?: string;
+    size?: 'small' | 'medium' | 'large';
     onClick?(event: MouseEvent<HTMLButtonElement>): void;
 }
-declare const IconButton: ({ children, padding, margin, style, ...otherProps }: IconButtonProps) => React.JSX.Element;
+declare const IconButton: ({ children, padding, margin, size, style, ...otherProps }: IconButtonProps) => React.JSX.Element;
 export default IconButton;

package/core/inputs/icon-button/index.js

@@ -9,17 +9,19 @@ 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 _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-var _excluded = ["children", "padding", "margin", "style"];
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _excluded = ["children", "padding", "margin", "size", "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 IconButton = function IconButton(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
     margin = _ref.margin,
+    size = _ref.size,
     style = _ref.style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_IconButton["default"], (0, _extends2["default"])({}, otherProps, {
+    size: size || 'large',
     style: _objectSpread({
       margin: margin,
       padding: padding

package/core/inputs/input-adornment/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-import type { InputAdornmentProps as MuiInputProps } from '@material-ui/core';
-export interface InputAdornmentProps extends DefaultProps, MuiInputProps {
+import type { InputAdornmentProps } from '@mui/material/InputAdornment';
+export interface IInputAdornmentProps extends DefaultProps, InputAdornmentProps {
     position: 'start' | 'end';
 }
-declare const InputAdornment: ({ children, ...otherProps }: InputAdornmentProps) => React.JSX.Element;
+declare const InputAdornment: ({ children, ...otherProps }: IInputAdornmentProps) => React.JSX.Element;
 export default InputAdornment;

package/core/inputs/input-adornment/index.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _InputAdornment2 = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
 var _excluded = ["children"];
 var InputAdornment = function InputAdornment(_ref) {
   var children = _ref.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_InputAdornment2["default"], otherProps, children);
+  return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], otherProps, children);
 };
 var _default = exports["default"] = InputAdornment;

package/core/inputs/input-adornment/input-adornment.stories.d.ts

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

package/core/inputs/mask-field/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ComponentType } from 'react';
 import type { NumberFormatProps } from 'react-number-format';
-import type { TextFieldProps } from '@/core/inputs/text-field';
+import type { ITextFieldProps } from '@/core/inputs/text-field';
 export interface MaskFieldProps extends NumberFormatProps {
     mask?: string;
     type?: 'text' | 'tel' | 'password';
@@ -10,7 +10,7 @@ export interface MaskFieldProps extends NumberFormatProps {
     decimalScale?: number;
     thousandSeparator?: boolean | string;
     fixedDecimalScale?: boolean;
-    customInput?: ComponentType<TextFieldProps>;
+    customInput?: ComponentType<ITextFieldProps>;
 }
 declare const MaskField: (props: MaskFieldProps) => React.JSX.Element;
 export default MaskField;

package/core/inputs/mask-field/mask-field.stories.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").MaskFieldProps>;
+import type { Meta } from '@storybook/react';
+import MaskField from '.';
+declare const _default: Meta<typeof MaskField>;
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const MaskFieldWithInputAdornment: any;