@unicef/material-ui 0.8.0 → 0.8.1

package/README.md

@@ -99,6 +99,17 @@ Builds the styleguide docs as well as the example. The output is stored in `site
 
 Runs `npm run build:site` and then deploys the output to Github `gh-pages`.
 
+To deploy from a clean repo
+```bash
+git clone https://unicef.github.io/unicef-material-ui/
+cd unicef-material-ui
+npm install
+npm build
+cd example
+npm install
+cd ..
+npm deploy
+```
 
 ## About UNICEF
 

package/lib/dev.js

@@ -38481,6 +38481,18 @@ var useStyles$5 = makeStyles$1(function (theme) {
     avatar: {
       width: 24,
       height: 24
+    },
+    deleteIconReadOnly: {
+      display: 'none!important'
+    },
+    rootReadOnly: {
+      fontSize: '1rem',
+      marginLeft: 0,
+      background: 'transparent'
+    },
+    labelReadOnly: {
+      paddingLeft: 0,
+      marginLeft: 0
     }
   };
 });
@@ -38496,14 +38508,22 @@ function MultiValue$1(_ref) {
   var classes = useStyles$5();
   var hideAvatar = selectProps && selectProps.TextFieldProps && selectProps.TextFieldProps.hideAvatar;
 
-  return React__default.createElement(Chip$1, {
-    variant: 'outlined',
+  var readOnly = selectProps && selectProps.TextFieldProps && selectProps.TextFieldProps.readOnly;
+
+  return React__default.createElement(Chip$1, _extends$1({
     avatar: hideAvatar ? null : data.avatar ? data.avatar : React__default.createElement(Avatar$1, { className: classes.avatar }),
     label: children,
     className: clsx(classes.chip, defineProperty$1({}, classes.chipFocused, props.isFocused)),
-    onDelete: removeProps.onClick,
-    deleteIcon: React__default.createElement(props.components.Remove, removeProps)
-  });
+    classes: {
+      deleteIcon: readOnly ? classes.deleteIconReadOnly : '',
+      root: readOnly ? classes.rootReadOnly : '',
+      label: readOnly ? classes.labelReadOnly : ''
+    },
+    onDelete: removeProps.onClick
+  }, readOnly ? {} : {
+    deleteIcon: React__default.createElement(props.components.Remove, removeProps),
+    variant: 'outlined'
+  }));
 }
 
 MultiValue$1.propTypes = {
@@ -40102,6 +40122,7 @@ var useStyles$8 = makeStyles$1(function (theme) {
   return {
     root: {
       marginRight: theme.spacing(-1),
+      marginTop: theme.spacing(-0.5),
       paddingLeft: theme.spacing(1.5),
       order: 999,
       display: 'inline-flex',
@@ -40197,6 +40218,15 @@ var styles$U = {
     pointerEvents: 'auto',
     display: 'flex',
     alignItems: 'center'
+  },
+  inputHover: {
+    '&:hover $notchedOutline': {
+      borderColor: 'transparent'
+    }
+  },
+  notchedOutline: {
+    borderRadius: 2,
+    borderColor: 'transparent'
   }
 };
 
@@ -40209,6 +40239,7 @@ function Control$1(_ref) {
       TextFieldProps = _ref$selectProps.TextFieldProps,
       InputLabelProps = _ref.InputLabelProps;
 
+  var readOnly = TextFieldProps && TextFieldProps.readOnly;
   return React__default.createElement(TextField$1, _extends$1({
     fullWidth: true,
     variant: 'outlined',
@@ -40217,8 +40248,14 @@ function Control$1(_ref) {
       inputProps: _extends$1({
         className: classes.input,
         ref: innerRef,
-        children: children
-      }, innerProps)
+        children: children,
+        readOnly: Boolean(readOnly),
+        disabled: Boolean(readOnly)
+      }, innerProps),
+      classes: {
+        root: '' + (readOnly && classes.inputHover),
+        notchedOutline: '' + (!readOnly ? '' : classes.notchedOutline)
+      }
     },
     InputLabelProps: _extends$1({}, InputLabelProps, {
       style: _extends$1({}, styles$U.labelRoot)
@@ -40280,13 +40317,32 @@ NoOptionsMessage$1.propTypes = {
   innerProps: PropTypes__default.object
 };
 
+var useStyles$a = makeStyles$1(function (theme) {
+  return {
+    rootReadOnly: {},
+    lineByLineOption: {
+      flexDirection: 'column!important',
+      alignItems: 'flex-start!important'
+    }
+  };
+});
+
 function ValueContainer$1(_ref) {
-  var selectProps = _ref.selectProps,
+  var isMulti = _ref.isMulti,
+      selectProps = _ref.selectProps,
       children = _ref.children;
 
+  var classes = useStyles$a();
+
+  var lineByLineOption = selectProps && selectProps.TextFieldProps && selectProps.TextFieldProps.lineByLineOption;
+
+  var readOnly = selectProps && selectProps.TextFieldProps && selectProps.TextFieldProps.readOnly;
+
   return React__default.createElement(
     'div',
-    { className: selectProps.classes.valueContainer },
+    {
+      className: (lineByLineOption && isMulti ? classes.lineByLineOption : '') + ' ' + (readOnly ? classes.rootReadOnly : '') + ' ' + selectProps.classes.valueContainer
+    },
     children
   );
 }
@@ -40365,7 +40421,7 @@ Option$1.propTypes = {
   isSelected: PropTypes__default.bool
 };
 
-var useStyles$a = makeStyles$1(function (theme) {
+var useStyles$b = makeStyles$1(function (theme) {
   return {
     input: {
       display: 'flex',
@@ -40404,6 +40460,15 @@ var useStyles$a = makeStyles$1(function (theme) {
       pointerEvents: 'auto',
       display: 'flex',
       alignItems: 'center'
+    },
+    inputHover: {
+      '&:hover $notchedOutline': {
+        borderColor: 'transparent'
+      }
+    },
+    notchedOutline: {
+      borderRadius: 2,
+      borderColor: 'transparent'
     }
   };
 });
@@ -40433,7 +40498,7 @@ var defaultComponents$1 = {
    *
    */
 };function USelectPicker(props) {
-  var classes = useStyles$a(props);
+  var classes = useStyles$b(props);
   var theme = useTheme$1();
   var label = props.label,
       variant = props.variant,
@@ -40445,7 +40510,14 @@ var defaultComponents$1 = {
       InputLabelProps = props.InputLabelProps,
       InputLabelHelpProps = props.InputLabelHelpProps,
       hideAvatar = props.hideAvatar,
-      others = objectWithoutProperties(props, ['label', 'variant', 'TextFieldProps', 'showNoOptionsWithEmptyTextField', 'onInputChange', 'components', 'showLabelHelp', 'InputLabelProps', 'InputLabelHelpProps', 'hideAvatar']);
+      readOnly = props.readOnly,
+      lineByLineOption = props.lineByLineOption,
+      isClearable = props.isClearable,
+      isSearchable = props.isSearchable,
+      isDisabled = props.isDisabled,
+      menuIsOpen = props.menuIsOpen,
+      placeholder = props.placeholder,
+      others = objectWithoutProperties(props, ['label', 'variant', 'TextFieldProps', 'showNoOptionsWithEmptyTextField', 'onInputChange', 'components', 'showLabelHelp', 'InputLabelProps', 'InputLabelHelpProps', 'hideAvatar', 'readOnly', 'lineByLineOption', 'isClearable', 'isSearchable', 'isDisabled', 'menuIsOpen', 'placeholder']);
 
   var _useState = React.useState(true),
       _useState2 = slicedToArray(_useState, 2),
@@ -40476,6 +40548,8 @@ var defaultComponents$1 = {
       shrink: true,
       classes: { root: classes.labelRoot }
     }, InputLabelProps),
+    readOnly: readOnly,
+    lineByLineOption: lineByLineOption,
     hideAvatar: hideAvatar,
     showLabelHelp: showLabelHelp,
     InputLabelHelpProps: InputLabelHelpProps
@@ -40489,18 +40563,30 @@ var defaultComponents$1 = {
     onInputChange && onInputChange(value);
   };
 
+  var extraComponents = readOnly ? {
+    DropdownIndicator: function DropdownIndicator() {
+      return null;
+    }
+  } : {};
+
+  var selectPlaceholder = readOnly ? '' : placeholder;
+
   return React__default.createElement(index$1, _extends$1({
     classes: classes,
-    isClearable: true,
     styles: selectStyles,
-    components: _extends$1({}, defaultComponents$1, components),
+    components: _extends$1({}, defaultComponents$1, components, extraComponents),
     TextFieldProps: mergedTextFieldProps,
     onInputChange: function onInputChange(value) {
       return handleInputChange(value);
     },
     noOptionsMessage: function noOptionsMessage() {
       return showNoOptions ? NoOptionsMessage$1 : null;
-    }
+    },
+    isClearable: readOnly ? false : isClearable,
+    isSearchable: readOnly ? false : isSearchable,
+    isDisabled: readOnly ? true : isDisabled,
+    menuIsOpen: readOnly ? false : menuIsOpen,
+    placeholder: selectPlaceholder
   }, others));
 }
 
@@ -40560,7 +40646,19 @@ USelectPicker.propTypes = {
   /** Props applied to the input label help element. E.g.  InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
   InputLabelHelpProps: PropTypes__default.object,
   /** Hide people avatar */
-  hideAvatar: PropTypes__default.bool
+  hideAvatar: PropTypes__default.bool,
+  /** Is the read only field or not */
+  readOnly: PropTypes__default.bool,
+  /** Whether the selected options displayed in the new line or not in multiple selected options */
+  lineByLineOption: PropTypes__default.bool,
+  /** Is the select value clearable */
+  isClearable: PropTypes__default.bool,
+  /** Whether to enable search functionality */
+  isSearchable: PropTypes__default.bool,
+  /** Whether the input is disabled */
+  isDisabled: PropTypes__default.bool,
+  /** Whether the menu is open */
+  menuIsOpen: PropTypes__default.bool
 };
 
 USelectPicker.defaultProps = {
@@ -40570,7 +40668,13 @@ USelectPicker.defaultProps = {
   showNoOptionsWithEmptyTextField: true,
   showLabelHelp: false,
   InputLabelHelpProps: {},
-  hideAvatar: true
+  hideAvatar: true,
+  readOnly: false,
+  isClearable: undefined,
+  isSearchable: true,
+  isDisabled: false,
+  menuIsOpen: undefined,
+  lineByLineOption: false
 };
 
 /**
@@ -46481,7 +46585,7 @@ var DIALOG_WIDTH = 310;
 var DIALOG_WIDTH_WIDER = 325;
 var VIEW_HEIGHT = 305;
 
-var useStyles$b = makeStyles$1(function (theme) {
+var useStyles$c = makeStyles$1(function (theme) {
   return {
     staticWrapperRoot: {
       overflow: 'hidden',
@@ -46496,7 +46600,7 @@ var useStyles$b = makeStyles$1(function (theme) {
 });
 var StaticWrapper = function StaticWrapper(_ref) {
   var children = _ref.children;
-  var classes = useStyles$b();
+  var classes = useStyles$c();
   return React.createElement("div", {
     className: classes.staticWrapperRoot,
     children: children
@@ -47010,7 +47114,7 @@ function _inherits$2(subClass, superClass) {
   if (superClass) _setPrototypeOf$2(subClass, superClass);
 }
 
-var useStyles$c = makeStyles$1(function (theme) {
+var useStyles$d = makeStyles$1(function (theme) {
   return {
     day: {
       width: 36,
@@ -47053,7 +47157,7 @@ var Day = function Day(_ref) {
       selected = _ref.selected,
       other = _objectWithoutProperties$1(_ref, ["children", "disabled", "hidden", "current", "selected"]);
 
-  var classes = useStyles$c();
+  var classes = useStyles$d();
   var className = clsx(classes.day, hidden && classes.hidden, current && classes.current, selected && classes.daySelected, disabled && classes.dayDisabled);
   return React.createElement(IconButton$1, _extends$4({
     className: className,
@@ -48551,7 +48655,7 @@ var DayWrapper = function DayWrapper(_ref) {
 };
 
 var animationDuration = 350;
-var useStyles$d = makeStyles$1(function (theme) {
+var useStyles$e = makeStyles$1(function (theme) {
   var slideTransition = theme.transitions.create('transform', {
     duration: animationDuration,
     easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)'
@@ -48603,7 +48707,7 @@ var SlideTransition = function SlideTransition(_ref) {
       slideDirection = _ref.slideDirection,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className;
-  var classes = useStyles$d();
+  var classes = useStyles$e();
   var transitionClasses = {
     exit: classes.slideExit,
     enterActive: classes.slideEnterActive,
@@ -49473,7 +49577,7 @@ var positions$1 = {
   22: [-64, 77],
   23: [-37, 50]
 };
-var useStyles$e = makeStyles$1(function (theme) {
+var useStyles$f = makeStyles$1(function (theme) {
   var size = theme.spacing(4);
   return {
     clockNumber: {
@@ -49500,7 +49604,7 @@ var ClockNumber = function ClockNumber(_ref) {
       label = _ref.label,
       index = _ref.index,
       isInner = _ref.isInner;
-  var classes = useStyles$e();
+  var classes = useStyles$f();
   var className = clsx(classes.clockNumber, selected && classes.clockNumberSelected);
   var transformStyle = React.useMemo(function () {
     var position = positions$1[index];
@@ -49755,7 +49859,7 @@ function useViews(views, openTo, onChange) {
   };
 }
 
-var useStyles$f = makeStyles$1(function (theme) {
+var useStyles$g = makeStyles$1(function (theme) {
   return {
     root: {
       height: 40,
@@ -49790,7 +49894,7 @@ var Year = function Year(_ref) {
       children = _ref.children,
       other = _objectWithoutProperties$1(_ref, ["onSelect", "forwardedRef", "value", "selected", "disabled", "children"]);
 
-  var classes = useStyles$f();
+  var classes = useStyles$g();
   var handleClick = React.useCallback(function () {
     return onSelect(value);
   }, [onSelect, value]);
@@ -50122,7 +50226,7 @@ Picker.defaultProps = _objectSpread$1$1({}, datePickerDefaultProps, {
   views: Object.keys(viewsMap)
 });
 
-var useStyles$g = makeStyles$1(function (theme) {
+var useStyles$h = makeStyles$1(function (theme) {
   var textColor = theme.palette.type === 'light' ? theme.palette.primary.contrastText : theme.palette.getContrastText(theme.palette.background["default"]);
   return {
     toolbarTxt: {
@@ -50143,7 +50247,7 @@ var ToolbarText = function ToolbarText(_ref) {
       className = _ref$className === void 0 ? null : _ref$className,
       other = _objectWithoutProperties$1(_ref, ["selected", "label", "className"]);
 
-  var classes = useStyles$g();
+  var classes = useStyles$h();
   return React.createElement(Typography$1, _extends$4({
     children: label,
     className: clsx(classes.toolbarTxt, className, selected && classes.toolbarBtnSelected)
@@ -50767,7 +50871,7 @@ function makePickerWithState(_ref) {
   return PickerWithState;
 }
 
-var useStyles$h = makeStyles$1({
+var useStyles$i = makeStyles$1({
   toolbar: {
     flexDirection: 'column',
     alignItems: 'flex-start'
@@ -50788,7 +50892,7 @@ var DatePickerToolbar = function DatePickerToolbar(_ref) {
       isLandscape = _ref.isLandscape,
       openView = _ref.openView;
   var utils = useUtils();
-  var classes = useStyles$h();
+  var classes = useStyles$i();
   var isYearOnly = React.useMemo(function () {
     return isYearOnlyView(views);
   }, [views]);
@@ -50857,7 +50961,7 @@ var KeyboardDatePicker = makePickerWithState({
 DatePicker.defaultProps = defaultProps$5;
 KeyboardDatePicker.defaultProps = defaultProps$5;
 
-var useStyles$i = makeStyles$1({
+var useStyles$j = makeStyles$1({
   toolbarLandscape: {
     flexWrap: 'wrap'
   },
@@ -50923,7 +51027,7 @@ var TimePickerToolbar = function TimePickerToolbar(_ref) {
       setOpenView = _ref.setOpenView;
   var utils = useUtils();
   var theme = useTheme$1();
-  var classes = useStyles$i();
+  var classes = useStyles$j();
 
   var _useMeridiemMode = useMeridiemMode(date, ampm, onChange),
       meridiemMode = _useMeridiemMode.meridiemMode,
@@ -51068,7 +51172,7 @@ var tabIndexToView = function tabIndexToView(tab) {
   return 'hours';
 };
 
-var useStyles$j = makeStyles$1(function (theme) {
+var useStyles$k = makeStyles$1(function (theme) {
   // prettier-ignore
   var tabsBackground = theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background["default"];
   return {
@@ -51085,7 +51189,7 @@ var DateTimePickerTabs = function DateTimePickerTabs(_ref) {
       onChange = _ref.onChange,
       dateRangeIcon = _ref.dateRangeIcon,
       timeIcon = _ref.timeIcon;
-  var classes = useStyles$j();
+  var classes = useStyles$k();
   var theme = useTheme$1();
   var indicatorColor = theme.palette.type === 'light' ? 'secondary' : 'primary';
 
@@ -53055,7 +53159,7 @@ UValidatorComponent.propTypes = {
   /** Allow to use required validator in any validation trigger, not only form submit. */
   withRequiredValidator: PropTypes__default.bool,
   /** you must provide this prop, it will be used only for validation. */
-  value: PropTypes__default.bool.isRequired
+  value: PropTypes__default.any.isRequired
 };
 
 /**
@@ -53119,7 +53223,7 @@ UValidatorForm.defaultProps = {
   onSubmit: function onSubmit() {}
 };
 
-var useStyles$k = makeStyles$1(function (theme) {
+var useStyles$l = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -53166,7 +53270,7 @@ var useStyles$k = makeStyles$1(function (theme) {
  *
  */
 function ActiveFormTextField(props) {
-  var classes = useStyles$k(props);
+  var classes = useStyles$l(props);
   var typographyVariant = props.typographyVariant,
       className = props.className,
       variant = props.variant,
@@ -53245,7 +53349,7 @@ ActiveFormTextField.defaultProps = {
 
 var _ActiveFormSelect$pro;
 
-var useStyles$l = makeStyles$1(function (theme) {
+var useStyles$m = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -53286,7 +53390,7 @@ var useStyles$l = makeStyles$1(function (theme) {
  *
  */
 function ActiveFormSelect(props) {
-  var classes = useStyles$l(props);
+  var classes = useStyles$m(props);
   var select = props.select,
       typographyVariant = props.typographyVariant,
       className = props.className,
@@ -53480,7 +53584,7 @@ exports.default = _default;
 
 var DeleteOutlinedIcon = unwrapExports(DeleteOutlined);
 
-var useStyles$m = makeStyles$1(function (theme) {
+var useStyles$n = makeStyles$1(function (theme) {
   return {
     menuDelete: {
       width: '500px'
@@ -53500,7 +53604,7 @@ var useStyles$m = makeStyles$1(function (theme) {
  * It has two varint icon/menu item
  */
 function UConfirmationButton(props) {
-  var classes = useStyles$m();
+  var classes = useStyles$n();
   var onConfirm = props.onConfirm,
       id = props.id,
       buttonText = props.buttonText,
@@ -53615,7 +53719,7 @@ UConfirmationButton.defaultProps = {
 /**
  * displays radio buttons
  */
-var useStyles$n = makeStyles$1(function (theme) {
+var useStyles$o = makeStyles$1(function (theme) {
   return {
     padding: {
       paddingLeft: theme.spacing(3)
@@ -53636,7 +53740,7 @@ function URadioButtons(_ref) {
       optionLabels = _ref.optionLabels,
       optionValues = _ref.optionValues;
 
-  var classes = useStyles$n();
+  var classes = useStyles$o();
   var handleOnChange = function handleOnChange(event) {
     onChange && onChange(event);
   };
@@ -53740,7 +53844,7 @@ exports.default = _default;
 
 var DoneIcon = unwrapExports(Done);
 
-var useStyles$o = makeStyles$1(function (theme) {
+var useStyles$p = makeStyles$1(function (theme) {
   return {
     root: {
       position: 'fixed',
@@ -53772,7 +53876,7 @@ function UAsyncBadge(_ref) {
       visible = _ref.visible,
       onReset = _ref.onReset;
 
-  var classes = useStyles$o();
+  var classes = useStyles$p();
 
   /**  If variant is success or error, after few seconds, it will set asyncResponse visible to false */
   React.useEffect(function () {
@@ -53811,7 +53915,7 @@ UAsyncBadge.propTypes = {
   onReset: PropTypes__default.func
 };
 
-var useStyles$p = makeStyles$1(function () {
+var useStyles$q = makeStyles$1(function () {
   return {
     pageLoadingProgress: {
       height: '50vh',
@@ -53826,7 +53930,7 @@ var useStyles$p = makeStyles$1(function () {
  * 2. Display text message
  */
 function UPageLoadingProgress(props) {
-  var classes = useStyles$p();
+  var classes = useStyles$q();
   var text = props.text;
 
   return React__default.createElement(
@@ -56209,7 +56313,7 @@ UErrorAlert.defaultProps = {
 
 var filter = createFilterOptions();
 
-var useStyles$q = makeStyles$1(function (theme) {
+var useStyles$r = makeStyles$1(function (theme) {
   return {
     controlStyle: {
       marginTop: theme.spacing(2),
@@ -56237,7 +56341,7 @@ function UAutoComplete(_ref) {
       allowContextSpecific = _ref.allowContextSpecific,
       props = _ref.props;
 
-  var classes = useStyles$q();
+  var classes = useStyles$r();
   //const dispatch = useDispatch()
 
   var _useState = React.useState(value || null),
@@ -56386,7 +56490,7 @@ UAutoComplete.defaultProps = {
 
 /* eslint-disable no-nested-ternary */
 
-var useStyles$r = makeStyles$1(function (theme) {
+var useStyles$s = makeStyles$1(function (theme) {
   var _ref;
 
   return _ref = {
@@ -56418,7 +56522,7 @@ var useStyles$r = makeStyles$1(function (theme) {
  * Breadcrumbs is a component to implement current user path of the application
  */
 function UBreadcrumbs(props) {
-  var classes = useStyles$r();
+  var classes = useStyles$s();
   var breadcrumbLinks = props.breadcrumbLinks;
 
 
@@ -56495,7 +56599,7 @@ UInfiniteScroll.propTypes = {
   onEndOfScroll: PropTypes__default.func
 };
 
-var useStyles$s = makeStyles$1(function (theme) {
+var useStyles$t = makeStyles$1(function (theme) {
   return {
     small: {
       width: theme.spacing(4),
@@ -56540,7 +56644,7 @@ function UAvatarImage(_ref) {
       zIndexValue = _ref.zIndexValue,
       loadPhoto = _ref.loadPhoto;
 
-  var classes = useStyles$s();
+  var classes = useStyles$t();
 
   var _useState = React.useState(''),
       _useState2 = slicedToArray(_useState, 2),
@@ -56972,7 +57076,7 @@ exports.default = _default;
 
 var CloseIcon$1 = unwrapExports(Close);
 
-var useStyles$t = makeStyles$1(function (theme) {
+var useStyles$u = makeStyles$1(function (theme) {
   return {
     root: {
       width: '100%',
@@ -57012,7 +57116,7 @@ function USearchBox(_ref) {
       searchValue = _useState2[0],
       setSearch = _useState2[1];
 
-  var classes = useStyles$t();
+  var classes = useStyles$u();
 
   var handleChange = function handleChange(event) {
     setSearch(event.target.value);
@@ -57113,7 +57217,7 @@ var styles$16 = {
   }
 };
 
-var useStyles$u = makeStyles$1(function (theme) {
+var useStyles$v = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -57156,7 +57260,7 @@ var useStyles$u = makeStyles$1(function (theme) {
  * ActiveKeyboardDatePicker is a customized [Material Ui KeyboardDatePicker]('https://material-ui-pickers.dev/api/KeyboardDatePicker') for more details
  */
 function ActiveKeyboardDatePicker(props) {
-  var classes = useStyles$u(props);
+  var classes = useStyles$v(props);
   var autoOk = props.autoOk,
       variant = props.variant,
       inputVariant = props.inputVariant,
@@ -57275,7 +57379,7 @@ var styles$17 = {
   }
 };
 
-var useStyles$v = makeStyles$1(function (theme) {
+var useStyles$w = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -57314,7 +57418,7 @@ var useStyles$v = makeStyles$1(function (theme) {
  * Please have look at [Material Ui Date Picker]('https://material-ui-pickers.dev/api/DatePicker') for more details
  */
 function ActiveDatePicker(props) {
-  var classes = useStyles$v(props);
+  var classes = useStyles$w(props);
   var autoOk = props.autoOk,
       variant = props.variant,
       inputVariant = props.inputVariant,
@@ -57408,7 +57512,7 @@ var styles$18 = {
   }
 };
 
-var useStyles$w = makeStyles$1(function (theme) {
+var useStyles$x = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -57447,7 +57551,7 @@ var useStyles$w = makeStyles$1(function (theme) {
  * Please have look at [Material Ui TimePicker]('https://material-ui-pickers.dev/api/TimePicker') for more details
  */
 function ActiveTimePicker(props) {
-  var classes = useStyles$w(props);
+  var classes = useStyles$x(props);
   var inputVariant = props.inputVariant,
       readOnly = props.readOnly,
       interactiveMode = props.interactiveMode,
@@ -57532,7 +57636,7 @@ var styles$19 = {
   }
 };
 
-var useStyles$x = makeStyles$1(function (theme) {
+var useStyles$y = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -57575,7 +57679,7 @@ var useStyles$x = makeStyles$1(function (theme) {
  * ActiveKeyboardTimePicker is customized [ Material Ui KeyboardTimePicker](https://material-ui-pickers.dev/api/KeyboardTimePicker)
  */
 function ActiveKeyboardTimePicker(props) {
-  var classes = useStyles$x(props);
+  var classes = useStyles$y(props);
   var inputVariant = props.inputVariant,
       readOnly = props.readOnly,
       interactiveMode = props.interactiveMode,