improve component types

hyperglass/ui/components/card/body.tsx

@@ -3,7 +3,7 @@ import { useColorValue } from '~/context';
 
 import type { TCardBody } from './types';
 
-export const CardBody: React.FC<TCardBody> = (props: TCardBody) => {
+export const CardBody = (props: TCardBody): JSX.Element => {
   const { onClick, ...rest } = props;
   const bg = useColorValue('white', 'dark.500');
   const color = useColorValue('dark.500', 'white');

hyperglass/ui/components/card/footer.tsx

@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/react';
 
 import type { TCardFooter } from './types';
 
-export const CardFooter: React.FC<TCardFooter> = (props: TCardFooter) => (
+export const CardFooter = (props: TCardFooter): JSX.Element => (
   <Flex
     p={4}
     direction="column"

hyperglass/ui/components/card/header.tsx

@@ -3,7 +3,7 @@ import { useColorValue } from '~/context';
 
 import type { TCardHeader } from './types';
 
-export const CardHeader: React.FC<TCardHeader> = (props: TCardHeader) => {
+export const CardHeader = (props: TCardHeader): JSX.Element => {
   const { children, ...rest } = props;
   const bg = useColorValue('blackAlpha.50', 'whiteAlpha.100');
   return (

hyperglass/ui/components/codeBlock.tsx

@@ -3,7 +3,7 @@ import { useColorValue } from '~/context';
 
 import type { BoxProps } from '@chakra-ui/react';
 
-export const CodeBlock: React.FC<BoxProps> = (props: BoxProps) => {
+export const CodeBlock = (props: BoxProps): JSX.Element => {
   const bg = useColorValue('blackAlpha.100', 'gray.800');
   const color = useColorValue('black', 'white');
   return (

hyperglass/ui/components/countdown/countdown.tsx

@@ -1,11 +1,11 @@
-import { Text } from '@chakra-ui/react';
+import { chakra, Text } from '@chakra-ui/react';
 import ReactCountdown, { zeroPad } from 'react-countdown';
 import { If } from '~/components';
 import { useColorValue } from '~/context';
 
 import type { TCountdown, TRenderer } from './types';
 
-const Renderer: React.FC<TRenderer> = (props: TRenderer) => {
+const Renderer = (props: TRenderer): JSX.Element => {
   const { hours, minutes, seconds, completed, text } = props;
   const time = [zeroPad(seconds)];
   minutes !== 0 && time.unshift(zeroPad(minutes));
@@ -19,16 +19,16 @@ const Renderer: React.FC<TRenderer> = (props: TRenderer) => {
       <If c={!completed}>
         <Text fontSize="xs" color="gray.500">
           {text}
-          <Text as="span" fontSize="xs" color={bg}>
+          <chakra.span fontSize="xs" color={bg}>
             {time.join(':')}
-          </Text>
+          </chakra.span>
         </Text>
       </If>
     </>
   );
 };
 
-export const Countdown: React.FC<TCountdown> = (props: TCountdown) => {
+export const Countdown = (props: TCountdown): JSX.Element => {
   const { timeout, text } = props;
   const then = timeout * 1000;
   return (

hyperglass/ui/components/debugger.tsx

@@ -23,7 +23,7 @@ interface TViewer extends Pick<UseDisclosureReturn, 'isOpen' | 'onClose'> {
   children: React.ReactNode;
 }
 
-const Viewer: React.FC<TViewer> = (props: TViewer) => {
+const Viewer = (props: TViewer): JSX.Element => {
   const { title, isOpen, onClose, children } = props;
   const bg = useColorValue('white', 'blackSolid.700');
   const color = useColorValue('black', 'white');
@@ -41,7 +41,7 @@ const Viewer: React.FC<TViewer> = (props: TViewer) => {
   );
 };
 
-export const Debugger: React.FC = () => {
+export const Debugger = (): JSX.Element => {
   const { isOpen: configOpen, onOpen: onConfigOpen, onClose: configClose } = useDisclosure();
   const { isOpen: themeOpen, onOpen: onThemeOpen, onClose: themeClose } = useDisclosure();
   const { colorMode } = useColorMode();

hyperglass/ui/components/footer/button.tsx

@@ -20,7 +20,7 @@ function getConfigFmt(config: Config): Record<string, string> {
   return fmt;
 }
 
-export const FooterButton: React.FC<TFooterButton> = (props: TFooterButton) => {
+export const FooterButton = (props: TFooterButton): JSX.Element => {
   const { content, title, side, ...rest } = props;
 
   const config = useConfig();

hyperglass/ui/components/footer/footer.tsx

@@ -22,7 +22,7 @@ function buildItems(links: Link[], menus: Menu[]): [(Link | Menu)[], (Link | Men
   return [left, right];
 }
 
-export const Footer: React.FC = () => {
+export const Footer = (): JSX.Element => {
   const { web, content, primaryAsn } = useConfig();
 
   const footerBg = useColorValue('blackAlpha.50', 'whiteAlpha.100');

hyperglass/ui/components/footer/link.tsx

@@ -2,7 +2,7 @@ import { Button, Link, useBreakpointValue } from '@chakra-ui/react';
 
 import type { TFooterLink } from './types';
 
-export const FooterLink: React.FC<TFooterLink> = (props: TFooterLink) => {
+export const FooterLink = (props: TFooterLink): JSX.Element => {
   const { title } = props;
   const btnSize = useBreakpointValue({ base: 'xs', lg: 'sm' });
   return (

hyperglass/ui/components/form/field.tsx

@@ -9,7 +9,7 @@ import type { FieldError } from 'react-hook-form';
 import type { FormData } from '~/types';
 import type { TField } from './types';
 
-export const FormField: React.FC<TField> = (props: TField) => {
+export const FormField = (props: TField): JSX.Element => {
   const { name, label, children, labelAddOn, fieldAddOn, hiddenLabels = false, ...rest } = props;
   const labelColor = useColorValue('blackAlpha.700', 'whiteAlpha.700');
   const errorColor = useColorValue('red.500', 'red.300');

hyperglass/ui/components/form/row.tsx

@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/react';
 
 import type { FlexProps } from '@chakra-ui/react';
 
-export const FormRow: React.FC<FlexProps> = (props: FlexProps) => {
+export const FormRow = (props: FlexProps): JSX.Element => {
   return (
     <Flex
       w="100%"

hyperglass/ui/components/header/header.tsx

@@ -7,7 +7,7 @@ import { Title } from './title';
 
 import type { THeader } from './types';
 
-export const Header: React.FC<THeader> = (props: THeader) => {
+export const Header = (props: THeader): JSX.Element => {
   const { resetForm, ...rest } = props;
 
   const status = useFormState(s => s.status);

hyperglass/ui/components/header/logo.tsx

@@ -31,7 +31,7 @@ function useLogo(): [string, () => void] {
   return useMemo(() => [fallback ?? src, setFallback], [fallback, setFallback, src]);
 }
 
-export const Logo: React.FC<TLogo> = (props: TLogo) => {
+export const Logo = (props: TLogo): JSX.Element => {
   const { web } = useConfig();
   const { width } = web.logo;
 

hyperglass/ui/components/header/subtitleOnly.tsx

@@ -2,7 +2,7 @@ import { Heading } from '@chakra-ui/react';
 import { useConfig, useBreakpointValue } from '~/context';
 import { useTitleSize } from './useTitleSize';
 
-export const SubtitleOnly: React.FC = () => {
+export const SubtitleOnly = (): JSX.Element => {
   const { web } = useConfig();
   const sizeSm = useTitleSize(web.text.subtitle, 'sm');
   const fontSize = useBreakpointValue({ base: sizeSm, lg: 'xl' });

hyperglass/ui/components/header/title.tsx

@@ -15,7 +15,7 @@ const AnimatedVStack = motion(VStack);
 /**
  * Title wrapper for mobile devices, breakpoints sm & md.
  */
-const MWrapper: React.FC<TMWrapper> = (props: TMWrapper) => {
+const MWrapper = (props: TMWrapper): JSX.Element => {
   const status = useFormState(s => s.status);
   return (
     <AnimatedVStack
@@ -30,7 +30,7 @@ const MWrapper: React.FC<TMWrapper> = (props: TMWrapper) => {
 /**
  * Title wrapper for desktop devices, breakpoints lg & xl.
  */
-const DWrapper: React.FC<TDWrapper> = (props: TDWrapper) => {
+const DWrapper = (props: TDWrapper): JSX.Element => {
   const status = useFormState(s => s.status);
   return (
     <AnimatedVStack
@@ -49,7 +49,7 @@ const DWrapper: React.FC<TDWrapper> = (props: TDWrapper) => {
  * Universal wrapper for title sub-components, which will be different depending on the
  * `title_mode` configuration variable.
  */
-const TitleWrapper: React.FC<TDWrapper | TMWrapper> = (props: TDWrapper | TMWrapper) => {
+const TitleWrapper = (props: TDWrapper | TMWrapper): JSX.Element => {
   const isMobile = useMobile();
   return (
     <>
@@ -61,7 +61,7 @@ const TitleWrapper: React.FC<TDWrapper | TMWrapper> = (props: TDWrapper | TMWrap
 /**
  * Title sub-component if `title_mode` is set to `text_only`.
  */
-const TextOnly: React.FC<TTitleWrapper> = (props: TTitleWrapper) => {
+const TextOnly = (props: TTitleWrapper): JSX.Element => {
   return (
     <TitleWrapper {...props}>
       <TitleOnly />
@@ -73,7 +73,7 @@ const TextOnly: React.FC<TTitleWrapper> = (props: TTitleWrapper) => {
 /**
  * Title sub-component if `title_mode` is set to `logo_only`. Renders only the logo.
  */
-const LogoOnly: React.FC = () => (
+const LogoOnly = (): JSX.Element => (
   <TitleWrapper>
     <Logo />
   </TitleWrapper>
@@ -83,7 +83,7 @@ const LogoOnly: React.FC = () => (
  * Title sub-component if `title_mode` is set to `logo_subtitle`. Renders the logo with the
  * subtitle underneath.
  */
-const LogoSubtitle: React.FC = () => (
+const LogoSubtitle = (): JSX.Element => (
   <TitleWrapper>
     <Logo />
     <SubtitleOnly />
@@ -93,7 +93,7 @@ const LogoSubtitle: React.FC = () => (
 /**
  * Title sub-component if `title_mode` is set to `all`. Renders the logo, title, and subtitle.
  */
-const All: React.FC = () => (
+const All = (): JSX.Element => (
   <TitleWrapper>
     <Logo />
     <TextOnly mt={2} />
@@ -103,7 +103,7 @@ const All: React.FC = () => (
 /**
  * Title component which renders sub-components based on the `title_mode` configuration variable.
  */
-export const Title: React.FC<TTitle> = (props: TTitle) => {
+export const Title = (props: TTitle): JSX.Element => {
   const { fontSize, ...rest } = props;
   const { web } = useConfig();
   const { titleMode } = web.text;

hyperglass/ui/components/header/titleOnly.tsx

@@ -3,7 +3,7 @@ import { useConfig } from '~/context';
 import { useBooleanValue, useFormState } from '~/hooks';
 import { useTitleSize } from './useTitleSize';
 
-export const TitleOnly: React.FC = () => {
+export const TitleOnly = (): JSX.Element => {
   const { web } = useConfig();
   const status = useFormState(s => s.status);
   const margin = useBooleanValue(status === 'results', 0, 2);

hyperglass/ui/components/help/modal.tsx

@@ -15,13 +15,13 @@ import { isQueryContent } from '~/types';
 
 import type { THelpModal } from './types';
 
-export const HelpModal: React.FC<THelpModal> = (props: THelpModal) => {
+export const HelpModal = (props: THelpModal): JSX.Element => {
   const { visible, item, name, ...rest } = props;
   const { isOpen, onOpen, onClose } = useDisclosure();
   const bg = useColorValue('whiteSolid.50', 'blackSolid.800');
   const color = useColorValue('black', 'white');
   if (!isQueryContent(item)) {
-    return null;
+    return <></>;
   }
   return (
     <>

hyperglass/ui/components/markdown/elements.tsx

@@ -54,12 +54,12 @@ function clean<P extends ChakraProps>(props: P): P {
   return props;
 }
 
-export const Checkbox: React.FC<TCheckbox & MDProps> = (props: TCheckbox & MDProps) => {
+export const Checkbox = (props: TCheckbox & MDProps): JSX.Element => {
   const { checked, node, ...rest } = props;
   return <ChakraCheckbox isChecked={checked} {...rest} />;
 };
 
-export const List: React.FC<TList> = (props: TList) => {
+export const List = (props: TList): JSX.Element => {
   const { ordered, ...rest } = props;
   return (
     <>
@@ -73,7 +73,7 @@ export const List: React.FC<TList> = (props: TList) => {
   );
 };
 
-export const ListItem: React.FC<TListItem & MDProps> = (props: TListItem & MDProps) => {
+export const ListItem = (props: TListItem & MDProps): JSX.Element => {
   const { checked, node, ...rest } = props;
   return checked ? (
     <Checkbox checked={checked} node={node} {...rest} />
@@ -82,7 +82,7 @@ export const ListItem: React.FC<TListItem & MDProps> = (props: TListItem & MDPro
   );
 };
 
-export const Heading: React.FC<THeading> = (props: THeading) => {
+export const Heading = (props: THeading): JSX.Element => {
   const { level, ...rest } = props;
 
   const levelMap = {
@@ -97,16 +97,16 @@ export const Heading: React.FC<THeading> = (props: THeading) => {
   return <ChakraHeading {...levelMap[level]} {...clean<Omit<THeading, 'level'>>(rest)} />;
 };
 
-export const Link: React.FC<LinkProps> = (props: LinkProps) => {
+export const Link = (props: LinkProps): JSX.Element => {
   const color = useColorValue('blue.500', 'blue.300');
   return <ChakraLink isExternal color={color} {...clean<LinkProps>(props)} />;
 };
 
-export const CodeBlock: React.FC<TCodeBlock> = (props: TCodeBlock) => (
+export const CodeBlock = (props: TCodeBlock): JSX.Element => (
   <CustomCodeBlock>{props.value}</CustomCodeBlock>
 );
 
-export const Paragraph: React.FC<TextProps> = (props: TextProps) => (
+export const Paragraph = (props: TextProps): JSX.Element => (
   <ChakraText
     my={4}
     css={{
@@ -117,31 +117,31 @@ export const Paragraph: React.FC<TextProps> = (props: TextProps) => (
   />
 );
 
-export const InlineCode: React.FC<CodeProps> = (props: CodeProps) => (
+export const InlineCode = (props: CodeProps): JSX.Element => (
   <ChakraCode borderRadius="md" px={1} {...clean<CodeProps>(props)} />
 );
 
-export const Divider: React.FC<DividerProps> = (props: DividerProps) => (
+export const Divider = (props: DividerProps): JSX.Element => (
   <ChakraDivider my={2} {...clean<DividerProps>(props)} />
 );
 
-export const Table: React.FC<TableProps> = (props: TableProps) => (
+export const Table = (props: TableProps): JSX.Element => (
   <ChakraTable my={4} variant="simple" size="md" {...clean<TableProps>(props)} />
 );
 
-export const TableRow: React.FC<TableRowProps> = (props: TableRowProps) => (
+export const TableRow = (props: TableRowProps): JSX.Element => (
   <Tr {...clean<TableRowProps>(props)} />
 );
 
-export const TableBody: React.FC<TableBodyProps> = (props: TableBodyProps) => (
+export const TableBody = (props: TableBodyProps): JSX.Element => (
   <Tbody {...clean<TableBodyProps>(props)} />
 );
 
-export const TableHead: React.FC<TableHeadProps> = (props: TableHeadProps) => (
+export const TableHead = (props: TableHeadProps): JSX.Element => (
   <Thead {...clean<TableHeadProps>(props)} />
 );
 
-export const TableCell: React.FC<TTableData> = (props: TTableData) => {
+export const TableCell = (props: TTableData): JSX.Element => {
   const { isHeader, ...rest } = props;
   return (
     <>
@@ -155,6 +155,6 @@ export const TableCell: React.FC<TTableData> = (props: TTableData) => {
   );
 };
 
-export const Br: React.FC<BoxProps> = (props: BoxProps) => (
+export const Br = (props: BoxProps): JSX.Element => (
   <Box as="br" m={16} {...clean<BoxProps>(props)} />
 );

hyperglass/ui/components/markdown/markdown.tsx

@@ -37,6 +37,6 @@ const renderers = {
   thematicBreak: Divider,
 } as ReactMarkdownProps['renderers'];
 
-export const Markdown: React.FC<TMarkdown> = (props: TMarkdown) => (
+export const Markdown = (props: TMarkdown): JSX.Element => (
   <ReactMarkdown plugins={[gfm]} renderers={renderers} source={props.content} />
 );

hyperglass/ui/components/output/cell.tsx

@@ -2,7 +2,7 @@ import { MonoField, Active, Weight, Age, Communities, RPKIState, ASPath } from '
 
 import type { TCell } from './types';
 
-export const Cell: React.FC<TCell> = (props: TCell) => {
+export const Cell = (props: TCell): JSX.Element => {
   const { data, rawData } = props;
   const cellId = data.column.id as keyof Route;
   const component = {

hyperglass/ui/components/output/fields.tsx

@@ -20,7 +20,7 @@ import type {
 dayjs.extend(relativeTimePlugin);
 dayjs.extend(utcPlugin);
 
-export const MonoField: React.FC<TMonoField> = (props: TMonoField) => {
+export const MonoField = (props: TMonoField): JSX.Element => {
   const { v, ...rest } = props;
   return (
     <Text as="span" fontSize="sm" fontFamily="mono" {...rest}>
@@ -29,7 +29,7 @@ export const MonoField: React.FC<TMonoField> = (props: TMonoField) => {
   );
 };
 
-export const Active: React.FC<TActive> = (props: TActive) => {
+export const Active = (props: TActive): JSX.Element => {
   const { isActive } = props;
   const color = useColorValue(['gray.500', 'green.500'], ['whiteAlpha.300', 'blackAlpha.500']);
   return (
@@ -44,7 +44,7 @@ export const Active: React.FC<TActive> = (props: TActive) => {
   );
 };
 
-export const Age: React.FC<TAge> = (props: TAge) => {
+export const Age = (props: TAge): JSX.Element => {
   const { inSeconds, ...rest } = props;
   const now = dayjs.utc();
   const then = now.subtract(inSeconds, 'second');
@@ -57,7 +57,7 @@ export const Age: React.FC<TAge> = (props: TAge) => {
   );
 };
 
-export const Weight: React.FC<TWeight> = (props: TWeight) => {
+export const Weight = (props: TWeight): JSX.Element => {
   const { weight, winningWeight, ...rest } = props;
   const fixMeText =
     winningWeight === 'low' ? 'Lower Weight is Preferred' : 'Higher Weight is Preferred';
@@ -70,7 +70,7 @@ export const Weight: React.FC<TWeight> = (props: TWeight) => {
   );
 };
 
-export const ASPath: React.FC<TASPath> = (props: TASPath) => {
+export const ASPath = (props: TASPath): JSX.Element => {
   const { path, active } = props;
   const color = useColorValue(
     // light: inactive, active
@@ -107,7 +107,7 @@ export const ASPath: React.FC<TASPath> = (props: TASPath) => {
   return <>{paths}</>;
 };
 
-export const Communities: React.FC<TCommunities> = (props: TCommunities) => {
+export const Communities = (props: TCommunities): JSX.Element => {
   const { communities } = props;
   const { web } = useConfig();
   const bg = useColorValue('white', 'gray.900');

hyperglass/ui/components/output/table.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
-import { useConfig } from '~/context';
 import { Table } from '~/components';
+import { useConfig } from '~/context';
 import { Cell } from './cell';
 
 import type { TColumn, ParsedDataField, TCellRender } from '~/types';
@@ -25,7 +25,7 @@ function makeColumns(fields: ParsedDataField[]): TColumn[] {
   });
 }
 
-export const BGPTable: React.FC<TBGPTable> = (props: TBGPTable) => {
+export const BGPTable = (props: TBGPTable): JSX.Element => {
   const { children: data, ...rest } = props;
   const { parsedDataFields } = useConfig();
   const columns = makeColumns(parsedDataFields);

hyperglass/ui/components/output/text.tsx

@@ -4,7 +4,7 @@ import { Highlighted } from './highlighted';
 
 import type { TTextOutput } from './types';
 
-export const TextOutput: React.FC<TTextOutput> = (props: TTextOutput) => {
+export const TextOutput = (props: TTextOutput): JSX.Element => {
   const { children, ...rest } = props;
 
   const bg = useColorValue('blackAlpha.100', 'gray.800');

hyperglass/ui/components/path/chart.tsx

@@ -7,7 +7,7 @@ import { useElements } from './useElements';
 
 import type { TChart, TNode, TNodeData } from './types';
 
-export const Chart: React.FC<TChart> = (props: TChart) => {
+export const Chart = (props: TChart): JSX.Element => {
   const { data } = props;
   const { primaryAsn, orgName } = useConfig();
 
@@ -32,7 +32,7 @@ export const Chart: React.FC<TChart> = (props: TChart) => {
   );
 };
 
-const ASNode: React.FC<TNode<TNodeData>> = (props: TNode<TNodeData>) => {
+const ASNode = (props: TNode<TNodeData>): JSX.Element => {
   const { data } = props;
   const { asn, name, hasChildren, hasParents } = data;
 

hyperglass/ui/components/path/controls.tsx

@@ -2,7 +2,7 @@ import { ButtonGroup, IconButton } from '@chakra-ui/react';
 import { useZoomPanHelper } from 'react-flow-renderer';
 import { DynamicIcon } from '~/components';
 
-export const Controls: React.FC = () => {
+export const Controls = (): JSX.Element => {
   const { fitView, zoomIn, zoomOut } = useZoomPanHelper();
   return (
     <ButtonGroup

hyperglass/ui/components/path/path.tsx

@@ -15,7 +15,7 @@ import { Chart } from './chart';
 
 import type { TPath } from './types';
 
-export const Path: React.FC<TPath> = (props: TPath) => {
+export const Path = (props: TPath): JSX.Element => {
   const { device } = props;
   const displayTarget = useFormState(s => s.target.display);
   const getResponse = useFormState(s => s.response);

hyperglass/ui/components/results/error.tsx

@@ -22,7 +22,7 @@ function formatError(text: string, values: string[], regex: RegExp): TFormatErro
   }, [] as TFormatError[]);
 }
 
-export const FormattedError: React.FC<TFormattedError> = (props: TFormattedError) => {
+export const FormattedError = (props: TFormattedError): JSX.Element => {
   const { keywords, message } = props;
   const pattern = new RegExp(keywords.map(kw => `(${kw})`).join('|'), 'gi');
   const things = formatError(message, keywords, pattern);

hyperglass/ui/components/results/group.tsx

@@ -6,7 +6,7 @@ import { useFormState } from '~/hooks';
 import { Result } from './individual';
 import { Tags } from './tags';
 
-export const Results: React.FC = () => {
+export const Results = (): JSX.Element => {
   const { queryLocation } = useFormState(s => s.form);
 
   // Scroll to the top of the page when results load - primarily for mobile.

hyperglass/ui/components/results/header.tsx

@@ -14,7 +14,7 @@ const runtimeText = (runtime: number, text: string): string => {
   return `${text} ${unit}`;
 };
 
-export const ResultHeader: React.FC<TResultHeader> = (props: TResultHeader) => {
+export const ResultHeader = (props: TResultHeader): JSX.Element => {
   const { title, loading, isError, errorMsg, errorLevel, runtime } = props;
 
   const status = useColorValue('primary.500', 'primary.300');

hyperglass/ui/components/results/tags.tsx

@@ -9,7 +9,7 @@ import type { Transition } from 'framer-motion';
 
 const transition = { duration: 0.3, delay: 0.5 } as Transition;
 
-export const Tags: React.FC = () => {
+export const Tags = (): JSX.Element => {
   const { web } = useConfig();
   const form = useFormState(s => s.form);
   const getDirective = useFormState(s => s.getDirective);
@@ -29,13 +29,6 @@ export const Tags: React.FC = () => {
     xl: { opacity: 1, x: 0 },
   });
 
-  // const animateCenter = useBreakpointValue({
-  //   base: { opacity: 1 },
-  //   md: { opacity: 1 },
-  //   lg: { opacity: 1 },
-  //   xl: { opacity: 1 },
-  // });
-
   const animateRight = useBreakpointValue({
     base: { opacity: 1, x: 0 },
     md: { opacity: 1, x: 0 },
@@ -50,13 +43,6 @@ export const Tags: React.FC = () => {
     xl: { opacity: 0, x: '-100%' },
   });
 
-  // const initialCenter = useBreakpointValue({
-  //   base: { opacity: 0 },
-  //   md: { opacity: 0 },
-  //   lg: { opacity: 0 },
-  //   xl: { opacity: 0 },
-  // });
-
   const initialRight = useBreakpointValue({
     base: { opacity: 0, x: '100%' },
     md: { opacity: 0, x: '100%' },

hyperglass/ui/components/table/body.tsx

@@ -1,10 +1,9 @@
-import { Box } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 
 import type { BoxProps } from '@chakra-ui/react';
 
-export const TableBody: React.FC<BoxProps> = (props: BoxProps) => (
+export const TableBody = (props: BoxProps): JSX.Element => (
-  <Box
+  <chakra.tbody
-    as="tbody"
     overflowY="scroll"
     css={{
       '&::-webkit-scrollbar': { display: 'none' },

hyperglass/ui/components/table/button.tsx

@@ -2,6 +2,6 @@ import { IconButton } from '@chakra-ui/react';
 
 import type { TTableIconButton } from './types';
 
-export const TableIconButton: React.FC<TTableIconButton> = (props: TTableIconButton) => (
+export const TableIconButton = (props: TTableIconButton): JSX.Element => (
   <IconButton size="sm" borderWidth={1} {...props} aria-label="Table Icon Button" />
 );

hyperglass/ui/components/table/cell.tsx

@@ -1,9 +1,9 @@
-import { Box } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import { useColorValue } from '~/context';
 
 import type { TTableCell } from './types';
 
-export const TableCell: React.FC<TTableCell> = (props: TTableCell) => {
+export const TableCell = (props: TTableCell): JSX.Element => {
   const { bordersVertical = [false, 0], align, ...rest } = props;
   const [doVerticalBorders, index] = bordersVertical;
   const borderLeftColor = useColorValue('blackAlpha.100', 'whiteAlpha.100');
@@ -14,11 +14,10 @@ export const TableCell: React.FC<TTableCell> = (props: TTableCell) => {
   }
 
   return (
-    <Box
+    <chakra.td
       p={4}
       m={0}
       w="1%"
-      as="td"
       textAlign={align}
       whiteSpace="nowrap"
       {...borderProps}

hyperglass/ui/components/table/head.tsx

@@ -1,9 +1,9 @@
-import { Box } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import { useColorValue } from '~/context';
 
 import type { BoxProps } from '@chakra-ui/react';
 
-export const TableHead: React.FC<BoxProps> = (props: BoxProps) => {
+export const TableHead = (props: BoxProps): JSX.Element => {
   const bg = useColorValue('blackAlpha.100', 'whiteAlpha.100');
-  return <Box as="thead" overflowX="hidden" overflowY="auto" bg={bg} {...props} />;
+  return <chakra.thead overflowX="hidden" overflowY="auto" bg={bg} {...props} />;
 };

hyperglass/ui/components/table/main.tsx

@@ -16,7 +16,7 @@ import type { TableOptions, PluginHook } from 'react-table';
 import type { TCellRender } from '~/types';
 import type { TTable } from './types';
 
-export const Table: React.FC<TTable> = (props: TTable) => {
+export const Table = (props: TTable): JSX.Element => {
   const {
     data,
     columns,

hyperglass/ui/components/table/pageSelect.tsx

@@ -2,7 +2,7 @@ import { Select } from '@chakra-ui/react';
 
 import type { SelectProps } from '@chakra-ui/react';
 
-export const TableSelectShow: React.FC<SelectProps> = (props: SelectProps) => {
+export const TableSelectShow = (props: SelectProps): JSX.Element => {
   const { value, ...rest } = props;
   return (
     <Select size="sm" {...rest}>

hyperglass/ui/components/table/row.tsx

@@ -1,10 +1,10 @@
-import { Box } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import { useColorValue } from '~/context';
 import { useOpposingColor } from '~/hooks';
 
 import type { TTableRow } from './types';
 
-export const TableRow: React.FC<TTableRow> = (props: TTableRow) => {
+export const TableRow = (props: TTableRow): JSX.Element => {
   const {
     index = 0,
     doStripe = false,
@@ -35,8 +35,7 @@ export const TableRow: React.FC<TTableRow> = (props: TTableRow) => {
   const borderProps = doHorizontalBorders && index !== 0 ? rowBorder : {};
 
   return (
-    <Box
+    <chakra.tr
-      as="tr"
       bg={bg}
       css={{ '& > td': { color } }}
       fontWeight={highlight ? 'bold' : undefined}

hyperglass/ui/components/table/table.tsx

@@ -1,15 +1,14 @@
-import { Box } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import { useColorValue } from '~/context';
 
 import type { BoxProps } from '@chakra-ui/react';
 
-export const TableMain: React.FC<BoxProps> = (props: BoxProps) => {
+export const TableMain = (props: BoxProps): JSX.Element => {
   const scrollbar = useColorValue('blackAlpha.300', 'whiteAlpha.300');
   const scrollbarHover = useColorValue('blackAlpha.400', 'whiteAlpha.400');
   const scrollbarBg = useColorValue('blackAlpha.50', 'whiteAlpha.50');
   return (
-    <Box
+    <chakra.table
-      as="table"
       display="block"
       overflowX="auto"
       borderRadius="md"

hyperglass/ui/context/HyperglassProvider.tsx

@@ -16,7 +16,7 @@ export const HyperglassContext = createContext<Config>({} as Config);
 
 const queryClient = new QueryClient();
 
-export const HyperglassProvider: React.FC<THyperglassProvider> = (props: THyperglassProvider) => {
+export const HyperglassProvider = (props: THyperglassProvider): JSX.Element => {
   const { config, children } = props;
   const value = useMemo(() => config, [config]);
   const userTheme = value && makeTheme(value.web.theme, value.web.theme.defaultColorMode);