Hidden gives a way to hide content by passing viewport size at which you want to hide it with from and till properties. For example, from="l" will hide the content on starting with large viewport size. When till="l" is used instead, component will hide the content on all viewports smaller than large.
These properties can be combined to provide more granular control to the content display. For instance, from="m" till="l" will hide the content only for medium viewport as it will disable it starting with large viewport. At the same time it can be used an opposite way, till="m" from="l" which will hide the content outside the passed viewport range.
If you need to hide an element without adding any additional wrappers, you can use render props approach with Hidden.
|from||s, m, l, xl||-||false||Start viewport to hide, inclusive|
|till||s, m, l, xl||-||false||End viewport to hide, exclusive|
|as||string||'div'||false||Tag used for rendering|
|children||ReactNode, (className) => ReactNode||-||false|