chore: updating dependencies

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@euk-labs/componentz",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "types": "./lib/types/index.d.ts",
   "main": "./lib/cjs/index.js",
   "exports": {
@@ -43,11 +43,14 @@
     "@babel/preset-typescript": "^7.16.5",
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
-    "@emotion/react": "^11.8.1",
-    "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.8.0",
-    "@mui/lab": "^5.0.0-alpha.83",
-    "@mui/material": "^5.8.1",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@euk-labs/componentz": "^0.5.12",
+    "@euk-labs/formix": "^0.4.5",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.88",
+    "@mui/material": "^5.8.6",
+    "@mui/x-date-pickers": "^5.0.0-alpha.7",
     "@storybook/addon-actions": "^6.4.17",
     "@storybook/addon-essentials": "^6.4.17",
     "@storybook/addon-interactions": "^6.4.17",
@@ -59,9 +62,8 @@
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
-    "@types/faker": "^5.5.9",
     "@types/jest": "^27.0.3",
-    "@types/ramda": "^0.27.61",
+    "@types/ramda": "^0.28.14",
     "@types/react": "^17.0.38",
     "@types/react-input-mask": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^5.8.0",
@@ -75,34 +77,35 @@
     "husky": "^7.0.4",
     "inversify-react": "^1.0.2",
     "jest": "^27.4.5",
-    "mobx": "^6.3.10",
-    "mobx-react-lite": "^3.2.2",
+    "mobx": "^6.6.1",
+    "mobx-react-lite": "^3.4.0",
     "prettier": "^2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.1.2",
     "tsc-alias": "^1.6.7",
     "typescript": "^4.5.4"
   },
   "peerDependencies": {
-    "@emotion/react": ">=11.6.0",
-    "@emotion/styled": ">=11.6.0",
+    "@emotion/react": ">=11.9.3",
+    "@emotion/styled": ">=11.9.3",
     "@mui/icons-material": ">=5.8.0",
-    "@mui/lab": ">=5.0.0-alpha.83",
-    "@mui/material": ">=5.8.1",
+    "@mui/lab": ">=5.0.0-alpha.88",
+    "@mui/material": ">=5.8.6",
+    "@mui/x-date-pickers": ">=5.0.0-alpha.7",
     "inversify-react": ">=1.0.2",
-    "mobx": ">=6.3.7",
-    "mobx-react-lite": ">=3.2.2",
+    "mobx": ">=6.5.0",
+    "mobx-react-lite": ">=3.3.0",
     "react": ">=17",
     "react-dom": ">=17"
   },
   "dependencies": {
     "date-fns": "^2.28.0",
-    "inversify": ">=6.0.1",
-    "ramda": ">=0.27.1",
+    "inversify": "^6.0.1",
+    "ramda": "^0.28.0",
     "react-input-mask": "^2.0.4",
-    "react-number-format": "^4.9.1"
+    "react-number-format": "^4.9.3"
   }
 }

src/components/Inputs/DatePicker/DatePicker.stories.tsx

@@ -1,5 +1,5 @@
-import { LocalizationProvider } from '@mui/lab';
-import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import DatePicker from '.';

src/components/Inputs/DatePicker/index.tsx

@@ -1,15 +1,18 @@
 import {
   DatePicker as MuiDatePicker,
   DatePickerProps as MuiDatePickerProps,
-} from '@mui/lab';
+} from '@mui/x-date-pickers';
 import { TextField, TextFieldProps } from '@mui/material';
 
 export type DatePickerProps = {
   label?: string;
   textFieldProps?: TextFieldProps;
   onChange: (date: unknown, keyboardInputValue: string | undefined) => void;
   value: Date | string | undefined;
-} & Omit<MuiDatePickerProps, 'renderInput' | 'onChange' | 'value'>;
+} & Omit<
+  MuiDatePickerProps<unknown, unknown>,
+  'renderInput' | 'onChange' | 'value'
+>;
 
 function DatePicker({
   label,

src/components/Inputs/DateRangePicker/CalendarPicker.tsx

@@ -1,5 +1,8 @@
 /* eslint-disable react/display-name */
-import { CalendarPicker as MuiCalendarPicker, PickersDayProps } from '@mui/lab';
+import {
+  CalendarPicker as MuiCalendarPicker,
+  PickersDayProps,
+} from '@mui/x-date-pickers';
 import { Box, darken, useTheme } from '@mui/material';
 import { format, isAfter, isBefore } from 'date-fns';
 

src/components/Inputs/DateRangePicker/CustomPickersDay.tsx

@@ -1,4 +1,4 @@
-import { PickersDay, PickersDayProps } from '@mui/lab';
+import { PickersDay, PickersDayProps } from '@mui/x-date-pickers';
 import { darken, styled } from '@mui/material';
 
 type CustomPickersDayProps = {

src/components/Inputs/DateRangePicker/DateRangePicker.tsx

@@ -1,4 +1,4 @@
-import { DesktopDatePickerProps } from '@mui/lab';
+import { DesktopDatePickerProps } from '@mui/x-date-pickers';
 import { Popover } from '@mui/material';
 import { observer } from 'mobx-react-lite';
 import { useRef, useState } from 'react';
@@ -8,10 +8,10 @@ import DateRangeMaskedInput from './DateRangeMaskedInput';
 import DateRangePickerStore, { DateRange } from './store';
 
 export type DateRangePickerProps = Omit<
-  DesktopDatePickerProps,
+  DesktopDatePickerProps<unknown, unknown>,
   'renderInput' | 'onChange'
 > & {
-  renderInput?: DesktopDatePickerProps['renderInput'];
+  renderInput?: DesktopDatePickerProps<unknown, unknown>['renderInput'];
   onChange: (value: DateRange) => void;
   label?: string;
   value: DateRange;

src/components/Inputs/DateTimePicker/index.tsx

@@ -1,15 +1,18 @@
 import {
   DateTimePicker as MuiDateTimePicker,
   DateTimePickerProps as MuiDateTimePickerProps,
-} from '@mui/lab';
+} from '@mui/x-date-pickers';
 import { TextField, TextFieldProps } from '@mui/material';
 
 export type DateTimePickerProps = {
   label?: string;
   textFieldProps?: TextFieldProps;
   onChange: (date: unknown, keyboardInputValue: string | undefined) => void;
   value: Date | string | undefined;
-} & Omit<MuiDateTimePickerProps, 'renderInput' | 'onChange' | 'value'>;
+} & Omit<
+  MuiDateTimePickerProps<unknown, unknown>,
+  'renderInput' | 'onChange' | 'value'
+>;
 
 function DateTimePicker({
   label,