[@mantine/demos] Update demos imports

src/mantine-demos/src/attach-demos.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Container } from '@mantine/core';
-import { Demo } from '@mantine/ds';
+import { Demo, MantineDemo } from '@mantine/ds';
 
 export function attachDemos(stories: any, demos: Record<string, MantineDemo>) {
   Object.keys(demos).forEach((key) => {

src/mantine-demos/src/demos/carousel/Carousel.demo.animationOffset.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Button, Modal, Group } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { Carousel, Embla, useAnimationOffsetEffect } from '@mantine/carousel';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.autoplay.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import { Carousel } from '@mantine/carousel';
 import Autoplay from 'embla-carousel-autoplay';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.breakpoints.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Carousel } from '@mantine/carousel';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.brokenAnimation.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Button, Modal, Group } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { Carousel } from '@mantine/carousel';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.cards.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Carousel, CarouselProps } from '@mantine/carousel';
 import { useMediaQuery } from '@mantine/hooks';
 import { useMantineTheme } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { Card } from './_card';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.configurator.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Carousel, CarouselProps } from '@mantine/carousel';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 function Wrapper(props: CarouselProps) {

src/mantine-demos/src/demos/carousel/Carousel.demo.controlsHover.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createStyles } from '@mantine/core';
 import { Carousel } from '@mantine/carousel';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.controlsStyles.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Carousel } from '@mantine/carousel';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.dragFree.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Carousel } from '@mantine/carousel';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.icons.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Carousel } from '@mantine/carousel';
 import { IconArrowRight, IconArrowLeft } from '@tabler/icons';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.images.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Carousel } from '@mantine/carousel';
 import { Image } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { images as _images } from './_images';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.indicatorStyles.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Carousel } from '@mantine/carousel';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.multiple.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Carousel } from '@mantine/carousel';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.progress.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Carousel, Embla } from '@mantine/carousel';
 import { Progress } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.usage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Carousel } from '@mantine/carousel';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 const code = `

src/mantine-demos/src/demos/carousel/Carousel.demo.vertical.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Carousel } from '@mantine/carousel';
+import { MantineDemo } from '@mantine/ds';
 import { Slides } from './_slides';
 
 const code = `

src/mantine-demos/src/demos/core/Accordion/Accordion.demo.chevron.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconPlus } from '@tabler/icons';
+import { MantineDemo } from '@mantine/ds';
 import { BaseDemo } from './_base';
 
 const code = `

src/mantine-demos/src/demos/core/Accordion/Accordion.demo.configurator.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { AccordionProps } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { BaseDemo } from './_base';
 
 function Wrapper(props: Partial<AccordionProps>) {

src/mantine-demos/src/demos/core/Accordion/Accordion.demo.disabled.tsx

@@ -1,5 +1,6 @@
 import { Accordion, Box } from '@mantine/core';
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { baseAccordionMockdata } from './_mockdata';
 
 const code = `

src/mantine-demos/src/demos/core/Accordion/Accordion.demo.icons.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconPhoto, IconPrinter, IconCameraSelfie } from '@tabler/icons';
+import { MantineDemo } from '@mantine/ds';
 import { Accordion, AccordionProps, useMantineTheme } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Accordion/Accordion.demo.label.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Group, Avatar, Text, Accordion, AccordionProps } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { charactersList } from './_mockdata';
 
 const code = `

src/mantine-demos/src/demos/core/Accordion/Accordion.demo.sideControls.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Accordion, ActionIcon, AccordionControlProps, Box } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { IconDots } from '@tabler/icons';
 
 const code = `

src/mantine-demos/src/demos/core/Accordion/Accordion.demo.stylesApi.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Accordion, createStyles } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { baseDemoItems } from './_base';
 
 const code = `

src/mantine-demos/src/demos/core/Accordion/Accordion.demo.transitions.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { BaseDemo } from './_base';
 
 export const disableTransitions: MantineDemo = {

src/mantine-demos/src/demos/core/Accordion/Accordion.demo.unstyled.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { BaseDemo } from './_base';
 
 const code = `

src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.colors.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconSun } from '@tabler/icons';
+import { MantineDemo } from '@mantine/ds';
 import { Group, MANTINE_COLORS, ActionIcon, ActionIconProps } from '@mantine/core';
 
 const getColors = (props: Omit<ActionIconProps, 'children'>) =>

src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.configurator.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconAdjustments } from '@tabler/icons';
+import { MantineDemo } from '@mantine/ds';
 import { ActionIcon, ActionIconProps, Group } from '@mantine/core';
 
 const iconSizes = {

src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.gradient.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ActionIcon, Group } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { IconSun } from '@tabler/icons';
 
 const code = `

src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.variants.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconSettings } from '@tabler/icons';
+import { MantineDemo } from '@mantine/ds';
 import { ActionIcon, Group } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Affix/Affix.demo.usage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconArrowUp } from '@tabler/icons';
 import { useWindowScroll } from '@mantine/hooks';
+import { MantineDemo } from '@mantine/ds';
 import { Button, Text, Transition, Affix } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Alert/Alert.demo.configurator.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconAlertCircle } from '@tabler/icons';
+import { MantineDemo } from '@mantine/ds';
 import { Alert } from '@mantine/core';
 
 function Wrapper(props: React.ComponentPropsWithoutRef<typeof Alert>) {

src/mantine-demos/src/demos/core/Anchor/Anchor.demo.usage.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { Anchor } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/AppShell/AppShell.demo.navbar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Navbar } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { User } from './_user';
 import { Brand } from './_brand';
 import { MainLinks } from './_mainLinks';

src/mantine-demos/src/demos/core/AppShell/AppShell.demo.scrollbars.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ScrollArea, Navbar, Box } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { User } from './_user';
 import { Brand } from './_brand';
 import { MainLinks } from './_mainLinks';

src/mantine-demos/src/demos/core/AppShell/AppShell.demo.usage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconSun, IconMoonStars } from '@tabler/icons';
 import { AppShell, Navbar, Header, Group, ActionIcon, useMantineColorScheme } from '@mantine/core';
+import { MantineDemo } from '@mantine/ds';
 import { MainLinks } from './_mainLinks';
 import { User } from './_user';
 import { Logo } from './_logo';

src/mantine-demos/src/demos/core/AspectRatio/AspectRatio.demo.image.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { AspectRatio, Image } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/AspectRatio/AspectRatio.demo.map.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { AspectRatio } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/AspectRatio/AspectRatio.demo.video.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { AspectRatio } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Autocomplete/Autocomplete.demo.animations.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { Autocomplete } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Autocomplete/Autocomplete.demo.configurator.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { Autocomplete } from '@mantine/core';
 
 const codeTemplate = (props: string) => `

src/mantine-demos/src/demos/core/Autocomplete/Autocomplete.demo.disabled.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { Autocomplete } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Autocomplete/Autocomplete.demo.dynamic.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { Autocomplete } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Autocomplete/Autocomplete.demo.flip.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { Autocomplete } from '@mantine/core';
 
 const codeTemplate = (props: string) => `

src/mantine-demos/src/demos/core/Autocomplete/Autocomplete.demo.group.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { Autocomplete } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Autocomplete/Autocomplete.demo.icon.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconHash } from '@tabler/icons';
+import { MantineDemo } from '@mantine/ds';
 import { Autocomplete } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Autocomplete/Autocomplete.demo.itemComponent.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { Group, Avatar, Text, MantineColor, SelectItemProps, Autocomplete } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Autocomplete/Autocomplete.demo.limit.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { Autocomplete } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Autocomplete/Autocomplete.demo.usage.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { Autocomplete } from '@mantine/core';
 
 const code = `

src/mantine-demos/src/demos/core/Autocomplete/Autocomplete.demo.validation.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MantineDemo } from '@mantine/ds';
 import { Autocomplete } from '@mantine/core';
 
 const code = `