diff --git a/docs/src/components/global/DocsCard/index.tsx b/docs/src/components/global/DocsCard/index.tsx
index 2c9040ec6..5528a33bc 100644
--- a/docs/src/components/global/DocsCard/index.tsx
+++ b/docs/src/components/global/DocsCard/index.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import Link from '@docusaurus/Link';
-import clsx from 'clsx';
-import styles from './styles.module.css';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link'
+import clsx from 'clsx'
+import styles from './styles.module.css'
+import useBaseUrl from '@docusaurus/useBaseUrl'
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   href?: string;
@@ -17,45 +17,46 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 function DocsCard(props: Props): JSX.Element {
-  const customClassName = props.className || '';
-  const isStatic = typeof props.href === 'undefined';
-  const isOutbound = typeof props.href !== 'undefined' ? /^http/.test(props.href) : false;
-  const header = props.header === 'undefined' ? null : <header className="Card-header"><span>{props.header}</span><span>→</span></header>;
-  const hoverIcon = props.hoverIcon || props.icon;
+  const customClassName = props.className || ''
+  const isStatic = typeof props.href === 'undefined'
+  const isOutbound = typeof props.href !== 'undefined' ? /^http/.test(props.href) : false
+  const header = props.header === 'undefined' ? null : <header className="Card-header"><span>{props.header}</span><span>→</span></header>
+  const hoverIcon = props.hoverIcon || props.icon
 
   const content = (
     <>
+			{/* eslint-disable-next-line react-hooks/rules-of-hooks */}
       {props.img && <img src={useBaseUrl(props.img)} className="Card-image" />}
       <div className="Card-container">
         {props.header && header}
         <div className="Card-content">{props.children}</div>
       </div>
     </>
-  );
+  )
 
   const className = clsx({
     'Card-with-image': typeof props.img !== 'undefined',
     'Card-without-image': typeof props.img === 'undefined',
     'Card-size-lg': props.size === 'lg',
     [customClassName]: props.className,
-  });
+  })
 
   if (isStatic) {
     return (
       <div className={className}>
         <div className={clsx(styles.card, 'docs-card')}>{content}</div>
       </div>
-    );
+    )
   }
 
   if (isOutbound) {
     return (
       <div className={className}>
-        <a className={clsx(styles.card, 'docs-card')} href={props.href} target="_blank">
+        <a className={clsx(styles.card, 'docs-card')} href={props.href} target="_blank" rel="noreferrer">
           {content}
         </a>
       </div>
-    );
+    )
   }
 
   return (
@@ -64,7 +65,7 @@ function DocsCard(props: Props): JSX.Element {
         {content}
       </Link>
     </div>
-  );
+  )
 }
 
-export default DocsCard;
+export default DocsCard
diff --git a/docs/src/components/global/DocsCards/index.tsx b/docs/src/components/global/DocsCards/index.tsx
index 704dcc936..58fcec122 100644
--- a/docs/src/components/global/DocsCards/index.tsx
+++ b/docs/src/components/global/DocsCards/index.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
 
-import './cards.css';
+import './cards.css'
 
 function DocsCards(props): JSX.Element {
-  return <docs-cards class={props.className}>{props.children}</docs-cards>;
+  return <docs-cards class={props.className}>{props.children}</docs-cards>
 }
 
-export default DocsCards;
\ No newline at end of file
+export default DocsCards
diff --git a/docs/src/components/propsTable.tsx b/docs/src/components/propsTable.tsx
index 416e166dc..755238cae 100644
--- a/docs/src/components/propsTable.tsx
+++ b/docs/src/components/propsTable.tsx
@@ -20,13 +20,13 @@ export const PropsTable: (props: PropsTableProps) => JSX.Element = ({ firstColum
     </table>
 )
 
-export interface PropsTableRowProps { 
-    prop?: string 
+export interface PropsTableRowProps {
+    prop?: string
     propType?: string
     description?: string
     inherited?: string
     required?: boolean
-    readOnly?: boolean 
+    readOnly?: boolean
 }
 
 export const PropsTableRow: (props: PropsTableRowProps) => JSX.Element = ({ prop, propType, description, inherited, required, readOnly }) => (
@@ -42,7 +42,7 @@ export const PropsTableRow: (props: PropsTableRowProps) => JSX.Element = ({ prop
             {propType && <p className="props-type-prop" dangerouslySetInnerHTML={{ __html: propType }} />}
             {description && <p className="props-description-prop" dangerouslySetInnerHTML={{ __html: description }} />}
             {inherited && <p className="props-inherited-prop">Inherited from <b>{inherited}</b></p>}
-            <div style={{ display: "flex", gap: "0.5em" }}>
+            <div style={{ display: 'flex', gap: '0.5em' }}>
                 {required && <p className="props-required-prop">Required</p>}
                 {readOnly && <p className="props-readonly-prop">Read Only</p>}
             </div>
diff --git a/docs/src/components/propsType.tsx b/docs/src/components/propsType.tsx
deleted file mode 100644
index 7d6fe5f96..000000000
--- a/docs/src/components/propsType.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export const Scalar = "string | number | boolean | null"
-export const FieldValue = Scalar
-export const OptionallyVariableFieldValue = FieldValue
-export const Key = "string | number"
-export const Justification = "'default' | 'justifyCenter' | 'justifyEnd' | 'justifyStart'"
-export const DataGridOrderDirection = "asc | desc"
-export const HeadingProps = "{ distinction?: 'default' | 'subtle'; depth?: 1 | 2 | 3 | 4 | 5 | 6; size?: 'small', 'default', 'large' }"