From 949c1dfdedbc8d27e54db08bbe7043a9afa74cfa Mon Sep 17 00:00:00 2001
From: Phanx091 <jason.jayphan@gmail.com>
Date: Thu, 11 Sep 2025 16:44:53 -0500
Subject: [PATCH] inject styles to head

---
 package.json                  |  2 +-
 src/atoms/Aside/Aside.js      | 66 +++++++++++++++++++----------------
 src/atoms/Aside/Aside.test.js | 28 ++-------------
 3 files changed, 40 insertions(+), 56 deletions(-)
diff --git a/package.json b/package.json
index 892eb92..dc5a583 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@apmg/amat",
   "authors": "[Geoff Hankerson ghankerson@mpr.org, Kim Thompson kthompson@mpr.org, Jason Phan jphan@mpr.org]",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "private": false,
   "main": "dist/bundle.js",
   "license": "MIT",
diff --git a/src/atoms/Aside/Aside.js b/src/atoms/Aside/Aside.js
index d571be4..c6df902 100644
--- a/src/atoms/Aside/Aside.js
+++ b/src/atoms/Aside/Aside.js
@@ -1,39 +1,45 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Traverse from '../../utils/Traverse';
 
 const Aside = (props) => {
-  return (
-    <>
-      <style>
-        {`
+  useEffect(() => {
+    // Inject styles into document head when component mounts
+    // This ensures styles work when used as an npm package
+    const styleId = 'apm-aside-styles';
+
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.textContent = `
+        .apm-aside-custom {
+          float: right;
+          width: 300px;
+          margin: 0 0 20px 20px;
+          padding: 0px 15px;
+          background-color: #f8f9fa;
+          color: #000;
+          border: 1px solid #dee2e6;
+          border-radius: 8px;
+          line-height: 1.4;
+        }
+
+        .apm-aside-custom p {
+          font-size: 13px;
+        }
+        
+        @media (max-width: 957px) {
           .apm-aside-custom {
-            float: right;
-            width: 300px;
-            margin: 0 0 20px 20px;
-            padding: 0px 15px;
-            background-color: #f8f9fa;
-            color: #000;
-            border: 1px solid #dee2e6;
-            border-radius: 8px;
-            line-height: 1.4;
+            float: none;
+            width: 100%;
+            margin: 20px 0;
           }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }, []);
 
-          .apm-aside-custom p {
-            font-size: 13px;
-          }
-          
-          @media (max-width: 957px) {
-            .apm-aside-custom {
-              float: none;
-              width: 100%;
-              margin: 20px 0;
-            }
-          }
-        `}
-      </style>
-      <aside className="apm-aside-custom">{Traverse(props)}</aside>
-    </>
-  );
+  return <aside className="apm-aside-custom">{Traverse(props)}</aside>;
 };
 
 export default Aside;
diff --git a/src/atoms/Aside/Aside.test.js b/src/atoms/Aside/Aside.test.js
index 96f58fa..b284cfc 100644
--- a/src/atoms/Aside/Aside.test.js
+++ b/src/atoms/Aside/Aside.test.js
@@ -28,29 +28,7 @@ const doc = {
 test('It renders a body from a Prosemirror doc', () => {
   const { container } = render(<Body nodeData={doc} />);
 
-  expect(container.innerHTML).toEqual(`<style>
-          .apm-aside-custom {
-            float: right;
-            width: 300px;
-            margin: 0 0 20px 20px;
-            padding: 0px 15px;
-            background-color: #f8f9fa;
-            color: #000;
-            border: 1px solid #dee2e6;
-            border-radius: 8px;
-            line-height: 1.4;
-          }
-
-          .apm-aside-custom p {
-            font-size: 13px;
-          }
-          
-          @media (max-width: 957px) {
-            .apm-aside-custom {
-              float: none;
-              width: 100%;
-              margin: 20px 0;
-            }
-          }
-        </style><aside class="apm-aside-custom"><p>An aside.</p></aside>`);
+  expect(container.innerHTML).toEqual(
+    `<aside class="apm-aside-custom"><p>An aside.</p></aside>`
+  );
 });
