[mantine.dev] Update size component based on media query example

apps/mantine.dev/src/pages/styles/responsive.mdx

@@ -132,7 +132,7 @@ function CustomComponent() {
 Some components support `size` prop, which changes various aspects of component appearance.
 `size` prop is not responsive – it is not possible to define different component sizes for different
 screen sizes. Instead, you can render multiple components with different sizes and show/hide them
-based on media query:
+based on media query with `className` or `hiddenFrom`/`visibleFrom` props:
 
 <Demo data={StylesDemos.sizesMedia} />
 

packages/@docs/demos/src/demos/styles/Styles.demo.sizesMedia.tsx

@@ -1,71 +1,30 @@
 import { TextInput } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
-import classes from './Styles.demo.sizesMedia.module.css';
 
 const code = `
 import { TextInput } from '@mantine/core';
-import classes from './Demo.module.css';
 
 function Demo() {
   return (
     <>
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xs"
-        className={classes['input-mobile']}
-      />
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xl"
-        className={classes['input-desktop']}
-      />
+      <TextInput size="xs" hiddenFrom="sm" label="My input" placeholder="My input" />
+      <TextInput size="xl" visibleFrom="sm" label="My input" placeholder="My input" />
     </>
   );
 }
 `;
 
-const cssCode = `
-.input-mobile {
-  @media (min-width: em(750px)) {
-    display: none;
-  }
-}
-
-.input-desktop {
-  display: none;
-
-  @media (min-width: em(750px)) {
-    display: block;
-  }
-}
-`;
-
 function Demo() {
   return (
     <>
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xs"
-        className={classes['input-mobile']}
-      />
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xl"
-        className={classes['input-desktop']}
-      />
+      <TextInput size="xs" hiddenFrom="sm" label="My input" placeholder="My input" />
+      <TextInput size="xl" visibleFrom="sm" label="My input" placeholder="My input" />
     </>
   );
 }
 
 export const sizesMedia: MantineDemo = {
   type: 'code',
   component: Demo,
-  code: [
-    { fileName: 'Demo.tsx', code, language: 'tsx' },
-    { fileName: 'Demo.module.css', code: cssCode, language: 'scss' },
-  ],
+  code: { fileName: 'Demo.tsx', code, language: 'tsx' },
 };