You are attempting to ship so-called dual package here, thus you are making yourself vulnerable to the dual package hazard. Since styled-components rely on React context, I think that you should try to avoid it as much as possible. Using .mjs wrappers strategy would be a much better choice that would be safer for the users.

@Andarist I find this very interesting - do you know of any blogpost / resource where the .mjs wrappers strategy is explained it detail, also in regards to Typescript?

It's primarily described in node.js docs here but you can also find references to it in webpack and esbuild docs. We use this strategy in Emotion.

ok, thanks. I read that, but got confused with regards to Typescript and the issues described above. I'll have a look on how Emotion handles this as reference for my own lib, thanks!

Using types like this when you are shipping dual packages isn't exactly correct and validators like arethetypeswrong will (rightfully) complain about this. If your runtime is dual, your types should be dual as well.

Yeah, I couldn't figure out how to emit mts/cts using rollup. Will need to dig into tsup's source and see how they did it

This order isn't exactly incorrect but I think it makes sense to think of node as the default and use browser as an override. Either way, you probably want to also include the worker condition here that will point to the non-browser code to accommodate Next.js and some other tools when they bundle for the edge workers target.

Those two share the same directory, they are meant to represent two different module formats (CJS vs ESM) and yet they are using the same extension (.js). This isn't correct and will cause problems one way or another. At the very least you need to either put those in different directories with appropriate package.json scopes or use different extensions for those files (with the current content of the package.json file you should use .mjs for your ESM modules)