@bigbinary/neeto-github-frontend 1.0.27 → 1.1.0-beta1

package/dist/index.js

@@ -1,60 +1,882 @@
-import React, { useState, useRef } from 'react';
-import classNames from 'classnames';
+import * as React from 'react';
+import { useState, createElement, useRef } from 'react';
+import classnames from 'classnames';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { Trans, useTranslation } from 'react-i18next';
 import { isNotNil } from 'ramda';
-import { useQuery } from 'react-query';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import axios from 'axios';
 import { DEFAULT_STALE_TIME } from '@bigbinary/neeto-commons-frontend/constants';
 import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Settings, Plus, Building, User, CannedResponses, Lock } from '@bigbinary/neeto-icons';
-import { Button, Typography, Pane } from '@bigbinary/neetoui';
 import { Github } from '@bigbinary/neeto-icons/misc';
-import { isPresent, findBy, noop } from '@bigbinary/neeto-cist';
+import Typography from '@bigbinary/neetoui/Typography';
+import { Settings, Plus, Building, Lock } from '@bigbinary/neeto-icons';
+import Avatar from '@bigbinary/neetoui/Avatar';
+import Button from '@bigbinary/neetoui/Button';
+import { isPresent, findBy, noop as noop$1 } from '@bigbinary/neeto-cist';
 import Search from '@bigbinary/neeto-molecules/Search';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
+import Pane from '@bigbinary/neetoui/Pane';
 import require$$0 from 'util';
 
-function _typeof(o) {
-  "@babel/helpers - typeof";
+// src/subscribable.ts
+var Subscribable = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.subscribe = this.subscribe.bind(this);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    this.onSubscribe();
+    return () => {
+      this.listeners.delete(listener);
+      this.onUnsubscribe();
+    };
+  }
+  hasListeners() {
+    return this.listeners.size > 0;
+  }
+  onSubscribe() {
+  }
+  onUnsubscribe() {
+  }
+};
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
+// src/utils.ts
+var isServer = typeof window === "undefined" || "Deno" in globalThis;
+function noop() {
+  return void 0;
+}
+function isValidTimeout(value) {
+  return typeof value === "number" && value >= 0 && value !== Infinity;
+}
+function timeUntilStale(updatedAt, staleTime) {
+  return Math.max(updatedAt + (staleTime || 0) - Date.now(), 0);
+}
+function replaceEqualDeep(a, b) {
+  if (a === b) {
+    return a;
+  }
+  const array = isPlainArray(a) && isPlainArray(b);
+  if (array || isPlainObject(a) && isPlainObject(b)) {
+    const aItems = array ? a : Object.keys(a);
+    const aSize = aItems.length;
+    const bItems = array ? b : Object.keys(b);
+    const bSize = bItems.length;
+    const copy = array ? [] : {};
+    let equalItems = 0;
+    for (let i = 0; i < bSize; i++) {
+      const key = array ? i : bItems[i];
+      if ((!array && aItems.includes(key) || array) && a[key] === void 0 && b[key] === void 0) {
+        copy[key] = void 0;
+        equalItems++;
+      } else {
+        copy[key] = replaceEqualDeep(a[key], b[key]);
+        if (copy[key] === a[key] && a[key] !== void 0) {
+          equalItems++;
+        }
+      }
+    }
+    return aSize === bSize && equalItems === aSize ? a : copy;
+  }
+  return b;
+}
+function shallowEqualObjects(a, b) {
+  if (!b || Object.keys(a).length !== Object.keys(b).length) {
+    return false;
+  }
+  for (const key in a) {
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+function isPlainArray(value) {
+  return Array.isArray(value) && value.length === Object.keys(value).length;
+}
+function isPlainObject(o) {
+  if (!hasObjectPrototype(o)) {
+    return false;
+  }
+  const ctor = o.constructor;
+  if (ctor === void 0) {
+    return true;
+  }
+  const prot = ctor.prototype;
+  if (!hasObjectPrototype(prot)) {
+    return false;
+  }
+  if (!prot.hasOwnProperty("isPrototypeOf")) {
+    return false;
+  }
+  if (Object.getPrototypeOf(o) !== Object.prototype) {
+    return false;
+  }
+  return true;
+}
+function hasObjectPrototype(o) {
+  return Object.prototype.toString.call(o) === "[object Object]";
+}
+function replaceData(prevData, data, options) {
+  if (typeof options.structuralSharing === "function") {
+    return options.structuralSharing(prevData, data);
+  } else if (options.structuralSharing !== false) {
+    return replaceEqualDeep(prevData, data);
+  }
+  return data;
 }
 
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
+// src/focusManager.ts
+var FocusManager = class extends Subscribable {
+  #focused;
+  #cleanup;
+  #setup;
+  constructor() {
+    super();
+    this.#setup = (onFocus) => {
+      if (!isServer && window.addEventListener) {
+        const listener = () => onFocus();
+        window.addEventListener("visibilitychange", listener, false);
+        return () => {
+          window.removeEventListener("visibilitychange", listener);
+        };
+      }
+      return;
+    };
+  }
+  onSubscribe() {
+    if (!this.#cleanup) {
+      this.setEventListener(this.#setup);
+    }
+  }
+  onUnsubscribe() {
+    if (!this.hasListeners()) {
+      this.#cleanup?.();
+      this.#cleanup = void 0;
+    }
+  }
+  setEventListener(setup) {
+    this.#setup = setup;
+    this.#cleanup?.();
+    this.#cleanup = setup((focused) => {
+      if (typeof focused === "boolean") {
+        this.setFocused(focused);
+      } else {
+        this.onFocus();
+      }
+    });
   }
-  return (hint === "string" ? String : Number)(input);
+  setFocused(focused) {
+    const changed = this.#focused !== focused;
+    if (changed) {
+      this.#focused = focused;
+      this.onFocus();
+    }
+  }
+  onFocus() {
+    const isFocused = this.isFocused();
+    this.listeners.forEach((listener) => {
+      listener(isFocused);
+    });
+  }
+  isFocused() {
+    if (typeof this.#focused === "boolean") {
+      return this.#focused;
+    }
+    return globalThis.document?.visibilityState !== "hidden";
+  }
+};
+var focusManager = new FocusManager();
+
+// src/onlineManager.ts
+var OnlineManager = class extends Subscribable {
+  #online = true;
+  #cleanup;
+  #setup;
+  constructor() {
+    super();
+    this.#setup = (onOnline) => {
+      if (!isServer && window.addEventListener) {
+        const onlineListener = () => onOnline(true);
+        const offlineListener = () => onOnline(false);
+        window.addEventListener("online", onlineListener, false);
+        window.addEventListener("offline", offlineListener, false);
+        return () => {
+          window.removeEventListener("online", onlineListener);
+          window.removeEventListener("offline", offlineListener);
+        };
+      }
+      return;
+    };
+  }
+  onSubscribe() {
+    if (!this.#cleanup) {
+      this.setEventListener(this.#setup);
+    }
+  }
+  onUnsubscribe() {
+    if (!this.hasListeners()) {
+      this.#cleanup?.();
+      this.#cleanup = void 0;
+    }
+  }
+  setEventListener(setup) {
+    this.#setup = setup;
+    this.#cleanup?.();
+    this.#cleanup = setup(this.setOnline.bind(this));
+  }
+  setOnline(online) {
+    const changed = this.#online !== online;
+    if (changed) {
+      this.#online = online;
+      this.listeners.forEach((listener) => {
+        listener(online);
+      });
+    }
+  }
+  isOnline() {
+    return this.#online;
+  }
+};
+var onlineManager = new OnlineManager();
+
+// src/retryer.ts
+function canFetch(networkMode) {
+  return (networkMode ?? "online") === "online" ? onlineManager.isOnline() : true;
 }
 
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+// src/notifyManager.ts
+function createNotifyManager() {
+  let queue = [];
+  let transactions = 0;
+  let notifyFn = (callback) => {
+    callback();
+  };
+  let batchNotifyFn = (callback) => {
+    callback();
+  };
+  let scheduleFn = (cb) => setTimeout(cb, 0);
+  const setScheduler = (fn) => {
+    scheduleFn = fn;
+  };
+  const batch = (callback) => {
+    let result;
+    transactions++;
+    try {
+      result = callback();
+    } finally {
+      transactions--;
+      if (!transactions) {
+        flush();
+      }
+    }
+    return result;
+  };
+  const schedule = (callback) => {
+    if (transactions) {
+      queue.push(callback);
+    } else {
+      scheduleFn(() => {
+        notifyFn(callback);
+      });
+    }
+  };
+  const batchCalls = (callback) => {
+    return (...args) => {
+      schedule(() => {
+        callback(...args);
+      });
+    };
+  };
+  const flush = () => {
+    const originalQueue = queue;
+    queue = [];
+    if (originalQueue.length) {
+      scheduleFn(() => {
+        batchNotifyFn(() => {
+          originalQueue.forEach((callback) => {
+            notifyFn(callback);
+          });
+        });
+      });
+    }
+  };
+  const setNotifyFunction = (fn) => {
+    notifyFn = fn;
+  };
+  const setBatchNotifyFunction = (fn) => {
+    batchNotifyFn = fn;
+  };
+  return {
+    batch,
+    batchCalls,
+    schedule,
+    setNotifyFunction,
+    setBatchNotifyFunction,
+    setScheduler
+  };
+}
+var notifyManager = createNotifyManager();
+
+// src/query.ts
+function fetchState(data, options) {
+  return {
+    fetchFailureCount: 0,
+    fetchFailureReason: null,
+    fetchStatus: canFetch(options.networkMode) ? "fetching" : "paused",
+    ...data === void 0 && {
+      error: null,
+      status: "pending"
+    }
+  };
 }
 
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
+// src/queryObserver.ts
+var QueryObserver = class extends Subscribable {
+  constructor(client, options) {
+    super();
+    this.options = options;
+    this.#client = client;
+    this.#selectError = null;
+    this.bindMethods();
+    this.setOptions(options);
+  }
+  #client;
+  #currentQuery = void 0;
+  #currentQueryInitialState = void 0;
+  #currentResult = void 0;
+  #currentResultState;
+  #currentResultOptions;
+  #selectError;
+  #selectFn;
+  #selectResult;
+  // This property keeps track of the last query with defined data.
+  // It will be used to pass the previous data and query to the placeholder function between renders.
+  #lastQueryWithDefinedData;
+  #staleTimeoutId;
+  #refetchIntervalId;
+  #currentRefetchInterval;
+  #trackedProps = /* @__PURE__ */ new Set();
+  bindMethods() {
+    this.refetch = this.refetch.bind(this);
+  }
+  onSubscribe() {
+    if (this.listeners.size === 1) {
+      this.#currentQuery.addObserver(this);
+      if (shouldFetchOnMount(this.#currentQuery, this.options)) {
+        this.#executeFetch();
+      } else {
+        this.updateResult();
+      }
+      this.#updateTimers();
+    }
+  }
+  onUnsubscribe() {
+    if (!this.hasListeners()) {
+      this.destroy();
+    }
+  }
+  shouldFetchOnReconnect() {
+    return shouldFetchOn(
+      this.#currentQuery,
+      this.options,
+      this.options.refetchOnReconnect
+    );
+  }
+  shouldFetchOnWindowFocus() {
+    return shouldFetchOn(
+      this.#currentQuery,
+      this.options,
+      this.options.refetchOnWindowFocus
+    );
+  }
+  destroy() {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.#clearStaleTimeout();
+    this.#clearRefetchInterval();
+    this.#currentQuery.removeObserver(this);
+  }
+  setOptions(options, notifyOptions) {
+    const prevOptions = this.options;
+    const prevQuery = this.#currentQuery;
+    this.options = this.#client.defaultQueryOptions(options);
+    if (this.options.enabled !== void 0 && typeof this.options.enabled !== "boolean") {
+      throw new Error("Expected enabled to be a boolean");
+    }
+    this.#updateQuery();
+    this.#currentQuery.setOptions(this.options);
+    if (prevOptions._defaulted && !shallowEqualObjects(this.options, prevOptions)) {
+      this.#client.getQueryCache().notify({
+        type: "observerOptionsUpdated",
+        query: this.#currentQuery,
+        observer: this
+      });
+    }
+    const mounted = this.hasListeners();
+    if (mounted && shouldFetchOptionally(
+      this.#currentQuery,
+      prevQuery,
+      this.options,
+      prevOptions
+    )) {
+      this.#executeFetch();
+    }
+    this.updateResult(notifyOptions);
+    if (mounted && (this.#currentQuery !== prevQuery || this.options.enabled !== prevOptions.enabled || this.options.staleTime !== prevOptions.staleTime)) {
+      this.#updateStaleTimeout();
+    }
+    const nextRefetchInterval = this.#computeRefetchInterval();
+    if (mounted && (this.#currentQuery !== prevQuery || this.options.enabled !== prevOptions.enabled || nextRefetchInterval !== this.#currentRefetchInterval)) {
+      this.#updateRefetchInterval(nextRefetchInterval);
+    }
+  }
+  getOptimisticResult(options) {
+    const query = this.#client.getQueryCache().build(this.#client, options);
+    const result = this.createResult(query, options);
+    if (shouldAssignObserverCurrentProperties(this, result)) {
+      this.#currentResult = result;
+      this.#currentResultOptions = this.options;
+      this.#currentResultState = this.#currentQuery.state;
+    }
+    return result;
+  }
+  getCurrentResult() {
+    return this.#currentResult;
+  }
+  trackResult(result, onPropTracked) {
+    const trackedResult = {};
+    Object.keys(result).forEach((key) => {
+      Object.defineProperty(trackedResult, key, {
+        configurable: false,
+        enumerable: true,
+        get: () => {
+          this.trackProp(key);
+          onPropTracked?.(key);
+          return result[key];
+        }
+      });
     });
-  } else {
-    obj[key] = value;
+    return trackedResult;
+  }
+  trackProp(key) {
+    this.#trackedProps.add(key);
+  }
+  getCurrentQuery() {
+    return this.#currentQuery;
+  }
+  refetch({ ...options } = {}) {
+    return this.fetch({
+      ...options
+    });
+  }
+  fetchOptimistic(options) {
+    const defaultedOptions = this.#client.defaultQueryOptions(options);
+    const query = this.#client.getQueryCache().build(this.#client, defaultedOptions);
+    query.isFetchingOptimistic = true;
+    return query.fetch().then(() => this.createResult(query, defaultedOptions));
+  }
+  fetch(fetchOptions) {
+    return this.#executeFetch({
+      ...fetchOptions,
+      cancelRefetch: fetchOptions.cancelRefetch ?? true
+    }).then(() => {
+      this.updateResult();
+      return this.#currentResult;
+    });
+  }
+  #executeFetch(fetchOptions) {
+    this.#updateQuery();
+    let promise = this.#currentQuery.fetch(
+      this.options,
+      fetchOptions
+    );
+    if (!fetchOptions?.throwOnError) {
+      promise = promise.catch(noop);
+    }
+    return promise;
+  }
+  #updateStaleTimeout() {
+    this.#clearStaleTimeout();
+    if (isServer || this.#currentResult.isStale || !isValidTimeout(this.options.staleTime)) {
+      return;
+    }
+    const time = timeUntilStale(
+      this.#currentResult.dataUpdatedAt,
+      this.options.staleTime
+    );
+    const timeout = time + 1;
+    this.#staleTimeoutId = setTimeout(() => {
+      if (!this.#currentResult.isStale) {
+        this.updateResult();
+      }
+    }, timeout);
+  }
+  #computeRefetchInterval() {
+    return (typeof this.options.refetchInterval === "function" ? this.options.refetchInterval(this.#currentQuery) : this.options.refetchInterval) ?? false;
+  }
+  #updateRefetchInterval(nextInterval) {
+    this.#clearRefetchInterval();
+    this.#currentRefetchInterval = nextInterval;
+    if (isServer || this.options.enabled === false || !isValidTimeout(this.#currentRefetchInterval) || this.#currentRefetchInterval === 0) {
+      return;
+    }
+    this.#refetchIntervalId = setInterval(() => {
+      if (this.options.refetchIntervalInBackground || focusManager.isFocused()) {
+        this.#executeFetch();
+      }
+    }, this.#currentRefetchInterval);
+  }
+  #updateTimers() {
+    this.#updateStaleTimeout();
+    this.#updateRefetchInterval(this.#computeRefetchInterval());
   }
-  return obj;
+  #clearStaleTimeout() {
+    if (this.#staleTimeoutId) {
+      clearTimeout(this.#staleTimeoutId);
+      this.#staleTimeoutId = void 0;
+    }
+  }
+  #clearRefetchInterval() {
+    if (this.#refetchIntervalId) {
+      clearInterval(this.#refetchIntervalId);
+      this.#refetchIntervalId = void 0;
+    }
+  }
+  createResult(query, options) {
+    const prevQuery = this.#currentQuery;
+    const prevOptions = this.options;
+    const prevResult = this.#currentResult;
+    const prevResultState = this.#currentResultState;
+    const prevResultOptions = this.#currentResultOptions;
+    const queryChange = query !== prevQuery;
+    const queryInitialState = queryChange ? query.state : this.#currentQueryInitialState;
+    const { state } = query;
+    let newState = { ...state };
+    let isPlaceholderData = false;
+    let data;
+    if (options._optimisticResults) {
+      const mounted = this.hasListeners();
+      const fetchOnMount = !mounted && shouldFetchOnMount(query, options);
+      const fetchOptionally = mounted && shouldFetchOptionally(query, prevQuery, options, prevOptions);
+      if (fetchOnMount || fetchOptionally) {
+        newState = {
+          ...newState,
+          ...fetchState(state.data, query.options)
+        };
+      }
+      if (options._optimisticResults === "isRestoring") {
+        newState.fetchStatus = "idle";
+      }
+    }
+    let { error, errorUpdatedAt, status } = newState;
+    if (options.select && newState.data !== void 0) {
+      if (prevResult && newState.data === prevResultState?.data && options.select === this.#selectFn) {
+        data = this.#selectResult;
+      } else {
+        try {
+          this.#selectFn = options.select;
+          data = options.select(newState.data);
+          data = replaceData(prevResult?.data, data, options);
+          this.#selectResult = data;
+          this.#selectError = null;
+        } catch (selectError) {
+          this.#selectError = selectError;
+        }
+      }
+    } else {
+      data = newState.data;
+    }
+    if (options.placeholderData !== void 0 && data === void 0 && status === "pending") {
+      let placeholderData;
+      if (prevResult?.isPlaceholderData && options.placeholderData === prevResultOptions?.placeholderData) {
+        placeholderData = prevResult.data;
+      } else {
+        placeholderData = typeof options.placeholderData === "function" ? options.placeholderData(
+          this.#lastQueryWithDefinedData?.state.data,
+          this.#lastQueryWithDefinedData
+        ) : options.placeholderData;
+        if (options.select && placeholderData !== void 0) {
+          try {
+            placeholderData = options.select(placeholderData);
+            this.#selectError = null;
+          } catch (selectError) {
+            this.#selectError = selectError;
+          }
+        }
+      }
+      if (placeholderData !== void 0) {
+        status = "success";
+        data = replaceData(
+          prevResult?.data,
+          placeholderData,
+          options
+        );
+        isPlaceholderData = true;
+      }
+    }
+    if (this.#selectError) {
+      error = this.#selectError;
+      data = this.#selectResult;
+      errorUpdatedAt = Date.now();
+      status = "error";
+    }
+    const isFetching = newState.fetchStatus === "fetching";
+    const isPending = status === "pending";
+    const isError = status === "error";
+    const isLoading = isPending && isFetching;
+    const hasData = data !== void 0;
+    const result = {
+      status,
+      fetchStatus: newState.fetchStatus,
+      isPending,
+      isSuccess: status === "success",
+      isError,
+      isInitialLoading: isLoading,
+      isLoading,
+      data,
+      dataUpdatedAt: newState.dataUpdatedAt,
+      error,
+      errorUpdatedAt,
+      failureCount: newState.fetchFailureCount,
+      failureReason: newState.fetchFailureReason,
+      errorUpdateCount: newState.errorUpdateCount,
+      isFetched: newState.dataUpdateCount > 0 || newState.errorUpdateCount > 0,
+      isFetchedAfterMount: newState.dataUpdateCount > queryInitialState.dataUpdateCount || newState.errorUpdateCount > queryInitialState.errorUpdateCount,
+      isFetching,
+      isRefetching: isFetching && !isPending,
+      isLoadingError: isError && !hasData,
+      isPaused: newState.fetchStatus === "paused",
+      isPlaceholderData,
+      isRefetchError: isError && hasData,
+      isStale: isStale(query, options),
+      refetch: this.refetch
+    };
+    return result;
+  }
+  updateResult(notifyOptions) {
+    const prevResult = this.#currentResult;
+    const nextResult = this.createResult(this.#currentQuery, this.options);
+    this.#currentResultState = this.#currentQuery.state;
+    this.#currentResultOptions = this.options;
+    if (this.#currentResultState.data !== void 0) {
+      this.#lastQueryWithDefinedData = this.#currentQuery;
+    }
+    if (shallowEqualObjects(nextResult, prevResult)) {
+      return;
+    }
+    this.#currentResult = nextResult;
+    const defaultNotifyOptions = {};
+    const shouldNotifyListeners = () => {
+      if (!prevResult) {
+        return true;
+      }
+      const { notifyOnChangeProps } = this.options;
+      const notifyOnChangePropsValue = typeof notifyOnChangeProps === "function" ? notifyOnChangeProps() : notifyOnChangeProps;
+      if (notifyOnChangePropsValue === "all" || !notifyOnChangePropsValue && !this.#trackedProps.size) {
+        return true;
+      }
+      const includedProps = new Set(
+        notifyOnChangePropsValue ?? this.#trackedProps
+      );
+      if (this.options.throwOnError) {
+        includedProps.add("error");
+      }
+      return Object.keys(this.#currentResult).some((key) => {
+        const typedKey = key;
+        const changed = this.#currentResult[typedKey] !== prevResult[typedKey];
+        return changed && includedProps.has(typedKey);
+      });
+    };
+    if (notifyOptions?.listeners !== false && shouldNotifyListeners()) {
+      defaultNotifyOptions.listeners = true;
+    }
+    this.#notify({ ...defaultNotifyOptions, ...notifyOptions });
+  }
+  #updateQuery() {
+    const query = this.#client.getQueryCache().build(this.#client, this.options);
+    if (query === this.#currentQuery) {
+      return;
+    }
+    const prevQuery = this.#currentQuery;
+    this.#currentQuery = query;
+    this.#currentQueryInitialState = query.state;
+    if (this.hasListeners()) {
+      prevQuery?.removeObserver(this);
+      query.addObserver(this);
+    }
+  }
+  onQueryUpdate() {
+    this.updateResult();
+    if (this.hasListeners()) {
+      this.#updateTimers();
+    }
+  }
+  #notify(notifyOptions) {
+    notifyManager.batch(() => {
+      if (notifyOptions.listeners) {
+        this.listeners.forEach((listener) => {
+          listener(this.#currentResult);
+        });
+      }
+      this.#client.getQueryCache().notify({
+        query: this.#currentQuery,
+        type: "observerResultsUpdated"
+      });
+    });
+  }
+};
+function shouldLoadOnMount(query, options) {
+  return options.enabled !== false && query.state.data === void 0 && !(query.state.status === "error" && options.retryOnMount === false);
+}
+function shouldFetchOnMount(query, options) {
+  return shouldLoadOnMount(query, options) || query.state.data !== void 0 && shouldFetchOn(query, options, options.refetchOnMount);
+}
+function shouldFetchOn(query, options, field) {
+  if (options.enabled !== false) {
+    const value = typeof field === "function" ? field(query) : field;
+    return value === "always" || value !== false && isStale(query, options);
+  }
+  return false;
+}
+function shouldFetchOptionally(query, prevQuery, options, prevOptions) {
+  return (query !== prevQuery || prevOptions.enabled === false) && (!options.suspense || query.state.status !== "error") && isStale(query, options);
+}
+function isStale(query, options) {
+  return options.enabled !== false && query.isStaleByTime(options.staleTime);
+}
+function shouldAssignObserverCurrentProperties(observer, optimisticResult) {
+  if (!shallowEqualObjects(observer.getCurrentResult(), optimisticResult)) {
+    return true;
+  }
+  return false;
+}
+
+var QueryClientContext = React.createContext(
+  void 0
+);
+var useQueryClient = (queryClient) => {
+  const client = React.useContext(QueryClientContext);
+  if (queryClient) {
+    return queryClient;
+  }
+  if (!client) {
+    throw new Error("No QueryClient set, use QueryClientProvider to set one");
+  }
+  return client;
+};
+
+var IsRestoringContext = React.createContext(false);
+var useIsRestoring = () => React.useContext(IsRestoringContext);
+IsRestoringContext.Provider;
+
+function createValue() {
+  let isReset = false;
+  return {
+    clearReset: () => {
+      isReset = false;
+    },
+    reset: () => {
+      isReset = true;
+    },
+    isReset: () => {
+      return isReset;
+    }
+  };
+}
+var QueryErrorResetBoundaryContext = React.createContext(createValue());
+var useQueryErrorResetBoundary = () => React.useContext(QueryErrorResetBoundaryContext);
+
+// src/utils.ts
+function shouldThrowError(throwError, params) {
+  if (typeof throwError === "function") {
+    return throwError(...params);
+  }
+  return !!throwError;
+}
+
+var ensurePreventErrorBoundaryRetry = (options, errorResetBoundary) => {
+  if (options.suspense || options.throwOnError) {
+    if (!errorResetBoundary.isReset()) {
+      options.retryOnMount = false;
+    }
+  }
+};
+var useClearResetErrorBoundary = (errorResetBoundary) => {
+  React.useEffect(() => {
+    errorResetBoundary.clearReset();
+  }, [errorResetBoundary]);
+};
+var getHasError = ({
+  result,
+  errorResetBoundary,
+  throwOnError,
+  query
+}) => {
+  return result.isError && !errorResetBoundary.isReset() && !result.isFetching && query && shouldThrowError(throwOnError, [result.error, query]);
+};
+
+// src/suspense.ts
+var ensureStaleTime = (defaultedOptions) => {
+  if (defaultedOptions.suspense) {
+    if (typeof defaultedOptions.staleTime !== "number") {
+      defaultedOptions.staleTime = 1e3;
+    }
+  }
+};
+var shouldSuspend = (defaultedOptions, result) => defaultedOptions?.suspense && result.isPending;
+var fetchOptimistic = (defaultedOptions, observer, errorResetBoundary) => observer.fetchOptimistic(defaultedOptions).catch(() => {
+  errorResetBoundary.clearReset();
+});
+
+function useBaseQuery(options, Observer, queryClient) {
+  const client = useQueryClient(queryClient);
+  const isRestoring = useIsRestoring();
+  const errorResetBoundary = useQueryErrorResetBoundary();
+  const defaultedOptions = client.defaultQueryOptions(options);
+  defaultedOptions._optimisticResults = isRestoring ? "isRestoring" : "optimistic";
+  ensureStaleTime(defaultedOptions);
+  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary);
+  useClearResetErrorBoundary(errorResetBoundary);
+  const [observer] = React.useState(
+    () => new Observer(
+      client,
+      defaultedOptions
+    )
+  );
+  const result = observer.getOptimisticResult(defaultedOptions);
+  React.useSyncExternalStore(
+    React.useCallback(
+      (onStoreChange) => {
+        const unsubscribe = isRestoring ? () => void 0 : observer.subscribe(notifyManager.batchCalls(onStoreChange));
+        observer.updateResult();
+        return unsubscribe;
+      },
+      [observer, isRestoring]
+    ),
+    () => observer.getCurrentResult(),
+    () => observer.getCurrentResult()
+  );
+  React.useEffect(() => {
+    observer.setOptions(defaultedOptions, { listeners: false });
+  }, [defaultedOptions, observer]);
+  if (shouldSuspend(defaultedOptions, result)) {
+    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary);
+  }
+  if (getHasError({
+    result,
+    errorResetBoundary,
+    throwOnError: defaultedOptions.throwOnError,
+    query: client.getQueryCache().get(defaultedOptions.queryHash)
+  })) {
+    throw result.error;
+  }
+  return !defaultedOptions.notifyOnChangeProps ? observer.trackResult(result) : result;
+}
+
+function useQuery(options, queryClient) {
+  return useBaseQuery(options, QueryObserver, queryClient);
 }
 
 var _globalProps$organiza$1;
@@ -88,88 +910,103 @@ var STALE_TIME_CONFIG = {
   staleTime: DEFAULT_STALE_TIME
 };
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchGithubRepositories = function useFetchGithubRepositories(_ref) {
   var isConnected = _ref.isConnected;
-  return useQuery([QUERY_KEYS.GITHUB_REPOSITORIES_LIST], githubAccountsApi.repositories, _objectSpread(_objectSpread({}, STALE_TIME_CONFIG), {}, {
+  return useQuery({
+    queryKey: [QUERY_KEYS.GITHUB_REPOSITORIES_LIST],
+    queryFn: githubAccountsApi.repositories,
+    staleTime: STALE_TIME_CONFIG.staleTime,
     enabled: isConnected && isNotNil(globalProps.githubAppInstallationId)
-  }));
+  });
 };
 
+var Header = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/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__*/jsx(Github, {
+      size: 16
+    }), /*#__PURE__*/jsx(Typography, {
+      style: "h4",
+      children: t("neetoGithub.github")
+    })]
+  });
+});
+
 var Configure = withT(function (_ref) {
   var t = _ref.t,
     isConnected = _ref.isConnected,
     installationUrl = _ref.installationUrl;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-text-gray-900 font-sans text-sm font-normal leading-6 antialiased"
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "mt-1 text-indigo-600 xl:mt-3",
-    href: installationUrl,
-    icon: isConnected ? Settings : Plus,
-    iconPosition: "left",
-    iconSize: 20,
-    size: "small",
-    style: "text"
-  }, isConnected ? t("neetoGithub.configureAccount") : t("neetoGithub.connectAccount")));
-});
-
-var Header = withT(function (_ref) {
-  var t = _ref.t;
-  return /*#__PURE__*/React.createElement("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"
-  }, /*#__PURE__*/React.createElement(Github, {
-    size: 16
-  }), /*#__PURE__*/React.createElement(Typography, {
-    style: "h4"
-  }, t("neetoGithub.github")));
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-ui-text-gray-900 flex-shrink-0 font-sans text-sm font-normal leading-6 antialiased",
+    children: /*#__PURE__*/jsx(Button, {
+      href: installationUrl,
+      icon: isConnected ? Settings : Plus,
+      iconPosition: "left",
+      iconSize: 20,
+      size: "small",
+      style: "link",
+      children: isConnected ? t("neetoGithub.configureAccount") : t("neetoGithub.connectAccount")
+    })
+  });
 });
 
 var List$1 = withT(function (_ref) {
   var t = _ref.t,
-    accounts = _ref.accounts;
-  return 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__*/React.createElement("div", {
-      className: "neeto-ui-border-gray-300 flex w-full items-center space-x-2 border-b border-l-0 border-r-0 border-t-0 border-solid p-2",
-      key: id
-    }, type === "Organization" ? /*#__PURE__*/React.createElement(Building, {
-      className: "neeto-ui-text-gray-600",
-      size: 16
-    }) : /*#__PURE__*/React.createElement(User, {
-      className: "neeto-ui-text-gray-600",
-      size: 16
-    }), /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-text-gray-900",
-      style: "body2"
-    }, "@", name), /*#__PURE__*/React.createElement("img", {
-      alt: name,
-      className: "neeto-ui-rounded-full h-4 w-4",
-      src: avatarUrl
-    }), /*#__PURE__*/React.createElement(Button, {
-      className: "text-indigo-600",
-      icon: CannedResponses,
-      iconPosition: "left",
-      iconSize: 16,
-      size: "small",
-      style: "text",
-      onClick: function onClick() {
-        return window.open(profileUrl, "_blank");
-      }
-    }), /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-text-gray-900 mx-2 text-lg",
-      component: "span",
-      style: "h2"
-    }, "\u2022"), /*#__PURE__*/React.createElement(Typography, {
-      style: "body2"
-    }, t("neetoGithub.countOf.repos", {
-      count: count
-    })));
+    accounts = _ref.accounts,
+    isConnected = _ref.isConnected,
+    installationUrl = _ref.installationUrl,
+    isPane = _ref.isPane;
+  return /*#__PURE__*/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__*/jsxs("div", {
+        className: "flex w-full items-center space-x-2",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex items-center gap-1",
+          children: [type === "Organization" ? /*#__PURE__*/jsx(Building, {
+            className: "neeto-ui-text-gray-600",
+            size: 24
+          }) : /*#__PURE__*/jsx(Avatar, {
+            size: "small",
+            user: {
+              imageUrl: avatarUrl
+            }
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-800",
+            style: "body2",
+            children: /*#__PURE__*/jsx(Button, {
+              className: "neeto-ui-text-gray-800",
+              label: "@".concat(name),
+              style: "link",
+              onClick: function onClick() {
+                return window.open(profileUrl, "_blank");
+              }
+            })
+          })]
+        }), /*#__PURE__*/jsx("span", {
+          className: "neeto-ui-bg-gray-800 neeto-ui-rounded-full h-1 w-1"
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "neeto-ui-text-black",
+          style: "body2",
+          children: t("neetoGithub.countOf.repos", {
+            count: count
+          })
+        })]
+      }, id);
+    }), /*#__PURE__*/jsx(Configure, {
+      installationUrl: installationUrl,
+      isConnected: isConnected
+    })]
   });
 });
 
@@ -179,21 +1016,22 @@ var Accounts = function Accounts(_ref) {
     isConnected = _ref.isConnected,
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames("flex w-full flex-col border border-solid border-transparent px-0 py-2", {
-      "2xl:max-w-sm 2xl:px-8": isPane,
-      "xl:max-w-sm xl:px-8": !isPane
+  return /*#__PURE__*/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
+    }),
+    children: /*#__PURE__*/jsxs("div", {
+      className: "mb-2",
+      children: [/*#__PURE__*/jsx(Header, {}), /*#__PURE__*/jsx(List$1, {
+        accounts: accounts,
+        installationUrl: installationUrl,
+        isConnected: isConnected,
+        isPane: isPane,
+        onConnect: onConnect
+      })]
     })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "mb-2"
-  }, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(List$1, {
-    accounts: accounts,
-    isConnected: isConnected
-  }), /*#__PURE__*/React.createElement(Configure, {
-    installationUrl: installationUrl,
-    isConnected: isConnected,
-    onConnect: onConnect
-  })));
+  });
 };
 
 function _arrayWithHoles(arr) {
@@ -255,32 +1093,36 @@ var NoRepositories = withT(function (_ref) {
   var t = _ref.t,
     installationUrl = _ref.installationUrl,
     troubleshootUrl = _ref.troubleshootUrl;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center justify-center py-6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "mx-auto flex w-full max-w-sm flex-col items-center justify-center space-y-4 py-4 text-center"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, t("neetoGithub.noReposDescription")), /*#__PURE__*/React.createElement(Button, {
-    href: installationUrl,
-    icon: Github,
-    iconPosition: "left",
-    label: t("neetoGithub.connectRepository"),
-    size: "medium",
-    style: "primary"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "text-xs"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: t("neetoGithub.troubleshoot"),
-    components: {
-      troubleshootLink: /*#__PURE__*/React.createElement("a", {
-        className: "text-indigo-600 underline",
-        href: troubleshootUrl,
-        rel: "noopener noreferrer",
-        target: "_blank"
-      })
-    }
-  }))));
+  return /*#__PURE__*/jsx("div", {
+    className: "flex items-center justify-center py-6",
+    children: /*#__PURE__*/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__*/jsx(Typography, {
+        style: "body2",
+        children: t("neetoGithub.noReposDescription")
+      }), /*#__PURE__*/jsx(Button, {
+        href: installationUrl,
+        icon: Github,
+        iconPosition: "left",
+        label: t("neetoGithub.connectRepository"),
+        size: "medium",
+        style: "primary"
+      }), /*#__PURE__*/jsx("div", {
+        className: "text-xs",
+        children: /*#__PURE__*/jsx(Trans, {
+          i18nKey: t("neetoGithub.troubleshoot"),
+          components: {
+            troubleshootLink: /*#__PURE__*/jsx("a", {
+              className: "text-indigo-600 underline",
+              href: troubleshootUrl,
+              rel: "noopener noreferrer",
+              target: "_blank"
+            })
+          }
+        })
+      })]
+    })
+  });
 });
 
 var RepositoryTile = function RepositoryTile(_ref) {
@@ -297,38 +1139,43 @@ var RepositoryTile = function RepositoryTile(_ref) {
     fullName = repository.fullName,
     isPrivate = repository.isPrivate,
     updatedAt = repository.updatedAt;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-border-gray-300 flex items-center justify-between border-b border-solid py-3 pl-5 pr-3 last:border-b-0",
-    key: id
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "width-calc flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Github, {
-    size: 16
-  }), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, fullName), isPrivate && /*#__PURE__*/React.createElement(Lock, {
-    size: 16
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "hidden md:inline-block"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-900 mr-2 text-lg",
-    component: "span",
-    style: "h2"
-  }, "\u2022"), /*#__PURE__*/React.createElement(DateFormat.FromNow, {
-    date: updatedAt
-  }))), /*#__PURE__*/React.createElement(Button, {
-    disabled: isConnecting,
-    loading: isLoading,
-    style: "primary",
-    type: "button",
-    onClick: function onClick() {
-      return onConnect({
-        repoType: "private",
-        repository: repository,
-        setIsLoading: setIsLoading
-      });
-    }
-  }, t("neetoGithub.connect")));
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-ui-border-gray-300 flex flex-col justify-between gap-3 border-b border-solid py-3 pl-3 pr-3 last:border-b-0 md:flex-row md:items-center md:pl-5",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "width-calc flex items-center space-x-2",
+      children: [/*#__PURE__*/jsx(Github, {
+        className: "flex-shrink-0",
+        size: 16
+      }), /*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        children: fullName
+      }), isPrivate && /*#__PURE__*/jsx(Lock, {
+        className: "flex-shrink-0",
+        size: 16
+      }), /*#__PURE__*/jsxs("div", {
+        className: "hidden lg:inline-block",
+        children: [/*#__PURE__*/jsx("span", {
+          className: "neeto-ui-bg-gray-800 neeto-ui-rounded-full h-1 w-1"
+        }), /*#__PURE__*/jsx(DateFormat.FromNow, {
+          date: updatedAt
+        })]
+      })]
+    }), /*#__PURE__*/jsx(Button, {
+      className: "w-max",
+      disabled: isConnecting,
+      loading: isLoading,
+      style: "primary",
+      type: "button",
+      onClick: function onClick() {
+        return onConnect({
+          repoType: "private",
+          repository: repository,
+          setIsLoading: setIsLoading
+        });
+      },
+      children: t("neetoGithub.connect")
+    })]
+  }, id);
 };
 
 var List = withT(function (_ref) {
@@ -339,48 +1186,54 @@ var List = withT(function (_ref) {
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl,
     troubleshootUrl = _ref.troubleshootUrl;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "h-full overflow-y-scroll px-6 pb-6"
-  }, isPresent(repositories) ? /*#__PURE__*/React.createElement("div", {
-    className: classNames("neeto-ui-border-gray-300 neeto-ui-rounded-md flex flex-col items-center justify-center border", {
-      "h-auto": isPresent(filteredRepositories),
-      "h-full": !isPresent(filteredRepositories)
+  return /*#__PURE__*/jsx("div", {
+    className: "h-full overflow-y-scroll px-4 pb-4 md:px-6 md:pb-6",
+    children: isPresent(repositories) ? /*#__PURE__*/jsx("div", {
+      className: classnames("neeto-ui-border-gray-300 neeto-ui-rounded-md flex flex-col items-center justify-center border", {
+        "h-auto": isPresent(filteredRepositories),
+        "h-full": !isPresent(filteredRepositories)
+      }),
+      children: /*#__PURE__*/jsx("div", {
+        className: "m-0 h-full w-full p-0",
+        children: isPresent(filteredRepositories) ? filteredRepositories.map(function (repository, index) {
+          return /*#__PURE__*/createElement(RepositoryTile, {
+            isConnecting: isConnecting,
+            onConnect: onConnect,
+            repository: repository,
+            key: index
+          });
+        }) : /*#__PURE__*/jsx(Typography, {
+          className: "flex h-full w-full items-center justify-center",
+          style: "body2",
+          children: t("neetoGithub.noRepos")
+        })
+      })
+    }) : /*#__PURE__*/jsx(NoRepositories, {
+      installationUrl: installationUrl,
+      troubleshootUrl: troubleshootUrl
     })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "m-0 h-full w-full p-0"
-  }, isPresent(filteredRepositories) ? filteredRepositories.map(function (repository, index) {
-    return /*#__PURE__*/React.createElement(RepositoryTile, {
-      isConnecting: isConnecting,
-      onConnect: onConnect,
-      repository: repository,
-      key: index
-    });
-  }) : /*#__PURE__*/React.createElement(Typography, {
-    className: "flex h-full w-full items-center justify-center",
-    style: "body2"
-  }, t("neetoGithub.noRepos")))) : /*#__PURE__*/React.createElement(NoRepositories, {
-    installationUrl: installationUrl,
-    troubleshootUrl: troubleshootUrl
-  }));
+  });
 });
 
 var NotConnected = withT(function (_ref) {
   var t = _ref.t,
     installationUrl = _ref.installationUrl;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full max-w-sm flex-col items-center justify-center space-y-4 text-center"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, t("neetoGithub.notConnectedDescription", {
-    appName: globalProps.appName
-  })), /*#__PURE__*/React.createElement(Button, {
-    href: installationUrl,
-    icon: Github,
-    iconPosition: "left",
-    label: t("neetoGithub.connectGithub"),
-    size: "medium",
-    style: "primary"
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex w-full max-w-sm flex-col items-center justify-center space-y-4 text-center",
+    children: [/*#__PURE__*/jsx(Typography, {
+      style: "body2",
+      children: t("neetoGithub.notConnectedDescription", {
+        appName: globalProps.appName
+      })
+    }), /*#__PURE__*/jsx(Button, {
+      href: installationUrl,
+      icon: Github,
+      iconPosition: "left",
+      label: t("neetoGithub.connectGithub"),
+      size: "medium",
+      style: "primary"
+    })]
+  });
 });
 
 var Private = function Private(_ref) {
@@ -407,38 +1260,47 @@ var Private = function Private(_ref) {
     });
     setFilteredRepositories(filteredRepositories);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "connect-repo flex h-full flex-col"
-  }, isConnected ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "space-y-3 p-6"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "flex-shrink-0 text-lg font-medium",
-    style: "h2"
-  }, t("neetoGithub.connectARepo")), isPresent(repositories) && /*#__PURE__*/React.createElement(Search, {
-    onSearch: onSearch,
-    className: "w-full",
-    unlimitedChars: false,
-    suffix: /*#__PURE__*/React.createElement(Typography, {
-      style: "body2"
-    }, t("neetoGithub.countOf.repos", {
-      count: filteredRepositories.length
-    }))
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex min-h-0 w-full flex-grow flex-col space-y-6"
-  }, /*#__PURE__*/React.createElement(List, {
-    filteredRepositories: filteredRepositories,
-    installationUrl: installationUrl,
-    isConnecting: isConnecting,
-    onConnect: onConnect,
-    repositories: repositories,
-    troubleshootUrl: troubleshootUrl
-  }))) : /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-text-gray-900 flex-grow font-sans text-sm font-normal leading-6 antialiased"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full flex-col items-center justify-center p-4"
-  }, /*#__PURE__*/React.createElement(NotConnected, {
-    installationUrl: installationUrl
-  }))));
+  return /*#__PURE__*/jsx("div", {
+    className: "connect-repo flex h-full flex-col",
+    children: isConnected ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "space-y-3 p-4 md:p-6",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "flex-shrink-0 text-lg font-medium",
+          style: "h2",
+          children: t("neetoGithub.connectARepo")
+        }), isPresent(repositories) && /*#__PURE__*/jsx(Search, {
+          onSearch: onSearch,
+          className: "w-full",
+          unlimitedChars: false,
+          suffix: /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            children: t("neetoGithub.countOf.repos", {
+              count: filteredRepositories.length
+            })
+          })
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex min-h-0 w-full flex-grow flex-col space-y-6",
+        children: /*#__PURE__*/jsx(List, {
+          filteredRepositories: filteredRepositories,
+          installationUrl: installationUrl,
+          isConnecting: isConnecting,
+          onConnect: onConnect,
+          repositories: repositories,
+          troubleshootUrl: troubleshootUrl
+        })
+      })]
+    }) : /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-text-gray-900 flex-grow font-sans text-sm font-normal leading-6 antialiased",
+      children: /*#__PURE__*/jsx("div", {
+        className: "flex h-full flex-col items-center justify-center p-4",
+        children: /*#__PURE__*/jsx(NotConnected, {
+          installationUrl: installationUrl
+        })
+      })
+    })
+  });
 };
 
 var Repositories = function Repositories(_ref) {
@@ -447,17 +1309,22 @@ var Repositories = function Repositories(_ref) {
     repositories = _ref.repositories,
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl,
-    troubleshootUrl = _ref.troubleshootUrl;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-rounded-md neeto-ui-border-gray-300 h-full w-full space-y-6 border border-solid"
-  }, /*#__PURE__*/React.createElement(Private, {
-    installationUrl: installationUrl,
-    isConnected: isConnected,
-    isConnecting: isConnecting,
-    onConnect: onConnect,
-    repositories: repositories,
-    troubleshootUrl: troubleshootUrl
-  }));
+    troubleshootUrl = _ref.troubleshootUrl,
+    isPane = _ref.isPane;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames("neeto-ui-rounded-md neeto-ui-border-gray-300 h-full w-full space-y-6 border border-solid", {
+      "order-2": isPane,
+      "order-1": !isPane
+    }),
+    children: /*#__PURE__*/jsx(Private, {
+      installationUrl: installationUrl,
+      isConnected: isConnected,
+      isConnecting: isConnecting,
+      onConnect: onConnect,
+      repositories: repositories,
+      troubleshootUrl: troubleshootUrl
+    })
+  });
 };
 
 var NeetoGithubNanoContainer = function NeetoGithubNanoContainer(_ref) {
@@ -493,31 +1360,34 @@ var NeetoGithubNanoContainer = function NeetoGithubNanoContainer(_ref) {
   var accounts = shouldFetchRepositories ? containerAccounts : paneAccounts;
   var isLoading = shouldFetchRepositories ? isContainerLoading : isPaneLoading;
   if (isLoading) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex h-full w-full flex-col items-center"
-    }, /*#__PURE__*/React.createElement(PageLoader, {
-      text: t("neetoGithub.fetchingRepos")
-    }));
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames("flex min-h-0 w-full flex-grow flex-col-reverse", {
-      "2xl:flex-row": isPane,
-      "xl:flex-row": !isPane
-    })
-  }, /*#__PURE__*/React.createElement(Repositories, {
-    installationUrl: installationUrl,
-    isConnected: isConnected,
-    isConnecting: isConnecting,
-    onConnect: onConnect,
-    repositories: repositories,
-    troubleshootUrl: troubleshootUrl
-  }), /*#__PURE__*/React.createElement(Accounts, {
-    accounts: accounts,
-    installationUrl: installationUrl,
-    isConnected: isConnected,
-    isPane: isPane,
-    onConnect: onConnect
-  }));
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full flex-col items-center",
+      children: /*#__PURE__*/jsx(PageLoader, {
+        text: t("neetoGithub.fetchingRepos")
+      })
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames("flex min-h-0 w-full flex-grow flex-col", {
+      "flex-col": isPane,
+      "gap-3 md:flex-row md:gap-6": !isPane
+    }),
+    children: [/*#__PURE__*/jsx(Accounts, {
+      accounts: accounts,
+      installationUrl: installationUrl,
+      isConnected: isConnected,
+      isPane: isPane,
+      onConnect: onConnect
+    }), /*#__PURE__*/jsx(Repositories, {
+      installationUrl: installationUrl,
+      isConnected: isConnected,
+      isConnecting: isConnecting,
+      isPane: isPane,
+      onConnect: onConnect,
+      repositories: repositories,
+      troubleshootUrl: troubleshootUrl
+    })]
+  });
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2785,7 +3655,7 @@ var NeetoGithubNanoPane = function NeetoGithubNanoPane(_ref) {
     _ref$troubleshootUrl = _ref.troubleshootUrl,
     troubleshootUrl = _ref$troubleshootUrl === void 0 ? TROUBLESHOOT_URL : _ref$troubleshootUrl,
     _ref$onConnect = _ref.onConnect,
-    onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect,
+    onConnect = _ref$onConnect === void 0 ? noop$1 : _ref$onConnect,
     _ref$projects = _ref.projects,
     projects = _ref$projects === void 0 ? [] : _ref$projects,
     _ref$title = _ref.title,
@@ -2809,31 +3679,37 @@ var NeetoGithubNanoPane = function NeetoGithubNanoPane(_ref) {
     }, projects);
   });
   var paneAccounts = isConnected ? accounts : [];
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     initialFocusRef: initialFocusRef,
     isOpen: isOpen,
     onClose: onClose,
     className: "neeto-github-modal-pane-wrapper",
-    size: "large"
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, isPresent(title) ? title : t("neetoGithub.modal.title"))), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(NeetoGithubNanoContainer, {
-    installationUrl: installationUrl,
-    isConnected: isConnected,
-    isConnecting: isConnecting,
-    isPaneLoading: isPaneLoading,
-    onConnect: onConnect,
-    paneAccounts: paneAccounts,
-    paneRepositories: paneRepositories,
-    troubleshootUrl: troubleshootUrl,
-    isPane: true,
-    shouldFetchRepositories: false
-  })));
+    size: "large",
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: isPresent(title) ? title : t("neetoGithub.modal.title")
+      })
+    }), /*#__PURE__*/jsx(Pane.Body, {
+      children: /*#__PURE__*/jsx(NeetoGithubNanoContainer, {
+        installationUrl: installationUrl,
+        isConnected: isConnected,
+        isConnecting: isConnecting,
+        isPaneLoading: isPaneLoading,
+        onConnect: onConnect,
+        paneAccounts: paneAccounts,
+        paneRepositories: paneRepositories,
+        troubleshootUrl: troubleshootUrl,
+        isPane: true,
+        shouldFetchRepositories: false
+      })
+    })]
+  });
 };
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===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 = ".width-calc{width:calc(100% - 82px)}.neeto-github-modal-pane-wrapper{width:min(75%,1280px)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3JlcG9zaXRvcnktdGlsZS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3BhbmUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxZQUNFLHVCQ0NGLENDRkEsaUNBQ0UscUJES0YiLCJzb3VyY2VzQ29udGVudCI6WyIud2lkdGgtY2FsYyB7XG4gIHdpZHRoOiBjYWxjKDEwMCUgLSA4MnB4KTtcbn1cbiIsIi53aWR0aC1jYWxjIHtcbiAgd2lkdGg6IGNhbGMoMTAwJSAtIDgycHgpO1xufVxuXG4ubmVldG8tZ2l0aHViLW1vZGFsLXBhbmUtd3JhcHBlciB7XG4gIHdpZHRoOiBtaW4oNzUlLCAxMjgwcHgpO1xufSIsIi5uZWV0by1naXRodWItbW9kYWwtcGFuZS13cmFwcGVyIHtcbiAgd2lkdGg6IG1pbig3NSUsIDEyODBweCk7XG59XG4iXX0= */";
+var css = ".width-calc{width:100%}@media (min-width:768px){.width-calc{width:calc(100% - 82px)}}.neeto-github-modal-pane-wrapper{width:min(100%,1280px)}@media (min-width:768px){.neeto-github-modal-pane-wrapper{width:min(90%,1280px)}}@media (min-width:1024px){.neeto-github-modal-pane-wrapper{width:min(60%,1280px)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3JlcG9zaXRvcnktdGlsZS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3BhbmUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxZQUNFLFVDQ0YsQ0RDRSx5QkFIRixZQUlJLHVCQ0VGLENBQ0YsQ0NQQSxpQ0FDRSxzQkRVRixDQ1JFLHlCQUhGLGlDQUlJLHFCRFdGLENBQ0YsQ0NURSwwQkFQRixpQ0FRSSxxQkRZRixDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiLndpZHRoLWNhbGMge1xuICB3aWR0aDogMTAwJTtcblxuICBAc2NyZWVuIG1kIHtcbiAgICB3aWR0aDogY2FsYygxMDAlIC0gODJweCk7XG4gIH1cbn1cbiIsIi53aWR0aC1jYWxjIHtcbiAgd2lkdGg6IDEwMCU7XG59XG5Ac2NyZWVuIG1kIHtcbiAgLndpZHRoLWNhbGMge1xuICAgIHdpZHRoOiBjYWxjKDEwMCUgLSA4MnB4KTtcbiAgfVxufVxuXG4ubmVldG8tZ2l0aHViLW1vZGFsLXBhbmUtd3JhcHBlciB7XG4gIHdpZHRoOiBtaW4oMTAwJSwgMTI4MHB4KTtcbn1cbkBzY3JlZW4gbWQge1xuICAubmVldG8tZ2l0aHViLW1vZGFsLXBhbmUtd3JhcHBlciB7XG4gICAgd2lkdGg6IG1pbig5MCUsIDEyODBweCk7XG4gIH1cbn1cbkBzY3JlZW4gbGcge1xuICAubmVldG8tZ2l0aHViLW1vZGFsLXBhbmUtd3JhcHBlciB7XG4gICAgd2lkdGg6IG1pbig2MCUsIDEyODBweCk7XG4gIH1cbn0iLCIubmVldG8tZ2l0aHViLW1vZGFsLXBhbmUtd3JhcHBlciB7XG4gIHdpZHRoOiBtaW4oMTAwJSwgMTI4MHB4KTtcblxuICBAc2NyZWVuIG1kIHtcbiAgICB3aWR0aDogbWluKDkwJSwgMTI4MHB4KTtcbiAgfVxuXG4gIEBzY3JlZW4gbGcge1xuICAgIHdpZHRoOiBtaW4oNjAlLCAxMjgwcHgpO1xuICB9XG59XG4iXX0= */";
 n(css,{});
 
 export { NeetoGithubNanoContainer, NeetoGithubNanoPane };