i need to create a storybook for my custom tabs component

[SalmaOssamaa]

i have created a custom tabs component and i wanted to create a storybook for it but i always encounter an issue in the render function when i try to import the Tabs component
the error is : 'Tabs' refers to a value, but is being used as a type here. Did you mean 'typeof Tabs'?ts(2749)

import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "../../utils";
import { TabsListProps, TabsTriggerProps } from "./types";
import { Icon } from "../index";
import { IconNames, IconSizes } from "../Icon/types";
import { TabsListVariants, TabsTriggerVariants } from "./tabsVariants";

const Tabs = TabsPrimitive.Root;

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  TabsListProps
>(({ className, width, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(TabsListVariants({ width, className }),
  "border-b border-gray-300"
  )}
    {...props}
  />
));
TabsList.displayName = TabsPrimitive.List.displayName;

const IconSize: IconSizes = IconSizes["16x16"];

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  TabsTriggerProps
>(({ className, variant, width, icon, children, ...props }, ref) => {
  return (
    <TabsPrimitive.Trigger
      ref={ref}
      className={cn(
        TabsTriggerVariants({ variant, width, className }),
        "w-fit py-0 px-space-8 border-radius-200 h-10 hover:text-black disabled:text-gray-400"
      )}
      {...props}
    >
    <span className="flex gap-2 items-center">
    {icon && (
        <Icon size={IconSize} name={icon as IconNames}  />
      )}
      {children}
    </span>
    </TabsPrimitive.Trigger>
  );
});
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content ref={ref} className={cn("", className)} {...props} />
));
TabsContent.displayName = TabsPrimitive.Content.displayName;

export { Tabs, TabsList, TabsTrigger, TabsContent };