I am writing a component library in/for react and using Rollup to bundle it. As part of the build process I am using Terser to make sure the bundle is as small as possible. As part of the minification process, Terser renames the variables and then renames then back at export. Like so:

export{_ as BtnResponsive,l as Button};

This works fine when importing my library into other ES modules. Like so:

import { BtnResponsive } from '@namespace/component-lib';

But when I create a Storybook story Button.stories.tsx and import my component like so:

import { ComponentStory, ComponentMeta } from '@storybook/react';
import { BtnResponsive } from '@namespace/component-lib';

export default {
    title: 'Components/BtnResponsive',
    component: BtnResponsive,
} as ComponentMeta<typeof BtnResponsive>;

const Template: ComponentStory<typeof BtnResponsive> = (args) => <BtnResponsive {...args} />;

export const Primary = Template.bind({});
Primary.args = { children: 'Primary', theme: 'primary' };

Storybook then renders the component in my story like

<_ theme="primary">
  Primary
</_>

Storybook somehow doesn't respect the renamed export. Does anyone know how to either make storybook respect the component name? or know how I can adjust Terser so Storybook understands the name correctly?

Thanks in advance!