feat: render profile badges fully through react components by default

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-linkedinbadge",
-  "version": "5.12.2024",
+  "version": "5.12.2025",
   "description": "The LinkedIn Badge Rendering React Component is a powerful tool for displaying LinkedIn badges on websites. With customizable options and support for both profile and entity badges, this component offers improved features over LinkedIn's basic implementation. It enhances code organization by separating badge container rendering from dynamic content rendering and efficiently handles asynchronous loading of content from LinkedIn servers. This component also allows for easy management of multiple badges on a page and provides a callback function for tracking badge rendering completion. Make sure to review the licensing information for proper usage.",
   "repository": {
     "type": "git",
@@ -76,6 +76,7 @@
   ],
   "files": [
     "lib",
+    "src/LinkedInBadge.css",
     "LICENSE.md",
     "types",
     "README.md",
@@ -141,16 +142,19 @@
   "jsdelivr": "./lib/linkedinbadge.js",
   "exports": {
     ".": {
-      "types": "./lib/bundle.esm.d.ts",
+      "types": "./lib/index.d.ts",
       "import": "./lib/linkedinbadge.esm.js",
       "require": "./lib/linkedinbadge.cjs.js",
       "node": "./lib/linkedinbadge.cjs.js",
       "default": "./lib/linkedinbadge.esm.js",
       "umd": "./lib/linkedinbadge.bundle.js"
     }
   },
-  "types": "./lib/bundle.esm.d.ts",
+  "types": "./lib/index.d.ts",
   "umd:main": "./lib/linkedinbadge.bundle.js",
   "main": "./lib/linkedinbadge.cjs.js",
-  "module": "./lib/linkedinbadge.esm.js"
+  "module": "./lib/linkedinbadge.esm.js",
+  "dependencies": {
+    "rollup-plugin-import-css": "^3.5.0"
+  }
 }

rollup.config.all.js

@@ -8,6 +8,7 @@ import replace from "@rollup/plugin-replace";
 import typescript from "rollup-plugin-typescript2";
 import terser from "@rollup/plugin-terser";
 import { dts } from "rollup-plugin-dts";
+import css from 'rollup-plugin-import-css';
 import packageJson from "./package.json";
 const outputCommonConf = {
   sourcemap: "inline",
@@ -56,7 +57,8 @@ export default [
         "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
         preventAssignment: true,
       }),
-
+
+      css(),
       resolve(),
       commonjs(),
       typescript({
@@ -79,9 +81,5 @@ export default [
     ],
     external: ["react", "react-dom", "styled-components"],
   },
-  {
-    input: "types/index.d.ts",
-    output: [{ file: "lib/bundle.esm.d.ts", format: "esm" }],
-    plugins: [dts()],
-  },
+
 ];

rollup.config.js

@@ -3,6 +3,7 @@ import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import resolve from "@rollup/plugin-node-resolve";
 import replace from "@rollup/plugin-replace";
 import typescript from "rollup-plugin-typescript2";
+import css from "rollup-plugin-import-css";
 import terser from "@rollup/plugin-terser";
 
 const config = {
@@ -20,6 +21,7 @@ const config = {
     },
   ],
   plugins: [
+    css(),
     typescript({
       useTsconfigDeclarationDir: true,
       sourceMap: true,