How to debug a Typescript library compiled with Rollup in a main project

I've been spending some time trying to figure out the follow scenario:

I got two projects, one is a library of components and the other one the main project which consumes the library. When I develop a new component I do as usual following a TDD process and at the end I do some case scenarios on storybook that I expect the component will behave under certain circumstances, however, one thing is the desirable behaviour and the other how will be the functionality in a real integration environment. For this case I've been trying to build the source maps for the library in order to debug it locally when its running on the main project.

The library is developed with typescript so I'm compiling it with rollup using the follow configuration:

rollup.config.js

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import image from "@rollup/plugin-image";
import babel from "rollup-plugin-babel";
const cssUrl = require("postcss-url");

const packageJson = require("./package.json");

const GLOBALS = {
  react: "React",
  "react-dom": "ReactDOM",
  loadash: "lodash"
};

const isDev = process.env.NODE_ENV === "development";

export default {
  input: "src/index.ts",
  external: Object.keys(GLOBALS),
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true,
      // globals: global variable names of external dependencies
      globals: GLOBALS
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true,
      // globals: global variable names of external dependencies
      globals: GLOBALS
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    babel({
      exclude: "node_modules/**",
      plugins: ["external-helpers"]
    }),
    typescript({ useTsconfigDeclarationDir: true }),
    postcss({
      modules: false,
      extract: true,
      sourceMap: true,
      minimize: isDev ? false : true,
      plugins: [cssUrl({ url: "inline" })]
    }),
    image()
  ]
};

When I execute npm run build it generates both compiled bundles for ESM and CommonJS and I can debug directly through the **index.esm.js" file directly but as a compiled version of the code is generated, it's harder to debug it setting the breakpoints and doing the inspection with a version of the code ugly and minified so I was wondering if I can take advantage of source maps files for this matter. For the root project it works like a charm but when it comes to use it within a generated code for the library I was not able to make it.

This is the dist folder generated:

The index.esm.js file has all the code compiled for every single component and at the bottom the follow line:

//# sourceMappingURL=index.esm.js.map

Pointing out that the sourcemapping corresponds to the index.esm.js.map. Within this file there are an array of mapping source files pointing to the many components inside the library, all of them prefixing with ../src/elements/<component_name> so as long as the files are set up on the relative map of index.esm.js.map that is node_modules/library-components/src/elements/... the browser should be able to map correctly these files but this is not the case since every time I launch the app this is what I see on the sources tab:

So neither src folder with the mapping source files or any source files corresponding with the library are available on the sources tab but I can see that the browser is able to detect the source map file for the index.esm.js that is pointing to the existing index.esm.js.map that we described but that's not what I really want to but the source maps mapping to every each component as I stated before. So my question is, it's possible to compile with rollup generating a bundle with the source maps for every component in a legible way in order to debug the components more easily and be the browser able to detect them instead of using the existing index.esm.js?

I was trying to perform several workflows with no success like running the tsc compiler that generates the source maps for every component but the problem is that in the process I need to generate also the bundles for the assets that rollup do using postcss and images for that purpose, otherwise I cannot launch the perform since the main app is not able to map correctly the asset files.

I don't know if at the end I explain myself very well in this topic but I think it's a pretty common scenario for those who works with several project instead of a monorepo and need continuously test and seek for potential errors in an integration env for the components inside of a third-party library.

Anyone that can throw some light on this topic?

Thanks in advance!