@primer/components 0.0.0-2021111171525 → 0.0.0-20211111716

package/lib/hooks/useOnEscapePress.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnEscapePress = void 0;
+
+var _react = require("react");
+
+const handlers = [];
+/**
+ * Calls all handlers in reverse order
+ * @param event The KeyboardEvent generated by the Escape keydown.
+ */
+
+function handleEscape(event) {
+  if (event.key === 'Escape' && !event.defaultPrevented) {
+    for (let i = handlers.length - 1; i >= 0; --i) {
+      handlers[i](event); // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+
+      if (event.defaultPrevented) {
+        break;
+      }
+    }
+  }
+}
+/**
+ * Sets up a `keydown` listener on `window.document`. If
+ * 1) The pressed key is "Escape", and
+ * 2) The event has not had `.preventDefault()` called
+ * The given callback will be executed.
+ *
+ * Note: If multiple `useOnEscapePress` hooks are active simultaneously, the
+ * callbacks will occur in reverse order. In other words, if a parent component
+ * and a child component both call `useOnEscapePress`, when the user presses
+ * Escape, the child component's callback will execute, followed by the parent's
+ * callback. Each callback has the chance to call `.preventDefault()` on the
+ * event to prevent further callbacks.
+ *
+ * @param callback {(e: KeyboardEvent) => void} The callback that gets executed
+ * when the Escape key is pressed. The KeyboardEvent generated by the Escape
+ * keypress is passed as the only argument.
+ *
+ * @param callbackDependencies {React.DependencyList} The dependencies of the given
+ * `onEscape` callback for memoization. Omit this param if the callback is already
+ * memoized. See `React.useCallback` for more info on memoization.
+ */
+
+
+const useOnEscapePress = (onEscape, callbackDependencies = [onEscape]) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const escapeCallback = (0, _react.useCallback)(onEscape, callbackDependencies);
+  (0, _react.useEffect)(() => {
+    if (handlers.length === 0) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    handlers.push(escapeCallback);
+    return () => {
+      handlers.splice(handlers.findIndex(h => h === escapeCallback), 1);
+
+      if (handlers.length === 0) {
+        document.removeEventListener('keydown', handleEscape);
+      }
+    };
+  }, [escapeCallback]);
+};
+
+exports.useOnEscapePress = useOnEscapePress;

package/lib/hooks/useOnOutsideClick.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type TouchOrMouseEvent = MouseEvent | TouchEvent;
+export declare type UseOnOutsideClickSettings = {
+    containerRef: React.RefObject<HTMLDivElement>;
+    ignoreClickRefs?: React.RefObject<HTMLElement>[];
+    onClickOutside: (e: TouchOrMouseEvent) => void;
+};
+export declare const useOnOutsideClick: ({ containerRef, ignoreClickRefs, onClickOutside }: UseOnOutsideClickSettings) => void;

package/lib/hooks/useOnOutsideClick.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnOutsideClick = void 0;
+
+var _react = require("react");
+
+// Because events are handled at the document level, we provide a mechanism for early return.
+const stopPropagation = true;
+/**
+ * Calls all handlers in reverse order
+ * @param event The MouseEvent generated by the click event.
+ */
+
+function handleClick(event) {
+  if (!event.defaultPrevented) {
+    for (const handler of Object.values(registry).reverse()) {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (handler(event) === stopPropagation || event.defaultPrevented) {
+        break;
+      }
+    }
+  }
+}
+
+const registry = {};
+
+function register(id, handler) {
+  registry[id] = handler;
+}
+
+function deregister(id) {
+  delete registry[id];
+} // For auto-incrementing unique identifiers for registered handlers.
+
+
+let handlerId = 0;
+
+const useOnOutsideClick = ({
+  containerRef,
+  ignoreClickRefs,
+  onClickOutside
+}) => {
+  const id = (0, _react.useMemo)(() => handlerId++, []);
+  const handler = (0, _react.useCallback)(event => {
+    var _containerRef$current;
+
+    // don't call click handler if the mouse event was triggered by an auxiliary button (right click/wheel button/etc)
+    if (event instanceof MouseEvent && event.button > 0) {
+      return stopPropagation;
+    } // don't call handler if the click happened inside of the container
+
+
+    if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
+      return stopPropagation;
+    } // don't call handler if click happened on an ignored ref
+
+
+    if (ignoreClickRefs && ignoreClickRefs.some(({
+      current
+    }) => current === null || current === void 0 ? void 0 : current.contains(event.target))) {
+      return stopPropagation;
+    }
+
+    onClickOutside(event);
+  }, [containerRef, ignoreClickRefs, onClickOutside]);
+  (0, _react.useEffect)(() => {
+    if (Object.keys(registry).length === 0) {
+      // use capture to ensure we get all events
+      document.addEventListener('mousedown', handleClick, {
+        capture: true
+      });
+    }
+
+    register(id, handler);
+    return () => {
+      deregister(id);
+
+      if (Object.keys(registry).length === 0) {
+        document.removeEventListener('mousedown', handleClick, {
+          capture: true
+        });
+      }
+    };
+  }, [id, handler]);
+};
+
+exports.useOnOutsideClick = useOnOutsideClick;

package/lib/hooks/useOpenAndCloseFocus.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type UseOpenAndCloseFocusSettings = {
+    initialFocusRef?: React.RefObject<HTMLElement>;
+    containerRef: React.RefObject<HTMLElement>;
+    returnFocusRef: React.RefObject<HTMLElement>;
+    preventFocusOnOpen?: boolean;
+};
+export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen }: UseOpenAndCloseFocusSettings): void;

package/lib/hooks/useOpenAndCloseFocus.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOpenAndCloseFocus = useOpenAndCloseFocus;
+
+var _react = require("react");
+
+var _iterateFocusableElements = require("../utils/iterateFocusableElements");
+
+function useOpenAndCloseFocus({
+  initialFocusRef,
+  returnFocusRef,
+  containerRef,
+  preventFocusOnOpen
+}) {
+  (0, _react.useEffect)(() => {
+    if (preventFocusOnOpen) {
+      return;
+    }
+
+    const returnRef = returnFocusRef.current;
+
+    if (initialFocusRef && initialFocusRef.current) {
+      initialFocusRef.current.focus();
+    } else if (containerRef.current) {
+      const firstItem = (0, _iterateFocusableElements.iterateFocusableElements)(containerRef.current).next().value;
+      firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+    }
+
+    return function () {
+      returnRef === null || returnRef === void 0 ? void 0 : returnRef.focus();
+    };
+  }, [initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen]);
+}

package/lib/hooks/useOverlay.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { TouchOrMouseEvent } from './useOnOutsideClick';
+export declare type UseOverlaySettings = {
+    ignoreClickRefs?: React.RefObject<HTMLElement>[];
+    initialFocusRef?: React.RefObject<HTMLElement>;
+    returnFocusRef: React.RefObject<HTMLElement>;
+    onEscape: (e: KeyboardEvent) => void;
+    onClickOutside: (e: TouchOrMouseEvent) => void;
+    overlayRef?: React.RefObject<HTMLDivElement>;
+    preventFocusOnOpen?: boolean;
+};
+export declare type OverlayReturnProps = {
+    ref: React.RefObject<HTMLDivElement>;
+};
+export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen }: UseOverlaySettings) => OverlayReturnProps;

package/lib/hooks/useOverlay.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverlay = void 0;
+
+var _useOnOutsideClick = require("./useOnOutsideClick");
+
+var _useOpenAndCloseFocus = require("./useOpenAndCloseFocus");
+
+var _useOnEscapePress = require("./useOnEscapePress");
+
+var _useProvidedRefOrCreate = require("./useProvidedRefOrCreate");
+
+const useOverlay = ({
+  overlayRef: _overlayRef,
+  returnFocusRef,
+  initialFocusRef,
+  onEscape,
+  ignoreClickRefs,
+  onClickOutside,
+  preventFocusOnOpen
+}) => {
+  const overlayRef = (0, _useProvidedRefOrCreate.useProvidedRefOrCreate)(_overlayRef);
+  (0, _useOpenAndCloseFocus.useOpenAndCloseFocus)({
+    containerRef: overlayRef,
+    returnFocusRef,
+    initialFocusRef,
+    preventFocusOnOpen
+  });
+  (0, _useOnOutsideClick.useOnOutsideClick)({
+    containerRef: overlayRef,
+    ignoreClickRefs,
+    onClickOutside
+  });
+  (0, _useOnEscapePress.useOnEscapePress)(onEscape);
+  return {
+    ref: overlayRef
+  };
+};
+
+exports.useOverlay = useOverlay;

package/lib/hooks/useProvidedRefOrCreate.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * There are some situations where we only want to create a new ref if one is not provided to a component
+ * or hook as a prop. However, due to the `rules-of-hooks`, we cannot conditionally make a call to `React.useRef`
+ * only in the situations where the ref is not provided as a prop.
+ * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
+ * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
+ * @type TRef The type of the RefObject which should be created.
+ */
+export declare function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef>): React.RefObject<TRef>;

package/lib/hooks/useProvidedRefOrCreate.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProvidedRefOrCreate = useProvidedRefOrCreate;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * There are some situations where we only want to create a new ref if one is not provided to a component
+ * or hook as a prop. However, due to the `rules-of-hooks`, we cannot conditionally make a call to `React.useRef`
+ * only in the situations where the ref is not provided as a prop.
+ * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
+ * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
+ * @type TRef The type of the RefObject which should be created.
+ */
+function useProvidedRefOrCreate(providedRef) {
+  const createdRef = _react.default.useRef(null);
+
+  return providedRef !== null && providedRef !== void 0 ? providedRef : createdRef;
+}

package/lib/hooks/useProvidedStateOrCreate.d.ts

@@ -0,0 +1,10 @@
+/**
+ * There are some situations where we want to give users the option to control state externally with their own state handlers
+ * or default to using internal state handlers. Because of the 'rules-of-hooks', we cannot conditionally make a call to `React.useState`
+ * only in the situations where the state is not provided as a prop.
+ * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
+ * @param externalState The state to use - if undefined, will use the state from a call to React.useState
+ * @param setExternalState The setState to use - if undefined, will use the setState from a call to React.useState
+ * @param defaultState The defaultState to use, if using internal state.
+ */
+export declare function useProvidedStateOrCreate<T>(externalState: T | undefined, setExternalState: ((s: T) => void) | undefined, defaultState: T): readonly [T, (s: T) => void];

package/lib/hooks/useProvidedStateOrCreate.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProvidedStateOrCreate = useProvidedStateOrCreate;
+
+var _react = require("react");
+
+/**
+ * There are some situations where we want to give users the option to control state externally with their own state handlers
+ * or default to using internal state handlers. Because of the 'rules-of-hooks', we cannot conditionally make a call to `React.useState`
+ * only in the situations where the state is not provided as a prop.
+ * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
+ * @param externalState The state to use - if undefined, will use the state from a call to React.useState
+ * @param setExternalState The setState to use - if undefined, will use the setState from a call to React.useState
+ * @param defaultState The defaultState to use, if using internal state.
+ */
+function useProvidedStateOrCreate(externalState, setExternalState, defaultState) {
+  const [internalState, setInternalState] = (0, _react.useState)(defaultState);
+  const state = externalState !== null && externalState !== void 0 ? externalState : internalState;
+  const setState = (0, _react.useCallback)(s => {
+    setInternalState(s);
+    if (setExternalState) setExternalState(s);
+  }, [setExternalState]);
+  return [state, setState];
+}

package/lib/hooks/useRenderForcingRef.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * There are certain situations where a ref might be set after the current render cycle for a
+ * component has finished.  e.g. a forward ref from a conditionally rendered child component.
+ * In these situations, we need to force a re-render, which is done here by the useState hook.
+ * @type TRef The type of the RefObject which should be created.
+ */
+export declare function useRenderForcingRef<TRef>(): readonly [RefObject<TRef>, (newRef: TRef | null) => void];

package/lib/hooks/useRenderForcingRef.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRenderForcingRef = useRenderForcingRef;
+
+var _react = require("react");
+
+/**
+ * There are certain situations where a ref might be set after the current render cycle for a
+ * component has finished.  e.g. a forward ref from a conditionally rendered child component.
+ * In these situations, we need to force a re-render, which is done here by the useState hook.
+ * @type TRef The type of the RefObject which should be created.
+ */
+function useRenderForcingRef() {
+  const [refCurrent, setRefCurrent] = (0, _react.useState)(null);
+  const ref = (0, _react.useRef)(null);
+  ref.current = refCurrent;
+  const setRef = (0, _react.useCallback)(newRef => {
+    ref.current = newRef;
+    setRefCurrent(newRef);
+  }, [ref]);
+  return [ref, setRef];
+}

package/lib/hooks/useResizeObserver.d.ts

@@ -0,0 +1 @@
+export declare function useResizeObserver(callback: () => void): void;

package/lib/hooks/useResizeObserver.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResizeObserver = useResizeObserver;
+
+var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../utils/useIsomorphicLayoutEffect"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function useResizeObserver(callback) {
+  (0, _useIsomorphicLayoutEffect.default)(() => {
+    const observer = new window.ResizeObserver(() => callback());
+    observer.observe(document.documentElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback]);
+}

package/lib/hooks/useSafeTimeout.d.ts

@@ -0,0 +1,12 @@
+declare type SetTimeout = (handler: TimerHandler, timeout?: number, ...args: unknown[]) => number;
+declare type ClearTimeout = (id: number) => void;
+/**
+ * Safely call `setTimeout` and `clearTimeout` within a component.
+ *
+ * This hook ensures that all timeouts are cleared when the component unmounts.
+ */
+export default function useSafeTimeout(): {
+    safeSetTimeout: SetTimeout;
+    safeClearTimeout: ClearTimeout;
+};
+export {};

package/lib/hooks/useSafeTimeout.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSafeTimeout;
+
+var _react = require("react");
+
+/**
+ * Safely call `setTimeout` and `clearTimeout` within a component.
+ *
+ * This hook ensures that all timeouts are cleared when the component unmounts.
+ */
+function useSafeTimeout() {
+  const timers = (0, _react.useRef)(new Set());
+  const safeSetTimeout = (0, _react.useCallback)((handler, timeout, ...args) => {
+    const id = window.setTimeout(handler, timeout, ...args);
+    timers.current.add(id);
+    return id;
+  }, []);
+  const safeClearTimeout = (0, _react.useCallback)(id => {
+    clearTimeout(id);
+    timers.current.delete(id);
+  }, []);
+  (0, _react.useEffect)(() => {
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      for (const id of timers.current) {
+        clearTimeout(id);
+      }
+    };
+  }, []);
+  return {
+    safeSetTimeout,
+    safeClearTimeout
+  };
+}

package/lib/hooks/useScrollFlash.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * This hook will flash the scrollbars for a ref of a container that has scrollable overflow
+ * @param scrollContainerRef The ref of the scrollable content
+ */
+export default function useScrollFlash(scrollContainerRef: React.RefObject<HTMLElement>): void;

package/lib/hooks/useScrollFlash.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useScrollFlash;
+
+var _react = require("react");
+
+/**
+ * This hook will flash the scrollbars for a ref of a container that has scrollable overflow
+ * @param scrollContainerRef The ref of the scrollable content
+ */
+function useScrollFlash(scrollContainerRef) {
+  // https://adxlv.computer/projects/flash-scrollers/
+  (0, _react.useEffect)(() => {
+    const scrollContainer = scrollContainerRef.current;
+
+    if (!scrollContainer) {
+      return;
+    }
+
+    const currentScroll = scrollContainer.scrollTop;
+    const maxScroll = scrollContainer.scrollHeight;
+    const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1;
+    scrollContainer.scrollTop = altScroll;
+    scrollContainer.scrollTop = currentScroll;
+  }, [scrollContainerRef]);
+}

package/lib/index.d.ts

@@ -0,0 +1,120 @@
+export { default as theme } from './theme';
+export { get as themeGet } from './constants';
+export { default as BaseStyles } from './BaseStyles';
+export type { BaseStylesProps } from './BaseStyles';
+export { default as ThemeProvider, useTheme, useColorSchemeVar } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
+export { default as BorderBox } from './BorderBox';
+export type { BorderBoxProps } from './BorderBox';
+export { default as Box } from './Box';
+export type { BoxProps } from './Box';
+export { default as Flex } from './Flex';
+export type { FlexProps } from './Flex';
+export { default as Grid } from './Grid';
+export type { GridProps } from './Grid';
+export { default as Position, Absolute, Fixed, Relative, Sticky } from './Position';
+export type { PositionProps, AbsoluteProps, FixedProps, RelativeProps, StickyProps } from './Position';
+export { default as useDetails } from './hooks/useDetails';
+export { default as useSafeTimeout } from './hooks/useSafeTimeout';
+export { useOnOutsideClick } from './hooks/useOnOutsideClick';
+export { useOpenAndCloseFocus } from './hooks/useOpenAndCloseFocus';
+export { useOnEscapePress } from './hooks/useOnEscapePress';
+export { useOverlay } from './hooks/useOverlay';
+export { useConfirm } from './Dialog/ConfirmationDialog';
+export { ActionList } from './ActionList';
+export { ActionMenu } from './ActionMenu';
+export type { ActionMenuProps } from './ActionMenu';
+export { default as Autocomplete } from './Autocomplete';
+export type { AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps } from './Autocomplete';
+export { default as Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+export { default as AvatarPair } from './AvatarPair';
+export type { AvatarPairProps } from './AvatarPair';
+export { default as AvatarStack } from './AvatarStack';
+export type { AvatarStackProps } from './AvatarStack';
+export { default as BranchName } from './BranchName';
+export type { BranchNameProps } from './BranchName';
+export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumbs';
+export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
+export { NewButton } from './NewButton';
+export type { NewButtonProps } from './NewButton';
+export type { ButtonProps, ButtonDangerProps, ButtonOutlineProps, ButtonPrimaryProps, ButtonInvisibleProps, ButtonTableListProps, ButtonCloseProps, ButtonGroupProps } from './Button';
+export { default as Caret } from './Caret';
+export type { CaretProps } from './Caret';
+export { default as CircleBadge } from './CircleBadge';
+export type { CircleBadgeProps, CircleBadgeIconProps } from './CircleBadge';
+export { default as CircleOcticon } from './CircleOcticon';
+export type { CircleOcticonProps } from './CircleOcticon';
+export { default as CounterLabel } from './CounterLabel';
+export type { CounterLabelProps } from './CounterLabel';
+export { default as Details } from './Details';
+export type { DetailsProps } from './Details';
+export { default as Dialog } from './Dialog';
+export type { DialogProps, DialogHeaderProps } from './Dialog';
+export { ConfirmationDialog } from './Dialog/ConfirmationDialog';
+export { default as Dropdown } from './Dropdown';
+export type { DropdownProps, DropdownCaretProps, DropdownButtonProps, DropdownItemProps, DropdownMenuProps } from './Dropdown';
+export { DropdownButton, DropdownMenu } from './DropdownMenu';
+export { default as FilteredSearch } from './FilteredSearch';
+export type { FilteredSearchProps } from './FilteredSearch';
+export { default as FilterList } from './FilterList';
+export type { FilterListProps, FilterListItemProps } from './FilterList';
+export { default as Flash } from './Flash';
+export type { FlashProps } from './Flash';
+export { default as FormGroup } from './FormGroup';
+export type { FormGroupProps, FormGroupLabelProps } from './FormGroup';
+export { default as Header } from './Header';
+export type { HeaderProps, HeaderItemProps, HeaderLinkProps } from './Header';
+export { default as Heading } from './Heading';
+export type { HeadingProps } from './Heading';
+export { default as LabelGroup } from './LabelGroup';
+export type { LabelGroupProps } from './LabelGroup';
+export { default as Label } from './Label';
+export type { LabelProps } from './Label';
+export { default as Link } from './Link';
+export type { LinkProps } from './Link';
+export { default as Overlay } from './Overlay';
+export type { OverlayProps } from './Overlay';
+export { default as Pagehead } from './Pagehead';
+export type { PageheadProps } from './Pagehead';
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+export { default as PointerBox } from './PointerBox';
+export type { PointerBoxProps } from './PointerBox';
+export { default as Popover } from './Popover';
+export type { PopoverProps, PopoverContentProps } from './Popover';
+export { default as ProgressBar } from './ProgressBar';
+export type { ProgressBarProps } from './ProgressBar';
+export { default as SelectMenu } from './SelectMenu';
+export type { SelectMenuProps, SelectMenuDividerProps, SelectMenuFilterProps, SelectMenuFooterProps, SelectMenuItemProps, SelectMenuListProps, SelectMenuModalProps, SelectMenuTabsProps, SelectMenuHeaderProps, SelectMenuTabProps, SelectMenuTabPanelProps, SelectMenuLoadingAnimationProps } from './SelectMenu';
+export { default as SideNav } from './SideNav';
+export type { SideNavProps, SideNavLinkProps } from './SideNav';
+export { default as Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+export { default as StateLabel } from './StateLabel';
+export type { StateLabelProps } from './StateLabel';
+export { default as StyledOcticon } from './StyledOcticon';
+export type { StyledOcticonProps } from './StyledOcticon';
+export { default as SubNav } from './SubNav';
+export type { SubNavProps, SubNavLinkProps, SubNavLinksProps } from './SubNav';
+export { default as TabNav } from './TabNav';
+export type { TabNavProps, TabNavLinkProps } from './TabNav';
+export { default as TextInput } from './TextInput';
+export type { TextInputProps } from './TextInput';
+export { default as TextInputWithTokens } from './TextInputWithTokens';
+export type { TextInputWithTokensProps } from './TextInputWithTokens';
+export { default as Text } from './Text';
+export type { TextProps } from './Text';
+export { default as Timeline } from './Timeline';
+export type { TimelineProps, TimelineBadgeProps, TimelineBodyProps, TimelineBreakProps, TimelineItemsProps } from './Timeline';
+export { default as Token, IssueLabelToken, AvatarToken } from './Token';
+export { default as Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+export { default as Truncate } from './Truncate';
+export type { TruncateProps } from './Truncate';
+export { default as UnderlineNav } from './UnderlineNav';
+export type { UnderlineNavProps, UnderlineNavLinkProps } from './UnderlineNav';
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { SSRProvider, useSSRSafeId } from './utils/ssr';