@availity/mui-controlled-form 0.3.2 → 1.0.0

package/src/lib/Types.tsx

@@ -1,391 +1,447 @@
-import { FieldValues, ControllerProps as MuiControllerProps, RegisterOptions } from "react-hook-form";
-import { ControlledAutocompleteProps } from "./Autocomplete";
-import { ControlledAsyncAutocompleteProps, ControlledCheckboxProps, ControlledCodesAutocompleteProps, ControlledDatepickerProps, ControlledInputProps, ControlledOrgAutocompleteProps, ControlledProviderAutocompleteProps, ControlledRadioGroupProps, ControlledSelectProps, ControlledTextFieldProps } from "..";
-import { HTMLAttributes } from "react";
-
-// TODO v1 - remove deprecated props
-export type DeprecatedRulesProps =  {
-  /** @deprecated moved to `rules` prop.  */
-  deps?: RegisterOptions<FieldValues, string>["deps"],
-  /** The maximum value to accept for this input.
-   *
-   * @deprecated moved to `rules` prop.
-  `*/
-  max?: RegisterOptions<FieldValues, string>["max"],
-  /** The maximum length of the value to accept for this input.
-   *
-   * @deprecated moved to `rules` prop.
-   */
-  maxLength?: RegisterOptions<FieldValues, string>["maxLength"],
-  /** The minimum value to accept for this input.
-   *
-   * @deprecated moved to `rules` prop.
-   */
-  min?: RegisterOptions<FieldValues, string>["min"],
-  /** The minimum length of the value to accept for this input.
-   *
-   * @deprecated moved to `rules` prop.
-   */
-  minLength?: RegisterOptions<FieldValues, string>["minLength"],
-  /** The regex pattern for the input.
-   *
-   * @deprecated moved to `rules` prop.
-   */
-  pattern?: RegisterOptions<FieldValues, string>["pattern"],
-  /** A Boolean which, if true, indicates that the input must have a value before
-   * the form can be submitted. You can assign a string to return an error message
-   * in the errors object.
-   * Note: This config aligns with web constrained API for required input validation,
-   * for object or array type of input use validate function instead.
-   *
-   * @deprecated moved to `rules` prop.
-   */
-  required?: RegisterOptions<FieldValues, string>["required"],
-  /** @deprecated moved to `rules` prop.  */
-  validate?: RegisterOptions<FieldValues, string>["validate"],
-};
+import { FieldValues, ControllerProps as MuiControllerProps, RegisterOptions } from 'react-hook-form';
+import { ControlledAutocompleteProps } from './Autocomplete';
+import {
+  ControlledAsyncAutocompleteProps,
+  ControlledCheckboxProps,
+  ControlledCodesAutocompleteProps,
+  ControlledDatepickerProps,
+  ControlledInputProps,
+  ControlledOrgAutocompleteProps,
+  ControlledProviderAutocompleteProps,
+  ControlledRadioGroupProps,
+  ControlledSelectProps,
+  ControlledTextFieldProps,
+} from '..';
+import { HTMLAttributes } from 'react';
 
 export type ControllerProps = {
   /** Unique name of your input */
-  name: MuiControllerProps["name"];
+  name: MuiControllerProps['name'];
   /** **Important**: Can not apply undefined to defaultValue or defaultValues at useForm.
    * - You need to either set defaultValue at the field-level or useForm's defaultValues. undefined is not a valid value.
    * - If your form will invoke reset with default values, you will need to provide useForm with defaultValues.
    * - Calling onChange with undefined is not valid. You should use null or the empty string as your default/cleared value instead. */
-  defaultValue?: MuiControllerProps["defaultValue"];
+  defaultValue?: MuiControllerProps['defaultValue'];
   /** If the input is disabled */
-  disabled?: MuiControllerProps["disabled"];
+  disabled?: MuiControllerProps['disabled'];
   /** react-hook-form internal validation rules in the same format as [register options](https://react-hook-form.com/docs/useform/register#options), which includes:
    * required, min, max, minLength, maxLength, pattern, validate
    *
    * Not used if 3rd party schema/resolver used. */
-  rules?: MuiControllerProps["rules"];
+  rules?: MuiControllerProps['rules'];
   /** Input will be unregistered after unmount and defaultValues will be removed as well. */
-  shouldUnregister?: MuiControllerProps["shouldUnregister"];
-}
-
+  shouldUnregister?: MuiControllerProps['shouldUnregister'];
+};
 
 // Storybook Categories
 
-type AllControllerProps = ControllerProps & Pick<RegisterOptions<FieldValues, string>,'onBlur' | 'onChange' | 'value'> & DeprecatedRulesProps;
-
-type CategorizedControllerPropsObject = Record<keyof AllControllerProps, { table: { category: 'Controller Props'}}>;
-
+type AllControllerProps = ControllerProps &
+  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'>;
 
-type TextFieldPropsObject = Record<keyof Omit<ControlledTextFieldProps, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'autoFocus' | 'className' | 'color' | 'id' | 'onFocus' | 'style'>>, { table: { category: 'Input Props'}}>
+type CategorizedControllerPropsObject = Record<keyof AllControllerProps, { table: { category: 'Controller Props' } }>;
 
-type RadioGroupPropsObject = Record<keyof Omit<ControlledRadioGroupProps, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'children'>>, { table: { category: 'Input Props'}}>
+type TextFieldPropsObject = Record<
+  keyof Omit<
+    ControlledTextFieldProps,
+    | keyof AllControllerProps
+    | keyof Omit<HTMLAttributes<undefined>, 'autoFocus' | 'className' | 'color' | 'id' | 'onFocus' | 'style'>
+  >,
+  { table: { category: 'Input Props' } }
+>;
 
-type DatepickerPropsObject = Record<keyof Omit<ControlledDatepickerProps, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'autoFocus' | 'className' | 'onError'>>, { table: { category: 'Input Props'}}>
+type RadioGroupPropsObject = Record<
+  keyof Omit<ControlledRadioGroupProps, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'children'>>,
+  { table: { category: 'Input Props' } }
+>;
 
-type ProviderAutocompletePropsObject = Record<keyof Omit<ControlledProviderAutocompleteProps, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'id' | 'onKeyDown'>>, { table: { category: 'Input Props'}}>
+type DatepickerPropsObject = Record<
+  keyof Omit<
+    ControlledDatepickerProps,
+    keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'autoFocus' | 'className' | 'onError'>
+  >,
+  { table: { category: 'Input Props' } }
+>;
 
-type OrganizationAutocompletePropsObject = Record<keyof Omit<ControlledOrgAutocompleteProps, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'id' | 'onKeyDown'>>, { table: { category: 'Input Props'}}>
+type ProviderAutocompletePropsObject = Record<
+  keyof Omit<
+    ControlledProviderAutocompleteProps,
+    keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'id' | 'onKeyDown'>
+  >,
+  { table: { category: 'Input Props' } }
+>;
 
-type CodesAutocompletePropsObject = Record<keyof Omit<ControlledCodesAutocompleteProps, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'id' | 'onKeyDown'>>, { table: { category: 'Input Props'}}>
+type OrganizationAutocompletePropsObject = Record<
+  keyof Omit<
+    ControlledOrgAutocompleteProps,
+    keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'id' | 'onKeyDown'>
+  >,
+  { table: { category: 'Input Props' } }
+>;
 
-type AsyncAutocompletePropsObject = Record<keyof Omit<ControlledAsyncAutocompleteProps<undefined, boolean | undefined, boolean | undefined, boolean | undefined, React.ElementType>, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'id' | 'onKeyDown'>>, { table: { category: 'Input Props'}}>
+type CodesAutocompletePropsObject = Record<
+  keyof Omit<
+    ControlledCodesAutocompleteProps,
+    keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'id' | 'onKeyDown'>
+  >,
+  { table: { category: 'Input Props' } }
+>;
 
-type AutocompletePropsObject = Record<keyof Omit<ControlledAutocompleteProps<undefined, boolean | undefined, boolean | undefined, boolean | undefined, React.ElementType>, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'id' | 'onKeyDown'>>, { table: { category: 'Input Props'}}>
+type AsyncAutocompletePropsObject = Record<
+  keyof Omit<
+    ControlledAsyncAutocompleteProps<
+      undefined,
+      boolean | undefined,
+      boolean | undefined,
+      boolean | undefined,
+      React.ElementType
+    >,
+    keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'id' | 'onKeyDown'>
+  >,
+  { table: { category: 'Input Props' } }
+>;
 
-type CheckboxPropsObject = Record<keyof Omit<ControlledCheckboxProps, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'autoFocus' | 'className' | 'color' | 'id' | 'style' | 'defaultChecked' | 'tabIndex'>>, { table: { category: 'Input Props'}}>
+type AutocompletePropsObject = Record<
+  keyof Omit<
+    ControlledAutocompleteProps<
+      undefined,
+      boolean | undefined,
+      boolean | undefined,
+      boolean | undefined,
+      React.ElementType
+    >,
+    keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'id' | 'onKeyDown'>
+  >,
+  { table: { category: 'Input Props' } }
+>;
 
-type InputPropsObject = Record<keyof Omit<ControlledInputProps, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'autoFocus' | 'className' | 'color' | 'id' | 'onFocus' | 'style' | 'children' | 'aria-describedby' | 'onInvalid' | 'onError'  | 'onKeyDown' | 'onKeyUp' | 'defaultChecked' | 'tabIndex'>>, { table: { category: 'Input Props'}}>
+type CheckboxPropsObject = Record<
+  keyof Omit<
+    ControlledCheckboxProps,
+    | keyof AllControllerProps
+    | keyof Omit<
+        HTMLAttributes<undefined>,
+        'autoFocus' | 'className' | 'color' | 'id' | 'style' | 'defaultChecked' | 'tabIndex'
+      >
+  >,
+  { table: { category: 'Input Props' } }
+>;
 
-type SelectPropsObject = Record<keyof Omit<ControlledSelectProps, keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'autoFocus' | 'className' | 'color' | 'id' | 'onFocus' | 'style' | 'children' | 'aria-describedby' | 'onInvalid' | 'onError'  | 'onKeyDown' | 'onKeyUp' | 'defaultChecked' | 'tabIndex'>>, { table: { category: 'Input Props'}}>
+type InputPropsObject = Record<
+  keyof Omit<
+    ControlledInputProps,
+    | keyof AllControllerProps
+    | keyof Omit<
+        HTMLAttributes<undefined>,
+        | 'autoFocus'
+        | 'className'
+        | 'color'
+        | 'id'
+        | 'onFocus'
+        | 'style'
+        | 'children'
+        | 'aria-describedby'
+        | 'onInvalid'
+        | 'onError'
+        | 'onKeyDown'
+        | 'onKeyUp'
+        | 'defaultChecked'
+        | 'tabIndex'
+      >
+  >,
+  { table: { category: 'Input Props' } }
+>;
 
+type SelectPropsObject = Record<
+  keyof Omit<
+    ControlledSelectProps,
+    | keyof AllControllerProps
+    | keyof Omit<
+        HTMLAttributes<undefined>,
+        | 'autoFocus'
+        | 'className'
+        | 'color'
+        | 'id'
+        | 'onFocus'
+        | 'style'
+        | 'children'
+        | 'aria-describedby'
+        | 'onInvalid'
+        | 'onError'
+        | 'onKeyDown'
+        | 'onKeyUp'
+        | 'defaultChecked'
+        | 'tabIndex'
+      >
+  >,
+  { table: { category: 'Input Props' } }
+>;
 
 // Use IDE Autocomplete to fill in any missing properties
 export const AllControllerPropertiesCategorized: CategorizedControllerPropsObject = {
-  onBlur: {
+  defaultValue: {
     table: {
-      category: "Controller Props"
+      category: 'Controller Props'
     }
   },
-  onChange: {
+  onBlur: {
     table: {
-      category: "Controller Props"
+      category: 'Controller Props'
     }
   },
-  value: {
+  onChange: {
     table: {
-      category: "Controller Props"
+      category: 'Controller Props'
     }
   },
-  required: {
+  disabled: {
     table: {
-      category: "Controller Props"
+      category: 'Controller Props'
     }
   },
-  min: {
+  name: {
     table: {
-      category: "Controller Props"
+      category: 'Controller Props'
     }
   },
-  max: {
+  value: {
     table: {
-      category: "Controller Props"
+      category: 'Controller Props'
     }
   },
-  maxLength: {
+  rules: {
     table: {
-      category: "Controller Props"
+      category: 'Controller Props'
     }
   },
-  minLength: {
+  shouldUnregister: {
     table: {
-      category: "Controller Props"
+      category: 'Controller Props'
     }
-  },
-  validate: {
+  }
+};
+
+export const TextFieldPropsCategorized: TextFieldPropsObject = {
+  className: {
     table: {
-      category: "Controller Props"
+      category: 'Input Props'
     }
   },
-  shouldUnregister: {
+  style: {
     table: {
-      category: "Controller Props"
+      category: 'Input Props'
     }
   },
-  disabled: {
+  classes: {
     table: {
-      category: "Controller Props"
+      category: 'Input Props'
     }
   },
-  deps: {
+  error: {
     table: {
-      category: "Controller Props"
+      category: 'Input Props'
     }
   },
-  name: {
+  autoFocus: {
     table: {
-      category: "Controller Props"
+      category: 'Input Props'
     }
   },
-  defaultValue: {
+  id: {
     table: {
-      category: "Controller Props"
+      category: 'Input Props'
     }
   },
-  rules: {
+  color: {
     table: {
-      category: "Controller Props"
+      category: 'Input Props'
     }
   },
-  pattern: {
-    table: {
-      category: "Controller Props"
-    }
-  }
-};
-
-export const TextFieldPropsCategorized: TextFieldPropsObject = {
-  classes: {
+  onFocus: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  autoFocus: {
+  focused: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  className: {
+  required: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  id: {
+  sx: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  style: {
+  label: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  color: {
+  ref: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  onFocus: {
+  select: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  sx: {
+  key: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  ref: {
+  helpTopicId: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  label: {
+  fullWidth: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  helperText: {
+  hiddenLabel: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  fullWidth: {
+  margin: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   size: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  autoComplete: {
+  component: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  inputRef: {
+  InputProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  select: {
+  autoComplete: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  type: {
+  FormHelperTextProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  key: {
+  helperText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  component: {
+  InputLabelProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  error: {
-    table: {
-      category: "Input Props"
-    }
-  },
-  margin: {
+  inputRef: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   multiline: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   placeholder: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   rows: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   maxRows: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   minRows: {
     table: {
-      category: "Input Props"
-    }
-  },
-  hiddenLabel: {
-    table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  focused: {
+  SelectProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  helpTopicId: {
+  type: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  InputProps: {
+  slots: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
-  },
-  FormHelperTextProps: {
+  }
+};
+
+export const RadioGroupPropsCategorized: RadioGroupPropsObject = {
+  classes: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  InputLabelProps: {
+  children: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  SelectProps: {
-    table: {
-      category: "Input Props"
-    }
-  }
-};
-
-export const RadioGroupPropsCategorized: RadioGroupPropsObject = {
-  classes: {
+  required: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   sx: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   label: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ref: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   helperText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   row: {
     table: {
-      category: "Input Props"
-    }
-  },
-  children: {
-    table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   }
 };
@@ -393,1249 +449,1274 @@ export const RadioGroupPropsCategorized: RadioGroupPropsObject = {
 export const ProviderAutocompletePropsCategorized: ProviderAutocompletePropsObject = {
   classes: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  },
+  id: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  onKeyDown: {
+    table: {
+      category: 'Input Props'
     }
   },
   sx: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ref: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoComplete: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  },
+  slots: {
+    table: {
+      category: 'Input Props'
     }
   },
   readOnly: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   open: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   multiple: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onClose: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onOpen: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   queryKey: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ChipProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disablePortal: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getLimitTagsText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ListboxComponent: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ListboxProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   loadingText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   limitTags: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   noOptionsText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderGroup: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderOption: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderTags: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   unstable_classNamePrefix: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   unstable_isActiveElementInListbox: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoHighlight: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   blurOnSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   clearOnBlur: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   clearOnEscape: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   componentName: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableClearable: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableCloseOnSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   filterOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   filterSelectedOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   freeSolo: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionDisabled: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionKey: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionLabel: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   groupBy: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputValue: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   isOptionEqualToValue: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onHighlightChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onInputChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   FieldProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   limit: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   queryOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   watchParams: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   debounceTimeout: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   customerId: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   apiConfig: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  }
+};
+
+export const OrganizationAutocompletePropsCategorized: OrganizationAutocompletePropsObject = {
+  classes: {
+    table: {
+      category: 'Input Props'
     }
   },
   id: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onKeyDown: {
     table: {
-      category: "Input Props"
-    }
-  }
-};
-
-export const OrganizationAutocompletePropsCategorized: OrganizationAutocompletePropsObject = {
-  classes: {
-    table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   sx: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ref: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoComplete: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  },
+  slots: {
+    table: {
+      category: 'Input Props'
     }
   },
   readOnly: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   open: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   multiple: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onClose: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onOpen: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   queryKey: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ChipProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disablePortal: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getLimitTagsText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ListboxComponent: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ListboxProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   loadingText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   limitTags: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   noOptionsText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderGroup: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderOption: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderTags: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   unstable_classNamePrefix: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   unstable_isActiveElementInListbox: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoHighlight: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   blurOnSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   clearOnBlur: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   clearOnEscape: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   componentName: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableClearable: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableCloseOnSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   filterOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   filterSelectedOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   freeSolo: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionDisabled: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionKey: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionLabel: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   groupBy: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputValue: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   isOptionEqualToValue: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onHighlightChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onInputChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   FieldProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   limit: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   queryOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   watchParams: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   debounceTimeout: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   apiConfig: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  }
+};
+
+export const DatepickerPropsCategorized: DatepickerPropsObject = {
+  className: {
+    table: {
+      category: 'Input Props'
     }
   },
-  id: {
+  autoFocus: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  onKeyDown: {
+  onError: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
-  }
-};
-
-export const DatepickerPropsCategorized: DatepickerPropsObject = {
+  },
   sx: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   label: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   view: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputRef: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   readOnly: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   open: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   loading: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onClose: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onOpen: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   FieldProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableFuture: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disablePast: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   shouldDisableDate: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   shouldDisableMonth: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   shouldDisableYear: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   minDate: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   maxDate: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   views: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onViewChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   localeText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onAccept: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   viewRenderers: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   referenceDate: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   timezone: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   formatDensity: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   enableAccessibleFieldDOMStructure: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   selectedSections: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onSelectedSectionsChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   yearsPerRow: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderLoading: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onYearChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onMonthChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   dayOfWeekFormatter: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   displayWeekNumber: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   fixedWeekNumber: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableHighlightToday: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   showDaysOutsideCurrentMonth: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   monthsPerRow: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  },
+  yearsOrder: {
+    table: {
+      category: 'Input Props'
     }
   },
   format: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   closeOnSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableOpenPicker: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   placement: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
-  },
-  className: {
+  }
+};
+
+export const CodesAutocompletePropsCategorized: CodesAutocompletePropsObject = {
+  classes: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  autoFocus: {
+  id: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  onError: {
-    table: {
-      category: "Input Props"
-    }
-  }
-};
-
-export const CodesAutocompletePropsCategorized: CodesAutocompletePropsObject = {
-  classes: {
+  onKeyDown: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   sx: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ref: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoComplete: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  },
+  slots: {
+    table: {
+      category: 'Input Props'
     }
   },
   readOnly: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   list: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   open: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   multiple: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onClose: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onOpen: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   queryKey: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ChipProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disablePortal: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getLimitTagsText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ListboxComponent: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ListboxProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   loadingText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   limitTags: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   noOptionsText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderGroup: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderOption: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderTags: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   unstable_classNamePrefix: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   unstable_isActiveElementInListbox: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoHighlight: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   blurOnSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   clearOnBlur: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   clearOnEscape: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   componentName: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableClearable: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableCloseOnSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   filterOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   filterSelectedOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   freeSolo: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionDisabled: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionKey: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionLabel: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   groupBy: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputValue: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   isOptionEqualToValue: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onHighlightChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onInputChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   FieldProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   limit: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   queryOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   watchParams: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   debounceTimeout: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   apiConfig: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  }
+};
+
+export const AsyncAutocompletePropsCategorized: AsyncAutocompletePropsObject = {
+  classes: {
+    table: {
+      category: 'Input Props'
     }
   },
   id: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onKeyDown: {
     table: {
-      category: "Input Props"
-    }
-  }
-};
-
-export const AsyncAutocompletePropsCategorized: AsyncAutocompletePropsObject = {
-  classes: {
-    table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   sx: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ref: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoComplete: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  },
+  slots: {
+    table: {
+      category: 'Input Props'
     }
   },
   readOnly: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   open: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   multiple: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onClose: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onOpen: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   queryKey: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ChipProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disablePortal: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getLimitTagsText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ListboxComponent: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ListboxProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   loadingText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   limitTags: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   noOptionsText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderGroup: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderOption: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderTags: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   unstable_classNamePrefix: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   unstable_isActiveElementInListbox: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoHighlight: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   blurOnSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   clearOnBlur: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   clearOnEscape: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   componentName: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableClearable: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableCloseOnSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   filterOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   filterSelectedOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   freeSolo: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionDisabled: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionKey: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionLabel: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   groupBy: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputValue: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   isOptionEqualToValue: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onHighlightChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onInputChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   FieldProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   loadOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   limit: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   queryOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   watchParams: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   debounceTimeout: {
     table: {
-      category: "Input Props"
-    }
-  },
-  id: {
-    table: {
-      category: "Input Props"
-    }
-  },
-  onKeyDown: {
-    table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   }
 };
@@ -1643,847 +1724,858 @@ export const AsyncAutocompletePropsCategorized: AsyncAutocompletePropsObject = {
 export const AutocompletePropsCategorized: AutocompletePropsObject = {
   classes: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   id: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onKeyDown: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   sx: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ref: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoComplete: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  },
+  slots: {
+    table: {
+      category: 'Input Props'
     }
   },
   readOnly: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   options: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   open: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   loading: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   multiple: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onClose: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onOpen: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableListWrap: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ChipProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disablePortal: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getLimitTagsText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ListboxComponent: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ListboxProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   loadingText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   limitTags: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   noOptionsText: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderGroup: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderOption: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderTags: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   unstable_classNamePrefix: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   unstable_isActiveElementInListbox: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoHighlight: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   blurOnSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   clearOnBlur: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   clearOnEscape: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   componentName: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableClearable: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableCloseOnSelect: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   filterOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   filterSelectedOptions: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   freeSolo: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionDisabled: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionKey: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   getOptionLabel: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   groupBy: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputValue: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   isOptionEqualToValue: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onHighlightChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onInputChange: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   FieldProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   }
 };
 
 export const CheckboxPropsCategorized: CheckboxPropsObject = {
+  className: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  style: {
+    table: {
+      category: 'Input Props'
+    }
+  },
   classes: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   form: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  },
+  defaultChecked: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  autoFocus: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  id: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  tabIndex: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  color: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  required: {
+    table: {
+      category: 'Input Props'
     }
   },
   sx: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ref: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   key: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   component: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputRef: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   readOnly: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   action: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   formAction: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   formMethod: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   formNoValidate: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   formTarget: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   checkedIcon: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   icon: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   focusVisibleClassName: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   LinkComponent: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onFocusVisible: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   formEncType: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   checked: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   edge: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   indeterminate: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   indeterminateIcon: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
-  },
+  }
+};
+
+export const InputPropsCategorized: InputPropsObject = {
   className: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   style: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  },
+  classes: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  error: {
+    table: {
+      category: 'Input Props'
     }
   },
   defaultChecked: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoFocus: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   id: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   tabIndex: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   color: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
-  }
-};
-
-export const InputPropsCategorized: InputPropsObject = {
-  classes: {
+  },
+  'aria-describedby': {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  error: {
+  onFocus: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  onInvalid: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
+    }
+  },
+  onError: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  onKeyDown: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  onKeyUp: {
+    table: {
+      category: 'Input Props'
+    }
+  },
+  required: {
+    table: {
+      category: 'Input Props'
     }
   },
   sx: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   label: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   ref: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   fullWidth: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   margin: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   size: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoComplete: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputRef: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   multiline: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   placeholder: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   rows: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   maxRows: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   minRows: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   type: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableInjectingGlobalStyles: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   endAdornment: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputComponent: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   readOnly: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderSuffix: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   startAdornment: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
-  },
+  }
+};
+
+export const SelectPropsCategorized: SelectPropsObject = {
   className: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   style: {
     table: {
-      category: "Input Props"
-    }
-  },
-  defaultChecked: {
-    table: {
-      category: "Input Props"
-    }
-  },
-  autoFocus: {
-    table: {
-      category: "Input Props"
-    }
-  },
-  id: {
-    table: {
-      category: "Input Props"
-    }
-  },
-  tabIndex: {
-    table: {
-      category: "Input Props"
-    }
-  },
-  color: {
-    table: {
-      category: "Input Props"
-    }
-  },
-  "aria-describedby": {
-    table: {
-      category: "Input Props"
-    }
-  },
-  onFocus: {
-    table: {
-      category: "Input Props"
-    }
-  },
-  onInvalid: {
-    table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  onError: {
+  classes: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  onKeyDown: {
+  error: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  onKeyUp: {
-    table: {
-      category: "Input Props"
-    }
-  }
-}
-
-export const SelectPropsCategorized: SelectPropsObject = {
-  classes: {
+  children: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   defaultChecked: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoFocus: {
     table: {
-      category: "Input Props"
-    }
-  },
-  className: {
-    table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   id: {
     table: {
-      category: "Input Props"
-    }
-  },
-  style: {
-    table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   tabIndex: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   color: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  "aria-describedby": {
+  'aria-describedby': {
     table: {
-      category: "Input Props"
-    }
-  },
-  children: {
-    table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onFocus: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onInvalid: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onError: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onKeyDown: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onKeyUp: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  sx: {
+  required: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  ref: {
+  sx: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   label: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
-  error: {
+  ref: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   input: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   fullWidth: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   margin: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   size: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoComplete: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputRef: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   multiline: {
     table: {
-      category: "Input Props"
-    }
-  },
-  placeholder: {
-    table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   rows: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   maxRows: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   minRows: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   type: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableInjectingGlobalStyles: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   endAdornment: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   inputComponent: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   readOnly: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderSuffix: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   startAdornment: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   disableUnderline: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   open: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   multiple: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   autoWidth: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   defaultOpen: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   displayEmpty: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   IconComponent: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   labelId: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   MenuProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   native: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onClose: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   onOpen: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   renderValue: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   },
   SelectDisplayProps: {
     table: {
-      category: "Input Props"
+      category: 'Input Props'
     }
   }
 };
 
-
-
 export const AllControllerPropsList = Object.keys(AllControllerPropertiesCategorized) as (keyof ControllerProps)[];
-
-