fix: use TypeScript v5

components/AccessibleIcon/AccessibleIcon.stories.tsx

@@ -5,11 +5,11 @@ import * as Icons from '@radix-ui/react-icons';
 import { Flex } from '../Flex';
 import { IconButton } from '../IconButton';
 
-export default {
+const Component: Meta<typeof AccessibleIcon> = {
   title: 'Components/AccessibleIcon',
   component: AccessibleIcon,
   tags: ['autodocs'],
-} as Meta<typeof AccessibleIcon>;
+};
 
 export const Basic: StoryFn<typeof AccessibleIcon> = () => (
   <Flex gap={3} align="center">
@@ -26,3 +26,5 @@ export const Basic: StoryFn<typeof AccessibleIcon> = () => (
     </IconButton>
   </Flex>
 );
+
+export default Component;

components/Accordion/Accordion.stories.tsx

@@ -16,10 +16,10 @@ type AccordionVariants = VariantProps<typeof AccordionRoot>;
 const BaseAccordion = (props: any): JSX.Element => <AccordionRoot {...props} />;
 const AccordionForStory = modifyVariantsForStory<AccordionVariants, any>(BaseAccordion);
 
-export default {
+const Component: Meta<typeof AccordionForStory> = {
   title: 'Components/Accordion',
   component: AccordionForStory,
-} as Meta<typeof AccordionForStory>;
+};
 
 const Template: StoryFn<typeof AccordionForStory> = ({ size, ...args }) => (
   <Box css={{ width: 300 }}>
@@ -40,7 +40,7 @@ const Template: StoryFn<typeof AccordionForStory> = ({ size, ...args }) => (
   </Box>
 );
 
-export const Single = Template.bind({});
+export const Single: StoryFn<typeof AccordionForStory> = Template.bind({});
 Single.args = {
   type: 'single',
   size: 'small',
@@ -52,12 +52,12 @@ Single.argTypes = {
   },
 };
 
-export const Large = Template.bind({});
+export const Large: StoryFn<typeof AccordionForStory> = Template.bind({});
 Large.args = {
   size: 'large',
 };
 
-export const Collapsible = Template.bind({});
+export const Collapsible: StoryFn<typeof AccordionForStory> = Template.bind({});
 Collapsible.args = {
   type: 'single',
   collapsible: true,
@@ -69,7 +69,7 @@ Collapsible.argTypes = {
   },
 };
 
-export const MultipleCollapsible = Template.bind({});
+export const MultipleCollapsible: StoryFn<typeof AccordionForStory> = Template.bind({});
 MultipleCollapsible.args = {
   type: 'multiple',
   collapsible: true,
@@ -207,3 +207,5 @@ InsideModal.argTypes = {
     options: ['small', 'medium', 'large'],
   },
 };
+
+export default Component;

components/Accordion/Accordion.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { keyframes, styled, VariantProps, CSS } from '../../stitches.config';
@@ -34,13 +35,13 @@ const StyledAccordionItem = styled(AccordionPrimitive.Item, {
   boxShadow: '0 1px 0 0 $colors$divider',
 });
 
-export const StyledAccordionHeader = styled(AccordionPrimitive.Header, {
+export const StyledAccordionHeader = (styled as any)('AccordionPrimitive.Header', {
   all: 'unset',
   display: 'flex',
   borderRadius: 'inherit',
 });
 
-export const StyledAccordionTrigger = styled(AccordionPrimitive.Trigger, {
+export const StyledAccordionTrigger = (styled as any)(AccordionPrimitive.Trigger, {
   all: 'unset',
   borderRadius: 'inherit',
   fontFamily: 'inherit',
@@ -100,7 +101,7 @@ const StyledAccordionChevron = styled(ChevronRightIcon, {
   },
 });
 
-const StyledAccordionContent = styled(AccordionPrimitive.Content, {
+const StyledAccordionContent = (styled as any)(AccordionPrimitive.Content, {
   overflow: 'hidden',
   fontSize: '$3',
   c: '$accordionText',
@@ -112,7 +113,7 @@ const StyledAccordionContent = styled(AccordionPrimitive.Content, {
   },
 });
 
-const StyledAccordionContentWrapper = styled('div', {
+const StyledAccordionContentWrapper = (styled as any)('div', {
   variants: {
     size: {
       small: {
@@ -132,8 +133,8 @@ const StyledAccordionContentWrapper = styled('div', {
 });
 
 // EXPORTS
-export const AccordionRoot = StyledAccordionRoot;
-export const AccordionItem = StyledAccordionItem;
+export const AccordionRoot = StyledAccordionRoot as any;
+export const AccordionItem = StyledAccordionItem as any;
 export type AccordionTriggerProps = React.ComponentProps<typeof StyledAccordionTrigger> &
   VariantProps<typeof StyledAccordionTrigger> & {
     children: React.ReactNode;

components/Alert/Alert.stories.tsx

@@ -8,10 +8,10 @@ import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
 const BaseAlert = (props: AlertProps): JSX.Element => <Alert {...props} />;
 const AlertForStory = modifyVariantsForStory<AlertVariants, AlertProps>(BaseAlert);
 
-export default {
+const Component: Meta<typeof AlertForStory> = {
   title: 'Components/Alert',
   component: Alert,
-} as Meta<typeof AlertForStory>;
+};
 
 export const Variants: StoryFn<typeof AlertForStory> = (args) => (
   <Alert {...args}>
@@ -49,3 +49,5 @@ const Customize: StoryFn<typeof AlertForStory> = (args) => (
     </Text>
   </Alert>
 );
+
+export default Component;

components/AriaTable/AriaTable.stories.tsx

@@ -23,10 +23,10 @@ import { Text } from '../Text';
 const BaseTable = (props: TableProps): JSX.Element => <Table {...props} />;
 const TableForStory = modifyVariantsForStory<TableVariants, TableProps>(BaseTable);
 
-export default {
+const Component: Meta<typeof TableForStory> = {
   title: 'Components/AriaTable',
   component: TableForStory,
-} as Meta<typeof TableForStory>;
+};
 
 export const Basic: StoryFn<any> = ({ transform, ...args }) => (
   <TableForStory aria-label="People" aria-describedby="basic-table-caption" {...args}>
@@ -656,3 +656,5 @@ export const CollapsibleRow: StoryFn<any> = (args) => {
 CollapsibleRow.args = {
   interactive: true,
 };
+
+export default Component;

components/Avatar/Avatar.stories.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { Avatar } from './Avatar';
 
-export default {
+const Component: Meta<typeof Avatar> = {
   title: 'Components/Avatar',
   component: Avatar,
-} as Meta<typeof Avatar>;
+};
 
 export const Template: StoryFn<typeof Avatar> = (args) => <Avatar {...args} />;
 
@@ -21,7 +21,7 @@ Template.argTypes = {
   },
 };
 
-export const Shape = Template.bind({});
+export const Shape: StoryFn<typeof Avatar> = Template.bind({});
 
 Shape.args = {
   src: 'https://picsum.photos/100',
@@ -40,7 +40,7 @@ Shape.argTypes = {
   },
 };
 
-export const Fallback = Template.bind({});
+export const Fallback: StoryFn<typeof Avatar> = Template.bind({});
 
 Fallback.args = {
   fallback: 'M',
@@ -67,7 +67,7 @@ Fallback.argTypes = {
   },
 };
 
-export const Variants = Template.bind({});
+export const Variants: StoryFn<typeof Avatar> = Template.bind({});
 
 Variants.args = {
   fallback: 'M',
@@ -91,3 +91,5 @@ Variants.argTypes = {
   },
 };
 const Customize: StoryFn<typeof Avatar> = (args) => <Avatar css={{ c: '$hiContrast' }} {...args} />;
+
+export default Component;

components/Badge/Badge.stories.tsx

@@ -12,15 +12,15 @@ type BadgeProps = BadgeVariants & {};
 const BaseBadge = (props: BadgeProps): JSX.Element => <Badge {...props} />;
 const BadgeForStory = modifyVariantsForStory<BadgeVariants, BadgeProps>(BaseBadge);
 
-export default {
+const Component: Meta<typeof BadgeForStory> = {
   title: 'Components/Badge',
   component: BadgeForStory,
   argTypes: {
     size: { control: 'inline-radio' },
     variant: { control: 'select' },
     borderless: { control: 'boolean' },
   },
-} as Meta<typeof BadgeForStory>;
+};
 
 export const Colors: StoryFn<typeof BadgeForStory> = (args) => (
   <Flex css={{ gap: '$3' }}>
@@ -40,7 +40,7 @@ Colors.args = {
   borderless: false,
 };
 
-export const AlphaBackground = Colors.bind({});
+export const AlphaBackground: StoryFn<typeof BadgeForStory> = Colors.bind({});
 
 AlphaBackground.args = {
   alphaBg: true,
@@ -104,3 +104,5 @@ Borderless.args = {
   variant: 'neon',
   borderless: true,
 };
+
+export default Component;

components/Box/Box.stories.tsx

@@ -14,10 +14,10 @@ const BoxForStory = modifyVariantsForStory<BoxVariants, BoxProps & React.HTMLAtt
   BaseBox
 );
 
-export default {
+const Component: Meta<typeof BoxForStory> = {
   title: 'Components/Box',
   component: BoxForStory,
-} as Meta<typeof BoxForStory>;
+};
 
 export const Basic: StoryFn<typeof BoxForStory> = (args) => (
   <Box css={{ px: '$4', py: '$6', bc: '$deepBlue6', ta: 'center' }} {...args}>
@@ -28,3 +28,5 @@ export const Basic: StoryFn<typeof BoxForStory> = (args) => (
     </Text>
   </Box>
 );
+
+export default Component;

components/Bubble/Bubble.stories.tsx

@@ -11,10 +11,10 @@ type BubbleProps = BubbleVariants & {};
 const BaseBubble = (props: BubbleProps): JSX.Element => <Bubble {...props} />;
 const BubbleForStory = modifyVariantsForStory<BubbleVariants, BubbleProps>(BaseBubble);
 
-export default {
+const Component: Meta<typeof BubbleForStory> = {
   title: 'Components/Bubble',
   component: BubbleForStory,
-} as Meta<typeof BubbleForStory>;
+};
 
 export const Colors: StoryFn<typeof BubbleForStory> = (args) => (
   <Flex css={{ gap: '$3' }}>
@@ -70,3 +70,5 @@ Sizes.argTypes = {
 const Customize: StoryFn<typeof BubbleForStory> = (args) => (
   <Bubble {...args} css={{ c: '$hiContrast' }} />
 );
+
+export default Component;

components/Button/Button.stories.tsx

@@ -7,40 +7,40 @@ import { Text } from '../Text';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { UnstyledLink } from '../Link';
 
-export default {
+const Component: Meta<typeof ButtonForStory> = {
   title: 'Components/Button',
   component: ButtonForStory,
   argTypes: { onClick: { action: 'clicked' } },
-} as Meta<typeof ButtonForStory>;
+};
 
 const Template: StoryFn<typeof ButtonForStory> = (args) => (
   <ButtonForStory {...args}>Button</ButtonForStory>
 );
 
-export const Primary = Template.bind({});
+export const Primary: StoryFn<typeof ButtonForStory> = Template.bind({});
 
 Primary.args = {};
 
-export const Secondary = Template.bind({});
+export const Secondary: StoryFn<typeof ButtonForStory> = Template.bind({});
 
 Secondary.args = {
   variant: 'secondary',
 };
 
-export const Red = Template.bind({});
+export const Red: StoryFn<typeof ButtonForStory> = Template.bind({});
 
 Red.args = {
   variant: 'red',
 };
 
-export const Ghost = Template.bind({});
+export const Ghost: StoryFn<typeof ButtonForStory> = Template.bind({});
 
 Ghost.args = {
   ghost: true,
   variant: 'secondary',
 };
 
-export const Disabled = Template.bind({});
+export const Disabled: StoryFn<typeof ButtonForStory> = Template.bind({});
 
 Disabled.args = {
   disabled: true,
@@ -55,7 +55,7 @@ const TemplateWithIcon: StoryFn<typeof ButtonForStory> = (args) => (
   </ButtonForStory>
 );
 
-export const WithIcon = TemplateWithIcon.bind({});
+export const WithIcon: StoryFn<typeof ButtonForStory> = TemplateWithIcon.bind({});
 
 const TemplateWithActive: StoryFn<typeof ButtonForStory> = ({ state, ...args }) => {
   const [active, setActive] = React.useState(0);
@@ -78,11 +78,11 @@ const TemplateWithActive: StoryFn<typeof ButtonForStory> = ({ state, ...args })
   );
 };
 
-export const Active = TemplateWithActive.bind({});
+export const Active: StoryFn<typeof ButtonForStory> = TemplateWithActive.bind({});
 
 Active.args = {};
 
-export const Waiting = Template.bind({});
+export const Waiting: StoryFn<typeof ButtonForStory> = Template.bind({});
 
 Waiting.args = {
   state: 'waiting',
@@ -105,3 +105,5 @@ ButtonLink.argTypes = {
     control: 'inline-radio',
   },
 };
+
+export default Component;

components/ButtonSwitch/ButtonSwitch.stories.tsx

@@ -3,10 +3,10 @@ import { Meta, StoryFn } from '@storybook/react';
 import { ButtonSwitchContainer, ButtonSwitchItem } from './ButtonSwitch';
 import { useState } from 'react';
 
-export default {
+const Component: Meta<typeof ButtonSwitchContainer> = {
   title: 'Components/ButtonSwitch',
   component: ButtonSwitchContainer,
-} as Meta<typeof ButtonSwitchContainer>;
+};
 
 export const Basic: StoryFn<typeof ButtonSwitchContainer> = () => {
   const [value, setValue] = useState('left');
@@ -31,3 +31,5 @@ export const Multiple: StoryFn<typeof ButtonSwitchContainer> = () => {
     </ButtonSwitchContainer>
   );
 };
+
+export default Component;