@bigbinary/neeto-github-frontend 3.0.0 → 3.0.2

package/dist/{index-DBol23Bj.js → cjs/v2/NeetoGithubNanoContainer.js}

@@ -1,110 +1,109 @@
 'use strict';
 
+var neetoAtoms = require('@bigbinary/neeto-atoms');
 var classnames = require('classnames');
-var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
-var Spinner = require('@bigbinary/neetoui/Spinner');
-var useGithubAccountsApi = require('./useGithubAccountsApi-CBlDaBkA.js');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var Github = require('@bigbinary/neeto-icons/misc/Github');
-var Typography = require('@bigbinary/neetoui/Typography');
-var jsxRuntime = require('react/jsx-runtime');
+var initializers = require('@bigbinary/neeto-commons-frontend/v2/initializers');
+var useGithubAccountsApi = require('../../useGithubAccountsApi-CBlDaBkA.js');
 var Building = require('@bigbinary/neeto-icons/Building');
-var Avatar = require('@bigbinary/neetoui/Avatar');
-var Button = require('@bigbinary/neetoui/Button');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
 var Plus = require('@bigbinary/neeto-icons/Plus');
 var Settings = require('@bigbinary/neeto-icons/Settings');
+var jsxRuntime = require('react/jsx-runtime');
+var Github = require('@bigbinary/neeto-icons/misc/Github');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
-var Search = require('@bigbinary/neeto-molecules/Search');
+var Search = require('@bigbinary/neeto-molecules/v2/Search');
 var reactI18next = require('react-i18next');
 var Lock = require('@bigbinary/neeto-icons/Lock');
-var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
-
-var Header = reactUtils.withT(function (_ref) {
-  var t = _ref.t;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "neeto-ui-text-gray-800 mb-1 flex w-full flex-row items-center space-x-2 font-sans text-lg font-medium leading-6 antialiased",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Github, {
-      className: "github-icon",
-      size: 20
-    }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-      style: "h4",
-      children: t("neetoGithub.github")
-    })]
-  });
-});
+var DateFormat = require('@bigbinary/neeto-molecules/v2/DateFormat');
+require('../../repository-tile-fB8WFACw.js');
+require('@babel/runtime/helpers/toConsumableArray');
+require('@babel/runtime/helpers/defineProperty');
+require('@tanstack/react-query');
+require('@bigbinary/neeto-commons-frontend/initializers');
+require('@bigbinary/neeto-commons-frontend/react-utils');
+require('ramda');
+require('axios');
+require('@bigbinary/neeto-commons-frontend/constants');
 
 var Configure = reactUtils.withT(function (_ref) {
   var t = _ref.t,
     isConnected = _ref.isConnected,
     installationUrl = _ref.installationUrl;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "neeto-ui-text-gray-900 shrink-0 font-sans text-sm font-normal leading-6 antialiased",
-    children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+    className: "shrink-0",
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
       href: installationUrl,
       icon: isConnected ? Settings : Plus,
       iconPosition: "left",
-      iconSize: 20,
-      size: "small",
-      style: "link",
-      children: isConnected ? t("neetoGithub.configureAccount") : t("neetoGithub.connectAccount")
+      size: "sm",
+      variant: "link",
+      children: isConnected ? t("neetoGithub.configure") : t("neetoGithub.connect")
     })
   });
 });
 
+var Header = reactUtils.withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "mb-1 flex w-full flex-row items-center space-x-2",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Github, {
+      size: 20
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      variant: "h5",
+      weight: "medium",
+      children: t("neetoGithub.github")
+    })]
+  });
+});
+
 var List$1 = reactUtils.withT(function (_ref) {
   var t = _ref.t,
     accounts = _ref.accounts,
     isConnected = _ref.isConnected,
-    installationUrl = _ref.installationUrl,
-    isPane = _ref.isPane;
+    installationUrl = _ref.installationUrl;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classnames("neeto-ui-border-gray-300 flex justify-between gap-3 border-b pb-4 pt-2", {
-      "flex-col md:flex-row": isPane,
-      "flex-col": !isPane
-    }),
-    children: [accounts.map(function (_ref2) {
-      var id = _ref2.id,
-        name = _ref2.name,
-        avatarUrl = _ref2.avatarUrl,
-        type = _ref2.type,
-        profileUrl = _ref2.profileUrl,
-        count = _ref2.count;
-      return /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex w-full items-center space-x-2",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-1",
-          children: [type === "Organization" ? /*#__PURE__*/jsxRuntime.jsx(Building, {
-            className: "neeto-ui-text-gray-600",
-            size: 24
-          }) : /*#__PURE__*/jsxRuntime.jsx(Avatar, {
-            size: "small",
-            user: {
-              imageUrl: avatarUrl
-            }
-          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-            className: "neeto-ui-text-gray-800",
-            style: "body2",
-            children: /*#__PURE__*/jsxRuntime.jsx(Button, {
-              className: "neeto-ui-text-gray-800",
-              label: "@".concat(name),
-              style: "link",
-              onClick: function onClick() {
-                return window.open(profileUrl, "_blank");
+    className: "border-border flex flex-col justify-between gap-3 border-b pb-4 pt-2",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-col gap-x-4 gap-y-2",
+      children: accounts.map(function (_ref2) {
+        var id = _ref2.id,
+          name = _ref2.name,
+          avatarUrl = _ref2.avatarUrl,
+          type = _ref2.type,
+          profileUrl = _ref2.profileUrl,
+          count = _ref2.count;
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center space-x-2",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-1",
+            children: [type === "Organization" ? /*#__PURE__*/jsxRuntime.jsx(Building, {
+              className: "text-muted-foreground",
+              size: 20
+            }) : /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Avatar, {
+              size: "sm",
+              user: {
+                imageUrl: avatarUrl
               }
+            }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+              href: profileUrl,
+              label: "@".concat(name),
+              rel: "noopener noreferrer",
+              target: "_blank",
+              variant: "link"
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "bg-muted-foreground h-1 w-1 rounded-full"
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+            color: "muted",
+            variant: "body2",
+            children: t("neetoGithub.countOf.repos", {
+              count: count
             })
           })]
-        }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "neeto-ui-bg-gray-800 neeto-ui-rounded-full h-1 w-1"
-        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-          className: "neeto-ui-text-black",
-          style: "body2",
-          children: t("neetoGithub.countOf.repos", {
-            count: count
-          })
-        })]
-      }, id);
+        }, id);
+      })
     }), /*#__PURE__*/jsxRuntime.jsx(Configure, {
       installationUrl: installationUrl,
       isConnected: isConnected
@@ -112,17 +111,64 @@ var List$1 = reactUtils.withT(function (_ref) {
   });
 });
 
-var Accounts = function Accounts(_ref) {
-  var isPane = _ref.isPane,
-    accounts = _ref.accounts,
+var PaneAccounts = function PaneAccounts(_ref) {
+  var accounts = _ref.accounts,
     isConnected = _ref.isConnected,
-    onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "border-border bg-muted/30 mb-3 flex items-center justify-between gap-3 rounded-md border p-3",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex flex-wrap items-center gap-x-4 gap-y-2",
+      children: accounts.map(function (_ref2) {
+        var id = _ref2.id,
+          name = _ref2.name,
+          avatarUrl = _ref2.avatarUrl,
+          type = _ref2.type,
+          profileUrl = _ref2.profileUrl;
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [type === "Organization" ? /*#__PURE__*/jsxRuntime.jsx(Building, {
+            className: "text-muted-foreground",
+            size: 28
+          }) : /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Avatar, {
+            size: "md",
+            user: {
+              imageUrl: avatarUrl
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+            href: profileUrl,
+            label: "@".concat(name),
+            rel: "noopener noreferrer",
+            target: "_blank",
+            variant: "link"
+          })]
+        }, id);
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Configure, {
+      installationUrl: installationUrl,
+      isConnected: isConnected
+    })]
+  });
+};
+var Accounts = function Accounts(_ref3) {
+  var isPane = _ref3.isPane,
+    accounts = _ref3.accounts,
+    isConnected = _ref3.isConnected,
+    onConnect = _ref3.onConnect,
+    installationUrl = _ref3.installationUrl;
+  if (isPane) {
+    if (!isConnected) return null;
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "order-1 flex w-full flex-col",
+      children: /*#__PURE__*/jsxRuntime.jsx(PaneAccounts, {
+        accounts: accounts,
+        installationUrl: installationUrl,
+        isConnected: isConnected
+      })
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classnames("flex w-full flex-col border border-solid border-transparent px-0 py-2", {
-      "order-1": isPane,
-      "md:order-2 md:max-w-72 lg:max-w-sm lg:px-6": !isPane
-    }),
+    className: classnames("border-transparent flex w-full flex-col border border-solid py-2", "md:order-2 md:max-w-72 lg:max-w-sm lg:px-6"),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "mb-2",
       children: [/*#__PURE__*/jsxRuntime.jsx(Header, {}), /*#__PURE__*/jsxRuntime.jsx(List$1, {
@@ -144,26 +190,23 @@ var NoRepositories = reactUtils.withT(function (_ref) {
     className: "flex items-center justify-center py-6",
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "mx-auto flex w-full max-w-sm flex-col items-center justify-center space-y-4 py-4 text-center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-        style: "body2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        variant: "body2",
         children: t("neetoGithub.noReposDescription")
-      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
         href: installationUrl,
-        icon: Github,
-        iconPosition: "left",
         label: t("neetoGithub.connectRepository"),
-        size: "medium",
-        style: "primary"
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "text-xs",
+        variant: "default"
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        variant: "caption",
         children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
           i18nKey: t("neetoGithub.troubleshoot"),
           components: {
-            troubleshootLink: /*#__PURE__*/jsxRuntime.jsx("a", {
-              className: "text-indigo-600 underline",
+            troubleshootLink: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
               href: troubleshootUrl,
               rel: "noopener noreferrer",
-              target: "_blank"
+              target: "_blank",
+              variant: "link"
             })
           }
         })
@@ -172,13 +215,9 @@ var NoRepositories = reactUtils.withT(function (_ref) {
   });
 });
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=true===r.prepend?"prepend":"append",d=true===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = ".connect-repo__info{width:100%}@media (min-width:768px){.connect-repo__info{width:calc(100% - 82px)}}.github-icon{flex-shrink:0}.github-icon [data-dark-mode-color=true]{fill:rgb(var(--neeto-ui-black))}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvcmVwb3NpdG9yeS10aWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxvQkFDRSxVQUNGLENBRUEseUJBQ0Usb0JBQ0UsdUJBQ0YsQ0FDRixDQUVBLGFBQ0UsYUFDRixDQUVBLHlDQUNFLCtCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiLmNvbm5lY3QtcmVwb19faW5mbyB7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG5AbWVkaWEgKG1pbi13aWR0aDogNzY4cHgpIHtcbiAgLmNvbm5lY3QtcmVwb19faW5mbyB7XG4gICAgd2lkdGg6IGNhbGMoMTAwJSAtIDgycHgpO1xuICB9XG59XG5cbi5naXRodWItaWNvbiB7XG4gIGZsZXgtc2hyaW5rOiAwO1xufVxuXG4uZ2l0aHViLWljb24gW2RhdGEtZGFyay1tb2RlLWNvbG9yPVwidHJ1ZVwiXSB7XG4gIGZpbGw6IHJnYih2YXIoLS1uZWV0by11aS1ibGFjaykpO1xufVxuIl19 */";
-n(css,{});
-
 var RepositoryTile = function RepositoryTile(_ref) {
   var isConnecting = _ref.isConnecting,
+    isPane = _ref.isPane,
     onConnect = _ref.onConnect,
     repository = _ref.repository;
   var _useTranslation = reactI18next.useTranslation(),
@@ -191,33 +230,40 @@ var RepositoryTile = function RepositoryTile(_ref) {
     fullName = repository.fullName,
     isPrivate = repository.isPrivate,
     updatedAt = repository.updatedAt;
+  var displayName = isPane && fullName !== null && fullName !== void 0 && fullName.includes("/") ? fullName.split("/").pop() : fullName;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "connect-repo__row neeto-ui-border-gray-300 flex flex-col justify-between gap-3 border-b border-solid py-3 ps-3 pe-3 last:border-b-0 md:flex-row md:items-center md:ps-5",
+    className: "connect-repo__row border-border flex flex-col justify-between gap-3 border-b border-solid py-3 ps-3 pe-3 last:border-b-0 md:flex-row md:items-center md:ps-5",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "connect-repo__info flex items-center space-x-2",
+      className: "connect-repo__info flex min-w-0 items-center space-x-2",
       children: [/*#__PURE__*/jsxRuntime.jsx(Github, {
-        className: "github-icon",
+        className: "shrink-0",
         size: 20
-      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        style: "body2",
-        children: fullName
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "truncate",
+        variant: "body2",
+        children: displayName
       }), isPrivate && /*#__PURE__*/jsxRuntime.jsx(Lock, {
         className: "shrink-0",
         size: 16
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "hidden lg:inline-block",
+        className: "hidden shrink-0 items-center gap-2 whitespace-nowrap lg:inline-flex",
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "neeto-ui-bg-gray-800 neeto-ui-rounded-full h-1 w-1"
-        }), /*#__PURE__*/jsxRuntime.jsx(DateFormat.FromNow, {
-          date: updatedAt
+          className: "bg-muted-foreground h-1 w-1 rounded-full"
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          color: "muted",
+          variant: "caption",
+          children: /*#__PURE__*/jsxRuntime.jsx(DateFormat.FromNow, {
+            date: updatedAt
+          })
         })]
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
       className: "w-max",
       disabled: isConnecting,
       loading: isLoading,
-      style: "primary",
+      size: "sm",
       type: "button",
+      variant: "outline",
       onClick: function onClick() {
         return onConnect({
           repoType: "private",
@@ -237,28 +283,29 @@ var List = reactUtils.withT(function (_ref) {
     isConnecting = _ref.isConnecting,
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl,
-    troubleshootUrl = _ref.troubleshootUrl;
+    troubleshootUrl = _ref.troubleshootUrl,
+    isPane = _ref.isPane;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "h-full overflow-y-scroll px-4 pb-4 md:px-6 md:pb-6",
+    className: classnames({
+      "px-0 pb-0": isPane,
+      "h-full overflow-y-auto px-4 pb-4 md:px-6 md:pb-6": !isPane
+    }),
     children: neetoCist.isPresent(repositories) ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classnames("neeto-ui-border-gray-300 neeto-ui-rounded-md flex flex-col items-center justify-center border", {
-        "h-auto": neetoCist.isPresent(filteredRepositories),
-        "h-full": !neetoCist.isPresent(filteredRepositories)
+      className: classnames("flex w-full flex-col overflow-hidden", {
+        "border-border rounded-md border": !isPane
       }),
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "m-0 h-full w-full p-0",
-        children: neetoCist.isPresent(filteredRepositories) ? filteredRepositories.map(function (repository, index) {
-          return /*#__PURE__*/react.createElement(RepositoryTile, {
-            isConnecting: isConnecting,
-            onConnect: onConnect,
-            repository: repository,
-            key: index
-          });
-        }) : /*#__PURE__*/jsxRuntime.jsx(Typography, {
-          className: "flex h-full w-full items-center justify-center",
-          style: "body2",
-          children: t("neetoGithub.noRepos")
-        })
+      children: neetoCist.isPresent(filteredRepositories) ? filteredRepositories.map(function (repository) {
+        return /*#__PURE__*/react.createElement(RepositoryTile, {
+          isConnecting: isConnecting,
+          isPane: isPane,
+          onConnect: onConnect,
+          repository: repository,
+          key: repository.id
+        });
+      }) : /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "flex h-full w-full items-center justify-center py-6",
+        variant: "body2",
+        children: t("neetoGithub.noRepos")
       })
     }) : /*#__PURE__*/jsxRuntime.jsx(NoRepositories, {
       installationUrl: installationUrl,
@@ -277,18 +324,15 @@ var NotConnected = function NotConnected(_ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex w-full max-w-sm flex-col items-center justify-center space-y-4 text-center",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-      style: "body2",
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      variant: "body2",
       children: t("neetoGithub.notConnectedDescription", {
         appName: initializers.globalProps.appName
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-      icon: Github,
-      iconPosition: "left",
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
       label: t("neetoGithub.connectGithub"),
       loading: isLoading,
-      size: "medium",
-      style: "primary",
+      variant: "default",
       onClick: function onClick(event) {
         setIsLoading(true);
         var target = reactUtils.isMetaKeyPressed(event) ? "_blank" : "_self";
@@ -304,7 +348,8 @@ var Private = function Private(_ref) {
     repositories = _ref.repositories,
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl,
-    troubleshootUrl = _ref.troubleshootUrl;
+    troubleshootUrl = _ref.troubleshootUrl,
+    isPane = _ref.isPane;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = react.useState(repositories),
@@ -322,39 +367,56 @@ var Private = function Private(_ref) {
     });
     setFilteredRepositories(filteredRepositories);
   };
+  var searchRow = neetoCist.isPresent(repositories) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classnames("flex w-full items-center gap-3", {
+      "border-border border-b p-3": isPane
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Search, {
+      onSearch: onSearch,
+      className: "flex-1",
+      unlimitedChars: false
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      className: "whitespace-nowrap",
+      color: "muted",
+      variant: "body2",
+      children: t("neetoGithub.countOf.repos", {
+        count: filteredRepositories.length
+      })
+    })]
+  });
+  var listElement = /*#__PURE__*/jsxRuntime.jsx(List, {
+    filteredRepositories: filteredRepositories,
+    installationUrl: installationUrl,
+    isConnecting: isConnecting,
+    isPane: isPane,
+    onConnect: onConnect,
+    repositories: repositories,
+    troubleshootUrl: troubleshootUrl
+  });
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "connect-repo flex h-full flex-col",
-    children: isConnected ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: isConnected ? isPane ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "border-border flex max-h-[60vh] flex-col overflow-hidden rounded-md border",
+      children: [searchRow, /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "min-h-0 flex-1 overflow-y-auto",
+        children: listElement
+      })]
+    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "space-y-3 p-4 md:p-6",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-          className: "shrink-0 text-lg font-medium",
-          style: "h2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          as: "h2",
+          className: "shrink-0",
+          variant: "h5",
+          weight: "medium",
           children: t("neetoGithub.connectARepo")
-        }), neetoCist.isPresent(repositories) && /*#__PURE__*/jsxRuntime.jsx(Search, {
-          onSearch: onSearch,
-          className: "w-full",
-          unlimitedChars: false,
-          suffix: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-            style: "body2",
-            children: t("neetoGithub.countOf.repos", {
-              count: filteredRepositories.length
-            })
-          })
-        })]
+        }), searchRow]
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex min-h-0 w-full grow flex-col space-y-6",
-        children: /*#__PURE__*/jsxRuntime.jsx(List, {
-          filteredRepositories: filteredRepositories,
-          installationUrl: installationUrl,
-          isConnecting: isConnecting,
-          onConnect: onConnect,
-          repositories: repositories,
-          troubleshootUrl: troubleshootUrl
-        })
+        children: listElement
       })]
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "neeto-ui-text-gray-900 grow font-sans text-sm font-normal leading-6 antialiased",
+      className: "text-foreground grow",
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex h-full flex-col items-center justify-center p-4",
         children: /*#__PURE__*/jsxRuntime.jsx(NotConnected, {
@@ -374,14 +436,15 @@ var Repositories = function Repositories(_ref) {
     troubleshootUrl = _ref.troubleshootUrl,
     isPane = _ref.isPane;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classnames("neeto-ui-rounded-md neeto-ui-border-gray-300 h-full w-full space-y-6 border border-solid", {
+    className: classnames("flex h-full w-full flex-col space-y-6 overflow-hidden", {
       "order-2": isPane,
-      "order-1": !isPane
+      "border-border order-1 rounded-md border border-solid": !isPane
     }),
     children: /*#__PURE__*/jsxRuntime.jsx(Private, {
       installationUrl: installationUrl,
       isConnected: isConnected,
       isConnecting: isConnecting,
+      isPane: isPane,
       onConnect: onConnect,
       repositories: repositories,
       troubleshootUrl: troubleshootUrl
@@ -422,7 +485,7 @@ var NeetoGithubNanoContainer = function NeetoGithubNanoContainer(_ref) {
   if (isLoading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex h-full w-full items-center justify-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
     });
   }
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -448,6 +511,5 @@ var NeetoGithubNanoContainer = function NeetoGithubNanoContainer(_ref) {
   });
 };
 
-exports.NeetoGithubNanoContainer = NeetoGithubNanoContainer;
-exports.n = n;
-//# sourceMappingURL=index-DBol23Bj.js.map
+module.exports = NeetoGithubNanoContainer;
+//# sourceMappingURL=NeetoGithubNanoContainer.js.map