From 429731dbb77de2d8ca1c4a88832c73294a9b141c Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Tue, 31 Oct 2023 19:46:30 +0000
Subject: [PATCH] fix: prevent global style pollution in external fields

---
 .../core/components/ExternalInput/index.tsx   | 17 +++++++++++-----
 .../ExternalInput/styles.module.css           | 20 +++++++++++--------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
index fc04843ece..9fee21e6de 100644
--- a/packages/core/components/ExternalInput/index.tsx
+++ b/packages/core/components/ExternalInput/index.tsx
@@ -104,21 +104,26 @@ export const ExternalInput = ({
 
           <div className={getClassNameModal("tableWrapper")}>
             <table className={getClassNameModal("table")}>
-              <thead>
-                <tr>
+              <thead className={getClassNameModal("thead")}>
+                <tr className={getClassNameModal("tr")}>
                   {keys.map((key) => (
-                    <th key={key} style={{ textAlign: "left" }}>
+                    <th
+                      key={key}
+                      className={getClassNameModal("th")}
+                      style={{ textAlign: "left" }}
+                    >
                       {key}
                     </th>
                   ))}
                 </tr>
               </thead>
-              <tbody>
+              <tbody className={getClassNameModal("tbody")}>
                 {data.map((item, i) => {
                   return (
                     <tr
                       key={i}
                       style={{ whiteSpace: "nowrap" }}
+                      className={getClassNameModal("tr")}
                       onClick={(e) => {
                         onChange(mapProp(item));
 
@@ -128,7 +133,9 @@ export const ExternalInput = ({
                       }}
                     >
                       {keys.map((key) => (
-                        <td key={key}>{item[key]}</td>
+                        <td key={key} className={getClassNameModal("td")}>
+                          {item[key]}
+                        </td>
                       ))}
                     </tr>
                   );
diff --git a/packages/core/components/ExternalInput/styles.module.css b/packages/core/components/ExternalInput/styles.module.css
index 5d8e3b4dea..8be986b4e7 100644
--- a/packages/core/components/ExternalInput/styles.module.css
+++ b/packages/core/components/ExternalInput/styles.module.css
@@ -69,17 +69,18 @@
 }
 
 .ExternalInputModal-table {
+  border-collapse: unset;
   border-spacing: 0px;
   color: var(--puck-color-neutral-4);
   position: relative;
 }
 
-.ExternalInputModal-table thead {
+.ExternalInputModal-thead {
   position: sticky;
   top: 0;
 }
 
-.ExternalInputModal-table th {
+.ExternalInputModal-th {
   border-bottom: 1px solid var(--puck-color-grey-8);
   border-top: 1px solid var(--puck-color-grey-8);
   font-weight: 700;
@@ -87,23 +88,24 @@
   opacity: 0.9;
 }
 
-.ExternalInputModal-table td {
+.ExternalInputModal-td {
+  font-family: var(--puck-font-stack);
   padding: 16px 24px;
 }
 
-.ExternalInputModal-table tr:nth-of-type(n) {
+.ExternalInputModal-tr:nth-of-type(n) {
   background-color: white;
 }
 
-.ExternalInputModal-table tr:nth-of-type(2n) {
+.ExternalInputModal-tr:nth-of-type(2n) {
   background-color: var(--puck-color-grey-10);
 }
 
-.ExternalInputModal-table tr td:first-of-type {
+.ExternalInputModal-tr .ExternalInputModal-td:first-of-type {
   font-weight: 500;
 }
 
-.ExternalInputModal-table tbody tr:hover {
+.ExternalInputModal-tbody .ExternalInputModal-tr:hover {
   background: var(--puck-color-grey-11);
   color: var(--puck-color-azure-4);
   cursor: pointer;
@@ -111,7 +113,9 @@
   margin-left: -5px;
 }
 
-.ExternalInputModal-table tbody tr:hover td:first-of-type {
+.ExternalInputModal-tbody
+  .ExternalInputModal-tr:hover
+  .ExternalInputModal-td:first-of-type {
   border-left: 4px solid var(--puck-color-azure-4);
   padding-left: 20px;
 }