diff --git a/packages/clay-alert/docs/alert.mdx b/packages/clay-alert/docs/alert.mdx
index 7a4cfece31..6af518076a 100644
--- a/packages/clay-alert/docs/alert.mdx
+++ b/packages/clay-alert/docs/alert.mdx
@@ -6,9 +6,9 @@ packageNpm: '@clayui/alert'
 packageUse: "import Alert from '@clayui/alert';"
 packageTypes:
     [
-        'clay-alert/src',
-        'clay-alert/src/footer',
-        'clay-alert/src/toast-container',
+        'clay-alert/src/index.tsx',
+        'clay-alert/src/Footer.tsx',
+        'clay-alert/src/ToastContainer.tsx',
     ]
 ---
 
diff --git a/packages/clay-alert/src/ToastContainer.tsx b/packages/clay-alert/src/ToastContainer.tsx
index aece520e31..99919d7eac 100644
--- a/packages/clay-alert/src/ToastContainer.tsx
+++ b/packages/clay-alert/src/ToastContainer.tsx
@@ -8,8 +8,7 @@ import React from 'react';
 
 import {IClayAlertProps} from './index';
 
-export interface IToastContainerProps
-	extends React.HTMLAttributes<HTMLDivElement> {
+interface IToastContainerProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Children of the ToastContainer must be a ClayAlert
 	 */
diff --git a/packages/clay-alert/src/index.tsx b/packages/clay-alert/src/index.tsx
index 1d1e1645de..9a1b237b68 100644
--- a/packages/clay-alert/src/index.tsx
+++ b/packages/clay-alert/src/index.tsx
@@ -55,14 +55,7 @@ const useAutoClose = (autoClose?: boolean | number, onClose = () => {}) => {
 	};
 };
 
-export type DisplayType =
-	| 'danger'
-	| 'info'
-	| 'secondary'
-	| 'success'
-	| 'warning';
-
-export interface IClayAlertProps
+interface IClayAlertProps
 	extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
 	/**
 	 * A React Component to render the alert actions.
@@ -89,7 +82,7 @@ export interface IClayAlertProps
 	/**
 	 * Determines the style of the alert.
 	 */
-	displayType?: DisplayType;
+	displayType?: 'danger' | 'info' | 'secondary' | 'success' | 'warning';
 
 	/**
 	 * Flag to indicate if close icon should be show. This prop is used in
@@ -236,5 +229,4 @@ ClayAlert.displayName = 'ClayAlert';
 ClayAlert.Footer = ClayAlertFooter;
 ClayAlert.ToastContainer = ClayToastContainer;
 
-export {ClayAlertFooter, ClayToastContainer, ClayAlert};
 export default ClayAlert;
diff --git a/packages/clay-autocomplete/docs/autocomplete.mdx b/packages/clay-autocomplete/docs/autocomplete.mdx
index f6552e6a96..83695d9698 100644
--- a/packages/clay-autocomplete/docs/autocomplete.mdx
+++ b/packages/clay-autocomplete/docs/autocomplete.mdx
@@ -4,7 +4,8 @@ description: 'An autocomplete text field is an input that offers the user text s
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/text-input-variations/'
 packageNpm: '@clayui/autocomplete'
 packageUse: "import Autocomplete from '@clayui/autocomplete';"
-packageTypes: ['clay-autocomplete/src', 'clay-autocomplete/src/item']
+packageTypes:
+    ['clay-autocomplete/src/index.tsx', 'clay-autocomplete/src/Item.tsx']
 ---
 
 ## Example
diff --git a/packages/clay-autocomplete/src/Item.tsx b/packages/clay-autocomplete/src/Item.tsx
index d2ced0c12d..7519ade277 100644
--- a/packages/clay-autocomplete/src/Item.tsx
+++ b/packages/clay-autocomplete/src/Item.tsx
@@ -11,7 +11,51 @@ import React, {useCallback} from 'react';
 
 import {useAutocompleteState} from './Context';
 
-export interface IProps extends React.ComponentProps<typeof DropDown.Item> {
+interface IProps
+	extends React.HTMLAttributes<
+		HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement
+	> {
+	/**
+	 * Flag that indicates if item is selected.
+	 */
+	active?: boolean;
+
+	/**
+	 * Flag that indicates if item is disabled or not.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * @ignore
+	 */
+	'data-index'?: number;
+
+	/**
+	 * Path for item to link to.
+	 */
+	href?: string;
+
+	/**
+	 * Sets the role accessibility property of the item. Set the item's
+	 * container (<li />) role use the role="" prop instead of roleItem="".
+	 */
+	roleItem?: string;
+
+	/**
+	 * Path to icon spritemap from clay-css.
+	 */
+	spritemap?: string;
+
+	/**
+	 * Flag that indicates if there is an icon symbol on the left side.
+	 */
+	symbolLeft?: string;
+
+	/**
+	 * Flag that indicates if there is an icon symbol on the right side.
+	 */
+	symbolRight?: string;
+
 	/**
 	 * The item content.
 	 */
@@ -156,5 +200,4 @@ const Item = React.forwardRef<HTMLLIElement, IProps>(
 
 Item.displayName = 'Item';
 
-export {Item};
 export default Item;
diff --git a/packages/clay-autocomplete/src/LegacyAutocomplete.tsx b/packages/clay-autocomplete/src/LegacyAutocomplete.tsx
new file mode 100644
index 0000000000..102d25bf4e
--- /dev/null
+++ b/packages/clay-autocomplete/src/LegacyAutocomplete.tsx
@@ -0,0 +1,137 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {ClayInput} from '@clayui/form';
+import {FocusScope} from '@clayui/shared';
+import React from 'react';
+
+import {Autocomplete} from './Autocomplete';
+import {LegacyContext} from './Context';
+import DropDown from './DropDown';
+import Input from './Input';
+import Item from './Item';
+import LoadingIndicator from './LoadingIndicator';
+
+import type {IProps as IAutocompleteProps} from './Autocomplete';
+
+const AutocompleteMarkup = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({children, ...otherProps}, ref) => (
+	<ClayInput.Group {...otherProps} ref={ref}>
+		<ClayInput.GroupItem>{children}</ClayInput.GroupItem>
+	</ClayInput.Group>
+));
+
+AutocompleteMarkup.displayName = 'ClayAutocompleteMarkup';
+
+/**
+ * Temporary helper function to determine which version of autocomplete
+ * is being used.
+ */
+const hasItems = (children?: React.ReactNode) => {
+	if (!children) {
+		return [];
+	}
+
+	return React.Children.map(children, (child) => {
+		if (
+			React.isValidElement(child) &&
+			// @ts-ignore
+			child.type.displayName === 'Item'
+		) {
+			return true;
+		}
+
+		return false;
+	}).filter(Boolean);
+};
+
+interface IProps<T> extends IAutocompleteProps<T> {
+	/**
+	 * Div component to render. It can be a one component that will replace the markup.
+	 */
+	component?: React.ForwardRefExoticComponent<any>;
+}
+
+interface IForwardRef<T, P = {}>
+	extends React.ForwardRefExoticComponent<P & React.RefAttributes<T>> {
+	DropDown: typeof DropDown;
+	Input: typeof Input;
+	Item: typeof Item;
+	LoadingIndicator: typeof LoadingIndicator;
+}
+
+function forwardRef<T, P = {}>(component: React.RefForwardingComponent<T, P>) {
+	return React.forwardRef<T, P>(component) as IForwardRef<T, P>;
+}
+
+const ClayAutocomplete = forwardRef(
+	<T extends Record<string, any> | string | number>(
+		{
+			children,
+			className,
+			component: Component = AutocompleteMarkup,
+			...otherProps
+		}: IProps<T>,
+		ref: React.Ref<HTMLInputElement>
+	) => {
+		const containerElementRef = React.useRef<null | HTMLDivElement>(null);
+		const [loading, setLoading] = React.useState(false);
+
+		const isNewBehavior =
+			hasItems(children).length >= 1 || children instanceof Function;
+
+		const Container = isNewBehavior ? React.Fragment : FocusScope;
+
+		return (
+			<Container>
+				<Component
+					{...(isNewBehavior ? {} : otherProps)}
+					className={className}
+					ref={(r: any) => {
+						if (r) {
+							containerElementRef.current = r;
+
+							if (typeof ref === 'function') {
+								ref(r);
+							} else if (ref !== null) {
+								(ref as React.MutableRefObject<any>).current =
+									r;
+							}
+						}
+					}}
+				>
+					{isNewBehavior ? (
+						<Autocomplete<T>
+							containerElementRef={containerElementRef}
+							{...otherProps}
+						>
+							{children}
+						</Autocomplete>
+					) : (
+						<LegacyContext.Provider
+							value={{
+								containerElementRef,
+								loading,
+								onLoadingChange: (loading: boolean) =>
+									setLoading(loading),
+							}}
+						>
+							{children}
+						</LegacyContext.Provider>
+					)}
+				</Component>
+			</Container>
+		);
+	}
+);
+
+ClayAutocomplete.DropDown = DropDown;
+ClayAutocomplete.Input = Input;
+ClayAutocomplete.Item = Item;
+ClayAutocomplete.LoadingIndicator = LoadingIndicator;
+
+export default ClayAutocomplete;
diff --git a/packages/clay-autocomplete/src/index.tsx b/packages/clay-autocomplete/src/index.tsx
index 9d4a689515..785cc19d51 100644
--- a/packages/clay-autocomplete/src/index.tsx
+++ b/packages/clay-autocomplete/src/index.tsx
@@ -3,139 +3,9 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {ClayInput} from '@clayui/form';
-import {FocusScope} from '@clayui/shared';
-import React from 'react';
-
 import {Autocomplete} from './Autocomplete';
-import {LegacyContext} from './Context';
-import DropDown from './DropDown';
-import Input from './Input';
 import Item from './Item';
-import LoadingIndicator from './LoadingIndicator';
-
-import type {IProps as IAutocompleteProps} from './Autocomplete';
-
-const AutocompleteMarkup = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({children, ...otherProps}, ref) => (
-	<ClayInput.Group {...otherProps} ref={ref}>
-		<ClayInput.GroupItem>{children}</ClayInput.GroupItem>
-	</ClayInput.Group>
-));
-
-AutocompleteMarkup.displayName = 'ClayAutocompleteMarkup';
-
-/**
- * Temporary helper function to determine which version of autocomplete
- * is being used.
- */
-const hasItems = (children?: React.ReactNode) => {
-	if (!children) {
-		return [];
-	}
-
-	return React.Children.map(children, (child) => {
-		if (
-			React.isValidElement(child) &&
-			// @ts-ignore
-			child.type.displayName === 'Item'
-		) {
-			return true;
-		}
-
-		return false;
-	}).filter(Boolean);
-};
-
-interface IProps<T> extends IAutocompleteProps<T> {
-	/**
-	 * Div component to render. It can be a one component that will replace the markup.
-	 */
-	component?: React.ForwardRefExoticComponent<any>;
-}
-
-export interface IForwardRef<T, P = {}>
-	extends React.ForwardRefExoticComponent<P & React.RefAttributes<T>> {
-	DropDown: typeof DropDown;
-	Input: typeof Input;
-	Item: typeof Item;
-	LoadingIndicator: typeof LoadingIndicator;
-}
-
-function forwardRef<T, P = {}>(component: React.RefForwardingComponent<T, P>) {
-	return React.forwardRef<T, P>(component) as IForwardRef<T, P>;
-}
-
-const ClayAutocomplete = forwardRef(
-	<T extends Record<string, any> | string | number>(
-		{
-			children,
-			className,
-			component: Component = AutocompleteMarkup,
-			...otherProps
-		}: IProps<T>,
-		ref: React.Ref<HTMLInputElement>
-	) => {
-		const containerElementRef = React.useRef<null | HTMLDivElement>(null);
-		const [loading, setLoading] = React.useState(false);
-
-		const isNewBehavior =
-			hasItems(children).length >= 1 || children instanceof Function;
-
-		const Container = isNewBehavior ? React.Fragment : FocusScope;
-
-		return (
-			<Container>
-				<Component
-					{...(isNewBehavior ? {} : otherProps)}
-					className={className}
-					ref={(r: any) => {
-						if (r) {
-							containerElementRef.current = r;
-
-							if (typeof ref === 'function') {
-								ref(r);
-							} else if (ref !== null) {
-								(ref as React.MutableRefObject<any>).current =
-									r;
-							}
-						}
-					}}
-				>
-					{isNewBehavior ? (
-						<Autocomplete<T>
-							containerElementRef={containerElementRef}
-							{...otherProps}
-						>
-							{children}
-						</Autocomplete>
-					) : (
-						<LegacyContext.Provider
-							value={{
-								containerElementRef,
-								loading,
-								onLoadingChange: (loading: boolean) =>
-									setLoading(loading),
-							}}
-						>
-							{children}
-						</LegacyContext.Provider>
-					)}
-				</Component>
-			</Container>
-		);
-	}
-);
-
-ClayAutocomplete.DropDown = DropDown;
-ClayAutocomplete.Input = Input;
-ClayAutocomplete.Item = Item;
-ClayAutocomplete.LoadingIndicator = LoadingIndicator;
-
-ClayAutocomplete.displayName = 'ClayAutocomplete';
-
-export {ClayAutocomplete, Autocomplete, Item};
+import LegacyAutocomplete from './LegacyAutocomplete';
 
-export default ClayAutocomplete;
+export {Autocomplete, Item};
+export default LegacyAutocomplete;
diff --git a/packages/clay-badge/docs/badge.mdx b/packages/clay-badge/docs/badge.mdx
index d598febbe2..7d322fc809 100644
--- a/packages/clay-badge/docs/badge.mdx
+++ b/packages/clay-badge/docs/badge.mdx
@@ -4,7 +4,7 @@ description: 'Badges help highlight important information, such as notifications
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/badges/'
 packageNpm: '@clayui/badge'
 packageUse: "import Badge from '@clayui/badge';"
-packageTypes: ['clay-badge/src']
+packageTypes: ['clay-badge/src/index.tsx']
 ---
 
 ## Display Types
diff --git a/packages/clay-badge/src/index.tsx b/packages/clay-badge/src/index.tsx
index 7c160a0bc3..8372029854 100644
--- a/packages/clay-badge/src/index.tsx
+++ b/packages/clay-badge/src/index.tsx
@@ -83,5 +83,4 @@ const Badge = React.forwardRef<HTMLSpanElement, IProps>(
 
 Badge.displayName = 'ClayBadge';
 
-export {Badge};
 export default Badge;
diff --git a/packages/clay-breadcrumb/docs/breadcrumb.mdx b/packages/clay-breadcrumb/docs/breadcrumb.mdx
index 4fbb324748..80d4dafa8b 100644
--- a/packages/clay-breadcrumb/docs/breadcrumb.mdx
+++ b/packages/clay-breadcrumb/docs/breadcrumb.mdx
@@ -4,7 +4,7 @@ description: 'Breadcrumb is a secondary navigation pattern that identifies the p
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/navigation/breadcrumb/'
 packageNpm: '@clayui/breadcrumb'
 packageUse: "import Breadcrumb from '@clayui/breadcrumb';"
-packageTypes: ['clay-breadcrumb/src']
+packageTypes: ['clay-breadcrumb/src/index.tsx', 'clay-breadcrumb/src/Item.tsx']
 ---
 
 ## Example
diff --git a/packages/clay-breadcrumb/src/index.tsx b/packages/clay-breadcrumb/src/index.tsx
index 1ad03d8c6f..877cc92f56 100644
--- a/packages/clay-breadcrumb/src/index.tsx
+++ b/packages/clay-breadcrumb/src/index.tsx
@@ -135,5 +135,4 @@ function Items({items}: ItemsProps) {
 	);
 }
 
-export {Breadcrumb};
 export default Breadcrumb;
diff --git a/packages/clay-button/docs/button.mdx b/packages/clay-button/docs/button.mdx
index d311535c72..8ee2c1c2d2 100644
--- a/packages/clay-button/docs/button.mdx
+++ b/packages/clay-button/docs/button.mdx
@@ -4,7 +4,12 @@ description: 'Buttons communicate an action to happen on user interaction.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/buttons/'
 packageNpm: '@clayui/button'
 packageUse: "import Button from '@clayui/button';"
-packageTypes: ['clay-button/src']
+packageTypes:
+    [
+        'clay-button/src/Button.tsx',
+        'clay-button/src/ButtonWithIcon.tsx',
+        'clay-button/src/Group.tsx',
+    ]
 ---
 
 ## Display Types
diff --git a/packages/clay-button/src/Button.tsx b/packages/clay-button/src/Button.tsx
index f354bf5df3..ac91294d83 100644
--- a/packages/clay-button/src/Button.tsx
+++ b/packages/clay-button/src/Button.tsx
@@ -9,7 +9,7 @@ import warning from 'warning';
 
 import Group from './Group';
 
-export type DisplayType =
+type DisplayType =
 	| null
 	| 'primary'
 	| 'secondary'
@@ -22,7 +22,7 @@ export type DisplayType =
 	| 'beta-dark'
 	| 'unstyled';
 
-export interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	/**
 	 * Flag to indicate if button is used within an alert component.
 	 */
diff --git a/packages/clay-button/src/ButtonWithIcon.tsx b/packages/clay-button/src/ButtonWithIcon.tsx
index b4663b7d4b..3f9d0e0a39 100644
--- a/packages/clay-button/src/ButtonWithIcon.tsx
+++ b/packages/clay-button/src/ButtonWithIcon.tsx
@@ -8,8 +8,6 @@ import React from 'react';
 
 import ClayButton from './Button';
 
-import type {IProps} from './Button';
-
 type ButtonAria =
 	| {
 			/**
@@ -26,7 +24,11 @@ type ButtonAria =
 			'aria-labelledby': string;
 	  };
 
-interface ICommonProps extends Omit<IProps, 'aria-label' | 'aria-labelledby'> {
+interface ICommonProps
+	extends Omit<
+		React.ComponentProps<typeof ClayButton>,
+		'aria-label' | 'aria-labelledby'
+	> {
 	/**
 	 * Path to the location of the spritemap resource.
 	 */
@@ -38,7 +40,7 @@ interface ICommonProps extends Omit<IProps, 'aria-label' | 'aria-labelledby'> {
 	symbol: string;
 }
 
-export type Props = ICommonProps & ButtonAria;
+type Props = ICommonProps & ButtonAria;
 
 const ClayButtonWithIcon = React.forwardRef<HTMLButtonElement, Props>(
 	({monospaced = true, spritemap, symbol, ...otherProps}: Props, ref) => (
diff --git a/packages/clay-button/src/Group.tsx b/packages/clay-button/src/Group.tsx
index a4245e07d1..d28cb0228d 100644
--- a/packages/clay-button/src/Group.tsx
+++ b/packages/clay-button/src/Group.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export type Props = {
+type Props = {
 	/**
 	 * Flag to indicate the spacing between the buttons.
 	 */
diff --git a/packages/clay-button/src/index.tsx b/packages/clay-button/src/index.tsx
index e9da768d8b..642e0bf839 100644
--- a/packages/clay-button/src/index.tsx
+++ b/packages/clay-button/src/index.tsx
@@ -3,10 +3,12 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import Button, {IProps} from './Button';
+import Button from './Button';
 import ClayButtonWithIcon from './ButtonWithIcon';
-import Group from './Group';
 
-export type {Props as ButtonWithIconProps} from './ButtonWithIcon';
-export {ClayButtonWithIcon, Group, Button, IProps as ButtonProps};
+type ButtonProps = React.ComponentProps<typeof Button>;
+type ButtonWithIconProps = React.ComponentProps<typeof ClayButtonWithIcon>;
+
+export type {ButtonWithIconProps, ButtonProps};
+export {ClayButtonWithIcon};
 export default Button;
diff --git a/packages/clay-card/docs/card.mdx b/packages/clay-card/docs/card.mdx
index 2fc255cbbc..4da2a0f7d7 100644
--- a/packages/clay-card/docs/card.mdx
+++ b/packages/clay-card/docs/card.mdx
@@ -4,7 +4,20 @@ description: 'Cards are a specific form of data visualization focused mainly on
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/cards/'
 packageNpm: '@clayui/card'
 packageUse: "import ClayCard from '@clayui/card';"
-packageTypes: ['clay-card/src']
+packageTypes:
+    [
+        'clay-card/src/Card.tsx',
+        'clay-card/src/CardWithHorizontal.tsx',
+        'clay-card/src/CardWithInfo.tsx',
+        'clay-card/src/CardWithNavigation.tsx',
+        'clay-card/src/CardWithUser.tsx',
+        'clay-card/src/AspectRatio.tsx',
+        'clay-card/src/Body.tsx',
+        'clay-card/src/Caption.tsx',
+        'clay-card/src/Description.tsx',
+        'clay-card/src/Group.tsx',
+        'clay-card/src/Row.tsx',
+    ]
 ---
 
 ## Composing
diff --git a/packages/clay-card/src/AspectRatio.tsx b/packages/clay-card/src/AspectRatio.tsx
index 67ffd810c7..61cc41be88 100644
--- a/packages/clay-card/src/AspectRatio.tsx
+++ b/packages/clay-card/src/AspectRatio.tsx
@@ -10,7 +10,7 @@ import Context from './Context';
 
 type ContainerAspectRatioType = '1/1' | '3/2' | '4/3' | '8/5' | '16/9';
 
-export type Props = {
+type Props = {
 	/**
 	 * AspectRatio content.
 	 */
@@ -27,11 +27,7 @@ export type Props = {
 	containerAspectRatio?: ContainerAspectRatioType;
 };
 
-const ClayCardAspectRatio = ({
-	children,
-	className,
-	containerAspectRatio,
-}: Props) => {
+const AspectRatio = ({children, className, containerAspectRatio}: Props) => {
 	const {interactive} = React.useContext(Context);
 
 	const TagName = interactive ? 'span' : 'div';
@@ -51,4 +47,4 @@ const ClayCardAspectRatio = ({
 	);
 };
 
-export default ClayCardAspectRatio;
+export default AspectRatio;
diff --git a/packages/clay-card/src/Body.tsx b/packages/clay-card/src/Body.tsx
index 873ae435b6..75f01b0be7 100644
--- a/packages/clay-card/src/Body.tsx
+++ b/packages/clay-card/src/Body.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import Context from './Context';
 
-const ClayCardBody = ({
+const Body = ({
 	children,
 	className,
 	...otherProps
@@ -24,4 +24,4 @@ const ClayCardBody = ({
 	);
 };
 
-export default ClayCardBody;
+export default Body;
diff --git a/packages/clay-card/src/Caption.tsx b/packages/clay-card/src/Caption.tsx
index 61d166a412..4bbb49700e 100644
--- a/packages/clay-card/src/Caption.tsx
+++ b/packages/clay-card/src/Caption.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import Context from './Context';
 
-const ClayCardCaption = ({
+const Caption = ({
 	children,
 	className,
 	...otherProps
@@ -27,4 +27,4 @@ const ClayCardCaption = ({
 	);
 };
 
-export default ClayCardCaption;
+export default Caption;
diff --git a/packages/clay-card/src/Card.tsx b/packages/clay-card/src/Card.tsx
index 668eb4cf0a..16734dbd6c 100644
--- a/packages/clay-card/src/Card.tsx
+++ b/packages/clay-card/src/Card.tsx
@@ -16,7 +16,7 @@ import Description from './Description';
 import Group from './Group';
 import Row from './Row';
 
-export interface ICardProps extends IContext {
+interface ICardProps extends IContext {
 	/**
 	 * Flag that indicates if `active` class is applied
 	 */
@@ -33,13 +33,13 @@ export interface ICardProps extends IContext {
 	selectable?: boolean;
 }
 
-export interface IProps
+interface IProps
 	extends ICardProps,
 		React.BaseHTMLAttributes<
 			HTMLAnchorElement | HTMLSpanElement | HTMLDivElement
 		> {}
 
-const ClayCard = ({
+const CardBase = ({
 	active,
 	children,
 	className,
@@ -77,17 +77,12 @@ const ClayCard = ({
 	);
 };
 
-function ClayCardHybrid({
-	children,
-	horizontal,
-	interactive,
-	...otherProps
-}: IProps) {
+function Card({children, horizontal, interactive, ...otherProps}: IProps) {
 	const Container = interactive
 		? ClayCardNavigation
 		: horizontal
 		? ClayCardHorizontal
-		: ClayCard;
+		: CardBase;
 
 	return (
 		<Container horizontal={horizontal} {...otherProps}>
@@ -96,13 +91,13 @@ function ClayCardHybrid({
 	);
 }
 
-ClayCardHybrid.displayName = 'ClayCard';
+Card.displayName = 'ClayCard';
 
-ClayCardHybrid.AspectRatio = AspectRatio;
-ClayCardHybrid.Body = Body;
-ClayCardHybrid.Caption = Caption;
-ClayCardHybrid.Description = Description;
-ClayCardHybrid.Group = Group;
-ClayCardHybrid.Row = Row;
+Card.AspectRatio = AspectRatio;
+Card.Body = Body;
+Card.Caption = Caption;
+Card.Description = Description;
+Card.Group = Group;
+Card.Row = Row;
 
-export default ClayCardHybrid;
+export default Card;
diff --git a/packages/clay-card/src/CardHorizontal.tsx b/packages/clay-card/src/CardHorizontal.tsx
index 5cd00fe020..df3341a809 100644
--- a/packages/clay-card/src/CardHorizontal.tsx
+++ b/packages/clay-card/src/CardHorizontal.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import Context from './Context';
 
-export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
+interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	/**
 	 * Flag that indicates if `active` class is applied
 	 */
@@ -20,7 +20,7 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	selectable?: boolean;
 }
 
-const ClayCardHorizontalBody = ({
+const Body = ({
 	children,
 	className,
 	...otherProps
@@ -33,10 +33,6 @@ const ClayCardHorizontalBody = ({
 	</div>
 );
 
-export function ClayCardHorizontal(props: IProps): JSX.Element & {
-	Body: typeof ClayCardHorizontalBody;
-};
-
 export function ClayCardHorizontal({
 	active,
 	children,
@@ -65,4 +61,4 @@ export function ClayCardHorizontal({
 	);
 }
 
-ClayCardHorizontal.Body = ClayCardHorizontalBody;
+ClayCardHorizontal.Body = Body;
diff --git a/packages/clay-card/src/CardNavigation.tsx b/packages/clay-card/src/CardNavigation.tsx
index 7b13ebcea1..6066321d82 100644
--- a/packages/clay-card/src/CardNavigation.tsx
+++ b/packages/clay-card/src/CardNavigation.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 import Context, {IContext} from './Context';
 
-export interface IProps
+interface IProps
 	extends Omit<IContext, 'interactive'>,
 		React.BaseHTMLAttributes<HTMLAnchorElement | HTMLDivElement> {}
 
diff --git a/packages/clay-card/src/CardWithHorizontal.tsx b/packages/clay-card/src/CardWithHorizontal.tsx
index 28494e965c..4533330cae 100644
--- a/packages/clay-card/src/CardWithHorizontal.tsx
+++ b/packages/clay-card/src/CardWithHorizontal.tsx
@@ -16,7 +16,7 @@ import {ClayCardHorizontal} from './CardHorizontal';
 
 import type {ButtonWithIconProps} from '@clayui/button';
 
-export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
+interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	actions?: React.ComponentProps<typeof ClayDropDownWithItems>['items'];
 
 	/**
@@ -45,7 +45,6 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	/**
 	 * Props to add to the radio element
 	 */
-
 	radioProps?: React.HTMLAttributes<HTMLInputElement> & {
 		name: string;
 		value: string;
@@ -75,24 +74,17 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	 * Flag to indicate if the card text is truncated
 	 */
 	truncate?: boolean;
-}
-
-/**
- * Different types of props depending on selectableType.
- *
- * onSelectChange: callback for when item is selected
- * selectableType: determines what type of selectable it is
- */
 
-type CheckboxProps = {
-	onSelectChange?: (value: boolean) => void;
-	selectableType?: 'checkbox';
-};
+	/**
+	 * Callback for when item is selected.
+	 */
+	onSelectChange?: (value: boolean | string) => void;
 
-type RadioProps = {
-	onSelectChange?: (value: string) => void;
-	selectableType: 'radio';
-};
+	/**
+	 * Determines what type of selectable it is.
+	 */
+	selectableType?: 'checkbox' | 'radio';
+}
 
 export const ClayCardWithHorizontal = ({
 	'aria-label': ariaLabel,
@@ -112,7 +104,7 @@ export const ClayCardWithHorizontal = ({
 	title,
 	truncate = true,
 	...otherProps
-}: IProps & (RadioProps | CheckboxProps)) => {
+}: IProps) => {
 	const content = (
 		<ClayCard.Body>
 			<ClayCard.Row>
diff --git a/packages/clay-card/src/CardWithInfo.tsx b/packages/clay-card/src/CardWithInfo.tsx
index 21cd1c6378..d4bd7ff8b7 100644
--- a/packages/clay-card/src/CardWithInfo.tsx
+++ b/packages/clay-card/src/CardWithInfo.tsx
@@ -17,7 +17,7 @@ import ClayCard from './Card';
 
 import type {ButtonWithIconProps} from '@clayui/button';
 
-export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
+interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	/**
 	 * List of actions in the dropdown menu
 	 */
@@ -31,7 +31,6 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	/**
 	 * Props to add to the radio element
 	 */
-
 	radioProps?: React.HTMLAttributes<HTMLInputElement> & {
 		name: string;
 		value: string;
@@ -122,24 +121,17 @@ export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	 * Flag to indicate if the card text is truncated
 	 */
 	truncate?: boolean;
-}
-
-/**
- * Different types of props depending on selectableType.
- *
- * onSelectChange: callback for when item is selected
- * selectableType: determines what type of selectable it is
- */
 
-type CheckboxProps = {
-	onSelectChange?: (value: boolean) => void;
-	selectableType?: 'checkbox';
-};
+	/**
+	 * Callback for when item is selected.
+	 */
+	onSelectChange?: (value: boolean | string) => void;
 
-type RadioProps = {
-	onSelectChange?: (value: string) => void;
-	selectableType: 'radio';
-};
+	/**
+	 * Determines what type of selectable it is.
+	 */
+	selectableType?: 'checkbox' | 'radio';
+}
 
 export const ClayCardWithInfo = ({
 	'aria-label': ariaLabel,
@@ -166,7 +158,7 @@ export const ClayCardWithInfo = ({
 	title,
 	truncate = true,
 	...otherProps
-}: IProps & (RadioProps | CheckboxProps)) => {
+}: IProps) => {
 	const isCardType = {
 		file: displayType === 'file' && !imgProps,
 		image: displayType === 'image' || imgProps,
diff --git a/packages/clay-card/src/CardWithNavigation.tsx b/packages/clay-card/src/CardWithNavigation.tsx
index fae188d4bc..64a9187ab7 100644
--- a/packages/clay-card/src/CardWithNavigation.tsx
+++ b/packages/clay-card/src/CardWithNavigation.tsx
@@ -12,7 +12,7 @@ import React from 'react';
 import ClayCard from './Card';
 import {ClayCardNavigation} from './CardNavigation';
 
-export interface IProps
+interface IProps
 	extends React.BaseHTMLAttributes<HTMLAnchorElement | HTMLDivElement> {
 	children?: React.ReactNode;
 
diff --git a/packages/clay-card/src/CardWithUser.tsx b/packages/clay-card/src/CardWithUser.tsx
index 1a120bd04b..30b0c9ce3e 100644
--- a/packages/clay-card/src/CardWithUser.tsx
+++ b/packages/clay-card/src/CardWithUser.tsx
@@ -15,7 +15,7 @@ import ClayCard from './Card';
 
 import type {ButtonWithIconProps} from '@clayui/button';
 
-export interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
+interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	/**
 	 * List of actions in the dropdown menu
 	 */
diff --git a/packages/clay-card/src/Description.tsx b/packages/clay-card/src/Description.tsx
index d673c720a5..2d8b5b2dc9 100644
--- a/packages/clay-card/src/Description.tsx
+++ b/packages/clay-card/src/Description.tsx
@@ -7,16 +7,14 @@ import ClayLink from '@clayui/link';
 import classNames from 'classnames';
 import React from 'react';
 
-type CardDescriptionDisplayType = 'text' | 'title' | 'subtitle';
-
-export interface ICardDescriptionProps
+interface ICardDescriptionProps
 	extends React.HTMLAttributes<
 		HTMLHeadingElement | HTMLDivElement | HTMLSpanElement
 	> {
 	/**
 	 * Type of description that can be applied for a text.
 	 */
-	displayType: CardDescriptionDisplayType;
+	displayType: 'text' | 'title' | 'subtitle';
 
 	/**
 	 * Flag to indicate if href will be disabled.
@@ -39,7 +37,7 @@ export interface ICardDescriptionProps
 	truncate?: boolean;
 }
 
-const ClayCardDescription = ({
+const Description = ({
 	children,
 	className,
 	disabled,
@@ -73,4 +71,4 @@ const ClayCardDescription = ({
 	);
 };
 
-export default ClayCardDescription;
+export default Description;
diff --git a/packages/clay-card/src/Group.tsx b/packages/clay-card/src/Group.tsx
index c99bab276e..20a86837cf 100644
--- a/packages/clay-card/src/Group.tsx
+++ b/packages/clay-card/src/Group.tsx
@@ -6,15 +6,14 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface ICardGroupProps
-	extends React.HTMLAttributes<HTMLUListElement> {
+interface ICardGroupProps extends React.HTMLAttributes<HTMLUListElement> {
 	/**
 	 * Header's label of Card Group
 	 */
 	label?: string;
 }
 
-const ClayCardGroup = ({
+const Group = ({
 	children,
 	className,
 	label,
@@ -40,4 +39,4 @@ const ClayCardGroup = ({
 	);
 };
 
-export default ClayCardGroup;
+export default Group;
diff --git a/packages/clay-card/src/Row.tsx b/packages/clay-card/src/Row.tsx
index 4b1460d73d..d9b0dc4f92 100644
--- a/packages/clay-card/src/Row.tsx
+++ b/packages/clay-card/src/Row.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import Context from './Context';
 
-const ClayCardRow = ({
+const Row = ({
 	children,
 	className,
 	...otherProps
@@ -24,4 +24,4 @@ const ClayCardRow = ({
 	);
 };
 
-export default ClayCardRow;
+export default Row;
diff --git a/packages/clay-card/src/index.tsx b/packages/clay-card/src/index.tsx
index 1228265516..cf7282bbe4 100644
--- a/packages/clay-card/src/index.tsx
+++ b/packages/clay-card/src/index.tsx
@@ -3,30 +3,17 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import AspectRatio from './AspectRatio';
-import Body from './Body';
-import Caption from './Caption';
 import ClayCard from './Card';
 import {ClayCardWithHorizontal} from './CardWithHorizontal';
 import {ClayCardWithInfo} from './CardWithInfo';
 import {ClayCardWithNavigation} from './CardWithNavigation';
 import {ClayCardWithUser} from './CardWithUser';
-import Description from './Description';
-import Group from './Group';
-import Row from './Row';
 
 export {
-	ClayCard,
 	ClayCardWithInfo,
 	ClayCardWithHorizontal,
 	ClayCardWithNavigation,
 	ClayCardWithUser,
-	AspectRatio,
-	Body,
-	Caption,
-	Description,
-	Group,
-	Row,
 };
 
 export default ClayCard;
diff --git a/packages/clay-charts/docs/api-chart.mdx b/packages/clay-charts/docs/api-chart.mdx
deleted file mode 100644
index 3b277f7446..0000000000
--- a/packages/clay-charts/docs/api-chart.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: 'Chart'
-description: 'Charts is a React wrapper around the Billboard.js library with a few additional charts provided.'
-lexiconDefinition: 'https://liferay.design/lexicon/core-components/charts/'
-mainTabURL: 'docs/components/charts.html'
----
-
-<div class="nav-toc-absolute">
-<div class="nav-toc">
-
--   [Basic](#basic)
--   [GeoMap](#geomap)
--   [Predictive](#predictive)
-
-</div>
-</div>
-
-Clay Charts is primarily a wrapper around the [Billboard.js charting library](https://naver.github.io/billboard.js/), see Billboard.js API for more in-depth API.
-
-## Basic
-
-<div>[APITable "clay-charts/src/index.tsx"]</div>
-
-## GeoMap
-
-<div>[APITable "clay-charts/src/GeoMap.tsx"]</div>
-
-## Predictive
-
-<div>[APITable "clay-charts/src/Predictive.tsx"]</div>
diff --git a/packages/clay-charts/docs/charts.mdx b/packages/clay-charts/docs/charts.mdx
index 058ff88092..85750dfd71 100644
--- a/packages/clay-charts/docs/charts.mdx
+++ b/packages/clay-charts/docs/charts.mdx
@@ -6,35 +6,15 @@ packageNpm: '@clayui/charts'
 storybookPath: 'design-system-charts-react-billboard'
 ---
 
-import {Chart, GeoMap, Predictive} from '$packages/clay-charts/docs/index';
-
-<div class="nav-toc-absolute">
-<div class="nav-toc">
-
--   [Basic](#basic)
--   [GeoMap](#geomap)
--   [Predictive](#predictive)
-
-</div>
-</div>
-
 <div class="clay-site-alert alert alert-warning">
 	Charts in its current state will be deprecated soon in favor of a wrapper
-	around <a href="https://recharts.org/">Recharts</a>. See examples of charts
-	built with recharts on&nbsp;
-	<a href="https://storybook.clayui.com/?path=/story/design-system-charts-react-billboard--bar">
-		Storybook
-	</a>.
+	around [Recharts](https://recharts.org/). See examples of charts built with
+	recharts on&nbsp;
+	[Storybook](https://storybook.clayui.com/?path=/story/design-system-charts-react-billboard--bar).
 </div>
 
 ## Basic
 
-<Chart />
-
 ## GeoMap
 
-<GeoMap />
-
 ## Predictive
-
-<Predictive />
diff --git a/packages/clay-color-picker/docs/color-picker.mdx b/packages/clay-color-picker/docs/color-picker.mdx
index b931ca69cc..92704d79ff 100644
--- a/packages/clay-color-picker/docs/color-picker.mdx
+++ b/packages/clay-color-picker/docs/color-picker.mdx
@@ -4,7 +4,7 @@ description: 'Color picker lets users select a color from a predefined palette,
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/picker-color/'
 packageNpm: '@clayui/color-picker'
 packageUse: "import ColorPicker from '@clayui/color-picker';"
-packageTypes: ['clay-color-picker/src']
+packageTypes: ['clay-color-picker/src/index.tsx']
 ---
 
 ## Example
diff --git a/packages/clay-color-picker/src/index.tsx b/packages/clay-color-picker/src/index.tsx
index ba7c419066..6076228de5 100644
--- a/packages/clay-color-picker/src/index.tsx
+++ b/packages/clay-color-picker/src/index.tsx
@@ -589,5 +589,4 @@ function normalizeValueHex(value: string) {
 	return value;
 }
 
-export {ColorPicker};
 export default ColorPicker;
diff --git a/packages/clay-core/docs/focus-trap.mdx b/packages/clay-core/docs/focus-trap.mdx
index 05ca38c787..2d7e874992 100644
--- a/packages/clay-core/docs/focus-trap.mdx
+++ b/packages/clay-core/docs/focus-trap.mdx
@@ -5,7 +5,7 @@ packageNpm: '@clayui/core'
 packageStatus: 'Beta'
 packageUse: "import {FocusTrap} from '@clayui/core';"
 storybookPath: 'design-system-components-focus-trap'
-packageTypes: ['clay-core/src/focus-trap']
+packageTypes: ['clay-core/src/focus-trap/FocusTrap.tsx']
 ---
 
 ## Introduction
diff --git a/packages/clay-core/docs/heading.mdx b/packages/clay-core/docs/heading.mdx
index bdd63afa3e..fb57680485 100644
--- a/packages/clay-core/docs/heading.mdx
+++ b/packages/clay-core/docs/heading.mdx
@@ -5,7 +5,7 @@ packageNpm: '@clayui/core'
 packageStatus: 'Beta'
 packageUse: "import {Heading} from '@clayui/core';"
 storybookPath: 'design-system-components-typography--heading-typography'
-packageTypes: ['clay-core/src/typography/heading']
+packageTypes: ['clay-core/src/typography/Heading.tsx']
 ---
 
 ## Introduction
diff --git a/packages/clay-core/docs/overlay-mask.mdx b/packages/clay-core/docs/overlay-mask.mdx
index fcb7ed6d32..0606ea56db 100644
--- a/packages/clay-core/docs/overlay-mask.mdx
+++ b/packages/clay-core/docs/overlay-mask.mdx
@@ -5,7 +5,7 @@ packageNpm: '@clayui/core'
 packageStatus: 'Beta'
 packageUse: "import {OverlayMask} from '@clayui/core';"
 storybookPath: 'design-system-components-overlaymask'
-packageTypes: ['clay-core/src/overlay-mask']
+packageTypes: ['clay-core/src/overlay-mask/OverlayMask.tsx']
 ---
 
 ## Example
diff --git a/packages/clay-core/docs/picker.mdx b/packages/clay-core/docs/picker.mdx
index 3cf30e4b9f..affbd3e90f 100644
--- a/packages/clay-core/docs/picker.mdx
+++ b/packages/clay-core/docs/picker.mdx
@@ -5,7 +5,8 @@ packageNpm: '@clayui/core'
 packageStatus: 'Beta'
 packageUse: "import {Option, Picker} from '@clayui/core';"
 storybookPath: 'design-system-components-picker'
-packageTypes: ['clay-core/src/picker']
+packageTypes:
+    ['clay-core/src/picker/Picker.tsx', 'clay-core/src/picker/Option.tsx']
 ---
 
 ## Example
diff --git a/packages/clay-core/docs/reduced-motion.mdx b/packages/clay-core/docs/reduced-motion.mdx
index 29bc439157..705ee281e0 100644
--- a/packages/clay-core/docs/reduced-motion.mdx
+++ b/packages/clay-core/docs/reduced-motion.mdx
@@ -3,7 +3,7 @@ title: 'Reduced Motion'
 description: 'Provider component which aggregates the main Clay, Icon, and Modal.'
 packageNpm: '@clayui/core'
 packageUse: "import {Provider} from '@clayui/core';"
-packageTypes: ['clay-provider/src/provider']
+packageTypes: ['clay-provider/src/Provider.tsx']
 ---
 
 ## Introduction
diff --git a/packages/clay-core/docs/table.mdx b/packages/clay-core/docs/table.mdx
index b95a8ff971..fe4f2c2842 100644
--- a/packages/clay-core/docs/table.mdx
+++ b/packages/clay-core/docs/table.mdx
@@ -8,11 +8,11 @@ packageUse: "import {Body, Cell, Head, Row, Table} from '@clayui/core';"
 storybookPath: 'design-system-components-table--dynamic'
 packageTypes:
     [
-        'clay-core/src/table/body',
-        'clay-core/src/table/head',
-        'clay-core/src/table/table',
-        'clay-core/src/table/cell',
-        'clay-core/src/table/row',
+        'clay-core/src/table/Table.tsx',
+        'clay-core/src/table/Body.tsx',
+        'clay-core/src/table/Head.tsx',
+        'clay-core/src/table/Cell.tsx',
+        'clay-core/src/table/Row.tsx',
     ]
 ---
 
diff --git a/packages/clay-core/docs/text.mdx b/packages/clay-core/docs/text.mdx
index f193e8cccf..3e9d289c1d 100644
--- a/packages/clay-core/docs/text.mdx
+++ b/packages/clay-core/docs/text.mdx
@@ -5,7 +5,7 @@ packageNpm: '@clayui/core'
 packageStatus: 'Beta'
 packageUse: "import {Text} from '@clayui/core';"
 storybookPath: 'design-system-components-typography--text-typography'
-packageTypes: ['clay-core/src/typography/text']
+packageTypes: ['clay-core/src/typography/Text.tsx']
 ---
 
 ## Introduction
diff --git a/packages/clay-core/docs/tree-view.mdx b/packages/clay-core/docs/tree-view.mdx
index 6e02fa2713..ae1d3fbc71 100644
--- a/packages/clay-core/docs/tree-view.mdx
+++ b/packages/clay-core/docs/tree-view.mdx
@@ -8,9 +8,9 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/tree-view/'
 storybookPath: 'design-system-components-treeview'
 packageTypes:
     [
-        'clay-core/src/tree-view/tree-view',
-        'clay-core/src/tree-view/tree-view-item',
-        'clay-core/src/tree-view/tree-view-group',
+        'clay-core/src/tree-view/TreeView.tsx',
+        'clay-core/src/tree-view/TreeViewItem.tsx',
+        'clay-core/src/tree-view/TreeViewGroup.tsx',
     ]
 ---
 
diff --git a/packages/clay-core/docs/vertical-bar.mdx b/packages/clay-core/docs/vertical-bar.mdx
index 0101622268..fc90cc1f82 100644
--- a/packages/clay-core/docs/vertical-bar.mdx
+++ b/packages/clay-core/docs/vertical-bar.mdx
@@ -7,11 +7,11 @@ packageUse: "import {VerticalBar} from '@clayui/core';"
 storybookPath: 'design-system-components-verticalbar'
 packageTypes:
     [
-        'clay-core/src/vertical-bar/vertical-bar',
-        'clay-core/src/vertical-bar/bar',
-        'clay-core/src/vertical-bar/item',
-        'clay-core/src/vertical-bar/panel',
-        'clay-core/src/vertical-bar/content',
+        'clay-core/src/vertical-bar/VerticalBar.tsx',
+        'clay-core/src/vertical-bar/Bar.tsx',
+        'clay-core/src/vertical-bar/Item.tsx',
+        'clay-core/src/vertical-bar/Panel.tsx',
+        'clay-core/src/vertical-bar/Content.tsx',
     ]
 ---
 
diff --git a/packages/clay-core/src/nav/Link.tsx b/packages/clay-core/src/nav/Link.tsx
index 651afaa263..961539f3d1 100644
--- a/packages/clay-core/src/nav/Link.tsx
+++ b/packages/clay-core/src/nav/Link.tsx
@@ -8,7 +8,7 @@ import {LinkOrButton} from '@clayui/shared';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 	/**
 	 * Flag to indicate if `active` class should be applied.
 	 */
diff --git a/packages/clay-core/src/nav/Nav.tsx b/packages/clay-core/src/nav/Nav.tsx
index 1bc949a0c1..c989ac9910 100644
--- a/packages/clay-core/src/nav/Nav.tsx
+++ b/packages/clay-core/src/nav/Nav.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import {Item} from './Item';
 import {Link} from './Link';
 
-export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	/**
 	 * Flag to indicate if `nav-nested` class should be applied. Adds padding to indent each nested navigation.
 	 */
@@ -26,7 +26,7 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	stacked?: boolean;
 }
 
-export interface IForwardRef<T, P = {}>
+interface IForwardRef<T, P = {}>
 	extends React.ForwardRefExoticComponent<P & React.RefAttributes<T>> {
 	Item: typeof Item;
 	Link: typeof Link;
diff --git a/packages/clay-core/src/picker/Picker.tsx b/packages/clay-core/src/picker/Picker.tsx
index 8c4ad1872c..c5d87cb1c7 100644
--- a/packages/clay-core/src/picker/Picker.tsx
+++ b/packages/clay-core/src/picker/Picker.tsx
@@ -30,7 +30,7 @@ import {PickerContext} from './context';
 import type {ICollectionProps} from '../collection';
 import type {AnnouncerAPI} from '../live-announcer';
 
-export type Props<T> = {
+type Props<T> = {
 	/**
 	 * Flag to indicate if the DropDown menu is active or not (controlled).
 	 */
diff --git a/packages/clay-core/src/table/Cell.tsx b/packages/clay-core/src/table/Cell.tsx
index aafda61fb8..4eeecc00f7 100644
--- a/packages/clay-core/src/table/Cell.tsx
+++ b/packages/clay-core/src/table/Cell.tsx
@@ -98,264 +98,262 @@ interface IProps
 	) => void;
 }
 
-export function Cell(
-	{
-		UNSAFE_resizable,
-		UNSAFE_resizerClassName,
-		UNSAFE_resizerOnMouseDown,
-		align,
-		children,
-		className,
-		delimiter,
-		expanded,
-		index,
-		keyValue,
-		sortable,
-		textAlign,
-		textValue,
-		truncate,
-		width = 'auto',
-		wrap = true,
-		...otherProps
-	}: IProps,
-	ref: React.Ref<HTMLTableCellElement>
-) {
-	const {
-		columnsVisibility,
-		expandedKeys,
-		headCellsCount,
-		messages,
-		onExpandedChange,
-		onSortChange,
-		sort,
-		sortDescriptionId,
-		treegrid,
-	} = useTable();
-
-	const [isFocused, setIsFocused] = useState(false);
-
-	const focusWithinProps = useFocusWithin({
-		disabled: !treegrid,
-		id: keyValue!,
-		onFocusChange: setIsFocused,
-	});
-	const scope = useScope();
-	const {divider, expandable, isLoading, key, lazy, level, loadMore} =
-		useRow();
-
-	const isHead = scope === Scope.Head;
-	const As = isHead ? 'th' : 'td';
-
-	const childrenCount = React.Children.count(children);
-
-	const toggle = useCallback(
-		(key: React.Key) => {
-			const newExpandedKeys = new Set(expandedKeys);
-
-			if (newExpandedKeys.has(key)) {
-				newExpandedKeys.delete(key);
-			} else {
-				newExpandedKeys.add(key);
-			}
-
-			onExpandedChange(newExpandedKeys);
-		},
-		[expandedKeys, onExpandedChange]
-	);
-
-	const doSort = useCallback(
-		() =>
-			onSortChange(
-				{
-					column: keyValue!,
-					direction:
-						sort && keyValue === sort.column
-							? sort.direction === 'ascending'
-								? 'descending'
-								: 'ascending'
-							: 'ascending',
-				},
-				textValue!
-			),
-		[onSortChange, keyValue, sort]
-	);
-
-	const isExpandable = (expandable || lazy) && !isLoading;
-	const isSortable = isHead && sortable;
-
-	return (
-		<As
-			{...otherProps}
-			{...focusWithinProps}
-			aria-colindex={isHead && !sortable ? undefined : index! + 1}
-			aria-describedby={isSortable ? sortDescriptionId : undefined}
-			aria-sort={
-				isSortable
-					? sort && keyValue === sort.column
-						? sort.direction
-						: 'none'
-					: undefined
-			}
-			className={classNames(className, {
-				'order-arrow-down-active': isSortable
-					? sort &&
-					  keyValue === sort.column &&
-					  sort.direction === 'descending'
-					: undefined,
-				'order-arrow-up-active': isSortable
-					? sort &&
-					  keyValue === sort.column &&
-					  sort.direction === 'ascending'
-					: undefined,
-				'table-cell-expand': truncate || expanded,
-				[`table-cell-${delimiter}`]: delimiter,
-				[`table-column-text-${textAlign}`]: textAlign,
-				[`text-${align}`]: align,
-				'table-cell-ws-nowrap': !wrap,
-				'table-focus': focusWithinProps.tabIndex === 0 && isFocused,
-				'table-head-title': isHead,
-			})}
-			colSpan={
-				divider
-					? headCellsCount + (columnsVisibility ? 1 : 0)
-					: undefined
-			}
-			data-id={
-				typeof keyValue === 'number'
-					? `number,${keyValue}`
-					: `string,${keyValue}`
-			}
-			onClick={(event) => {
-				if (!isSortable) {
-					return;
+export const Cell = React.forwardRef(
+	(
+		{
+			UNSAFE_resizable,
+			UNSAFE_resizerClassName,
+			UNSAFE_resizerOnMouseDown,
+			align,
+			children,
+			className,
+			delimiter,
+			expanded,
+			index,
+			keyValue,
+			sortable,
+			textAlign,
+			textValue,
+			truncate,
+			width = 'auto',
+			wrap = true,
+			...otherProps
+		}: IProps,
+		ref: React.Ref<HTMLTableCellElement>
+	) => {
+		const {
+			columnsVisibility,
+			expandedKeys,
+			headCellsCount,
+			messages,
+			onExpandedChange,
+			onSortChange,
+			sort,
+			sortDescriptionId,
+			treegrid,
+		} = useTable();
+
+		const [isFocused, setIsFocused] = useState(false);
+
+		const focusWithinProps = useFocusWithin({
+			disabled: !treegrid,
+			id: keyValue!,
+			onFocusChange: setIsFocused,
+		});
+		const scope = useScope();
+		const {divider, expandable, isLoading, key, lazy, level, loadMore} =
+			useRow();
+
+		const isHead = scope === Scope.Head;
+		const As = isHead ? 'th' : 'td';
+
+		const childrenCount = React.Children.count(children);
+
+		const toggle = useCallback(
+			(key: React.Key) => {
+				const newExpandedKeys = new Set(expandedKeys);
+
+				if (newExpandedKeys.has(key)) {
+					newExpandedKeys.delete(key);
+				} else {
+					newExpandedKeys.add(key);
 				}
 
-				event.preventDefault();
-				doSort();
-			}}
-			onKeyDown={(event) => {
-				if (event.key === Keys.Enter) {
-					if (isSortable) {
-						event.preventDefault();
-						doSort();
-					}
-
-					if (treegrid && isExpandable) {
-						toggle(key!);
-					}
+				onExpandedChange(newExpandedKeys);
+			},
+			[expandedKeys, onExpandedChange]
+		);
+
+		const doSort = useCallback(
+			() =>
+				onSortChange(
+					{
+						column: keyValue!,
+						direction:
+							sort && keyValue === sort.column
+								? sort.direction === 'ascending'
+									? 'descending'
+									: 'ascending'
+								: 'ascending',
+					},
+					textValue!
+				),
+			[onSortChange, keyValue, sort]
+		);
+
+		const isExpandable = (expandable || lazy) && !isLoading;
+		const isSortable = isHead && sortable;
+
+		return (
+			<As
+				{...otherProps}
+				{...focusWithinProps}
+				aria-colindex={isHead && !sortable ? undefined : index! + 1}
+				aria-describedby={isSortable ? sortDescriptionId : undefined}
+				aria-sort={
+					isSortable
+						? sort && keyValue === sort.column
+							? sort.direction
+							: 'none'
+						: undefined
 				}
-			}}
-			ref={ref}
-			role={treegrid ? 'gridcell' : undefined}
-			style={{
-				width,
-			}}
-			tabIndex={focusWithinProps.tabIndex}
-		>
-			{isSortable ? (
-				<Layout.ContentRow>
-					<Layout.ContentCol expand>
-						<span className="text-truncate-inline">
-							<span className="text-truncate">{children}</span>
-						</span>
-					</Layout.ContentCol>
-					<Layout.ContentCol>
-						<button
-							aria-label={messages['sortDescription']}
-							className="component-action"
-							type="button"
-						>
-							<Icon symbol="order-arrow" />
-						</button>
-					</Layout.ContentCol>
-				</Layout.ContentRow>
-			) : truncate ? (
-				<span className="text-truncate-inline">
-					<span className="text-truncate">{children}</span>
-				</span>
-			) : treegrid && index === 0 && !isHead ? (
-				<Layout.ContentRow
-					style={{
-						paddingLeft:
-							(level - (expandable || lazy ? 1 : 0)) * 28 -
-							(expandable || lazy ? 4 : 0),
-					}}
-				>
-					{isExpandable && (
-						<Layout.ContentCol className="autofit-col-toggle">
-							<Button
-								aria-label={messages['expandable']}
-								borderless
-								displayType="secondary"
-								monospaced
-								onClick={() => {
-									if (expandable) {
-										toggle(key);
-									} else {
-										loadMore();
-									}
-								}}
-								size="xs"
-								tabIndex={-1}
-							>
-								<Icon
-									symbol={
-										expandedKeys.has(key)
-											? 'angle-down'
-											: 'angle-right'
-									}
-								/>
-							</Button>
-						</Layout.ContentCol>
-					)}
-
-					{isLoading && (
-						<Layout.ContentCol className="autofit-col-toggle">
-							<div className="btn-monospaced btn-xs">
-								<LoadingIndicator size="sm" />
-							</div>
-						</Layout.ContentCol>
-					)}
+				className={classNames(className, {
+					'order-arrow-down-active': isSortable
+						? sort &&
+						  keyValue === sort.column &&
+						  sort.direction === 'descending'
+						: undefined,
+					'order-arrow-up-active': isSortable
+						? sort &&
+						  keyValue === sort.column &&
+						  sort.direction === 'ascending'
+						: undefined,
+					'table-cell-expand': truncate || expanded,
+					[`table-cell-${delimiter}`]: delimiter,
+					[`table-column-text-${textAlign}`]: textAlign,
+					[`text-${align}`]: align,
+					'table-cell-ws-nowrap': !wrap,
+					'table-focus': focusWithinProps.tabIndex === 0 && isFocused,
+					'table-head-title': isHead,
+				})}
+				colSpan={
+					divider
+						? headCellsCount + (columnsVisibility ? 1 : 0)
+						: undefined
+				}
+				data-id={
+					typeof keyValue === 'number'
+						? `number,${keyValue}`
+						: `string,${keyValue}`
+				}
+				onClick={(event) => {
+					if (!isSortable) {
+						return;
+					}
 
-					{React.Children.map(children, (child, index) => {
-						if (!child) {
-							return null;
+					event.preventDefault();
+					doSort();
+				}}
+				onKeyDown={(event) => {
+					if (event.key === Keys.Enter) {
+						if (isSortable) {
+							event.preventDefault();
+							doSort();
 						}
 
-						return (
-							<Layout.ContentCol
-								className={classNames({
-									'autofit-col-checkbox':
-										React.isValidElement(child) &&
-										// @ts-ignore
-										child?.type.displayName === 'ClayIcon',
-								})}
-								expand={index === childrenCount - 1}
+						if (treegrid && isExpandable) {
+							toggle(key!);
+						}
+					}
+				}}
+				ref={ref}
+				role={treegrid ? 'gridcell' : undefined}
+				style={{
+					width,
+				}}
+				tabIndex={focusWithinProps.tabIndex}
+			>
+				{isSortable ? (
+					<Layout.ContentRow>
+						<Layout.ContentCol expand>
+							<span className="text-truncate-inline">
+								<span className="text-truncate">
+									{children}
+								</span>
+							</span>
+						</Layout.ContentCol>
+						<Layout.ContentCol>
+							<button
+								aria-label={messages['sortDescription']}
+								className="component-action"
+								type="button"
 							>
-								{child}
+								<Icon symbol="order-arrow" />
+							</button>
+						</Layout.ContentCol>
+					</Layout.ContentRow>
+				) : truncate ? (
+					<span className="text-truncate-inline">
+						<span className="text-truncate">{children}</span>
+					</span>
+				) : treegrid && index === 0 && !isHead ? (
+					<Layout.ContentRow
+						style={{
+							paddingLeft:
+								(level - (expandable || lazy ? 1 : 0)) * 28 -
+								(expandable || lazy ? 4 : 0),
+						}}
+					>
+						{isExpandable && (
+							<Layout.ContentCol className="autofit-col-toggle">
+								<Button
+									aria-label={messages['expandable']}
+									borderless
+									displayType="secondary"
+									monospaced
+									onClick={() => {
+										if (expandable) {
+											toggle(key);
+										} else {
+											loadMore();
+										}
+									}}
+									size="xs"
+									tabIndex={-1}
+								>
+									<Icon
+										symbol={
+											expandedKeys.has(key)
+												? 'angle-down'
+												: 'angle-right'
+										}
+									/>
+								</Button>
 							</Layout.ContentCol>
-						);
-					})}
-				</Layout.ContentRow>
-			) : (
-				children
-			)}
-
-			{UNSAFE_resizable && (
-				<div
-					className={UNSAFE_resizerClassName}
-					onMouseDown={UNSAFE_resizerOnMouseDown}
-				/>
-			)}
-		</As>
-	);
-}
-
-type ForwardRef = {
-	displayName: string;
-	(props: IProps & {ref?: React.Ref<HTMLTableCellElement>}): JSX.Element;
-};
+						)}
 
-export const ForwardCell = React.forwardRef(Cell) as ForwardRef;
-
-ForwardCell.displayName = 'Item';
+						{isLoading && (
+							<Layout.ContentCol className="autofit-col-toggle">
+								<div className="btn-monospaced btn-xs">
+									<LoadingIndicator size="sm" />
+								</div>
+							</Layout.ContentCol>
+						)}
+
+						{React.Children.map(children, (child, index) => {
+							if (!child) {
+								return null;
+							}
+
+							return (
+								<Layout.ContentCol
+									className={classNames({
+										'autofit-col-checkbox':
+											React.isValidElement(child) &&
+											// @ts-ignore
+											child?.type.displayName ===
+												'ClayIcon',
+									})}
+									expand={index === childrenCount - 1}
+								>
+									{child}
+								</Layout.ContentCol>
+							);
+						})}
+					</Layout.ContentRow>
+				) : (
+					children
+				)}
+
+				{UNSAFE_resizable && (
+					<div
+						className={UNSAFE_resizerClassName}
+						onMouseDown={UNSAFE_resizerOnMouseDown}
+					/>
+				)}
+			</As>
+		);
+	}
+);
+
+Cell.displayName = 'Item';
diff --git a/packages/clay-core/src/table/Head.tsx b/packages/clay-core/src/table/Head.tsx
index b9fcd8bd63..9443bd2c38 100644
--- a/packages/clay-core/src/table/Head.tsx
+++ b/packages/clay-core/src/table/Head.tsx
@@ -11,7 +11,7 @@ import React, {useMemo} from 'react';
 
 import {ChildrenFunction, Collection, useCollection} from '../collection';
 import {Item, Menu} from '../drop-down';
-import {ForwardCell} from './Cell';
+import {Cell} from './Cell';
 import {Scope, ScopeContext} from './ScopeContext';
 import {useTable} from './context';
 
@@ -48,7 +48,7 @@ interface IProps<T> extends React.TableHTMLAttributes<HTMLTableSectionElement> {
 	items?: Array<T>;
 }
 
-export const Head = function HeadInner<T extends Record<string, any>>(
+export function Head<T extends Record<string, any>>(
 	{children, items, ...otherProps}: IProps<T>,
 	ref: React.Ref<HTMLTableSectionElement>
 ) {
@@ -82,7 +82,7 @@ export const Head = function HeadInner<T extends Record<string, any>>(
 					<Collection<T> collection={collection} />
 
 					{columnsVisibility && (
-						<ForwardCell keyValue="visibility" width="72px">
+						<Cell keyValue="visibility" width="72px">
 							<Menu
 								UNSAFE_focusableElements={[
 									'input[role="switch"]',
@@ -208,13 +208,13 @@ export const Head = function HeadInner<T extends Record<string, any>>(
 									)
 								}
 							</Menu>
-						</ForwardCell>
+						</Cell>
 					)}
 				</tr>
 			</ScopeContext.Provider>
 		</thead>
 	);
-};
+}
 
 type ForwardRef = {
 	displayName: string;
diff --git a/packages/clay-core/src/table/Row.tsx b/packages/clay-core/src/table/Row.tsx
index 82c7dfc728..13b7ff7b4a 100644
--- a/packages/clay-core/src/table/Row.tsx
+++ b/packages/clay-core/src/table/Row.tsx
@@ -10,7 +10,7 @@ import React, {useCallback, useMemo, useState} from 'react';
 import {useFocusWithin} from '../aria';
 import {ChildrenFunction, Collection, useCollection} from '../collection';
 import {useForwardRef} from '../hooks';
-import {ForwardCell} from './Cell';
+import {Cell} from './Cell';
 import {RowContext, useBody, useTable} from './context';
 
 interface IProps<T> extends React.HTMLAttributes<HTMLTableRowElement> {
@@ -235,12 +235,12 @@ export function Row<T extends Record<string, any>>(
 				{columnsVisibility &&
 					!divider &&
 					collection.getSize() === headCellsCount && (
-						<ForwardCell
+						<Cell
 							index={headCellsCount}
 							keyValue={`${keyValue}:visibility`}
 						>
 							{null}
-						</ForwardCell>
+						</Cell>
 					)}
 			</RowContext.Provider>
 		</tr>
diff --git a/packages/clay-core/src/table/Table.tsx b/packages/clay-core/src/table/Table.tsx
index 7528e67ddc..2bf66d7e3e 100644
--- a/packages/clay-core/src/table/Table.tsx
+++ b/packages/clay-core/src/table/Table.tsx
@@ -17,7 +17,7 @@ import {useTreeNavigation} from './useTreeNavigation';
 
 import type {AnnouncerAPI} from '../live-announcer';
 
-export interface IProps extends React.HTMLAttributes<HTMLTableElement> {
+interface IProps extends React.HTMLAttributes<HTMLTableElement> {
 	/**
 	 * Defines the columns that are always visible and will be ignored by the
 	 * visible columns functionality.
@@ -170,184 +170,181 @@ const locator = {
 };
 const defaultSet = new Set<React.Key>();
 
-export function Table(
-	{
-		alwaysVisibleColumns = new Set(),
-		columnsVisibility = true,
-		children,
-		className,
-		defaultExpandedKeys = defaultSet,
-		defaultSort,
-		defaultVisibleColumns = new Map(),
-		expandedKeys: externalExpandedKeys,
-		messages = {
-			columnsVisibility: 'Manage Columns Visibility',
-			columnsVisibilityDescription:
-				'At least one column must remain visible.',
-			columnsVisibilityHeader: 'Columns Visibility',
-			expandable: 'expandable',
-			sortDescription: 'sortable column',
-			sorting: 'sorted by column {0} in {1} order',
-		},
-		visibleColumns: externalVisibleColumns,
-		onExpandedChange,
-		onVisibleColumnsChange,
-		onLoadMore,
-		onSortChange,
-		size,
-		sort: externalSort,
-		nestedKey,
-		...otherProps
-	}: IProps,
-	outRef: React.Ref<HTMLTableElement>
-) {
-	const [expandedKeys, setExpandedKeys] = useControlledState<Set<React.Key>>({
-		defaultName: 'defaultExpandedKeys',
-		defaultValue: defaultExpandedKeys,
-		handleName: 'onExpandedChange',
-		name: 'expandedKeys',
-		onChange: onExpandedChange,
-		value: externalExpandedKeys,
-	});
-
-	const [sort, setSorting] = useControlledState({
-		defaultName: 'defaultSort',
-		defaultValue: defaultSort,
-		handleName: 'onSortChange',
-		name: 'sort',
-		onChange: onSortChange,
-		value: externalSort,
-	});
-
-	const [visibleColumns, setVisibleColumns] = useControlledState({
-		defaultName: 'defaultVisibleColumns',
-		defaultValue: defaultVisibleColumns,
-		handleName: 'onVisibleColumnsChange',
-		name: 'visibleColumns',
-		onChange: onVisibleColumnsChange,
-		value: externalVisibleColumns,
-	});
-
-	const ref = useForwardRef(outRef);
-	const announcerAPI = useRef<AnnouncerAPI>(null);
-
-	const {navigationProps} = useTreeNavigation({
-		disabled: !nestedKey,
-		locator,
-		ref,
-	});
-
-	const sortDescriptionId = useId();
-
-	const [headCellsCount, setHeadCellsCount] = useState(0);
-
-	return (
-		<RootTable
-			{...otherProps}
-			{...navigationProps}
-			className={classNames(className, {
-				'table-nested-rows': nestedKey,
-				[`table-${size}`]: size,
-				'table-sort': sort || sort === null,
-			})}
-			ref={ref}
-			role={nestedKey ? 'treegrid' : undefined}
-			style={{
-				tableLayout: 'fixed',
-			}}
-			tableVerticalAlignment="middle"
-		>
-			<LiveAnnouncer ref={announcerAPI} />
-
-			<FocusWithinProvider
-				containerRef={ref}
-				focusableElements={focusableElements}
+export const Table = React.forwardRef(
+	(
+		{
+			alwaysVisibleColumns = new Set(),
+			columnsVisibility = true,
+			children,
+			className,
+			defaultExpandedKeys = defaultSet,
+			defaultSort,
+			defaultVisibleColumns = new Map(),
+			expandedKeys: externalExpandedKeys,
+			messages = {
+				columnsVisibility: 'Manage Columns Visibility',
+				columnsVisibilityDescription:
+					'At least one column must remain visible.',
+				columnsVisibilityHeader: 'Columns Visibility',
+				expandable: 'expandable',
+				sortDescription: 'sortable column',
+				sorting: 'sorted by column {0} in {1} order',
+			},
+			visibleColumns: externalVisibleColumns,
+			onExpandedChange,
+			onVisibleColumnsChange,
+			onLoadMore,
+			onSortChange,
+			size,
+			sort: externalSort,
+			nestedKey,
+			...otherProps
+		}: IProps,
+		outRef: React.Ref<HTMLTableElement>
+	) => {
+		const [expandedKeys, setExpandedKeys] = useControlledState<
+			Set<React.Key>
+		>({
+			defaultName: 'defaultExpandedKeys',
+			defaultValue: defaultExpandedKeys,
+			handleName: 'onExpandedChange',
+			name: 'expandedKeys',
+			onChange: onExpandedChange,
+			value: externalExpandedKeys,
+		});
+
+		const [sort, setSorting] = useControlledState({
+			defaultName: 'defaultSort',
+			defaultValue: defaultSort,
+			handleName: 'onSortChange',
+			name: 'sort',
+			onChange: onSortChange,
+			value: externalSort,
+		});
+
+		const [visibleColumns, setVisibleColumns] = useControlledState({
+			defaultName: 'defaultVisibleColumns',
+			defaultValue: defaultVisibleColumns,
+			handleName: 'onVisibleColumnsChange',
+			name: 'visibleColumns',
+			onChange: onVisibleColumnsChange,
+			value: externalVisibleColumns,
+		});
+
+		const ref = useForwardRef(outRef);
+		const announcerAPI = useRef<AnnouncerAPI>(null);
+
+		const {navigationProps} = useTreeNavigation({
+			disabled: !nestedKey,
+			locator,
+			ref,
+		});
+
+		const sortDescriptionId = useId();
+
+		const [headCellsCount, setHeadCellsCount] = useState(0);
+
+		return (
+			<RootTable
+				{...otherProps}
+				{...navigationProps}
+				className={classNames(className, {
+					'table-nested-rows': nestedKey,
+					[`table-${size}`]: size,
+					'table-sort': sort || sort === null,
+				})}
+				ref={ref}
+				role={nestedKey ? 'treegrid' : undefined}
+				style={{
+					tableLayout: 'fixed',
+				}}
+				tableVerticalAlignment="middle"
 			>
-				<TableContext.Provider
-					value={{
-						alwaysVisibleColumns,
-						columnsVisibility,
-						expandedKeys,
-						headCellsCount,
-						messages,
-						nestedKey,
-						onExpandedChange: setExpandedKeys,
-						onHeadCellsChange: setHeadCellsCount,
-						onLoadMore,
-						onSortChange: useCallback(
-							(sort, textValue) => {
-								announcerAPI.current!.announce(
-									sub(messages!.sorting, [
-										textValue,
-										sort!.direction,
-									])
-								);
-								setSorting(sort);
-							},
-							[setSorting]
-						),
-						onVisibleColumnsChange: useCallback(
-							(
-								column: React.Key | Array<React.Key>,
-								index: number
-							) => {
-								if (Array.isArray(column)) {
-									const columns = new Map(visibleColumns);
-
-									column.forEach((value, index) => {
-										if (columns.has(value)) {
-											columns.delete(value);
-										} else {
-											columns.set(value, index);
-										}
-									});
+				<LiveAnnouncer ref={announcerAPI} />
 
-									setVisibleColumns(columns);
-
-									return;
-								}
-
-								const columns = new Map(visibleColumns);
-
-								if (columns.has(column)) {
-									columns.delete(column);
-								} else {
-									columns.set(column, index);
-								}
-
-								setVisibleColumns(columns);
-							},
-							[setVisibleColumns, visibleColumns]
-						),
-						sort,
-						sortDescriptionId,
-						treegrid: !!nestedKey,
-						visibleColumns,
-					}}
-				>
-					{children}
-				</TableContext.Provider>
-			</FocusWithinProvider>
-
-			{createPortal(
-				<div
-					aria-hidden="true"
-					id={sortDescriptionId}
-					style={{display: 'none'}}
+				<FocusWithinProvider
+					containerRef={ref}
+					focusableElements={focusableElements}
 				>
-					{messages!.sortDescription}
-				</div>,
-				document.body
-			)}
-		</RootTable>
-	);
-}
+					<TableContext.Provider
+						value={{
+							alwaysVisibleColumns,
+							columnsVisibility,
+							expandedKeys,
+							headCellsCount,
+							messages,
+							nestedKey,
+							onExpandedChange: setExpandedKeys,
+							onHeadCellsChange: setHeadCellsCount,
+							onLoadMore,
+							onSortChange: useCallback(
+								(sort, textValue) => {
+									announcerAPI.current!.announce(
+										sub(messages!.sorting, [
+											textValue,
+											sort!.direction,
+										])
+									);
+									setSorting(sort);
+								},
+								[setSorting]
+							),
+							onVisibleColumnsChange: useCallback(
+								(
+									column: React.Key | Array<React.Key>,
+									index: number
+								) => {
+									if (Array.isArray(column)) {
+										const columns = new Map(visibleColumns);
+
+										column.forEach((value, index) => {
+											if (columns.has(value)) {
+												columns.delete(value);
+											} else {
+												columns.set(value, index);
+											}
+										});
+
+										setVisibleColumns(columns);
+
+										return;
+									}
 
-type ForwardRef = {
-	displayName: string;
-	(props: IProps & {ref?: React.Ref<HTMLTableElement>}): JSX.Element;
-};
+									const columns = new Map(visibleColumns);
 
-export const ForwardTable = React.forwardRef(Table) as ForwardRef;
+									if (columns.has(column)) {
+										columns.delete(column);
+									} else {
+										columns.set(column, index);
+									}
 
-ForwardTable.displayName = 'Table';
+									setVisibleColumns(columns);
+								},
+								[setVisibleColumns, visibleColumns]
+							),
+							sort,
+							sortDescriptionId,
+							treegrid: !!nestedKey,
+							visibleColumns,
+						}}
+					>
+						{children}
+					</TableContext.Provider>
+				</FocusWithinProvider>
+
+				{createPortal(
+					<div
+						aria-hidden="true"
+						id={sortDescriptionId}
+						style={{display: 'none'}}
+					>
+						{messages!.sortDescription}
+					</div>,
+					document.body
+				)}
+			</RootTable>
+		);
+	}
+);
+
+Table.displayName = 'Table';
diff --git a/packages/clay-core/src/table/index.ts b/packages/clay-core/src/table/index.ts
index a3682abbea..a0b99ec2be 100644
--- a/packages/clay-core/src/table/index.ts
+++ b/packages/clay-core/src/table/index.ts
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-export {ForwardBody as Body, Body as UNSAFE_Body} from './Body';
-export {ForwardCell as Cell, Cell as UNSAFE_Cell} from './Cell';
-export {ForwardHead as Head, Head as UNSAFE_Head} from './Head';
-export {ForwardRow as Row, Row as UNSAFE_Row} from './Row';
-export {ForwardTable as Table, Table as UNSAFE_Table} from './Table';
+export {ForwardBody as Body} from './Body';
+export {Cell} from './Cell';
+export {ForwardHead as Head} from './Head';
+export {ForwardRow as Row} from './Row';
+export {Table} from './Table';
diff --git a/packages/clay-core/src/tree-view/TreeView.tsx b/packages/clay-core/src/tree-view/TreeView.tsx
index 19b11f5e97..8087d21d6b 100644
--- a/packages/clay-core/src/tree-view/TreeView.tsx
+++ b/packages/clay-core/src/tree-view/TreeView.tsx
@@ -13,8 +13,8 @@ import {FocusWithinProvider} from '../aria';
 import {ChildrenFunction, Collection, ICollectionProps} from './Collection';
 import {DragAndDropMessages, DragAndDropProvider} from './DragAndDrop';
 import DragLayer from './DragLayer';
-import {TreeViewGroup} from './TreeViewGroup';
-import {TreeViewItem, TreeViewItemStack} from './TreeViewItem';
+import {Group} from './TreeViewGroup';
+import {Item, ItemStack} from './TreeViewItem';
 import {Icons, MoveItemIndex, OnLoadMore, TreeViewContext} from './context';
 import {ITreeProps, useTree} from './useTree';
 
@@ -256,6 +256,6 @@ export function TreeView<T extends Record<string, any>>({
 	);
 }
 
-TreeView.Group = TreeViewGroup;
-TreeView.Item = TreeViewItem;
-TreeView.ItemStack = TreeViewItemStack;
+TreeView.Group = Group;
+TreeView.Item = Item;
+TreeView.ItemStack = ItemStack;
diff --git a/packages/clay-core/src/tree-view/TreeViewGroup.tsx b/packages/clay-core/src/tree-view/TreeViewGroup.tsx
index 7b1e924340..24dc86484a 100644
--- a/packages/clay-core/src/tree-view/TreeViewGroup.tsx
+++ b/packages/clay-core/src/tree-view/TreeViewGroup.tsx
@@ -31,13 +31,7 @@ const List = React.forwardRef<
 	);
 });
 
-export function TreeViewGroup<T extends Record<string, any>>(
-	props: ITreeViewGroupProps<T>
-): JSX.Element & {
-	displayName: string;
-};
-
-export function TreeViewGroup<T extends Record<any, any>>({
+export function Group<T extends Record<any, any>>({
 	children,
 	className,
 	items,
@@ -91,4 +85,4 @@ export function TreeViewGroup<T extends Record<any, any>>({
 	);
 }
 
-TreeViewGroup.displayName = 'ClayTreeViewGroup';
+Group.displayName = 'ClayTreeViewGroup';
diff --git a/packages/clay-core/src/tree-view/TreeViewItem.tsx b/packages/clay-core/src/tree-view/TreeViewItem.tsx
index 2372f64216..96db3c6b79 100644
--- a/packages/clay-core/src/tree-view/TreeViewItem.tsx
+++ b/packages/clay-core/src/tree-view/TreeViewItem.tsx
@@ -24,7 +24,7 @@ import {useDnD} from './DragAndDrop';
 import {Icons, useAPI, useTreeViewContext} from './context';
 import {useItem} from './useItem';
 
-export interface ITreeViewItemProps
+interface ITreeViewItemProps
 	extends Omit<React.HTMLAttributes<HTMLLIElement>, 'children'> {
 	/**
 	 * Flag to set the node to the active state.
@@ -80,503 +80,516 @@ export interface ITreeViewItemProps
 
 const SpacingContext = React.createContext(0);
 
-export const TreeViewItem = React.forwardRef<
-	HTMLDivElement,
-	ITreeViewItemProps
->(function TreeViewItemInner(
-	{
-		actions,
-		children,
-		expandable,
-		isDragging,
-		overPosition,
-		overTarget,
-		...otherProps
-	}: ITreeViewItemProps,
-	ref
-) {
-	const spacing = useContext(SpacingContext);
-	const {
-		childrenRoot,
-		close,
-		dragAndDrop,
-		expandDoubleClick,
-		expandedKeys,
-		nestedKey,
-		onRenameItem,
-		onSelect,
-		open,
-		remove,
-		replace,
-		rootRef,
-		selection,
-		selectionMode,
-		toggle,
-	} = useTreeViewContext();
-	const [focus, setFocus] = useState(false);
-	const [loading, setLoading] = useState(false);
-	const {mode} = useDnD();
-	const item = useItem();
-	const clickCapturedRef = useRef(false);
-	const api = useAPI();
-
-	const load = api[2];
-
-	const [left, right, ...otherElements] = React.Children.toArray(children);
-
-	const group =
-		// @ts-ignore
-		right?.type?.displayName === 'ClayTreeViewGroup' ? right : null;
-
-	useEffect(() => {
-		if (focus) {
-			const onClick = () => {
-				if (!clickCapturedRef.current) {
-					setFocus(false);
-				}
+export const Item = React.forwardRef<HTMLDivElement, ITreeViewItemProps>(
+	function TreeViewItemInner(
+		{
+			actions,
+			children,
+			expandable,
+			isDragging,
+			overPosition,
+			overTarget,
+			...otherProps
+		}: ITreeViewItemProps,
+		ref
+	) {
+		const spacing = useContext(SpacingContext);
+		const {
+			childrenRoot,
+			close,
+			dragAndDrop,
+			expandDoubleClick,
+			expandedKeys,
+			nestedKey,
+			onRenameItem,
+			onSelect,
+			open,
+			remove,
+			replace,
+			rootRef,
+			selection,
+			selectionMode,
+			toggle,
+		} = useTreeViewContext();
+		const [focus, setFocus] = useState(false);
+		const [loading, setLoading] = useState(false);
+		const {mode} = useDnD();
+		const item = useItem();
+		const clickCapturedRef = useRef(false);
+		const api = useAPI();
+
+		const load = api[2];
+
+		const [left, right, ...otherElements] =
+			React.Children.toArray(children);
+
+		const group =
+			// @ts-ignore
+			right?.type?.displayName === 'ClayTreeViewGroup' ? right : null;
+
+		useEffect(() => {
+			if (focus) {
+				const onClick = () => {
+					if (!clickCapturedRef.current) {
+						setFocus(false);
+					}
 
-				clickCapturedRef.current = false;
-			};
+					clickCapturedRef.current = false;
+				};
 
-			document.addEventListener('focus', onClick, true);
-			document.addEventListener('mousedown', onClick);
+				document.addEventListener('focus', onClick, true);
+				document.addEventListener('mousedown', onClick);
 
-			return () => {
-				document.removeEventListener('focus', onClick, true);
-				document.removeEventListener('mousedown', onClick);
-			};
-		}
-	}, [focus]);
+				return () => {
+					document.removeEventListener('focus', onClick, true);
+					document.removeEventListener('mousedown', onClick);
+				};
+			}
+		}, [focus]);
 
-	const loadMore = useCallback(() => {
-		if (group) {
-			return;
-		}
+		const loadMore = useCallback(() => {
+			if (group) {
+				return;
+			}
 
-		const promise = load.loadMore(item.key, item, true);
+			const promise = load.loadMore(item.key, item, true);
 
-		if (promise) {
-			setLoading(true);
-			promise.then(() => setLoading(false));
-		}
-	}, [item, group, load.loadMore]);
-
-	const hasItemStack =
-		typeof left !== 'string' && group && React.isValidElement(left);
-
-	const itemStackProps = hasItemStack
-		? (left as React.ReactElement).props
-		: {};
-
-	// The ownership of TreeView properties changes according to the component
-	// declaration that helps in inferring the visual intuition of which
-	// component is Node.
-	const propsOwnership = group ? 'item' : 'node';
-
-	const itemProps = propsOwnership === 'item' ? otherProps : {};
-	const nodeProps = propsOwnership === 'node' ? otherProps : {};
-
-	const hasChildren =
-		nestedKey && item[nestedKey] && item[nestedKey].length > 0;
-
-	const isExpand =
-		expandable ||
-		itemStackProps.expandable ||
-		(childrenRoot.current ? hasChildren : group);
-
-	const focusWithinProps = useFocusWithin({
-		disabled:
-			itemStackProps.disabled ||
-			nodeProps.disabled ||
-			mode === 'keyboard',
-		id: item.key,
-	});
-	const labelId = useId();
-	const ariaOwns = useId();
-
-	const isNonDraggrable =
-		itemStackProps.draggable === false || nodeProps.draggable;
-
-	if (!group && nestedKey && item[nestedKey] && childrenRoot.current) {
-		return React.cloneElement(
-			childrenRoot.current(removeItemInternalProps(item), ...api),
-			{
-				actions,
-				isDragging,
-				overPosition,
-				overTarget,
-				ref,
+			if (promise) {
+				setLoading(true);
+				promise.then(() => setLoading(false));
 			}
-		);
-	}
+		}, [item, group, load.loadMore]);
+
+		const hasItemStack =
+			typeof left !== 'string' && group && React.isValidElement(left);
+
+		const itemStackProps = hasItemStack
+			? (left as React.ReactElement).props
+			: {};
+
+		// The ownership of TreeView properties changes according to the component
+		// declaration that helps in inferring the visual intuition of which
+		// component is Node.
+		const propsOwnership = group ? 'item' : 'node';
+
+		const itemProps = propsOwnership === 'item' ? otherProps : {};
+		const nodeProps = propsOwnership === 'node' ? otherProps : {};
+
+		const hasChildren =
+			nestedKey && item[nestedKey] && item[nestedKey].length > 0;
+
+		const isExpand =
+			expandable ||
+			itemStackProps.expandable ||
+			(childrenRoot.current ? hasChildren : group);
+
+		const focusWithinProps = useFocusWithin({
+			disabled:
+				itemStackProps.disabled ||
+				nodeProps.disabled ||
+				mode === 'keyboard',
+			id: item.key,
+		});
+		const labelId = useId();
+		const ariaOwns = useId();
+
+		const isNonDraggrable =
+			itemStackProps.draggable === false || nodeProps.draggable;
+
+		if (!group && nestedKey && item[nestedKey] && childrenRoot.current) {
+			return React.cloneElement(
+				childrenRoot.current(removeItemInternalProps(item), ...api),
+				{
+					actions,
+					isDragging,
+					overPosition,
+					overTarget,
+					ref,
+				}
+			);
+		}
 
-	return (
-		<SpacingContext.Provider value={spacing + 24}>
-			<li
-				{...itemProps}
-				className={classNames('treeview-item', itemProps.className, {
-					'treeview-item-dragging': isDragging,
-				})}
-				role="none"
-			>
-				<ItemIndicator
-					labelId={labelId}
-					target={{dropPosition: 'top', key: item.key}}
-				/>
-				<div
-					{...itemStackProps}
-					{...nodeProps}
-					{...focusWithinProps}
-					aria-expanded={
-						group ? expandedKeys.has(item.key) : undefined
-					}
-					aria-labelledby={labelId}
-					aria-owns={ariaOwns}
+		return (
+			<SpacingContext.Provider value={spacing + 24}>
+				<li
+					{...itemProps}
 					className={classNames(
-						'treeview-link',
-						itemStackProps.className,
-						nodeProps.className,
+						'treeview-item',
+						itemProps.className,
 						{
-							active:
-								(selectionMode === 'single' &&
-									selection.selectedKeys.has(item.key)) ||
-								itemStackProps.active ||
-								nodeProps.active,
-							collapsed: group && expandedKeys.has(item.key),
-							disabled:
-								itemStackProps.disabled || nodeProps.disabled,
-							focus,
-							'treeview-dropping-middle':
-								overTarget && overPosition === 'middle',
-							'treeview-no-hover':
-								itemStackProps.noHover || nodeProps.noHover,
+							'treeview-item-dragging': isDragging,
 						}
 					)}
-					data-dnd={dragAndDrop ? !isNonDraggrable : undefined}
-					data-dnd-dropping={
-						overTarget && overPosition ? 'true' : undefined
-					}
-					data-id={
-						typeof item.key === 'number'
-							? `number,${item.key}`
-							: `string,${item.key}`
-					}
-					disabled={itemStackProps.disabled || nodeProps.disabled}
-					onBlur={(event) => {
-						if (
-							actions &&
-							event.relatedTarget &&
-							!item.itemRef.current?.contains(
-								event.relatedTarget as HTMLElement
-							)
-						) {
-							setFocus(false);
+					role="none"
+				>
+					<ItemIndicator
+						labelId={labelId}
+						target={{dropPosition: 'top', key: item.key}}
+					/>
+					<div
+						{...itemStackProps}
+						{...nodeProps}
+						{...focusWithinProps}
+						aria-expanded={
+							group ? expandedKeys.has(item.key) : undefined
+						}
+						aria-labelledby={labelId}
+						aria-owns={ariaOwns}
+						className={classNames(
+							'treeview-link',
+							itemStackProps.className,
+							nodeProps.className,
+							{
+								active:
+									(selectionMode === 'single' &&
+										selection.selectedKeys.has(item.key)) ||
+									itemStackProps.active ||
+									nodeProps.active,
+								collapsed: group && expandedKeys.has(item.key),
+								disabled:
+									itemStackProps.disabled ||
+									nodeProps.disabled,
+								focus,
+								'treeview-dropping-middle':
+									overTarget && overPosition === 'middle',
+								'treeview-no-hover':
+									itemStackProps.noHover || nodeProps.noHover,
+							}
+						)}
+						data-dnd={dragAndDrop ? !isNonDraggrable : undefined}
+						data-dnd-dropping={
+							overTarget && overPosition ? 'true' : undefined
 						}
-					}}
-					onClick={(event) => {
-						if (itemStackProps.disabled || nodeProps.disabled) {
-							return;
+						data-id={
+							typeof item.key === 'number'
+								? `number,${item.key}`
+								: `string,${item.key}`
 						}
+						disabled={itemStackProps.disabled || nodeProps.disabled}
+						onBlur={(event) => {
+							if (
+								actions &&
+								event.relatedTarget &&
+								!item.itemRef.current?.contains(
+									event.relatedTarget as HTMLElement
+								)
+							) {
+								setFocus(false);
+							}
+						}}
+						onClick={(event) => {
+							if (itemStackProps.disabled || nodeProps.disabled) {
+								return;
+							}
 
-						// Any click that happened outside the item does not trigger the
-						// node expansion. For example click on a DropDown item.
-						if (
-							!item.itemRef.current?.contains(
-								event.target as Node
-							)
-						) {
-							return;
-						}
+							// Any click that happened outside the item does not trigger the
+							// node expansion. For example click on a DropDown item.
+							if (
+								!item.itemRef.current?.contains(
+									event.target as Node
+								)
+							) {
+								return;
+							}
 
-						if (hasItemStack && itemStackProps.onClick) {
-							itemStackProps.onClick(event);
-						}
+							if (hasItemStack && itemStackProps.onClick) {
+								itemStackProps.onClick(event);
+							}
 
-						if (nodeProps.onClick) {
-							(
-								nodeProps.onClick as unknown as (
-									event: React.MouseEvent<
-										HTMLDivElement,
-										MouseEvent
-									>
-								) => void
-							)(event);
-						}
+							if (nodeProps.onClick) {
+								(
+									nodeProps.onClick as unknown as (
+										event: React.MouseEvent<
+											HTMLDivElement,
+											MouseEvent
+										>
+									) => void
+								)(event);
+							}
 
-						if (event.defaultPrevented) {
-							return;
-						}
+							if (event.defaultPrevented) {
+								return;
+							}
 
-						// event.detail it has no type but is an existing property of the
-						// element to know how many clicks were triggered.
-						// https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
-						// @ts-ignore
-						if (expandDoubleClick && event.detail !== 2) {
-							return;
-						}
+							// event.detail it has no type but is an existing property of the
+							// element to know how many clicks were triggered.
+							// https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+							// @ts-ignore
+							if (expandDoubleClick && event.detail !== 2) {
+								return;
+							}
 
-						if (selectionMode === 'single') {
-							selection.toggleSelection(item.key);
+							if (selectionMode === 'single') {
+								selection.toggleSelection(item.key);
 
-							if (onSelect) {
-								onSelect(removeItemInternalProps(item));
+								if (onSelect) {
+									onSelect(removeItemInternalProps(item));
+								}
 							}
-						}
 
-						if (group) {
-							toggle(item.key);
-						} else {
-							loadMore();
-						}
-					}}
-					onFocus={(event) => {
-						if (focusWithinProps.onFocus) {
-							focusWithinProps.onFocus(event);
-						}
+							if (group) {
+								toggle(item.key);
+							} else {
+								loadMore();
+							}
+						}}
+						onFocus={(event) => {
+							if (focusWithinProps.onFocus) {
+								focusWithinProps.onFocus(event);
+							}
 
-						if (actions) {
-							setFocus(true);
-							clickCapturedRef.current = true;
-						}
-					}}
-					onKeyDown={(event) => {
-						if (itemStackProps.disabled || nodeProps.disabled) {
-							return;
-						}
+							if (actions) {
+								setFocus(true);
+								clickCapturedRef.current = true;
+							}
+						}}
+						onKeyDown={(event) => {
+							if (itemStackProps.disabled || nodeProps.disabled) {
+								return;
+							}
 
-						if (hasItemStack && itemStackProps.onKeyDown) {
-							itemStackProps.onKeyDown(event);
-						}
+							if (hasItemStack && itemStackProps.onKeyDown) {
+								itemStackProps.onKeyDown(event);
+							}
 
-						if (nodeProps.onKeyDown) {
-							(
-								nodeProps.onKeyDown as unknown as (
-									event: React.KeyboardEvent<HTMLDivElement>
-								) => void
-							)(event);
-						}
+							if (nodeProps.onKeyDown) {
+								(
+									nodeProps.onKeyDown as unknown as (
+										event: React.KeyboardEvent<HTMLDivElement>
+									) => void
+								)(event);
+							}
 
-						if (event.defaultPrevented || event.key === Keys.Tab) {
-							return;
-						}
+							if (
+								event.defaultPrevented ||
+								event.key === Keys.Tab
+							) {
+								return;
+							}
 
-						// We call `preventDefault` after checking if it was ignored
-						// because the behavior is different when the developer sets
-						// `onKeyDown` it can ignore the default behavior of the browser
-						// and the default behavior of the TreeView when this is not done
-						// by default we ignore the default browser behavior by default.
-						event.preventDefault();
-
-						const {key} = event;
-
-						switch (key) {
-							case Keys.Left:
-								if (
-									!close(item.key) &&
-									item.parentItemRef?.current
-								) {
-									item.parentItemRef.current.focus();
-								}
-								break;
-							case Keys.Right:
-								if (!group) {
-									const promise = load.loadMore(
-										item.key,
-										item
-									);
-
-									if (promise) {
-										setLoading(true);
-										promise.then(() => setLoading(false));
-									} else {
-										return;
-									}
-								}
+							// We call `preventDefault` after checking if it was ignored
+							// because the behavior is different when the developer sets
+							// `onKeyDown` it can ignore the default behavior of the browser
+							// and the default behavior of the TreeView when this is not done
+							// by default we ignore the default browser behavior by default.
+							event.preventDefault();
 
-								if (!open(item.key) && item.itemRef.current) {
-									const group =
-										item.itemRef.current.parentElement?.querySelector<HTMLDivElement>(
-											'.treeview-group'
-										);
-									const firstItemElement =
-										group?.querySelector<HTMLDivElement>(
-											'.treeview-link:not(.disabled)'
+							const {key} = event;
+
+							switch (key) {
+								case Keys.Left:
+									if (
+										!close(item.key) &&
+										item.parentItemRef?.current
+									) {
+										item.parentItemRef.current.focus();
+									}
+									break;
+								case Keys.Right:
+									if (!group) {
+										const promise = load.loadMore(
+											item.key,
+											item
 										);
 
-									firstItemElement?.focus();
-								} else {
-									item.itemRef.current?.focus();
+										if (promise) {
+											setLoading(true);
+											promise.then(() =>
+												setLoading(false)
+											);
+										} else {
+											return;
+										}
+									}
+
+									if (
+										!open(item.key) &&
+										item.itemRef.current
+									) {
+										const group =
+											item.itemRef.current.parentElement?.querySelector<HTMLDivElement>(
+												'.treeview-group'
+											);
+										const firstItemElement =
+											group?.querySelector<HTMLDivElement>(
+												'.treeview-link:not(.disabled)'
+											);
+
+										firstItemElement?.focus();
+									} else {
+										item.itemRef.current?.focus();
+									}
+									break;
+								case Keys.Backspace:
+								case Keys.Del: {
+									remove(item.indexes);
+									item.parentItemRef.current?.focus();
+									break;
 								}
-								break;
-							case Keys.Backspace:
-							case Keys.Del: {
-								remove(item.indexes);
-								item.parentItemRef.current?.focus();
-								break;
-							}
-							case Keys.Home: {
-								const firstListElement = rootRef.current
-									?.firstElementChild as HTMLLinkElement;
-								const linkElement =
-									firstListElement.firstElementChild as HTMLDivElement;
-
-								linkElement.focus();
-								break;
-							}
-							case Keys.End: {
-								const lastListElement = rootRef.current
-									?.lastElementChild as HTMLLinkElement;
-								const linkElement =
-									lastListElement.firstElementChild as HTMLDivElement;
-
-								linkElement.focus();
-								break;
-							}
-							case Keys.Spacebar: {
-								selection.toggleSelection(item.key);
+								case Keys.Home: {
+									const firstListElement = rootRef.current
+										?.firstElementChild as HTMLLinkElement;
+									const linkElement =
+										firstListElement.firstElementChild as HTMLDivElement;
+
+									linkElement.focus();
+									break;
+								}
+								case Keys.End: {
+									const lastListElement = rootRef.current
+										?.lastElementChild as HTMLLinkElement;
+									const linkElement =
+										lastListElement.firstElementChild as HTMLDivElement;
+
+									linkElement.focus();
+									break;
+								}
+								case Keys.Spacebar: {
+									selection.toggleSelection(item.key);
 
-								if (onSelect) {
-									onSelect(removeItemInternalProps(item));
+									if (onSelect) {
+										onSelect(removeItemInternalProps(item));
+									}
+									break;
 								}
-								break;
-							}
-							case Keys.R.toLowerCase():
-							case Keys.R:
-							case Keys.F2: {
-								if (onRenameItem) {
-									onRenameItem({...item})
-										.then((newItem) => {
-											replace(item.indexes, {
-												...newItem,
-												index: item['index'],
-												indexes: item.indexes,
-												itemRef: item.itemRef,
-												key: item.key,
-												parentItemRef:
-													item.parentItemRef,
+								case Keys.R.toLowerCase():
+								case Keys.R:
+								case Keys.F2: {
+									if (onRenameItem) {
+										onRenameItem({...item})
+											.then((newItem) => {
+												replace(item.indexes, {
+													...newItem,
+													index: item['index'],
+													indexes: item.indexes,
+													itemRef: item.itemRef,
+													key: item.key,
+													parentItemRef:
+														item.parentItemRef,
+												});
+
+												item.itemRef.current?.focus();
+											})
+											.catch((error) => {
+												console.error(error);
 											});
-
-											item.itemRef.current?.focus();
-										})
-										.catch((error) => {
-											console.error(error);
-										});
+									}
+									break;
 								}
-								break;
+								default:
+									break;
 							}
-							default:
-								break;
-						}
-					}}
-					onMouseDown={() => {
-						clickCapturedRef.current = true;
-					}}
-					onTouchStart={() => {
-						clickCapturedRef.current = true;
-					}}
-					ref={isNonDraggrable ? undefined : ref}
-					role="treeitem"
-					style={{
-						...(itemStackProps?.style ?? {}),
-						...(nodeProps?.style ?? {}),
-						paddingLeft: `${
-							spacing + (isExpand || loading ? 0 : 24)
-						}px`,
-					}}
-				>
-					<ItemIndicator
-						labelId={labelId}
-						target={{dropPosition: 'middle', key: item.key}}
-					/>
-					<span
-						className="c-inner"
+						}}
+						onMouseDown={() => {
+							clickCapturedRef.current = true;
+						}}
+						onTouchStart={() => {
+							clickCapturedRef.current = true;
+						}}
+						ref={isNonDraggrable ? undefined : ref}
+						role="treeitem"
 						style={{
-							marginLeft: `-${
+							...(itemStackProps?.style ?? {}),
+							...(nodeProps?.style ?? {}),
+							paddingLeft: `${
 								spacing + (isExpand || loading ? 0 : 24)
 							}px`,
 						}}
-						tabIndex={-2}
 					>
-						{typeof left === 'string' && !right ? (
-							<Layout.ContentRow>
-								{!isNonDraggrable && (
-									<Drag
-										labelId={labelId}
-										tabIndex={focusWithinProps.tabIndex}
-									/>
-								)}
-
-								<Layout.ContentCol expand>
-									<span
-										className="component-text"
-										id={labelId}
-										tabIndex={-1}
-									>
-										{left}
-									</span>
-								</Layout.ContentCol>
-
-								{actions && (
-									<Actions
-										tabIndex={focusWithinProps.tabIndex}
-									>
-										{actions}
-									</Actions>
-								)}
-							</Layout.ContentRow>
-						) : group ? (
-							React.cloneElement(left as React.ReactElement, {
-								actions,
-								expandable: isExpand,
-								isNonDraggrable,
-								labelId,
-								onClick: undefined,
-								onLoadMore: !group ? loadMore : undefined,
-								tabIndex: focusWithinProps.tabIndex,
-							})
-						) : (
-							<TreeViewItemStack
-								actions={actions}
-								disabled={nodeProps.disabled}
-								expandable={isExpand}
-								isNonDraggrable={isNonDraggrable}
-								labelId={labelId}
-								loading={loading}
-								onLoadMore={!group ? loadMore : undefined}
-								tabIndex={focusWithinProps.tabIndex}
-							>
-								{children}
-							</TreeViewItemStack>
-						)}
-					</span>
-				</div>
-
-				<ItemIndicator
-					labelId={labelId}
-					target={{dropPosition: 'bottom', key: item.key}}
-				/>
+						<ItemIndicator
+							labelId={labelId}
+							target={{dropPosition: 'middle', key: item.key}}
+						/>
+						<span
+							className="c-inner"
+							style={{
+								marginLeft: `-${
+									spacing + (isExpand || loading ? 0 : 24)
+								}px`,
+							}}
+							tabIndex={-2}
+						>
+							{typeof left === 'string' && !right ? (
+								<Layout.ContentRow>
+									{!isNonDraggrable && (
+										<Drag
+											labelId={labelId}
+											tabIndex={focusWithinProps.tabIndex}
+										/>
+									)}
+
+									<Layout.ContentCol expand>
+										<span
+											className="component-text"
+											id={labelId}
+											tabIndex={-1}
+										>
+											{left}
+										</span>
+									</Layout.ContentCol>
+
+									{actions && (
+										<Actions
+											tabIndex={focusWithinProps.tabIndex}
+										>
+											{actions}
+										</Actions>
+									)}
+								</Layout.ContentRow>
+							) : group ? (
+								React.cloneElement(left as React.ReactElement, {
+									actions,
+									expandable: isExpand,
+									isNonDraggrable,
+									labelId,
+									onClick: undefined,
+									onLoadMore: !group ? loadMore : undefined,
+									tabIndex: focusWithinProps.tabIndex,
+								})
+							) : (
+								<ItemStack
+									actions={actions}
+									disabled={nodeProps.disabled}
+									expandable={isExpand}
+									isNonDraggrable={isNonDraggrable}
+									labelId={labelId}
+									loading={loading}
+									onLoadMore={!group ? loadMore : undefined}
+									tabIndex={focusWithinProps.tabIndex}
+								>
+									{children}
+								</ItemStack>
+							)}
+						</span>
+					</div>
 
-				{group &&
-					React.cloneElement(group as React.ReactElement, {
-						'aria-labelledby': labelId,
-						id: ariaOwns,
-					})}
+					<ItemIndicator
+						labelId={labelId}
+						target={{dropPosition: 'bottom', key: item.key}}
+					/>
 
-				{left && group && Boolean(otherElements.length) && (
-					<div
-						style={{
-							paddingLeft: `${spacing + 24}px`,
-						}}
-					>
-						{otherElements}
-					</div>
-				)}
-			</li>
-		</SpacingContext.Provider>
-	);
-});
+					{group &&
+						React.cloneElement(group as React.ReactElement, {
+							'aria-labelledby': labelId,
+							id: ariaOwns,
+						})}
+
+					{left && group && Boolean(otherElements.length) && (
+						<div
+							style={{
+								paddingLeft: `${spacing + 24}px`,
+							}}
+						>
+							{otherElements}
+						</div>
+					)}
+				</li>
+			</SpacingContext.Provider>
+		);
+	}
+);
 
-TreeViewItem.displayName = 'ClayTreeViewItem';
+Item.displayName = 'ClayTreeViewItem';
 
 interface ITreeViewItemStackProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
@@ -673,7 +686,7 @@ function Expander({expanderIcons}: ExpanderProps) {
 	);
 }
 
-export function TreeViewItemStack({
+export function ItemStack({
 	actions,
 	children,
 	disabled,
@@ -842,7 +855,7 @@ export function TreeViewItemStack({
 	);
 }
 
-TreeViewItemStack.displayName = 'TreeViewItemStack';
+ItemStack.displayName = 'TreeViewItemStack';
 
 type TreeViewItemActionsProps = {
 	children: React.ReactElement;
diff --git a/packages/clay-core/src/tree-view/index.ts b/packages/clay-core/src/tree-view/index.ts
index e94d0e753f..879aea88b8 100644
--- a/packages/clay-core/src/tree-view/index.ts
+++ b/packages/clay-core/src/tree-view/index.ts
@@ -4,8 +4,3 @@
  */
 
 export * from './TreeView';
-export {
-	TreeViewItem as Item,
-	TreeViewItemStack as ItemStack,
-} from './TreeViewItem';
-export {TreeViewGroup as Group} from './TreeViewGroup';
diff --git a/packages/clay-core/src/vertical-nav/VerticalNav.tsx b/packages/clay-core/src/vertical-nav/VerticalNav.tsx
index df86f260a6..6cfb452e99 100644
--- a/packages/clay-core/src/vertical-nav/VerticalNav.tsx
+++ b/packages/clay-core/src/vertical-nav/VerticalNav.tsx
@@ -282,4 +282,4 @@ function VerticalNav<T extends Record<string, any> | string>({
 VerticalNav.Item = Item;
 VerticalNav.Trigger = Trigger;
 
-export {VerticalNav, Trigger, Item};
+export {VerticalNav};
diff --git a/packages/clay-core/src/vertical-nav/index.ts b/packages/clay-core/src/vertical-nav/index.ts
index 504fde8ca3..fc1994f2dc 100644
--- a/packages/clay-core/src/vertical-nav/index.ts
+++ b/packages/clay-core/src/vertical-nav/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-export {VerticalNav, Item, Trigger} from './VerticalNav';
+export {VerticalNav} from './VerticalNav';
diff --git a/packages/clay-data-provider/docs/data-provider.mdx b/packages/clay-data-provider/docs/data-provider.mdx
index 396235e5ed..3afac57350 100644
--- a/packages/clay-data-provider/docs/data-provider.mdx
+++ b/packages/clay-data-provider/docs/data-provider.mdx
@@ -4,7 +4,11 @@ description: 'Simple but very powerful client, it was designed to help you consu
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/dropdowns/'
 packageNpm: '@clayui/data-provider'
 packageUse: "import DataProvider, {useResource} from '@clayui/data-provider';"
-packageTypes: ['clay-data-provider/src', 'clay-data-provider/src/use-resource']
+packageTypes:
+    [
+        'clay-data-provider/src/DataProvider.tsx',
+        'clay-data-provider/src/useResource.tsx',
+    ]
 ---
 
 ## Introduction
diff --git a/packages/clay-data-provider/src/index.tsx b/packages/clay-data-provider/src/DataProvider.tsx
similarity index 90%
rename from packages/clay-data-provider/src/index.tsx
rename to packages/clay-data-provider/src/DataProvider.tsx
index 2382d94813..826a9ca302 100644
--- a/packages/clay-data-provider/src/index.tsx
+++ b/packages/clay-data-provider/src/DataProvider.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import {FetchPolicy, NetworkStatus, Sorting, useResource} from './useResource';
+import {NetworkStatus, useResource} from './useResource';
 
 type ChildrenProps = {
 	data: any;
@@ -43,7 +43,7 @@ interface IState {
 	networkStatus?: NetworkStatus;
 }
 
-const DataProvider = ({
+export const DataProvider = ({
 	children,
 	notifyOnNetworkStatusChange = false,
 	...otherProps
@@ -88,6 +88,3 @@ const DataProvider = ({
 		</>
 	);
 };
-
-export {DataProvider, useResource, FetchPolicy, NetworkStatus, Sorting};
-export default DataProvider;
diff --git a/packages/clay-data-provider/src/index.ts b/packages/clay-data-provider/src/index.ts
new file mode 100644
index 0000000000..c2b63d352e
--- /dev/null
+++ b/packages/clay-data-provider/src/index.ts
@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {DataProvider} from './DataProvider';
+import {FetchPolicy, NetworkStatus, Sorting, useResource} from './useResource';
+
+export type {FetchPolicy, NetworkStatus, Sorting};
+export {DataProvider, useResource};
+export default DataProvider;
diff --git a/packages/clay-data-provider/src/useResource.tsx b/packages/clay-data-provider/src/useResource.tsx
index 104166d5a4..58365939ac 100644
--- a/packages/clay-data-provider/src/useResource.tsx
+++ b/packages/clay-data-provider/src/useResource.tsx
@@ -629,9 +629,4 @@ const useResource = ({
 	return {loadMore, refetch, resource, sort, sortChange: onSortChange};
 };
 
-// This is just a fake component so that react-docgen can generate the Table
-// API for useResource hook.
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Resource = (_props: Props) => <div />;
-
-export {Resource, useResource};
+export {useResource};
diff --git a/packages/clay-date-picker/docs/date-picker.mdx b/packages/clay-date-picker/docs/date-picker.mdx
index ffc3f52f78..3f5a744d8d 100644
--- a/packages/clay-date-picker/docs/date-picker.mdx
+++ b/packages/clay-date-picker/docs/date-picker.mdx
@@ -4,7 +4,7 @@ description: 'Date and Time pickers let users select a date and time for a form.
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/picker-date-time/'
 packageNpm: '@clayui/date-picker'
 packageUse: "import DatePicker from '@clayui/date-picker';"
-packageTypes: ['clay-date-picker/src']
+packageTypes: ['clay-date-picker/src/index.tsx']
 ---
 
 Date Picker is created following the principles of [Lexicon](https://liferay.design/lexicon/core-components/forms/picker-date-time), Internationalization and Extension Points by default is integrated with Time Picker that offers the minimum of features to set a time.
diff --git a/packages/clay-date-picker/src/index.tsx b/packages/clay-date-picker/src/index.tsx
index 32bac55c5b..554348053e 100644
--- a/packages/clay-date-picker/src/index.tsx
+++ b/packages/clay-date-picker/src/index.tsx
@@ -36,12 +36,22 @@ import InputDate from './InputDate';
 import TimePicker from './TimePicker';
 import Weekday from './Weekday';
 import WeekdayHeader from './WeekdayHeader';
-import {FirstDayOfWeek, IAriaLabels, IYears} from './types';
+import {IAriaLabels, IYears} from './types';
 
 import type {Input} from '@clayui/time-picker';
 
 import type {ISelectOption} from './Select';
 
+enum FirstDayOfWeek {
+	Sunday = 0,
+	Monday = 1,
+	Tuesday = 2,
+	Wednesday = 3,
+	Thursday = 4,
+	Friday = 5,
+	Saturday = 6,
+}
+
 interface IProps
 	extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
 	/**
@@ -195,7 +205,10 @@ interface IProps
 	/**
 	 * List of years available for navigation within the selector.
 	 */
-	years?: IYears;
+	years?: {
+		end: number;
+		start: number;
+	};
 
 	/**
 	 * Flag to indicate whether the DatePicker should validate if the year
@@ -236,7 +249,7 @@ const DatePicker = React.forwardRef<HTMLInputElement, IProps>(
 			defaultValue,
 			disabled,
 			expanded,
-			firstDayOfWeek = FirstDayOfWeek.Sunday,
+			firstDayOfWeek = 0,
 			footerElement,
 			id,
 			initialExpanded = false,
@@ -832,5 +845,5 @@ function fromRangeToString(range: [Date, Date], dateFormat: string) {
 
 DatePicker.displayName = 'ClayDatePicker';
 
-export {DatePicker, FirstDayOfWeek};
+export {FirstDayOfWeek};
 export default DatePicker;
diff --git a/packages/clay-drop-down/docs/drop-down.mdx b/packages/clay-drop-down/docs/drop-down.mdx
index ff69cf3128..ab41b3c37c 100644
--- a/packages/clay-drop-down/docs/drop-down.mdx
+++ b/packages/clay-drop-down/docs/drop-down.mdx
@@ -6,18 +6,17 @@ packageNpm: '@clayui/drop-down'
 packageUse: "import DropDown from '@clayui/drop-down';"
 packageTypes:
     [
-        'clay-drop-down/src/drop-down',
-        'clay-drop-down/src/action',
-        'clay-drop-down/src/item',
-        'clay-drop-down/src/item-list',
-        'clay-drop-down/src/search',
-        'clay-drop-down/src/section',
-        'clay-drop-down/src/group',
-        'clay-drop-down/src/help',
-        'clay-drop-down/src/caption',
-        'clay-drop-down/src/divider',
-        'clay-drop-down/src/drop-down-with-drilldown',
-        'clay-drop-down/src/drop-down-with-items',
+        'clay-drop-down/src/DropDown.tsx',
+        'clay-drop-down/src/Action.tsx',
+        'clay-drop-down/src/Item.tsx',
+        'clay-drop-down/src/ItemList.tsx',
+        'clay-drop-down/src/Search.tsx',
+        'clay-drop-down/src/Section.tsx',
+        'clay-drop-down/src/Group.tsx',
+        'clay-drop-down/src/Help.tsx',
+        'clay-drop-down/src/Caption.tsx',
+        'clay-drop-down/src/DropDownWithDrilldown.tsx',
+        'clay-drop-down/src/DropDownWithItems.tsx',
     ]
 ---
 
diff --git a/packages/clay-drop-down/src/Action.tsx b/packages/clay-drop-down/src/Action.tsx
index 83c88a5934..64adb0f0d9 100644
--- a/packages/clay-drop-down/src/Action.tsx
+++ b/packages/clay-drop-down/src/Action.tsx
@@ -7,7 +7,7 @@ import ClayButton from '@clayui/button';
 import classNames from 'classnames';
 import React from 'react';
 
-export const Action = ({
+const Action = ({
 	children,
 	className,
 	...otherProps
diff --git a/packages/clay-drop-down/src/Caption.tsx b/packages/clay-drop-down/src/Caption.tsx
index 9da645feac..693da7832a 100644
--- a/packages/clay-drop-down/src/Caption.tsx
+++ b/packages/clay-drop-down/src/Caption.tsx
@@ -6,7 +6,7 @@
 import classnames from 'classnames';
 import React from 'react';
 
-export const Caption = ({
+const Caption = ({
 	children,
 	className,
 	...otherProps
diff --git a/packages/clay-drop-down/src/Divider.tsx b/packages/clay-drop-down/src/Divider.tsx
index a25f4aa941..22fae59177 100644
--- a/packages/clay-drop-down/src/Divider.tsx
+++ b/packages/clay-drop-down/src/Divider.tsx
@@ -5,8 +5,6 @@
 
 import React from 'react';
 
-export const Divider = () => (
-	<li className="dropdown-divider" role="separator" />
-);
+const Divider = () => <li className="dropdown-divider" role="separator" />;
 
 export default Divider;
diff --git a/packages/clay-drop-down/src/DropDown.tsx b/packages/clay-drop-down/src/DropDown.tsx
index 0352a25b1e..e0d4b5e26d 100644
--- a/packages/clay-drop-down/src/DropDown.tsx
+++ b/packages/clay-drop-down/src/DropDown.tsx
@@ -6,32 +6,37 @@
 import {__NOT_PUBLIC_COLLECTION} from '@clayui/core';
 import {
 	FOCUSABLE_ELEMENTS,
-	InternalDispatch,
 	Keys,
 	getFocusableList,
 	useControlledState,
 	useNavigation,
 } from '@clayui/shared';
 import classNames from 'classnames';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 
 import Action from './Action';
 import Caption from './Caption';
 import Divider from './Divider';
 import {DropDownContext} from './DropDownContext';
+import {FocusMenu} from './FocusMenu';
 import Group from './Group';
 import Help from './Help';
 import Item from './Item';
 import ItemList from './ItemList';
-import Menu, {Align} from './Menu';
+import Menu from './Menu';
 import Search from './Search';
 import Section from './Section';
 
 import type {ICollectionProps} from '@clayui/core';
+import type {
+	AlignPoints,
+	IPortalBaseProps,
+	InternalDispatch,
+} from '@clayui/shared';
 
 const {Collection} = __NOT_PUBLIC_COLLECTION;
 
-export interface IProps<T>
+interface IProps<T>
 	extends Omit<
 			React.HTMLAttributes<HTMLDivElement | HTMLLIElement>,
 			'children'
@@ -49,14 +54,12 @@ export interface IProps<T>
 	/**
 	 * Flag to align the DropDown menu within the viewport.
 	 */
-	alignmentByViewport?: React.ComponentProps<
-		typeof Menu
-	>['alignmentByViewport'];
+	alignmentByViewport?: boolean;
 
 	/**
 	 * Default position of menu element. Values come from `./Menu`.
 	 */
-	alignmentPosition?: React.ComponentProps<typeof Menu>['alignmentPosition'];
+	alignmentPosition?: number | AlignPoints;
 
 	/**
 	 * HTML element tag that the container should render.
@@ -68,9 +71,7 @@ export interface IProps<T>
 	 */
 	closeOnClick?: boolean;
 
-	closeOnClickOutside?: React.ComponentProps<
-		typeof Menu
-	>['closeOnClickOutside'];
+	closeOnClickOutside?: boolean;
 
 	/**
 	 *  Property to set the default value of `active` (uncontrolled).
@@ -96,12 +97,22 @@ export interface IProps<T>
 	/**
 	 * Prop to pass DOM element attributes to DropDown.Menu.
 	 */
-	menuElementAttrs?: React.HTMLAttributes<HTMLDivElement> &
-		Pick<React.ComponentProps<typeof Menu>, 'containerProps'>;
+	menuElementAttrs?: React.HTMLAttributes<HTMLDivElement> & IPortalBaseProps;
 
-	menuHeight?: React.ComponentProps<typeof Menu>['height'];
+	/**
+	 * Adds utility class name `dropdown-menu-height-${height}`
+	 */
+	menuHeight?: 'auto';
 
-	menuWidth?: React.ComponentProps<typeof Menu>['width'];
+	/**
+	 * The modifier class `dropdown-menu-width-${width}` makes the menu expand
+	 * the full width of the page.
+	 *
+	 * - sm makes the menu 500px wide.
+	 * - shrink makes the menu auto-adjust to text and max 240px wide.
+	 * - full makes the menu 100% wide.
+	 */
+	menuWidth?: 'sm' | 'shrink' | 'full';
 
 	/**
 	 * Callback for when the active state changes (controlled).
@@ -115,7 +126,7 @@ export interface IProps<T>
 	/**
 	 * Function for setting the offset of the menu from the trigger.
 	 */
-	offsetFn?: React.ComponentProps<typeof Menu>['offsetFn'];
+	offsetFn?: (points: AlignPoints) => [number, number];
 
 	/**
 	 * Flag indicating if the menu should be rendered lazily
@@ -365,26 +376,6 @@ function DropDown<T>({
 	);
 }
 
-type FocusMenuProps<T> = {
-	children: T;
-	condition: boolean;
-	onRender: () => void;
-};
-
-export function FocusMenu<T>({
-	children,
-	condition,
-	onRender,
-}: FocusMenuProps<T>) {
-	useEffect(() => {
-		if (condition) {
-			onRender();
-		}
-	}, [condition]);
-
-	return children;
-}
-
 DropDown.Action = Action;
 DropDown.Caption = Caption;
 DropDown.Divider = Divider;
@@ -396,5 +387,4 @@ DropDown.ItemList = ItemList;
 DropDown.Search = Search;
 DropDown.Section = Section;
 
-export {DropDown, Align};
 export default DropDown;
diff --git a/packages/clay-drop-down/src/DropDownWithDrilldown.tsx b/packages/clay-drop-down/src/DropDownWithDrilldown.tsx
index b3db592be1..d8e049131f 100644
--- a/packages/clay-drop-down/src/DropDownWithDrilldown.tsx
+++ b/packages/clay-drop-down/src/DropDownWithDrilldown.tsx
@@ -17,7 +17,7 @@ import Drilldown from './drilldown';
 
 import type {Messages} from './drilldown';
 
-export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Flag to indicate if the menu should be initially open (controlled).
 	 */
diff --git a/packages/clay-drop-down/src/DropDownWithItems.tsx b/packages/clay-drop-down/src/DropDownWithItems.tsx
index 1d6c8089e4..4531757ab4 100644
--- a/packages/clay-drop-down/src/DropDownWithItems.tsx
+++ b/packages/clay-drop-down/src/DropDownWithItems.tsx
@@ -19,8 +19,9 @@ import warning from 'warning';
 
 import Caption from './Caption';
 import Divider from './Divider';
-import ClayDropDown, {FocusMenu} from './DropDown';
+import ClayDropDown from './DropDown';
 import {DropDownContext} from './DropDownContext';
+import {FocusMenu} from './FocusMenu';
 import ClayDropDownGroup from './Group';
 import Help from './Help';
 import ClayDropDownMenu from './Menu';
@@ -67,8 +68,7 @@ interface IDropDownContentProps {
 	role?: string;
 }
 
-export interface IProps
-	extends Omit<IDropDownContentProps, 'role' | 'aria-label'> {
+interface IProps extends Omit<IDropDownContentProps, 'role' | 'aria-label'> {
 	/**
 	 * Flag to indicate if the DropDown menu is active or not (controlled).
 	 */
diff --git a/packages/clay-drop-down/src/FocusMenu.tsx b/packages/clay-drop-down/src/FocusMenu.tsx
new file mode 100644
index 0000000000..e37ec88846
--- /dev/null
+++ b/packages/clay-drop-down/src/FocusMenu.tsx
@@ -0,0 +1,26 @@
+/**
+ * SPDX-FileCopyrightText: © 2025 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {useEffect} from 'react';
+
+type FocusMenuProps<T> = {
+	children: T;
+	condition: boolean;
+	onRender: () => void;
+};
+
+export function FocusMenu<T>({
+	children,
+	condition,
+	onRender,
+}: FocusMenuProps<T>) {
+	useEffect(() => {
+		if (condition) {
+			onRender();
+		}
+	}, [condition]);
+
+	return children;
+}
diff --git a/packages/clay-drop-down/src/Group.tsx b/packages/clay-drop-down/src/Group.tsx
index 33aebfedab..9bbd470c98 100644
--- a/packages/clay-drop-down/src/Group.tsx
+++ b/packages/clay-drop-down/src/Group.tsx
@@ -12,8 +12,7 @@ import type {ICollectionProps} from '@clayui/core';
 
 const {Collection} = __NOT_PUBLIC_COLLECTION;
 
-export interface IProps<T>
-	extends Omit<ICollectionProps<T, unknown>, 'virtualize'> {
+interface IProps<T> extends Omit<ICollectionProps<T, unknown>, 'virtualize'> {
 	/**
 	 * Value provided is a display component that is a header for the items in the group.
 	 */
@@ -27,7 +26,7 @@ export interface IProps<T>
 
 let counter = 0;
 
-export function Group<T>({children, header, items, role = 'group'}: IProps<T>) {
+function Group<T>({children, header, items, role = 'group'}: IProps<T>) {
 	const ariaLabel = useMemo(() => {
 		counter++;
 
diff --git a/packages/clay-drop-down/src/Help.tsx b/packages/clay-drop-down/src/Help.tsx
index c6b19a0789..12fb0412f3 100644
--- a/packages/clay-drop-down/src/Help.tsx
+++ b/packages/clay-drop-down/src/Help.tsx
@@ -6,7 +6,7 @@
 import classnames from 'classnames';
 import React from 'react';
 
-export const Help = ({
+const Help = ({
 	children,
 	className,
 	...otherProps
diff --git a/packages/clay-drop-down/src/Item.tsx b/packages/clay-drop-down/src/Item.tsx
index 1ecee0aac5..a8a250cfe0 100644
--- a/packages/clay-drop-down/src/Item.tsx
+++ b/packages/clay-drop-down/src/Item.tsx
@@ -10,7 +10,7 @@ import React, {useContext} from 'react';
 
 import {DropDownContext} from './DropDownContext';
 
-export interface IProps
+interface IProps
 	extends React.HTMLAttributes<
 		HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement
 	> {
@@ -58,7 +58,7 @@ export interface IProps
 	symbolRight?: string;
 }
 
-export const Item = React.forwardRef<HTMLLIElement, IProps>(
+const Item = React.forwardRef<HTMLLIElement, IProps>(
 	(
 		{
 			active,
diff --git a/packages/clay-drop-down/src/ItemList.tsx b/packages/clay-drop-down/src/ItemList.tsx
index 4518a94f4d..1604d27ffe 100644
--- a/packages/clay-drop-down/src/ItemList.tsx
+++ b/packages/clay-drop-down/src/ItemList.tsx
@@ -13,11 +13,11 @@ import type {ICollectionProps} from '@clayui/core';
 
 const {Collection} = __NOT_PUBLIC_COLLECTION;
 
-export interface IProps<T>
+interface IProps<T>
 	extends Omit<ICollectionProps<T, unknown>, 'virtualize'>,
 		Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {}
 
-export const ItemList = React.forwardRef<HTMLUListElement, IProps<unknown>>(
+const ItemList = React.forwardRef<HTMLUListElement, IProps<unknown>>(
 	({children, className, items, role = 'menu', ...otherProps}, ref) => {
 		const {search} = useContext(DropDownContext);
 
diff --git a/packages/clay-drop-down/src/Menu.tsx b/packages/clay-drop-down/src/Menu.tsx
index 9812193248..2403332a15 100644
--- a/packages/clay-drop-down/src/Menu.tsx
+++ b/packages/clay-drop-down/src/Menu.tsx
@@ -24,7 +24,7 @@ export const Align = {
 	TopRight: 1,
 } as const;
 
-export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Flag to indicate if menu is showing or not.
 	 */
diff --git a/packages/clay-drop-down/src/Search.tsx b/packages/clay-drop-down/src/Search.tsx
index 65b0570e15..ed6ccee500 100644
--- a/packages/clay-drop-down/src/Search.tsx
+++ b/packages/clay-drop-down/src/Search.tsx
@@ -12,7 +12,7 @@ import React, {useContext, useEffect} from 'react';
 
 import {DropDownContext} from './DropDownContext';
 
-export interface IProps
+interface IProps
 	extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
 	/**
 	 * Initial value of the input (uncontrolled).
@@ -52,7 +52,7 @@ const defaultSubmitProps = {
 	type: 'button',
 };
 
-export const Search = ({
+const Search = ({
 	className,
 	defaultValue = '',
 	formProps = {},
diff --git a/packages/clay-drop-down/src/Section.tsx b/packages/clay-drop-down/src/Section.tsx
index 5bf0fb2434..d73872fafe 100644
--- a/packages/clay-drop-down/src/Section.tsx
+++ b/packages/clay-drop-down/src/Section.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Flag that indicates if item is selected.
 	 */
@@ -20,7 +20,7 @@ export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	innerRef?: React.Ref<any>;
 }
 
-export const Section = React.forwardRef<HTMLLIElement, IProps>(
+const Section = React.forwardRef<HTMLLIElement, IProps>(
 	({active, children, className, disabled, innerRef, ...otherProps}, ref) => (
 		<li aria-selected={active} ref={ref} role="none">
 			<div
diff --git a/packages/clay-drop-down/src/index.tsx b/packages/clay-drop-down/src/index.tsx
index aee45da92d..698a1b567b 100644
--- a/packages/clay-drop-down/src/index.tsx
+++ b/packages/clay-drop-down/src/index.tsx
@@ -3,33 +3,10 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import Action from './Action';
-import Caption from './Caption';
-import Divider from './Divider';
-import DropDown, {Align} from './DropDown';
+import DropDown from './DropDown';
 import {ClayDropDownWithDrilldown} from './DropDownWithDrilldown';
 import {ClayDropDownWithItems} from './DropDownWithItems';
-import Group from './Group';
-import Help from './Help';
-import Item from './Item';
-import ItemList from './ItemList';
-import Search from './Search';
-import Section from './Section';
-
-export {
-	Action,
-	Caption,
-	Divider,
-	Align,
-	DropDown,
-	Group,
-	Search,
-	Section,
-	Help,
-	Item,
-	ItemList,
-	ClayDropDownWithItems,
-	ClayDropDownWithDrilldown,
-};
+import {Align} from './Menu';
 
+export {Align, DropDown, ClayDropDownWithItems, ClayDropDownWithDrilldown};
 export default DropDown;
diff --git a/packages/clay-empty-state/docs/empty-state.mdx b/packages/clay-empty-state/docs/empty-state.mdx
index 14650d0344..bfd7f059aa 100644
--- a/packages/clay-empty-state/docs/empty-state.mdx
+++ b/packages/clay-empty-state/docs/empty-state.mdx
@@ -4,7 +4,7 @@ description: 'Empty states provide users with feedback on the reasons behind the
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/empty-states/'
 packageNpm: '@clayui/empty-state'
 packageUse: "import EmptyState from '@clayui/empty-state';"
-packageTypes: ['clay-empty-state/src']
+packageTypes: ['clay-empty-state/src/index.tsx']
 ---
 
 ## Without Animation
diff --git a/packages/clay-empty-state/src/index.tsx b/packages/clay-empty-state/src/index.tsx
index fa3cae898d..6233bd1413 100644
--- a/packages/clay-empty-state/src/index.tsx
+++ b/packages/clay-empty-state/src/index.tsx
@@ -144,5 +144,4 @@ const EmptyState = ({
 	);
 };
 
-export {EmptyState};
 export default EmptyState;
diff --git a/packages/clay-form/docs/checkbox.mdx b/packages/clay-form/docs/checkbox.mdx
index e61b96c5b3..e74e1f2eed 100644
--- a/packages/clay-form/docs/checkbox.mdx
+++ b/packages/clay-form/docs/checkbox.mdx
@@ -5,7 +5,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/radio-c
 packageNpm: '@clayui/form'
 packageUse: "import {ClayCheckbox} from '@clayui/form';"
 storybookPath: 'design-system-components-checkbox'
-packageTypes: ['clay-form/src/checkbox']
+packageTypes: ['clay-form/src/Checkbox.tsx']
 ---
 
 Use [`checked`](#api-checked) property to check or not the checkbox.
diff --git a/packages/clay-form/docs/dual-list-box.mdx b/packages/clay-form/docs/dual-list-box.mdx
index 94e390c035..305f370678 100644
--- a/packages/clay-form/docs/dual-list-box.mdx
+++ b/packages/clay-form/docs/dual-list-box.mdx
@@ -5,7 +5,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/dual-listbox/
 packageNpm: '@clayui/form'
 packageUse: "import {ClayCheckbox} from '@clayui/form';"
 storybookPath: 'design-system-components-duallistbox'
-packageTypes: ['clay-form/src/dual-list-box']
+packageTypes: ['clay-form/src/DualListBox.tsx']
 ---
 
 ClayDualListBox consists of low-level utilities that provides the ability to create a Select with multiple options selectable.
diff --git a/packages/clay-form/docs/input-group.mdx b/packages/clay-form/docs/input-group.mdx
index 5e685a73c8..d95d789238 100644
--- a/packages/clay-form/docs/input-group.mdx
+++ b/packages/clay-form/docs/input-group.mdx
@@ -6,7 +6,7 @@ packageNpm: '@clayui/form'
 navigationParent: 'docs/components/form.html'
 packageUse: "import ClayForm, {ClayInput} from '@clayui/form';"
 storybookPath: 'design-system-components-inputgroup'
-packageTypes: ['clay-form/src/input']
+packageTypes: ['clay-form/src/Input.tsx']
 ---
 
 If you want to create groups of inputs, use `<ClayInput.Group>`, `<ClayInput.GroupInsetItem>`, `<ClayInput.GroupItem>` and `<ClayInput.GroupText>`.
diff --git a/packages/clay-form/docs/input.mdx b/packages/clay-form/docs/input.mdx
index 444259305e..8d4ea4880d 100644
--- a/packages/clay-form/docs/input.mdx
+++ b/packages/clay-form/docs/input.mdx
@@ -6,7 +6,7 @@ packageNpm: '@clayui/form'
 navigationParent: 'docs/components/form.html'
 packageUse: "import {ClayCheckbox} from '@clayui/form';"
 storybookPath: 'design-system-components-input'
-packageTypes: ['clay-form/src/input']
+packageTypes: ['clay-form/src/Input.tsx']
 ---
 
 `ClayInput` is exported from the `@clayui/form` package, consisting of some low-level utilities that provides the ability to create Inputs and Input Groups.
diff --git a/packages/clay-form/docs/radio-group.mdx b/packages/clay-form/docs/radio-group.mdx
index 3095337002..5de077b094 100644
--- a/packages/clay-form/docs/radio-group.mdx
+++ b/packages/clay-form/docs/radio-group.mdx
@@ -4,7 +4,7 @@ description: 'Radios provide users with different selection and activation tools
 packageNpm: '@clayui/form'
 packageUse: "import {ClayRadio, ClayRadioGroup} from '@clayui/form';"
 storybookPath: 'design-system-components-radio'
-packageTypes: ['clay-form/src/radio-group', 'clay-form/src/radio']
+packageTypes: ['clay-form/src/RadioGroup.tsx', 'clay-form/src/Radio.tsx']
 ---
 
 ## Example
diff --git a/packages/clay-form/docs/select-box.mdx b/packages/clay-form/docs/select-box.mdx
index e86bcffc3e..9e8d3f8ac0 100644
--- a/packages/clay-form/docs/select-box.mdx
+++ b/packages/clay-form/docs/select-box.mdx
@@ -5,7 +5,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/dual-listbox/
 packageNpm: '@clayui/form'
 packageUse: "import {ClaySelectBox} from '@clayui/form';"
 storybookPath: 'design-system-components-selectbox'
-packageTypes: ['clay-form/src/select-box']
+packageTypes: ['clay-form/src/SelectBox.tsx']
 ---
 
 ## Introduction
diff --git a/packages/clay-form/docs/select.mdx b/packages/clay-form/docs/select.mdx
index 692cd3248d..435a87163b 100644
--- a/packages/clay-form/docs/select.mdx
+++ b/packages/clay-form/docs/select.mdx
@@ -5,7 +5,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/selecto
 packageNpm: '@clayui/form'
 packageUse: "import {ClaySelect, ClaySelectWithOption} from '@clayui/form';"
 storybookPath: 'design-system-components-select'
-packageTypes: ['clay-form/src/select', 'clay-form/src/select-with-option']
+packageTypes: ['clay-form/src/Select.tsx', 'clay-form/src/SelectWithOption.tsx']
 ---
 
 ## Introduction
diff --git a/packages/clay-form/docs/toggle-switch.mdx b/packages/clay-form/docs/toggle-switch.mdx
index 65654d8b8c..b93e0408b8 100644
--- a/packages/clay-form/docs/toggle-switch.mdx
+++ b/packages/clay-form/docs/toggle-switch.mdx
@@ -5,7 +5,7 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/radio-c
 packageNpm: '@clayui/form'
 packageUse: "import {ClayToggle} from '@clayui/form';"
 storybookPath: 'design-system-components-toggle'
-packageTypes: ['clay-form/src/toggle']
+packageTypes: ['clay-form/src/Toggle.tsx']
 ---
 
 In order to create a controlled `Toggle` you need to provide the `toggled` and `onToggle` props.
diff --git a/packages/clay-form/src/Checkbox.tsx b/packages/clay-form/src/Checkbox.tsx
index 88aae88f9d..a463b5d2ce 100644
--- a/packages/clay-form/src/Checkbox.tsx
+++ b/packages/clay-form/src/Checkbox.tsx
@@ -43,7 +43,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Checkbox = React.forwardRef<HTMLInputElement, IProps>(
+const Checkbox = React.forwardRef<HTMLInputElement, IProps>(
 	(
 		{
 			checked,
diff --git a/packages/clay-form/src/DualListBox.tsx b/packages/clay-form/src/DualListBox.tsx
index 457bde1a24..15b0f0921e 100644
--- a/packages/clay-form/src/DualListBox.tsx
+++ b/packages/clay-form/src/DualListBox.tsx
@@ -9,9 +9,10 @@ import React from 'react';
 
 import ClaySelectBox, {TItem, getSelectedIndexes} from './SelectBox';
 
-type TItems = Array<Array<TItem>>;
-
-function swapArrayItems(arrays: TItems, selectedIndexes: Array<number>) {
+function swapArrayItems(
+	arrays: Array<Array<TItem>>,
+	selectedIndexes: Array<number>
+) {
 	const [sourceArray, targetArray] = arrays;
 
 	const newTargetArray = [...targetArray!];
@@ -29,7 +30,7 @@ function swapArrayItems(arrays: TItems, selectedIndexes: Array<number>) {
 	return [newSourceArray, newTargetArray];
 }
 
-interface IBoxProps {
+type BoxProps = {
 	/**
 	 * Id of the selectbox to be used with the label
 	 */
@@ -49,7 +50,7 @@ interface IBoxProps {
 	 * Array of selected items in the left Select Box.
 	 */
 	selected?: Array<string>;
-}
+};
 
 interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
@@ -73,22 +74,22 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Items spread across two arrays that will be displayed in the two Select Boxes.
 	 */
-	items: TItems;
+	items: Array<Array<TItem>>;
 
 	/**
 	 * Handler that triggers when the content of the items prop are changed. Caused by either reordering or transfering of items.
 	 */
-	onItemsChange: (val: TItems) => void;
+	onItemsChange: (value: Array<Array<TItem>>) => void;
 
 	/**
 	 * Props for the left Select Box.
 	 */
-	left?: IBoxProps;
+	left?: BoxProps;
 
 	/**
 	 * Props for the right Select Box.
 	 */
-	right?: IBoxProps;
+	right?: BoxProps;
 
 	/**
 	 * Amount of items that can fit inside the both Select Boxes before a scrollbar is introduced.
@@ -101,7 +102,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	spritemap?: string;
 }
 
-export const DualListBox = ({
+const DualListBox = ({
 	ariaLabels = {
 		transferLTR: 'Transfer Item Left to Right',
 		transferRTL: 'Transfer Item Right to Left',
diff --git a/packages/clay-form/src/Input.tsx b/packages/clay-form/src/Input.tsx
index 29304c64a4..0e0c672130 100644
--- a/packages/clay-form/src/Input.tsx
+++ b/packages/clay-form/src/Input.tsx
@@ -26,7 +26,7 @@ interface IGroupItemProps extends React.HTMLAttributes<HTMLDivElement> {
 	shrink?: boolean;
 }
 
-export const InputGroupItem = React.forwardRef<HTMLDivElement, IGroupItemProps>(
+export const GroupItem = React.forwardRef<HTMLDivElement, IGroupItemProps>(
 	(
 		{
 			append,
@@ -52,7 +52,7 @@ export const InputGroupItem = React.forwardRef<HTMLDivElement, IGroupItemProps>(
 	)
 );
 
-InputGroupItem.displayName = 'ClayInputGroupItem';
+GroupItem.displayName = 'ClayInputGroupItem';
 
 interface IGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
@@ -68,7 +68,7 @@ interface IGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 	stacked?: boolean;
 }
 
-export const InputGroup = React.forwardRef<HTMLDivElement, IGroupProps>(
+export const Group = React.forwardRef<HTMLDivElement, IGroupProps>(
 	(
 		{children, className, small, stacked, ...otherProps}: IGroupProps,
 		ref
@@ -86,9 +86,9 @@ export const InputGroup = React.forwardRef<HTMLDivElement, IGroupProps>(
 	)
 );
 
-InputGroup.displayName = 'ClayInputGroup';
+Group.displayName = 'ClayInputGroup';
 
-export const InputGroupText = React.forwardRef<
+export const GroupText = React.forwardRef<
 	HTMLDivElement,
 	React.HTMLAttributes<HTMLDivElement>
 >(({children, className, ...otherProps}, ref) => (
@@ -101,7 +101,7 @@ export const InputGroupText = React.forwardRef<
 	</div>
 ));
 
-InputGroupText.displayName = 'ClayInputGroupText';
+GroupText.displayName = 'ClayInputGroupText';
 
 interface IGroupInsetProps
 	extends React.HTMLAttributes<
@@ -125,7 +125,7 @@ interface IGroupInsetProps
 	tag?: 'div' | 'span' | 'label';
 }
 
-const InputGroupInsetItem = React.forwardRef<
+const GroupInsetItem = React.forwardRef<
 	HTMLDivElement | HTMLSpanElement | HTMLLabelElement,
 	IGroupInsetProps
 >(
@@ -153,7 +153,7 @@ const InputGroupInsetItem = React.forwardRef<
 	)
 );
 
-InputGroupInsetItem.displayName = 'ClayInputGroupInsetItem';
+GroupInsetItem.displayName = 'ClayInputGroupInsetItem';
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	/**
@@ -177,12 +177,12 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	sizing?: 'lg' | 'regular' | 'sm';
 }
 
-export interface IForwardRef<T, P = {}>
+interface IForwardRef<T, P = {}>
 	extends React.ForwardRefExoticComponent<P & React.RefAttributes<T>> {
-	Group: typeof InputGroup;
-	GroupInsetItem: typeof InputGroupInsetItem;
-	GroupItem: typeof InputGroupItem;
-	GroupText: typeof InputGroupText;
+	Group: typeof Group;
+	GroupInsetItem: typeof GroupInsetItem;
+	GroupItem: typeof GroupItem;
+	GroupText: typeof GroupText;
 }
 
 function forwardRef<T, P = {}>(component: React.RefForwardingComponent<T, P>) {
@@ -217,9 +217,9 @@ export const Input = forwardRef<HTMLInputElement, IProps>(
 );
 
 Input.displayName = 'ClayInput';
-Input.Group = InputGroup;
-Input.GroupInsetItem = InputGroupInsetItem;
-Input.GroupItem = InputGroupItem;
-Input.GroupText = InputGroupText;
+Input.Group = Group;
+Input.GroupInsetItem = GroupInsetItem;
+Input.GroupItem = GroupItem;
+Input.GroupText = GroupText;
 
 export default Input;
diff --git a/packages/clay-form/src/Radio.tsx b/packages/clay-form/src/Radio.tsx
index c3aaecfc1b..9d515eda1a 100644
--- a/packages/clay-form/src/Radio.tsx
+++ b/packages/clay-form/src/Radio.tsx
@@ -6,8 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IRadioProps
-	extends React.InputHTMLAttributes<HTMLInputElement> {
+interface IRadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	/**
 	 * Props for the outer most container element.
 	 */
@@ -29,7 +28,7 @@ export interface IRadioProps
 	value: React.ReactText;
 }
 
-export const Radio = React.forwardRef<HTMLInputElement, IRadioProps>(
+const Radio = React.forwardRef<HTMLInputElement, IRadioProps>(
 	(
 		{
 			checked,
diff --git a/packages/clay-form/src/RadioGroup.tsx b/packages/clay-form/src/RadioGroup.tsx
index 2fae2a803f..8ac9447601 100644
--- a/packages/clay-form/src/RadioGroup.tsx
+++ b/packages/clay-form/src/RadioGroup.tsx
@@ -7,8 +7,8 @@ import {InternalDispatch, useControlledState} from '@clayui/shared';
 import classNames from 'classnames';
 import React from 'react';
 
-import {IRadioProps} from './Radio';
-import {IToggleProps} from './Toggle';
+import Radio from './Radio';
+import Toggle from './Toggle';
 
 interface IGroupProps
 	extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -16,7 +16,8 @@ interface IGroupProps
 	 * Takes either Radio or Toggle as a child.
 	 */
 	children: Array<
-		React.ReactElement<IRadioProps> | React.ReactElement<IToggleProps>
+		| React.ReactElement<React.ComponentProps<typeof Radio>>
+		| React.ReactElement<React.ComponentProps<typeof Toggle>>
 	>;
 
 	/**
@@ -58,7 +59,7 @@ interface IGroupProps
 	value?: React.ReactText;
 }
 
-export const RadioGroup = ({
+const RadioGroup = ({
 	children,
 	className,
 	defaultValue,
@@ -83,7 +84,13 @@ export const RadioGroup = ({
 		<div {...otherProps} className={classNames(className)}>
 			{React.Children.map(
 				children,
-				(child: React.ReactElement<IToggleProps | IRadioProps>, i) => {
+				(
+					child: React.ReactElement<
+						| React.ComponentProps<typeof Radio>
+						| React.ComponentProps<typeof Toggle>
+					>,
+					i
+				) => {
 					return React.cloneElement(child, {
 						...child.props,
 						checked: internalValue === child.props.value,
diff --git a/packages/clay-form/src/Select.tsx b/packages/clay-form/src/Select.tsx
index 8ae29c55ff..3c747ed91c 100644
--- a/packages/clay-form/src/Select.tsx
+++ b/packages/clay-form/src/Select.tsx
@@ -27,7 +27,7 @@ interface IProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
 	sizing?: 'lg' | 'sm';
 }
 
-export function Select({children, className, sizing, ...otherProps}: IProps) {
+function Select({children, className, sizing, ...otherProps}: IProps) {
 	return (
 		<select
 			{...otherProps}
diff --git a/packages/clay-form/src/SelectBox.tsx b/packages/clay-form/src/SelectBox.tsx
index 7fd1a979d4..fd0590d79b 100644
--- a/packages/clay-form/src/SelectBox.tsx
+++ b/packages/clay-form/src/SelectBox.tsx
@@ -91,7 +91,7 @@ interface IProps extends React.HTMLAttributes<HTMLSelectElement> {
 	/**
 	 * Handler that triggers when a new item is selected.
 	 */
-	onSelectChange: (val: Array<string>) => void;
+	onSelectChange: (value: Array<string>) => void;
 
 	/**
 	 *  Selected indexes, most commonly used in combination with the  Dual Listbox component
@@ -130,7 +130,7 @@ export const getSelectedIndexes = (
 		return acc;
 	}, []);
 
-export const SelectBox = ({
+const SelectBox = ({
 	ariaLabels = {
 		reorderDown: 'Reorder Down',
 		reorderUp: 'Reorder Up',
diff --git a/packages/clay-form/src/SelectWithOption.tsx b/packages/clay-form/src/SelectWithOption.tsx
index 92b2766d56..5dfecbcd85 100644
--- a/packages/clay-form/src/SelectWithOption.tsx
+++ b/packages/clay-form/src/SelectWithOption.tsx
@@ -22,7 +22,7 @@ interface IProps extends React.ComponentProps<typeof Select> {
 	>;
 }
 
-export const ClaySelectWithOption = ({options = [], ...otherProps}: IProps) => (
+const ClaySelectWithOption = ({options = [], ...otherProps}: IProps) => (
 	<Select {...otherProps}>
 		{options.map((option, index) => {
 			if (option.type === 'group') {
diff --git a/packages/clay-form/src/Toggle.tsx b/packages/clay-form/src/Toggle.tsx
index 346bb074b6..6eb5cb6b4a 100644
--- a/packages/clay-form/src/Toggle.tsx
+++ b/packages/clay-form/src/Toggle.tsx
@@ -7,8 +7,7 @@ import ClayIcon from '@clayui/icon';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IToggleProps
-	extends React.InputHTMLAttributes<HTMLInputElement> {
+interface IToggleProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	containerProps?: React.HTMLAttributes<HTMLSpanElement>;
 	disabled?: boolean;
 	id?: string;
@@ -22,7 +21,7 @@ export interface IToggleProps
 	value?: string;
 }
 
-export const Toggle = React.forwardRef<HTMLLabelElement, IToggleProps>(
+const Toggle = React.forwardRef<HTMLLabelElement, IToggleProps>(
 	(
 		{
 			checked,
diff --git a/packages/clay-icon/docs/icon.mdx b/packages/clay-icon/docs/icon.mdx
index 885e8ef553..97c8727e2d 100644
--- a/packages/clay-icon/docs/icon.mdx
+++ b/packages/clay-icon/docs/icon.mdx
@@ -4,7 +4,7 @@ description: 'Icons are a visual representation of an idea and/or action.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/icons/'
 packageNpm: '@clayui/icon'
 packageUse: "import Icon from '@clayui/icon';"
-packageTypes: ['clay-icon/src']
+packageTypes: ['clay-icon/src/index.tsx']
 ---
 
 import {IconSearch} from './IconSearch';
diff --git a/packages/clay-icon/src/index.tsx b/packages/clay-icon/src/index.tsx
index 16ee9db5ec..23eb49cd5d 100644
--- a/packages/clay-icon/src/index.tsx
+++ b/packages/clay-icon/src/index.tsx
@@ -22,7 +22,7 @@ interface IProps extends React.SVGAttributes<SVGSVGElement> {
 	symbol: string;
 }
 
-export const Icon = React.forwardRef<SVGSVGElement, IProps>(
+const Icon = React.forwardRef<SVGSVGElement, IProps>(
 	({className, spritemap, symbol, ...otherProps}: IProps, ref) => {
 		let spriteMapVal = React.useContext(ClayIconSpriteContext);
 
diff --git a/packages/clay-label/docs/label.mdx b/packages/clay-label/docs/label.mdx
index 9e04d9693a..57ee30dcee 100644
--- a/packages/clay-label/docs/label.mdx
+++ b/packages/clay-label/docs/label.mdx
@@ -4,7 +4,7 @@ description: 'Labels are a visual pattern used to categorize information providi
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/labels/'
 packageNpm: '@clayui/label'
 packageUse: "import Label from '@clayui/label';"
-packageTypes: ['clay-label/src']
+packageTypes: ['clay-label/src/index.tsx']
 ---
 
 ## Overview
diff --git a/packages/clay-label/src/index.tsx b/packages/clay-label/src/index.tsx
index 0d2c4fa03f..9e7c142e40 100644
--- a/packages/clay-label/src/index.tsx
+++ b/packages/clay-label/src/index.tsx
@@ -58,14 +58,6 @@ export const ItemExpand = React.forwardRef<
 
 ItemExpand.displayName = 'ClayLabelItemExpand';
 
-type DisplayType =
-	| 'secondary'
-	| 'info'
-	| 'warning'
-	| 'danger'
-	| 'success'
-	| 'unstyled';
-
 interface IBaseProps extends React.BaseHTMLAttributes<HTMLSpanElement> {
 	/**
 	 * Flag to indicate if `label-dismissible` class should be applied.
@@ -75,7 +67,13 @@ interface IBaseProps extends React.BaseHTMLAttributes<HTMLSpanElement> {
 	/**
 	 * Determines the style of the label.
 	 */
-	displayType?: DisplayType;
+	displayType?:
+		| 'secondary'
+		| 'info'
+		| 'warning'
+		| 'danger'
+		| 'success'
+		| 'unstyled';
 
 	/**
 	 * Flag to indicate if the label should be of the `large` variant.
@@ -137,7 +135,7 @@ interface IProps extends IBaseProps {
 	withClose?: boolean;
 }
 
-export interface IForwardRef<T, P = {}>
+interface IForwardRef<T, P = {}>
 	extends React.ForwardRefExoticComponent<P & React.RefAttributes<T>> {
 	ItemAfter: typeof ItemAfter;
 	ItemBefore: typeof ItemBefore;
@@ -148,7 +146,7 @@ function forwardRef<T, P = {}>(component: React.RefForwardingComponent<T, P>) {
 	return React.forwardRef<T, P>(component) as IForwardRef<T, P>;
 }
 
-export const Label = forwardRef<HTMLAnchorElement | HTMLSpanElement, IProps>(
+const Label = forwardRef<HTMLAnchorElement | HTMLSpanElement, IProps>(
 	(
 		{
 			children,
diff --git a/packages/clay-layout/docs/layout.mdx b/packages/clay-layout/docs/layout.mdx
index 707376c19b..ab2c7f70e1 100644
--- a/packages/clay-layout/docs/layout.mdx
+++ b/packages/clay-layout/docs/layout.mdx
@@ -6,12 +6,12 @@ packageNpm: '@clayui/layout'
 packageUse: "import Layout from '@clayui/layout';"
 packageTypes:
     [
-        'clay-layout/src/col',
-        'clay-layout/src/container',
-        'clay-layout/src/container-fluid',
-        'clay-layout/src/content',
-        'clay-layout/src/row',
-        'clay-layout/src/sheet',
+        'clay-layout/src/Col.tsx',
+        'clay-layout/src/Container.tsx',
+        'clay-layout/src/ContainerFluid.tsx',
+        'clay-layout/src/Content.tsx',
+        'clay-layout/src/Row.tsx',
+        'clay-layout/src/Sheet.tsx',
     ]
 ---
 
diff --git a/packages/clay-layout/src/Col.tsx b/packages/clay-layout/src/Col.tsx
index d8b80a375e..4547930c3a 100644
--- a/packages/clay-layout/src/Col.tsx
+++ b/packages/clay-layout/src/Col.tsx
@@ -10,7 +10,7 @@ type TColSize = boolean | number | 'auto';
 
 /* eslint-disable @liferay/no-abbreviations */
 
-export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Element or component to render for container
 	 */
@@ -52,7 +52,7 @@ export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	xl?: TColSize;
 }
 
-const ClayCol = React.forwardRef<HTMLElement, IProps>(
+const Col = React.forwardRef<HTMLElement, IProps>(
 	(
 		{
 			children,
@@ -95,6 +95,6 @@ const ClayCol = React.forwardRef<HTMLElement, IProps>(
 	}
 );
 
-ClayCol.displayName = 'ClayCol';
+Col.displayName = 'ClayCol';
 
-export default ClayCol;
+export default Col;
diff --git a/packages/clay-layout/src/Container.tsx b/packages/clay-layout/src/Container.tsx
index 26feef81e2..13d284c9b9 100644
--- a/packages/clay-layout/src/Container.tsx
+++ b/packages/clay-layout/src/Container.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Element or component to render for container
 	 */
@@ -43,7 +43,7 @@ export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	view?: boolean;
 }
 
-const ClayContainer = React.forwardRef<HTMLElement, IProps>(
+const Container = React.forwardRef<HTMLElement, IProps>(
 	(
 		{
 			children,
@@ -75,6 +75,6 @@ const ClayContainer = React.forwardRef<HTMLElement, IProps>(
 	}
 );
 
-ClayContainer.displayName = 'ClayContainer';
+Container.displayName = 'ClayContainer';
 
-export default ClayContainer;
+export default Container;
diff --git a/packages/clay-layout/src/ContainerFluid.tsx b/packages/clay-layout/src/ContainerFluid.tsx
index 559d13a32d..534defc6a1 100644
--- a/packages/clay-layout/src/ContainerFluid.tsx
+++ b/packages/clay-layout/src/ContainerFluid.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 
 import Container from './Container';
 
-export interface IProps
+interface IProps
 	extends Omit<
 		React.ComponentProps<typeof Container>,
 		'fluid' | 'fluidSize'
@@ -15,7 +15,7 @@ export interface IProps
 	size?: React.ComponentProps<typeof Container>['fluidSize'] | false;
 }
 
-const ClayContainerFluid = React.forwardRef<HTMLElement, IProps>(
+const ContainerFluid = React.forwardRef<HTMLElement, IProps>(
 	({children, size = 'xl', ...otherProps}: IProps, ref) => {
 		return (
 			<Container
@@ -30,6 +30,6 @@ const ClayContainerFluid = React.forwardRef<HTMLElement, IProps>(
 	}
 );
 
-ClayContainerFluid.displayName = 'ClayContainerFluid';
+ContainerFluid.displayName = 'ClayContainerFluid';
 
-export default ClayContainerFluid;
+export default ContainerFluid;
diff --git a/packages/clay-layout/src/Content.tsx b/packages/clay-layout/src/Content.tsx
index 74542cf365..1b5ab20f55 100644
--- a/packages/clay-layout/src/Content.tsx
+++ b/packages/clay-layout/src/Content.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IContentRowProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IContentRowProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Element or component to render for container
 	 */
@@ -79,7 +79,7 @@ const ContentRow = React.forwardRef<HTMLElement, IContentRowProps>(
 
 ContentRow.displayName = 'ClayContentRow';
 
-export interface IContentColProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IContentColProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Element or component to render for container
 	 */
@@ -143,7 +143,7 @@ const ContentCol = React.forwardRef<HTMLElement, IContentColProps>(
 
 ContentCol.displayName = 'ClayContentCol';
 
-export interface IColSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IColSectionProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Element or component to render for container
 	 */
diff --git a/packages/clay-layout/src/Row.tsx b/packages/clay-layout/src/Row.tsx
index ace08224bf..690fc992a7 100644
--- a/packages/clay-layout/src/Row.tsx
+++ b/packages/clay-layout/src/Row.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Element or component to render for container
 	 */
@@ -29,7 +29,7 @@ export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	justify?: 'start' | 'center' | 'end' | 'around' | 'between';
 }
 
-const ClayRow = React.forwardRef<HTMLElement, IProps>(
+const Row = React.forwardRef<HTMLElement, IProps>(
 	(
 		{
 			children,
@@ -56,6 +56,6 @@ const ClayRow = React.forwardRef<HTMLElement, IProps>(
 	}
 );
 
-ClayRow.displayName = 'ClayRow';
+Row.displayName = 'ClayRow';
 
-export default ClayRow;
+export default Row;
diff --git a/packages/clay-layout/src/Sheet.tsx b/packages/clay-layout/src/Sheet.tsx
index ea2a77986f..60ff6b2ba6 100644
--- a/packages/clay-layout/src/Sheet.tsx
+++ b/packages/clay-layout/src/Sheet.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IContainerProps extends React.HTMLAttributes<HTMLElement> {
+interface IContainerProps extends React.HTMLAttributes<HTMLElement> {
 	/**
 	 * Element or component to render for container
 	 */
@@ -114,7 +114,7 @@ const SheetRow = React.forwardRef<HTMLElement, IContainerProps>(
 
 SheetRow.displayName = 'ClaySheetRow';
 
-export interface IProps extends IContainerProps {
+interface IProps extends IContainerProps {
 	/**
 	 * Setting this to sets a max-width on the sheet
 	 */
diff --git a/packages/clay-link/docs/link.mdx b/packages/clay-link/docs/link.mdx
index 36691c81c2..464481310d 100644
--- a/packages/clay-link/docs/link.mdx
+++ b/packages/clay-link/docs/link.mdx
@@ -4,7 +4,7 @@ description: 'Also known as a hyperlink, a link is a clickable (text or image) e
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/link/'
 packageNpm: '@clayui/link'
 packageUse: "import Link from '@clayui/link';"
-packageTypes: ['clay-link/src']
+packageTypes: ['clay-link/src/Link.tsx']
 ---
 
 ## Basic Usage
diff --git a/packages/clay-link/src/Link.tsx b/packages/clay-link/src/Link.tsx
new file mode 100644
index 0000000000..216d279454
--- /dev/null
+++ b/packages/clay-link/src/Link.tsx
@@ -0,0 +1,191 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+
+import ClayLinkContext from './Context';
+
+const LINK_PRESETS = {
+	danger: {
+		base: 'c-link text-danger',
+		decoration: 'underline',
+	},
+	primary: {
+		base: 'c-link link-primary',
+		decoration: 'underline',
+	},
+	secondary: {
+		base: 'c-link link-secondary',
+		decoration: 'underline',
+	},
+	tertiary: {
+		base: 'c-link text-tertiary',
+		decoration: null,
+	},
+	unstyled: {
+		base: 'link-unstyled',
+		decoration: null,
+	},
+} as const;
+
+const FONT_WEIGHTS = {
+	normal: 'font-weight-normal',
+	'semi-bold': 'font-weight-semi-bold',
+};
+
+interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+	/**
+	 * Renders the button as a block element.
+	 */
+	block?: boolean;
+
+	/**
+	 * Flag to indicate if link should be borderless.
+	 */
+	borderless?: boolean;
+
+	/**
+	 * Config for button props
+	 */
+	button?:
+		| boolean
+		| {
+				block?: boolean;
+				monospaced?: boolean;
+				small?: boolean;
+		  };
+
+	/**
+	 * Indicates if the text should be underlined
+	 */
+	decoration?: 'none' | 'underline' | null;
+
+	/**
+	 * Determines how the link is displayed.
+	 */
+	displayType?: 'danger' | 'primary' | 'secondary' | 'tertiary' | 'unstyled';
+
+	/**
+	 * Sets the text size based on a number scale.
+	 */
+	fontSize?: Number;
+
+	/**
+	 * Messages used for announcement to SR. Use this for internationalization.
+	 */
+	messages?: {
+		opensNewWindow: string;
+	};
+
+	/**
+	 * Flag to indicate if the link should be monospaced.
+	 */
+	monospaced?: boolean;
+
+	/**
+	 * Flag to indicate if the link should use the outlined style.
+	 */
+	outline?: boolean;
+
+	/**
+	 * Indicates whether the button should use the small variant.
+	 */
+	small?: boolean;
+
+	/**
+	 * Determines the font-weight of the link.
+	 */
+	weight?: 'normal' | 'semi-bold';
+}
+
+const defaultMessages = {
+	opensNewWindow: '(Opens a new window)',
+};
+
+const Link = React.forwardRef<HTMLAnchorElement, IProps>(
+	(
+		{
+			block,
+			borderless,
+			button,
+			children,
+			className,
+			decoration,
+			displayType,
+			fontSize,
+			messages = defaultMessages,
+			monospaced,
+			outline,
+			rel,
+			small,
+			target,
+			weight,
+			...otherProps
+		}: IProps,
+		ref
+	) => {
+		const TagOrComponent = React.useContext(ClayLinkContext);
+
+		let classes;
+
+		if (button) {
+			button = button === true ? {} : button;
+
+			classes = {
+				btn: !!button,
+				'btn-block': button.block || block,
+				'btn-monospaced': button.monospaced || monospaced,
+				'btn-outline-borderless': borderless,
+				'btn-sm': button.small || small,
+				[`btn-${displayType}`]: displayType && !outline && !borderless,
+				[`btn-outline-${displayType}`]:
+					displayType && (outline || borderless),
+				[FONT_WEIGHTS[weight!]]: weight,
+				[`text-${fontSize}`]: fontSize,
+				[`text-decoration-${decoration}`]: decoration,
+			};
+		} else {
+			decoration =
+				decoration === null || outline
+					? undefined
+					: decoration || LINK_PRESETS[displayType!]?.decoration;
+
+			classes = {
+				'link-monospaced': monospaced,
+				'link-outline': outline,
+				'link-outline-borderless': borderless,
+				[LINK_PRESETS[displayType!]?.base]: displayType && !outline,
+				[`link-outline-${displayType}`]: displayType && outline,
+				[FONT_WEIGHTS[weight!]]: weight,
+				[`text-${fontSize}`]: fontSize,
+				[`text-decoration-${decoration}`]: decoration,
+			};
+		}
+
+		if (target && !rel) {
+			rel = 'noreferrer noopener';
+		}
+
+		return (
+			<TagOrComponent
+				className={classNames(className, classes)}
+				ref={ref}
+				rel={rel}
+				target={target}
+				{...otherProps}
+			>
+				{children}
+				{target === '_blank' && (
+					<span className="sr-only">{messages.opensNewWindow}</span>
+				)}
+			</TagOrComponent>
+		);
+	}
+);
+
+Link.displayName = 'ClayLink';
+
+export default Link;
diff --git a/packages/clay-link/src/index.tsx b/packages/clay-link/src/index.tsx
index 0451ccee8e..ccc7521613 100644
--- a/packages/clay-link/src/index.tsx
+++ b/packages/clay-link/src/index.tsx
@@ -3,191 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import classNames from 'classnames';
-import React from 'react';
-
-import ClayLinkContext from './Context';
-
-const LINK_PRESETS = {
-	danger: {
-		base: 'c-link text-danger',
-		decoration: 'underline',
-	},
-	primary: {
-		base: 'c-link link-primary',
-		decoration: 'underline',
-	},
-	secondary: {
-		base: 'c-link link-secondary',
-		decoration: 'underline',
-	},
-	tertiary: {
-		base: 'c-link text-tertiary',
-		decoration: null,
-	},
-	unstyled: {
-		base: 'link-unstyled',
-		decoration: null,
-	},
-} as const;
-
-const FONT_WEIGHTS = {
-	normal: 'font-weight-normal',
-	'semi-bold': 'font-weight-semi-bold',
-};
-
-interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-	/**
-	 * Renders the button as a block element.
-	 */
-	block?: boolean;
-
-	/**
-	 * Flag to indicate if link should be borderless.
-	 */
-	borderless?: boolean;
-
-	/**
-	 * Config for button props
-	 */
-	button?:
-		| boolean
-		| {
-				block?: boolean;
-				monospaced?: boolean;
-				small?: boolean;
-		  };
-
-	/**
-	 * Indicates if the text should be underlined
-	 */
-	decoration?: 'none' | 'underline' | null;
-
-	/**
-	 * Determines how the link is displayed.
-	 */
-	displayType?: 'danger' | 'primary' | 'secondary' | 'tertiary' | 'unstyled';
-
-	/**
-	 * Sets the text size based on a number scale.
-	 */
-	fontSize?: Number;
-
-	/**
-	 * Messages used for announcement to SR. Use this for internationalization.
-	 */
-	messages?: {
-		opensNewWindow: string;
-	};
-
-	/**
-	 * Flag to indicate if the link should be monospaced.
-	 */
-	monospaced?: boolean;
-
-	/**
-	 * Flag to indicate if the link should use the outlined style.
-	 */
-	outline?: boolean;
-
-	/**
-	 * Indicates whether the button should use the small variant.
-	 */
-	small?: boolean;
-
-	/**
-	 * Determines the font-weight of the link.
-	 */
-	weight?: 'normal' | 'semi-bold';
-}
-
-const defaultMessages = {
-	opensNewWindow: '(Opens a new window)',
-};
-
-export const Link = React.forwardRef<HTMLAnchorElement, IProps>(
-	(
-		{
-			block,
-			borderless,
-			button,
-			children,
-			className,
-			decoration,
-			displayType,
-			fontSize,
-			messages = defaultMessages,
-			monospaced,
-			outline,
-			rel,
-			small,
-			target,
-			weight,
-			...otherProps
-		}: IProps,
-		ref
-	) => {
-		const TagOrComponent = React.useContext(ClayLinkContext);
-
-		let classes;
-
-		if (button) {
-			button = button === true ? {} : button;
-
-			classes = {
-				btn: !!button,
-				'btn-block': button.block || block,
-				'btn-monospaced': button.monospaced || monospaced,
-				'btn-outline-borderless': borderless,
-				'btn-sm': button.small || small,
-				[`btn-${displayType}`]: displayType && !outline && !borderless,
-				[`btn-outline-${displayType}`]:
-					displayType && (outline || borderless),
-				[FONT_WEIGHTS[weight!]]: weight,
-				[`text-${fontSize}`]: fontSize,
-				[`text-decoration-${decoration}`]: decoration,
-			};
-		} else {
-			decoration =
-				decoration === null || outline
-					? undefined
-					: decoration || LINK_PRESETS[displayType!]?.decoration;
-
-			classes = {
-				'link-monospaced': monospaced,
-				'link-outline': outline,
-				'link-outline-borderless': borderless,
-				[LINK_PRESETS[displayType!]?.base]: displayType && !outline,
-				[`link-outline-${displayType}`]: displayType && outline,
-				[FONT_WEIGHTS[weight!]]: weight,
-				[`text-${fontSize}`]: fontSize,
-				[`text-decoration-${decoration}`]: decoration,
-			};
-		}
-
-		if (target && !rel) {
-			rel = 'noreferrer noopener';
-		}
-
-		return (
-			<TagOrComponent
-				className={classNames(className, classes)}
-				ref={ref}
-				rel={rel}
-				target={target}
-				{...otherProps}
-			>
-				{children}
-				{target === '_blank' && (
-					<span className="sr-only">{messages.opensNewWindow}</span>
-				)}
-			</TagOrComponent>
-		);
-	}
-);
-
-Link.displayName = 'ClayLink';
-
-export {ClayLinkContext};
+import Link from './Link';
 
+export {default as ClayLinkContext} from './Context';
 export default Link;
diff --git a/packages/clay-list/docs/list.mdx b/packages/clay-list/docs/list.mdx
index ef04ebeb2e..6fbb2f21c1 100644
--- a/packages/clay-list/docs/list.mdx
+++ b/packages/clay-list/docs/list.mdx
@@ -6,13 +6,13 @@ packageNpm: '@clayui/list'
 packageUse: "import List from '@clayui/list';"
 packageTypes:
     [
-        'clay-list/src/list',
-        'clay-list/src/item',
-        'clay-list/src/item-text',
-        'clay-list/src/item-title',
-        'clay-list/src/header',
-        'clay-list/src/list-with-items',
-        'clay-list/src/quick-action-menu',
+        'clay-list/src/List.tsx',
+        'clay-list/src/Item.tsx',
+        'clay-list/src/ItemText.tsx',
+        'clay-list/src/ItemTitle.tsx',
+        'clay-list/src/Header.tsx',
+        'clay-list/src/ListWithItems.tsx',
+        'clay-list/src/QuickActionMenu.tsx',
     ]
 ---
 
diff --git a/packages/clay-list/src/Header.tsx b/packages/clay-list/src/Header.tsx
index d4a87e31cb..dfec20cf68 100644
--- a/packages/clay-list/src/Header.tsx
+++ b/packages/clay-list/src/Header.tsx
@@ -23,5 +23,4 @@ const Header = React.forwardRef<
 
 Header.displayName = 'ClayListHeader';
 
-export {Header};
 export default Header;
diff --git a/packages/clay-list/src/Item.tsx b/packages/clay-list/src/Item.tsx
index d3ced2d558..4473ce32a6 100644
--- a/packages/clay-list/src/Item.tsx
+++ b/packages/clay-list/src/Item.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLLIElement> {
+interface IProps extends React.HTMLAttributes<HTMLLIElement> {
 	/**
 	 * Flag to indicate if the `list-group-item-action` class should be applied.
 	 */
@@ -80,5 +80,4 @@ const Item = React.forwardRef<HTMLLIElement, IProps>(
 
 Item.displayName = 'ClayListItem';
 
-export {Item};
 export default Item;
diff --git a/packages/clay-list/src/ItemText.tsx b/packages/clay-list/src/ItemText.tsx
index 6138c4bbef..2a748370b7 100644
--- a/packages/clay-list/src/ItemText.tsx
+++ b/packages/clay-list/src/ItemText.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLParagraphElement> {
+interface IProps extends React.HTMLAttributes<HTMLParagraphElement> {
 	/**
 	 * Flag to indicate if content should be styled as subtext.
 	 */
@@ -29,5 +29,4 @@ const ItemText = React.forwardRef<HTMLParagraphElement, IProps>(
 
 ItemText.displayName = 'ClayListItemText';
 
-export {ItemText};
 export default ItemText;
diff --git a/packages/clay-list/src/ItemTitle.tsx b/packages/clay-list/src/ItemTitle.tsx
index cb89b405c0..b033b85f56 100644
--- a/packages/clay-list/src/ItemTitle.tsx
+++ b/packages/clay-list/src/ItemTitle.tsx
@@ -33,5 +33,4 @@ const ItemTitle = React.forwardRef<
 
 ItemTitle.displayName = 'ClayListItemTitle';
 
-export {ItemTitle};
 export default ItemTitle;
diff --git a/packages/clay-list/src/List.tsx b/packages/clay-list/src/List.tsx
index a585fff865..2e4250a5fe 100644
--- a/packages/clay-list/src/List.tsx
+++ b/packages/clay-list/src/List.tsx
@@ -14,7 +14,7 @@ import ItemText from './ItemText';
 import ItemTitle from './ItemTitle';
 import QuickActionMenu from './QuickActionMenu';
 
-export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	children?:
 		| React.ReactElement<React.HTMLAttributes<HTMLLIElement>>
 		| Array<React.ReactElement<React.HTMLAttributes<HTMLLIElement>>>;
@@ -28,7 +28,7 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 
 const CLAY_REGEX = /Clay(?!ListItem|ListHeader).+/;
 
-export function List({
+function List({
 	children,
 	className,
 	showQuickActionsOnHover = true,
diff --git a/packages/clay-list/src/ListWithItems.tsx b/packages/clay-list/src/ListWithItems.tsx
index 19720e5951..f410a1c069 100644
--- a/packages/clay-list/src/ListWithItems.tsx
+++ b/packages/clay-list/src/ListWithItems.tsx
@@ -76,7 +76,7 @@ interface IBooleanMap {
 	[s: string]: boolean;
 }
 
-export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Property of item that makes it unique from other items.
 	 * Defaults to 'id'.
diff --git a/packages/clay-list/src/QuickActionMenu.tsx b/packages/clay-list/src/QuickActionMenu.tsx
index 44f535edde..9420794bb4 100644
--- a/packages/clay-list/src/QuickActionMenu.tsx
+++ b/packages/clay-list/src/QuickActionMenu.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import QuickActionMenuItem from './QuickActionMenuItem';
 
-export interface IForwardRef<T, P = {}>
+interface IForwardRef<T, P = {}>
 	extends React.ForwardRefExoticComponent<P & React.RefAttributes<T>> {
 	Item: typeof QuickActionMenuItem;
 }
@@ -17,7 +17,7 @@ function forwardRef<T, P = {}>(component: React.RefForwardingComponent<T, P>) {
 	return React.forwardRef<T, P>(component) as IForwardRef<T, P>;
 }
 
-export const QuickActionMenu = forwardRef<
+const QuickActionMenu = forwardRef<
 	HTMLDivElement,
 	React.HTMLAttributes<HTMLDivElement>
 >(({children, className, ...otherProps}, ref) => {
diff --git a/packages/clay-list/src/QuickActionMenuItem.tsx b/packages/clay-list/src/QuickActionMenuItem.tsx
index b7af7006a0..a0a8c8e247 100644
--- a/packages/clay-list/src/QuickActionMenuItem.tsx
+++ b/packages/clay-list/src/QuickActionMenuItem.tsx
@@ -8,7 +8,7 @@ import ClayLink from '@clayui/link';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IItemProps
+interface IItemProps
 	extends React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {
 	/**
 	 * Value of path the item should link to.
@@ -26,7 +26,7 @@ export interface IItemProps
 	symbol: string;
 }
 
-export const QuickActionMenuItem = React.forwardRef<
+const QuickActionMenuItem = React.forwardRef<
 	HTMLAnchorElement & HTMLButtonElement,
 	IItemProps
 >(({className, href, spritemap, symbol, ...otherProps}: IItemProps, ref) => {
diff --git a/packages/clay-loading-indicator/docs/loading-indicator.mdx b/packages/clay-loading-indicator/docs/loading-indicator.mdx
index 8f6bee9259..c9c74f41a1 100644
--- a/packages/clay-loading-indicator/docs/loading-indicator.mdx
+++ b/packages/clay-loading-indicator/docs/loading-indicator.mdx
@@ -4,7 +4,7 @@ description: 'The loading indicator shows the user that an external process, lik
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/loading-indicator/'
 packageNpm: '@clayui/loading-indicator'
 packageUse: "import LoadingIndicator from '@clayui/loading-indicator';"
-packageTypes: ['clay-loading-indicator/src']
+packageTypes: ['clay-loading-indicator/src/index.tsx']
 ---
 
 ## Shapes
diff --git a/packages/clay-loading-indicator/src/index.tsx b/packages/clay-loading-indicator/src/index.tsx
index 27879c0f0c..e2bbba2d8c 100644
--- a/packages/clay-loading-indicator/src/index.tsx
+++ b/packages/clay-loading-indicator/src/index.tsx
@@ -35,7 +35,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	small?: boolean;
 }
 
-export const LoadingIndicator = React.forwardRef<HTMLSpanElement, IProps>(
+const LoadingIndicator = React.forwardRef<HTMLSpanElement, IProps>(
 	(
 		{
 			className,
diff --git a/packages/clay-localized-input/docs/localized-input.mdx b/packages/clay-localized-input/docs/localized-input.mdx
index a6c3e2c5d2..e9003a1708 100644
--- a/packages/clay-localized-input/docs/localized-input.mdx
+++ b/packages/clay-localized-input/docs/localized-input.mdx
@@ -4,7 +4,7 @@ description: 'A text input variation used in fields that can be translated into
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/text-input-localizable/'
 packageNpm: '@clayui/localized-input'
 packageUse: "import LocalizedInput from '@clayui/localized-input';"
-packageTypes: ['clay-localized-input/src']
+packageTypes: ['clay-localized-input/src/index.tsx']
 ---
 
 Use it when you want to enable the users to define values like post titles, headings in multiple languages not having to rely on automatic translations.
diff --git a/packages/clay-localized-input/src/index.tsx b/packages/clay-localized-input/src/index.tsx
index 7b57e86c89..484b6990ea 100644
--- a/packages/clay-localized-input/src/index.tsx
+++ b/packages/clay-localized-input/src/index.tsx
@@ -82,7 +82,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	translations: ITranslations;
 }
 
-export const LocalizedInput = React.forwardRef<HTMLInputElement, IProps>(
+const LocalizedInput = React.forwardRef<HTMLInputElement, IProps>(
 	(
 		{
 			ariaLabels = {
diff --git a/packages/clay-management-toolbar/docs/management-toolbar.mdx b/packages/clay-management-toolbar/docs/management-toolbar.mdx
index cdc34474f4..1f4f7173db 100644
--- a/packages/clay-management-toolbar/docs/management-toolbar.mdx
+++ b/packages/clay-management-toolbar/docs/management-toolbar.mdx
@@ -7,12 +7,12 @@ packageStatus: 'Deprecated'
 packageUse: "import ManagementToolbar from '@clayui/management-toolbar';"
 packageTypes:
     [
-        'clay-management-toolbar/src/management-toolbar',
-        'clay-management-toolbar/src/results-bar',
-        'clay-management-toolbar/src/item',
-        'clay-management-toolbar/src/item-list',
-        'clay-management-toolbar/src/results-bar-item',
-        'clay-management-toolbar/src/search',
+        'clay-management-toolbar/src/ManagementToolbar.tsx',
+        'clay-management-toolbar/src/ResultsBar.tsx',
+        'clay-management-toolbar/src/Item.tsx',
+        'clay-management-toolbar/src/ItemList.tsx',
+        'clay-management-toolbar/src/ResultsBarItem.tsx',
+        'clay-management-toolbar/src/Search.tsx',
     ]
 ---
 
diff --git a/packages/clay-management-toolbar/src/Item.tsx b/packages/clay-management-toolbar/src/Item.tsx
index cf5f471405..636c83af68 100644
--- a/packages/clay-management-toolbar/src/Item.tsx
+++ b/packages/clay-management-toolbar/src/Item.tsx
@@ -16,5 +16,4 @@ const Item = ({
 	</li>
 );
 
-export {Item};
 export default Item;
diff --git a/packages/clay-management-toolbar/src/ItemList.tsx b/packages/clay-management-toolbar/src/ItemList.tsx
index 9869bb683f..2038a077a0 100644
--- a/packages/clay-management-toolbar/src/ItemList.tsx
+++ b/packages/clay-management-toolbar/src/ItemList.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	/**
 	 * Flag to indicate the Management Toolbar Item List should fit the width of the parent container.
 	 */
@@ -23,5 +23,4 @@ const ItemList = ({children, expand}: IProps) => (
 	</ul>
 );
 
-export {ItemList};
 export default ItemList;
diff --git a/packages/clay-management-toolbar/src/ManagementToolbar.tsx b/packages/clay-management-toolbar/src/ManagementToolbar.tsx
index cb41037258..72fc0f9e73 100644
--- a/packages/clay-management-toolbar/src/ManagementToolbar.tsx
+++ b/packages/clay-management-toolbar/src/ManagementToolbar.tsx
@@ -45,5 +45,4 @@ ManagementToolbar.Item = Item;
 ManagementToolbar.ItemList = ItemList;
 ManagementToolbar.Search = Search;
 
-export {ManagementToolbar, Item, ItemList, Search};
 export default ManagementToolbar;
diff --git a/packages/clay-management-toolbar/src/ResultsBar.tsx b/packages/clay-management-toolbar/src/ResultsBar.tsx
index 43bdfcd749..ee9952abb3 100644
--- a/packages/clay-management-toolbar/src/ResultsBar.tsx
+++ b/packages/clay-management-toolbar/src/ResultsBar.tsx
@@ -26,5 +26,4 @@ function ResultsBar({
 
 ResultsBar.Item = ResultsBarItem;
 
-export {ResultsBar, ResultsBarItem};
 export default ResultsBar;
diff --git a/packages/clay-management-toolbar/src/ResultsBarItem.tsx b/packages/clay-management-toolbar/src/ResultsBarItem.tsx
index f88ac4c193..dd23a16ea1 100644
--- a/packages/clay-management-toolbar/src/ResultsBarItem.tsx
+++ b/packages/clay-management-toolbar/src/ResultsBarItem.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLLIElement> {
+interface IProps extends React.HTMLAttributes<HTMLLIElement> {
 	/**
 	 * Flag to indicate the Management Toolbar Results Bar Item should fit the width of the parent container.
 	 */
@@ -29,5 +29,4 @@ const ResultsBarItem = ({
 	</li>
 );
 
-export {ResultsBarItem};
 export default ResultsBarItem;
diff --git a/packages/clay-management-toolbar/src/Search.tsx b/packages/clay-management-toolbar/src/Search.tsx
index 5632663d62..2f2b5552c7 100644
--- a/packages/clay-management-toolbar/src/Search.tsx
+++ b/packages/clay-management-toolbar/src/Search.tsx
@@ -7,7 +7,7 @@ import ClayLayout from '@clayui/layout';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.FormHTMLAttributes<HTMLFormElement> {
+interface IProps extends React.FormHTMLAttributes<HTMLFormElement> {
 	/**
 	 * Flag to indicate when there is only the search element within a
 	 * Management Toolbar.
@@ -43,5 +43,4 @@ const Search = ({children, onlySearch, showMobile, ...otherProps}: IProps) => {
 	);
 };
 
-export {Search};
 export default Search;
diff --git a/packages/clay-modal/docs/modal.mdx b/packages/clay-modal/docs/modal.mdx
index 9501500324..5cba52e7d7 100644
--- a/packages/clay-modal/docs/modal.mdx
+++ b/packages/clay-modal/docs/modal.mdx
@@ -6,11 +6,11 @@ packageNpm: '@clayui/modal'
 packageUse: "import Modal from '@clayui/modal';"
 packageTypes:
     [
-        'clay-modal/src/modal',
-        'clay-modal/src/provider',
-        'clay-modal/src/use-modal',
-        'clay-modal/src/header',
-        'clay-modal/src/body',
+        'clay-modal/src/Modal.tsx',
+        'clay-modal/src/Provider.tsx',
+        'clay-modal/src/useModal.tsx',
+        'clay-modal/src/Header.tsx',
+        'clay-modal/src/Body.tsx',
     ]
 ---
 
diff --git a/packages/clay-modal/src/Body.tsx b/packages/clay-modal/src/Body.tsx
index 66523c466d..d6e1da58b2 100644
--- a/packages/clay-modal/src/Body.tsx
+++ b/packages/clay-modal/src/Body.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React, {useEffect, useRef} from 'react';
 
-export interface IBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Props to add to the iframe element
 	 */
@@ -23,7 +23,7 @@ export interface IBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 	url?: string;
 }
 
-const ClayModalBody = ({
+const Body = ({
 	children,
 	className,
 	iFrameProps = {},
@@ -70,4 +70,4 @@ const ClayModalBody = ({
 	);
 };
 
-export default ClayModalBody;
+export default Body;
diff --git a/packages/clay-modal/src/Footer.tsx b/packages/clay-modal/src/Footer.tsx
index b171df91fd..cf46702e16 100644
--- a/packages/clay-modal/src/Footer.tsx
+++ b/packages/clay-modal/src/Footer.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Sets the elements that are positioned `first following
 	 * the LTR direction on the footer.
@@ -26,7 +26,7 @@ export interface IFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 	middle?: React.ReactElement;
 }
 
-const ClayModalFooter = ({
+const Footer = ({
 	className,
 	first,
 	last,
@@ -42,4 +42,4 @@ const ClayModalFooter = ({
 	);
 };
 
-export default ClayModalFooter;
+export default Footer;
diff --git a/packages/clay-modal/src/Header.tsx b/packages/clay-modal/src/Header.tsx
index 9703f33dd1..656261562d 100644
--- a/packages/clay-modal/src/Header.tsx
+++ b/packages/clay-modal/src/Header.tsx
@@ -20,7 +20,7 @@ export const ItemGroup = ({
 	</div>
 );
 
-export interface IItemProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IItemProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Flag for indicating if item should autofitting the width
 	 */
@@ -155,7 +155,7 @@ const ClayModalHeader = ({
 	</div>
 );
 
-export interface IHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Flag for indicating if you want to use the Header its children being the title.
 	 * Set to `false` if you want to use this as a low-level component.
@@ -163,11 +163,7 @@ export interface IHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 	withTitle?: boolean;
 }
 
-export const Header = ({
-	children,
-	withTitle = true,
-	...otherProps
-}: IHeaderProps) => {
+const Header = ({children, withTitle = true, ...otherProps}: IHeaderProps) => {
 	const {onClose, spritemap, status} = React.useContext(Context);
 
 	return (
diff --git a/packages/clay-modal/src/Modal.tsx b/packages/clay-modal/src/Modal.tsx
index 2f299ab281..04b768878b 100644
--- a/packages/clay-modal/src/Modal.tsx
+++ b/packages/clay-modal/src/Modal.tsx
@@ -224,17 +224,4 @@ Modal.Title = Title;
 Modal.TitleIndicator = TitleIndicator;
 Modal.TitleSection = TitleSection;
 
-export {
-	Body,
-	Footer,
-	Header,
-	Item,
-	ItemGroup,
-	Subtitle,
-	SubtitleSection,
-	Title,
-	TitleIndicator,
-	TitleSection,
-	Modal,
-};
 export default Modal;
diff --git a/packages/clay-modal/src/Provider.tsx b/packages/clay-modal/src/Provider.tsx
index 192c228d4c..8f363426e6 100644
--- a/packages/clay-modal/src/Provider.tsx
+++ b/packages/clay-modal/src/Provider.tsx
@@ -137,5 +137,5 @@ const ModalProvider = ({children, spritemap}: IProps) => {
 	);
 };
 
-export {ModalProvider, Context};
+export {Context};
 export default ModalProvider;
diff --git a/packages/clay-modal/src/Subtitle.tsx b/packages/clay-modal/src/Subtitle.tsx
index 23db538ae6..b226c3074e 100644
--- a/packages/clay-modal/src/Subtitle.tsx
+++ b/packages/clay-modal/src/Subtitle.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-const ClayModalItemGroup = ({
+const ItemGroup = ({
 	children,
 	className,
 	...otherProps
@@ -16,4 +16,4 @@ const ClayModalItemGroup = ({
 	</div>
 );
 
-export default ClayModalItemGroup;
+export default ItemGroup;
diff --git a/packages/clay-multi-select/docs/multi-select.mdx b/packages/clay-multi-select/docs/multi-select.mdx
index 6e0942c47d..e69f624d35 100644
--- a/packages/clay-multi-select/docs/multi-select.mdx
+++ b/packages/clay-multi-select/docs/multi-select.mdx
@@ -4,7 +4,8 @@ description: 'Multi select is the field type that allows writing text to create
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/selector/'
 packageNpm: '@clayui/multi-select'
 packageUse: "import MultiSelect from '@clayui/multi-select';"
-packageTypes: ['clay-multi-select/src', 'clay-autocomplete/src/Item']
+packageTypes:
+    ['clay-multi-select/src/index.tsx', 'clay-autocomplete/src/Item.tsx']
 ---
 
 Multi Select is an aggregate component of the `@clayui/form` package, consisting of a high-level written above a `<ClayInput />` that provides the ability to create tags.
diff --git a/packages/clay-multi-select/src/index.tsx b/packages/clay-multi-select/src/index.tsx
index 02f1aed1e0..3bd94956c1 100644
--- a/packages/clay-multi-select/src/index.tsx
+++ b/packages/clay-multi-select/src/index.tsx
@@ -46,7 +46,7 @@ interface IMenuRendererProps {
 
 type MenuRenderer = (props: IMenuRendererProps) => JSX.Element;
 
-export interface IProps<T>
+interface IProps<T>
 	extends Omit<
 			React.HTMLAttributes<HTMLInputElement>,
 			'onChange' | 'children'
@@ -237,7 +237,7 @@ export interface IProps<T>
 	loadingState?: number;
 }
 
-export interface IForwardRef<T, P = {}>
+interface IForwardRef<T, P = {}>
 	extends React.ForwardRefExoticComponent<P & React.RefAttributes<T>> {
 	Item: typeof AutocompleteItem;
 }
@@ -561,5 +561,4 @@ export const itemLabelFilter = (
 
 MultiSelect.Item = AutocompleteItem;
 
-export {MultiSelect};
 export default MultiSelect;
diff --git a/packages/clay-multi-step-nav/docs/multi-step-nav.mdx b/packages/clay-multi-step-nav/docs/multi-step-nav.mdx
index 9b7478e18a..0685a46a4c 100644
--- a/packages/clay-multi-step-nav/docs/multi-step-nav.mdx
+++ b/packages/clay-multi-step-nav/docs/multi-step-nav.mdx
@@ -7,8 +7,10 @@ storybookPath: 'design-system-components-multistepnav'
 packageUse: "import MultiStepNav from '@clayui/multi-step-nav';"
 packageTypes:
     [
-        'clay-multi-step-nav/src/multi-step-nav',
-        'clay-multi-step-nav/src/multi-step-nav-with-basic-items',
+        'clay-multi-step-nav/src/MultiStepNav.tsx',
+        'clay-multi-step-nav/src/MultiStepNavWithBasicItems.tsx',
+        'clay-multi-step-nav/src/Item.tsx',
+        'clay-multi-step-nav/src/Title.tsx',
     ]
 ---
 
diff --git a/packages/clay-multi-step-nav/src/Divider.tsx b/packages/clay-multi-step-nav/src/Divider.tsx
index e289b076e6..ef9a3e14da 100644
--- a/packages/clay-multi-step-nav/src/Divider.tsx
+++ b/packages/clay-multi-step-nav/src/Divider.tsx
@@ -7,5 +7,4 @@ import React from 'react';
 
 const MultiStepNavDivider = () => <div className="multi-step-divider" />;
 
-export {MultiStepNavDivider};
 export default MultiStepNavDivider;
diff --git a/packages/clay-multi-step-nav/src/Indicator.tsx b/packages/clay-multi-step-nav/src/Indicator.tsx
index d86e58b873..1a0c690ea0 100644
--- a/packages/clay-multi-step-nav/src/Indicator.tsx
+++ b/packages/clay-multi-step-nav/src/Indicator.tsx
@@ -8,7 +8,7 @@ import React, {useContext} from 'react';
 
 import {ItemContext} from './Item';
 
-export type Props = {
+type Props = {
 	/**
 	 * Flag to indicate if step should show its been completed
 	 * @deprecated since v3.91.0 - this is no longer necessary.
@@ -69,5 +69,4 @@ const MultiStepNavIndicator = React.forwardRef<HTMLDivElement, Props>(
 
 MultiStepNavIndicator.displayName = 'ClayMultiStepNavIndicator';
 
-export {MultiStepNavIndicator};
 export default MultiStepNavIndicator;
diff --git a/packages/clay-multi-step-nav/src/Item.tsx b/packages/clay-multi-step-nav/src/Item.tsx
index 3782c32bbb..b81f565b8b 100644
--- a/packages/clay-multi-step-nav/src/Item.tsx
+++ b/packages/clay-multi-step-nav/src/Item.tsx
@@ -14,7 +14,7 @@ type Context = {
 
 export const ItemContext = React.createContext<Context>({});
 
-export interface IProps extends React.HTMLAttributes<HTMLLIElement> {
+interface IProps extends React.HTMLAttributes<HTMLLIElement> {
 	/**
 	 * Flag to indicate if `active` classname should be applied
 	 */
@@ -42,7 +42,7 @@ export interface IProps extends React.HTMLAttributes<HTMLLIElement> {
 	state?: State;
 }
 
-const MultiStepNavItem = ({
+const Item = ({
 	active,
 	children,
 	className,
@@ -69,5 +69,4 @@ const MultiStepNavItem = ({
 	);
 };
 
-export {MultiStepNavItem};
-export default MultiStepNavItem;
+export default Item;
diff --git a/packages/clay-multi-step-nav/src/MultiStepNav.tsx b/packages/clay-multi-step-nav/src/MultiStepNav.tsx
index 4c357d2d44..1ec090f31f 100644
--- a/packages/clay-multi-step-nav/src/MultiStepNav.tsx
+++ b/packages/clay-multi-step-nav/src/MultiStepNav.tsx
@@ -11,7 +11,7 @@ import ClayMultiStepNavIndicator from './Indicator';
 import ClayMultiStepNavItem from './Item';
 import ClayMultiStepNavTitle from './Title';
 
-export interface IProps extends React.HTMLAttributes<HTMLOListElement> {
+interface IProps extends React.HTMLAttributes<HTMLOListElement> {
 	/**
 	 * Flag to indicate if nav should add `multi-step-nav-collapse-sm` class
 	 */
@@ -56,5 +56,4 @@ MultiStepNav.Indicator = ClayMultiStepNavIndicator;
 MultiStepNav.Item = ClayMultiStepNavItem;
 MultiStepNav.Title = ClayMultiStepNavTitle;
 
-export {MultiStepNav};
 export default MultiStepNav;
diff --git a/packages/clay-multi-step-nav/src/MultiStepNavWithBasicItems.tsx b/packages/clay-multi-step-nav/src/MultiStepNavWithBasicItems.tsx
index 5c012a698c..a5fc1c78fd 100644
--- a/packages/clay-multi-step-nav/src/MultiStepNavWithBasicItems.tsx
+++ b/packages/clay-multi-step-nav/src/MultiStepNavWithBasicItems.tsx
@@ -21,7 +21,7 @@ interface ISteps {
 	title?: string;
 }
 
-export interface IProps extends React.ComponentProps<typeof ClayMultiStepNav> {
+interface IProps extends React.ComponentProps<typeof ClayMultiStepNav> {
 	/**
 	 * Value for which step index is active (controlled).
 	 */
diff --git a/packages/clay-multi-step-nav/src/Title.tsx b/packages/clay-multi-step-nav/src/Title.tsx
index bf696efd4b..97ae9b19fe 100644
--- a/packages/clay-multi-step-nav/src/Title.tsx
+++ b/packages/clay-multi-step-nav/src/Title.tsx
@@ -5,16 +5,15 @@
 
 import React from 'react';
 
-export type Props = {
+type Props = {
 	/**
 	 * Title content.
 	 */
 	children?: React.ReactNode;
 };
 
-const MultiStepNavTitle = ({children}: Props) => (
+const Title = ({children}: Props) => (
 	<div className="multi-step-title">{children}</div>
 );
 
-export {MultiStepNavTitle};
-export default MultiStepNavTitle;
+export default Title;
diff --git a/packages/clay-nav/docs/nav.mdx b/packages/clay-nav/docs/nav.mdx
index 19b4b93a31..196e66a9ec 100644
--- a/packages/clay-nav/docs/nav.mdx
+++ b/packages/clay-nav/docs/nav.mdx
@@ -3,7 +3,7 @@ title: 'Nav'
 description: 'Clay Nav provides a clear and semantic navigation for your site'
 packageNpm: '@clayui/nav'
 packageUse: "import Nav from '@clayui/nav';"
-packageTypes: ['clay-core/src/nav']
+packageTypes: ['clay-core/src/nav/Nav.tsx', 'clay-core/src/nav/Link.tsx', 'clay-core/src/nav/Item.tsx']
 ---
 
 ## Basic Usage
diff --git a/packages/clay-nav/docs/vertical-nav.mdx b/packages/clay-nav/docs/vertical-nav.mdx
index a653abc8d9..070666cdea 100644
--- a/packages/clay-nav/docs/vertical-nav.mdx
+++ b/packages/clay-nav/docs/vertical-nav.mdx
@@ -7,9 +7,9 @@ storybookPath: 'design-system-components-verticalnav--default'
 packageUse: "import {ClayVerticalNav} from '@clayui/nav';"
 packageTypes:
     [
-        'clay-nav/src/vertical',
-        'clay-core/src/vertical-nav/item',
-        'clay-core/src/vertical-nav/trigger',
+        'clay-nav/src/Vertical.tsx',
+        'clay-core/src/vertical-nav/Item.tsx',
+        'clay-core/src/vertical-nav/Trigger.tsx',
     ]
 ---
 
diff --git a/packages/clay-nav/src/Vertical.tsx b/packages/clay-nav/src/Vertical.tsx
index 76cab7c6bf..0f5367a2f2 100644
--- a/packages/clay-nav/src/Vertical.tsx
+++ b/packages/clay-nav/src/Vertical.tsx
@@ -41,7 +41,7 @@ interface IItemWithItems extends IItem {
 	items?: Array<IItem>;
 }
 
-export interface IProps extends React.ComponentProps<typeof VerticalNav> {
+interface IProps extends React.ComponentProps<typeof VerticalNav> {
 	/**
 	 * Flag to define if the item represents the current page. Disable this
 	 * attribute only if there are multiple navigations on the page.
diff --git a/packages/clay-navigation-bar/docs/navigation-bar.mdx b/packages/clay-navigation-bar/docs/navigation-bar.mdx
index 597c8fb05a..cac56e36ff 100644
--- a/packages/clay-navigation-bar/docs/navigation-bar.mdx
+++ b/packages/clay-navigation-bar/docs/navigation-bar.mdx
@@ -4,7 +4,7 @@ description: 'A navigation bar, navbar, is a horizontal bar that provides severa
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/navigation/horizontal-nav/'
 packageNpm: '@clayui/navigation-bar'
 packageUse: "import NavigationBar from '@clayui/navigation-bar';"
-packageTypes: ['clay-navigation-bar/src', 'clay-navigation-bar/src/item']
+packageTypes: ['clay-navigation-bar/src/index.tsx', 'clay-navigation-bar/src/Item.tsx']
 ---
 
 As described on Lexicon, a NavigationBar can be styled with an inverted theme. It displays navigation items in a dark background with light text. It is always placed right below the header. Use [`inverted`](#api-inverted) property for this.
diff --git a/packages/clay-navigation-bar/src/Item.tsx b/packages/clay-navigation-bar/src/Item.tsx
index 8107016b32..2eb86f958c 100644
--- a/packages/clay-navigation-bar/src/Item.tsx
+++ b/packages/clay-navigation-bar/src/Item.tsx
@@ -8,7 +8,7 @@ import React, {useContext} from 'react';
 
 import {NavigationBarContext} from './context';
 
-export interface IProps extends React.HTMLAttributes<HTMLLIElement> {
+interface IProps extends React.HTMLAttributes<HTMLLIElement> {
 	/**
 	 * Determines the active state of an dropdown list item.
 	 */
diff --git a/packages/clay-navigation-bar/src/index.tsx b/packages/clay-navigation-bar/src/index.tsx
index 33fbd2d4f9..742c6d0af4 100644
--- a/packages/clay-navigation-bar/src/index.tsx
+++ b/packages/clay-navigation-bar/src/index.tsx
@@ -16,7 +16,7 @@ import warning from 'warning';
 import {Item} from './Item';
 import {NavigationBarContext} from './context';
 
-export interface IProps
+interface IProps
 	extends Omit<React.HTMLAttributes<HTMLDivElement>, 'aria-current'> {
 	/**
 	 * Flag to define if the item represents the current page. Disable this
@@ -162,5 +162,4 @@ function NavigationBar({
 
 NavigationBar.Item = Item;
 
-export {NavigationBar, Item};
 export default NavigationBar;
diff --git a/packages/clay-pagination-bar/docs/pagination-bar.mdx b/packages/clay-pagination-bar/docs/pagination-bar.mdx
index 1f64763987..eea461ad5f 100644
--- a/packages/clay-pagination-bar/docs/pagination-bar.mdx
+++ b/packages/clay-pagination-bar/docs/pagination-bar.mdx
@@ -4,7 +4,7 @@ description: 'Pagination bar provides navigation through datasets'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/pagination/'
 packageNpm: '@clayui/pagination-bar'
 packageUse: "import PaginationBar, {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';"
-packageTypes: ['clay-pagination-bar/src']
+packageTypes: ['clay-pagination-bar/src/PaginationBar.tsx', 'clay-pagination-bar/src/PaginationBarWithBasicItems.tsx']
 ---
 
 ## PaginationBar Composition
diff --git a/packages/clay-pagination-bar/src/PaginationBar.tsx b/packages/clay-pagination-bar/src/PaginationBar.tsx
index f3efdb7a7b..3291d552d0 100644
--- a/packages/clay-pagination-bar/src/PaginationBar.tsx
+++ b/packages/clay-pagination-bar/src/PaginationBar.tsx
@@ -16,7 +16,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	size?: 'sm' | 'lg';
 }
 
-export interface IForwardRef<T, P = {}>
+interface IForwardRef<T, P = {}>
 	extends React.ForwardRefExoticComponent<P & React.RefAttributes<T>> {
 	/**
 	 * @deprecated since v3.84.0 - use `Picker` component instead.
diff --git a/packages/clay-pagination/docs/pagination.mdx b/packages/clay-pagination/docs/pagination.mdx
index 418d5f28b7..ab1fa55df7 100644
--- a/packages/clay-pagination/docs/pagination.mdx
+++ b/packages/clay-pagination/docs/pagination.mdx
@@ -6,10 +6,10 @@ packageNpm: '@clayui/pagination'
 packageUse: "import Pagination, {ClayPaginationWithBasicItems} from '@clayui/pagination';"
 packageTypes:
     [
-        'clay-pagination/src/pagination-with-basic-items',
-        'clay-pagination/src/pagination',
-        'clay-pagination/src/item',
-        'clay-pagination/src/ellipsis',
+        'clay-pagination/src/PaginationWithBasicItems.tsx',
+        'clay-pagination/src/Pagination.tsx',
+        'clay-pagination/src/Item.tsx',
+        'clay-pagination/src/Ellipsis.tsx',
     ]
 ---
 
diff --git a/packages/clay-pagination/src/Ellipsis.tsx b/packages/clay-pagination/src/Ellipsis.tsx
index 3436c78bad..25041ed8c8 100644
--- a/packages/clay-pagination/src/Ellipsis.tsx
+++ b/packages/clay-pagination/src/Ellipsis.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 
 const {Item, Menu} = __EXPERIMENTAL_MENU;
 
-export type Props = {
+type Props = {
 	'aria-label'?: string;
 	alignmentPosition?: number | AlignPoints;
 	disabled?: boolean;
diff --git a/packages/clay-pagination/src/Item.tsx b/packages/clay-pagination/src/Item.tsx
index 26eb113a4b..ecd04d0390 100644
--- a/packages/clay-pagination/src/Item.tsx
+++ b/packages/clay-pagination/src/Item.tsx
@@ -7,7 +7,7 @@ import ClayLink from '@clayui/link';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IPaginationItemProps
+interface IPaginationItemProps
 	extends React.HTMLAttributes<HTMLAnchorElement | HTMLDivElement> {
 	as?: 'div' | typeof ClayLink;
 	active?: boolean;
diff --git a/packages/clay-pagination/src/Pagination.tsx b/packages/clay-pagination/src/Pagination.tsx
index 788fb6ca45..9b0fad1656 100644
--- a/packages/clay-pagination/src/Pagination.tsx
+++ b/packages/clay-pagination/src/Pagination.tsx
@@ -16,7 +16,7 @@ interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	size?: 'lg' | 'sm';
 }
 
-export interface IForwardRef<T, P = {}>
+interface IForwardRef<T, P = {}>
 	extends React.ForwardRefExoticComponent<P & React.RefAttributes<T>> {
 	Ellipsis: typeof Ellipsis;
 	Item: typeof Item;
diff --git a/packages/clay-pagination/src/PaginationWithBasicItems.tsx b/packages/clay-pagination/src/PaginationWithBasicItems.tsx
index 64ea980582..ee33cd47ee 100644
--- a/packages/clay-pagination/src/PaginationWithBasicItems.tsx
+++ b/packages/clay-pagination/src/PaginationWithBasicItems.tsx
@@ -99,7 +99,7 @@ interface IProps extends React.ComponentProps<typeof Pagination> {
 	spritemap?: string;
 }
 
-export function ClayPaginationWithBasicItems(
+export const ClayPaginationWithBasicItems = React.forwardRef(function ClayPaginationWithBasicItems(
 	{
 		active,
 		activePage,
@@ -227,15 +227,6 @@ export function ClayPaginationWithBasicItems(
 			</Pagination.Item>
 		</Pagination>
 	);
-}
-
-type ForwardRef = {
-	displayName: string;
-	(props: IProps & {ref?: React.Ref<HTMLUListElement>}): JSX.Element;
-};
-
-export const ForwardPaginationWithBasicItems = React.forwardRef(
-	ClayPaginationWithBasicItems
-) as ForwardRef;
+});
 
-ForwardPaginationWithBasicItems.displayName = 'ClayPaginationWithBasicItems';
+ClayPaginationWithBasicItems.displayName = 'ClayPaginationWithBasicItems';
diff --git a/packages/clay-pagination/src/index.tsx b/packages/clay-pagination/src/index.tsx
index cfd27368d2..50d9646d62 100644
--- a/packages/clay-pagination/src/index.tsx
+++ b/packages/clay-pagination/src/index.tsx
@@ -4,16 +4,12 @@
  */
 
 import {Pagination} from './Pagination';
-import {
-	ClayPaginationWithBasicItems,
-	ForwardPaginationWithBasicItems,
-} from './PaginationWithBasicItems';
+import {ClayPaginationWithBasicItems} from './PaginationWithBasicItems';
 
 export {Ellipsis} from './Ellipsis';
 export {Item} from './Item';
 export {
 	Pagination,
-	ForwardPaginationWithBasicItems as ClayPaginationWithBasicItems,
-	ClayPaginationWithBasicItems as UNSAFE_ClayPaginationWithBasicItems,
+	ClayPaginationWithBasicItems,
 };
 export default Pagination;
diff --git a/packages/clay-panel/docs/panel.mdx b/packages/clay-panel/docs/panel.mdx
index 2ea824a3a7..01d394ff66 100644
--- a/packages/clay-panel/docs/panel.mdx
+++ b/packages/clay-panel/docs/panel.mdx
@@ -5,12 +5,12 @@ packageNpm: '@clayui/panel'
 packageUse: "import Panel from '@clayui/panel';"
 packageTypes:
     [
-        'clay-panel/src',
-        'clay-panel/src/body',
-        'clay-panel/group',
-        'clay-panel/src/footer',
-        'clay-panel/src/header',
-        'clay-panel/src/title',
+        'clay-panel/src/index.tsx',
+        'clay-panel/src/Body.tsx',
+        'clay-panel/src/Group.tsx',
+        'clay-panel/src/Footer.tsx',
+        'clay-panel/src/Header.tsx',
+        'clay-panel/src/Title.tsx',
     ]
 ---
 
diff --git a/packages/clay-panel/src/Group.tsx b/packages/clay-panel/src/Group.tsx
index bcb9ce2572..e69ef98bc1 100644
--- a/packages/clay-panel/src/Group.tsx
+++ b/packages/clay-panel/src/Group.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Flag to signify that `panel-group-fluid-first` class should be added.
 	 * This class generally should be used inside card or sheet
diff --git a/packages/clay-panel/src/index.tsx b/packages/clay-panel/src/index.tsx
index 955b891e0f..07f81bf075 100644
--- a/packages/clay-panel/src/index.tsx
+++ b/packages/clay-panel/src/index.tsx
@@ -22,7 +22,7 @@ import {Group} from './Group';
 import {Header} from './Header';
 import {Title} from './Title';
 
-export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Flag to indicate that Panel is collapsable.
 	 */
@@ -221,5 +221,4 @@ Panel.Footer = Footer;
 Panel.Header = Header;
 Panel.Title = Title;
 
-export {Panel, Body, Group, Footer, Header, Title};
 export default Panel;
diff --git a/packages/clay-popover/docs/popover.mdx b/packages/clay-popover/docs/popover.mdx
index 5f015f6813..62dbf41bac 100644
--- a/packages/clay-popover/docs/popover.mdx
+++ b/packages/clay-popover/docs/popover.mdx
@@ -4,7 +4,7 @@ description: 'Popovers contain helpful information such as an explanation of a c
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/popovers-tooltips/'
 packageNpm: '@clayui/popover'
 packageUse: "import Popover from '@clayui/popover';"
-packageTypes: ['clay-popover/src/popover']
+packageTypes: ['clay-popover/src/Popover.tsx']
 ---
 
 ## Example
diff --git a/packages/clay-popover/src/Popover.tsx b/packages/clay-popover/src/Popover.tsx
index e498989ad6..26d8f18d05 100644
--- a/packages/clay-popover/src/Popover.tsx
+++ b/packages/clay-popover/src/Popover.tsx
@@ -131,7 +131,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	header?: React.ReactNode;
 }
 
-export function Popover(
+export const Popover =  React.forwardRef(function Popover(
 	{
 		alignPosition = 'bottom',
 		children,
@@ -350,13 +350,6 @@ export function Popover(
 	}
 
 	return content;
-}
-
-type ForwardRef = {
-	displayName: string;
-	(props: IProps & {ref?: React.Ref<HTMLDivElement>}): JSX.Element;
-};
-
-export const ForwardPopover = React.forwardRef(Popover) as ForwardRef;
+});
 
-ForwardPopover.displayName = 'ClayPopover';
+Popover.displayName = 'ClayPopover';
diff --git a/packages/clay-popover/src/index.tsx b/packages/clay-popover/src/index.tsx
index 0e44f50358..00f65dc524 100644
--- a/packages/clay-popover/src/index.tsx
+++ b/packages/clay-popover/src/index.tsx
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-export {ForwardPopover as Popover, Popover as UNSAFE_Popover} from './Popover';
+export {Popover} from './Popover';
diff --git a/packages/clay-progress-bar/docs/progress-bar.mdx b/packages/clay-progress-bar/docs/progress-bar.mdx
index 82a023c629..a5273bb95e 100644
--- a/packages/clay-progress-bar/docs/progress-bar.mdx
+++ b/packages/clay-progress-bar/docs/progress-bar.mdx
@@ -4,7 +4,7 @@ description: 'Progress bar indicates the percentage completed of a task.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/progress-bars/'
 packageNpm: '@clayui/progress-bar'
 packageUse: "import ProgressBar from '@clayui/progress-bar';"
-packageTypes: ['clay-progress-bar/src']
+packageTypes: ['clay-progress-bar/src/index.tsx']
 ---
 
 As long as the process is running, the progress bar grows continuously from 0% to 100%.
diff --git a/packages/clay-progress-bar/src/index.tsx b/packages/clay-progress-bar/src/index.tsx
index 9f13112b37..c780604914 100644
--- a/packages/clay-progress-bar/src/index.tsx
+++ b/packages/clay-progress-bar/src/index.tsx
@@ -30,7 +30,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	warn?: boolean;
 }
 
-export const ProgressBar = ({
+const ProgressBar = ({
 	children,
 	className,
 	feedback = false,
diff --git a/packages/clay-provider/docs/provider.mdx b/packages/clay-provider/docs/provider.mdx
index adadea1206..ccdb65a4f6 100644
--- a/packages/clay-provider/docs/provider.mdx
+++ b/packages/clay-provider/docs/provider.mdx
@@ -4,7 +4,7 @@ description: 'Provider component which aggregates the main Clay, Icon, and Modal
 packageNpm: '@clayui/core'
 storybookPath: 'design-system-components-dataprovider'
 packageUse: "import Provider from '@clayui/provider';"
-packageTypes: ['clay-provider/src/provider']
+packageTypes: ['clay-provider/src/Provider.tsx']
 ---
 
 ## Example
diff --git a/packages/clay-slider/docs/slider.mdx b/packages/clay-slider/docs/slider.mdx
index 05207cc6c9..310b3eb04c 100644
--- a/packages/clay-slider/docs/slider.mdx
+++ b/packages/clay-slider/docs/slider.mdx
@@ -4,7 +4,7 @@ description: 'A Slider allows the user to select values in a linear range of val
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/slider/'
 packageNpm: '@clayui/slider'
 packageUse: "import Slider from '@clayui/slider';"
-packageTypes: ['clay-slider/src']
+packageTypes: ['clay-slider/src/index.tsx']
 ---
 
 Slider is a controlled component and needs just 2 props for its basic use, `value` and `onChange`.
diff --git a/packages/clay-slider/src/index.tsx b/packages/clay-slider/src/index.tsx
index 67842afc0b..f4e6a36644 100644
--- a/packages/clay-slider/src/index.tsx
+++ b/packages/clay-slider/src/index.tsx
@@ -91,7 +91,7 @@ const calcProgressWidth = (
 const useIsomorphicLayoutEffect =
 	typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 
-export const Slider = ({
+const Slider = ({
 	className,
 	defaultValue,
 	disabled,
diff --git a/packages/clay-sticker/docs/sticker.mdx b/packages/clay-sticker/docs/sticker.mdx
index 47b8587dc6..13f4c8aa45 100644
--- a/packages/clay-sticker/docs/sticker.mdx
+++ b/packages/clay-sticker/docs/sticker.mdx
@@ -4,7 +4,7 @@ description: 'Stickers are a visual way to quickly identify content in a differe
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/stickers/'
 packageNpm: '@clayui/sticker'
 packageUse: "import Sticker from '@clayui/sticker';"
-packageTypes: ['clay-sticker/src']
+packageTypes: ['clay-sticker/src/Sticker.tsx']
 ---
 
 ## Display Type
diff --git a/packages/clay-sticker/src/Sticker.tsx b/packages/clay-sticker/src/Sticker.tsx
new file mode 100644
index 0000000000..c2bea6a0e7
--- /dev/null
+++ b/packages/clay-sticker/src/Sticker.tsx
@@ -0,0 +1,112 @@
+/**
+ * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+
+interface IClayStickerProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Determines the color of the sticker.
+   */
+  displayType?:
+    | 'danger'
+    | 'dark'
+    | 'info'
+    | 'light'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'unstyled'
+    | 'warning';
+
+  /**
+   * Turns the sticker inline
+   */
+  inline?: boolean;
+
+  /**
+   * Flag to indicate if the sticker should be positioned on the outside
+   * corners when position is defined.
+   */
+  outside?: boolean;
+
+  /**
+   * Position of the sticker in relation to the contents.
+   */
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+
+  /**
+   * Shape of the sticker.
+   */
+  shape?: 'circle' | 'user-icon';
+
+  /**
+   * Sticker size.
+   */
+  size?: 'lg' | 'sm' | 'xl';
+}
+
+interface IOverylayProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Flag to indicate if `inline-item` class should be applied
+   */
+  inline?: boolean;
+}
+
+export const Overlay = ({
+  children,
+  className,
+  inline,
+  ...otherProps
+}: IOverylayProps) => (
+  <span
+    className={classNames(className, 'sticker-overlay', {
+      'inline-item': inline,
+    })}
+    {...otherProps}
+  >
+    {children}
+  </span>
+);
+
+export const Image = ({
+  className,
+  ...otherProps
+}: React.ImgHTMLAttributes<HTMLImageElement>) => (
+  <img className={classNames(className, 'sticker-img')} {...otherProps} />
+);
+
+function Sticker({
+  children,
+  className,
+  displayType,
+  inline,
+  outside = false,
+  position,
+  shape,
+  size,
+  ...otherProps
+}: IClayStickerProps) {
+  return (
+    <span
+      {...otherProps}
+      className={classNames('sticker', className, {
+        [`sticker-${shape}`]: shape,
+        [`sticker-${displayType}`]: displayType,
+        [`sticker-${position}`]: position,
+        [`sticker-outside`]: position && outside,
+        [`sticker-${size}`]: size,
+      })}
+    >
+      <Overlay inline={inline}>{children}</Overlay>
+    </span>
+  );
+}
+
+Sticker.Image = Image;
+Sticker.Overlay = Overlay;
+
+export default Sticker;
diff --git a/packages/clay-sticker/src/index.tsx b/packages/clay-sticker/src/index.tsx
index 4202f2e44a..166315cadf 100644
--- a/packages/clay-sticker/src/index.tsx
+++ b/packages/clay-sticker/src/index.tsx
@@ -3,121 +3,9 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import classNames from 'classnames';
-import React from 'react';
+import Sticker from './Sticker';
 
-export type DisplayType =
-	| 'danger'
-	| 'dark'
-	| 'info'
-	| 'light'
-	| 'primary'
-	| 'secondary'
-	| 'success'
-	| 'unstyled'
-	| 'warning';
+type IClayStickerProps = React.ComponentProps<typeof Sticker>;
 
-export interface IClayStickerProps
-	extends React.HTMLAttributes<HTMLSpanElement> {
-	/**
-	 * Determines the color of the sticker.
-	 */
-	displayType?:
-		| 'danger'
-		| 'dark'
-		| 'info'
-		| 'light'
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'unstyled'
-		| 'warning';
-
-	/**
-	 * Turns the sticker inline
-	 */
-	inline?: boolean;
-
-	/**
-	 * Flag to indicate if the sticker should be positioned on the outside
-	 * corners when position is defined.
-	 */
-	outside?: boolean;
-
-	/**
-	 * Position of the sticker in relation to the contents.
-	 */
-	position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
-
-	/**
-	 * Shape of the sticker.
-	 */
-	shape?: 'circle' | 'user-icon';
-
-	/**
-	 * Sticker size.
-	 */
-	size?: 'lg' | 'sm' | 'xl';
-}
-
-interface IOverylayProps extends React.HTMLAttributes<HTMLSpanElement> {
-	/**
-	 * Flag to indicate if `inline-item` class should be applied
-	 */
-	inline?: boolean;
-}
-
-export const Overlay = ({
-	children,
-	className,
-	inline,
-	...otherProps
-}: IOverylayProps) => (
-	<span
-		className={classNames(className, 'sticker-overlay', {
-			'inline-item': inline,
-		})}
-		{...otherProps}
-	>
-		{children}
-	</span>
-);
-
-export const Image = ({
-	className,
-	...otherProps
-}: React.ImgHTMLAttributes<HTMLImageElement>) => (
-	<img className={classNames(className, 'sticker-img')} {...otherProps} />
-);
-
-export function Sticker({
-	children,
-	className,
-	displayType,
-	inline,
-	outside = false,
-	position,
-	shape,
-	size,
-	...otherProps
-}: IClayStickerProps) {
-	return (
-		<span
-			{...otherProps}
-			className={classNames('sticker', className, {
-				[`sticker-${shape}`]: shape,
-				[`sticker-${displayType}`]: displayType,
-				[`sticker-${position}`]: position,
-				[`sticker-outside`]: position && outside,
-				[`sticker-${size}`]: size,
-			})}
-		>
-			<Overlay inline={inline}>{children}</Overlay>
-		</span>
-	);
-}
-
-Sticker.Image = Image;
-Sticker.Overlay = Overlay;
-
-export default Sticker;
+export type {IClayStickerProps};
+export default Sticker;
\ No newline at end of file
diff --git a/packages/clay-tabs/docs/tabs.mdx b/packages/clay-tabs/docs/tabs.mdx
index 28b266dbbf..96f32d5ef8 100644
--- a/packages/clay-tabs/docs/tabs.mdx
+++ b/packages/clay-tabs/docs/tabs.mdx
@@ -6,11 +6,11 @@ packageNpm: '@clayui/tabs'
 packageUse: "import Tabs from '@clayui/tabs';"
 packageTypes:
     [
-        'clay-tabs/src',
-        'clay-tabs/src/content',
-        'clay-tabs/src/item',
-        'clay-tabs/src/list',
-        'clay-tabs/src/tab-pane',
+        'clay-tabs/src/index.tsx',
+        'clay-tabs/src/Content.tsx',
+        'clay-tabs/src/Item.tsx',
+        'clay-tabs/src/List.tsx',
+        'clay-tabs/src/TabPane.tsx',
     ]
 ---
 
diff --git a/packages/clay-tabs/src/Content.tsx b/packages/clay-tabs/src/Content.tsx
index eb4d7cb0b0..74351e917a 100644
--- a/packages/clay-tabs/src/Content.tsx
+++ b/packages/clay-tabs/src/Content.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * @ignore
 	 */
@@ -34,7 +34,7 @@ export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	tabsId?: string;
 }
 
-export const Content = React.forwardRef<HTMLDivElement, IProps>(
+const Content = React.forwardRef<HTMLDivElement, IProps>(
 	function Content(
 		{
 			active,
diff --git a/packages/clay-tabs/src/Item.tsx b/packages/clay-tabs/src/Item.tsx
index cb1b6a04ae..766288ad87 100644
--- a/packages/clay-tabs/src/Item.tsx
+++ b/packages/clay-tabs/src/Item.tsx
@@ -7,7 +7,7 @@ import {LinkOrButton} from '@clayui/shared';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps
+interface IProps
 	extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> {
 	/**
 	 * Flag to indicate if the component is active or not.
diff --git a/packages/clay-tabs/src/List.tsx b/packages/clay-tabs/src/List.tsx
index b51822591a..12dce195a3 100644
--- a/packages/clay-tabs/src/List.tsx
+++ b/packages/clay-tabs/src/List.tsx
@@ -7,7 +7,7 @@ import {InternalDispatch, useNavigation} from '@clayui/shared';
 import classNames from 'classnames';
 import React, {useEffect, useImperativeHandle, useRef} from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	/**
 	 * @ignore
 	 */
diff --git a/packages/clay-tabs/src/TabPane.tsx b/packages/clay-tabs/src/TabPane.tsx
index c4cd43f8c6..b2f7c9e502 100644
--- a/packages/clay-tabs/src/TabPane.tsx
+++ b/packages/clay-tabs/src/TabPane.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface ITabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ITabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Flag to indicate if `active` classname should be applied
 	 */
@@ -23,7 +23,7 @@ const delay = (fn: Function, val: number = 150) =>
 		fn();
 	}, val);
 
-export const TabPane = React.forwardRef<HTMLDivElement, ITabPaneProps>(
+const TabPane = React.forwardRef<HTMLDivElement, ITabPaneProps>(
 	function TabPane(
 		{
 			active = false,
diff --git a/packages/clay-tabs/src/index.tsx b/packages/clay-tabs/src/index.tsx
index 7404291ffd..ca8db3d09d 100644
--- a/packages/clay-tabs/src/index.tsx
+++ b/packages/clay-tabs/src/index.tsx
@@ -13,7 +13,7 @@ import TabPane from './TabPane';
 
 export type DisplayType = null | 'basic' | 'underline';
 
-export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	/**
 	 * Flag to indicate the navigation behavior in the tab.
 	 *
@@ -62,7 +62,7 @@ export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	onActiveChange?: InternalDispatch<number>;
 }
 
-export function Tabs({
+function Tabs({
 	activation = 'manual',
 	active: externalActive,
 	children,
@@ -140,5 +140,4 @@ Tabs.List = List;
 Tabs.TabPane = TabPane;
 Tabs.TabPanel = TabPane;
 
-export {Content, Item, List, TabPane};
 export default Tabs;
diff --git a/packages/clay-time-picker/docs/time-picker.mdx b/packages/clay-time-picker/docs/time-picker.mdx
index 9aaa6f4086..c711afdc4a 100644
--- a/packages/clay-time-picker/docs/time-picker.mdx
+++ b/packages/clay-time-picker/docs/time-picker.mdx
@@ -3,7 +3,7 @@ title: 'Time Picker'
 description: 'Time pickers let users select a time for a form.'
 packageNpm: '@clayui/time-picker'
 packageUse: "import TimePicker from '@clayui/time-picker';"
-packageTypes: ['clay-time-picker/src']
+packageTypes: ['clay-time-picker/src/index.tsx']
 ---
 
 ## Example
diff --git a/packages/clay-time-picker/src/index.tsx b/packages/clay-time-picker/src/index.tsx
index 0f2c37e971..72fffd12f6 100644
--- a/packages/clay-time-picker/src/index.tsx
+++ b/packages/clay-time-picker/src/index.tsx
@@ -164,7 +164,7 @@ const DEFAULT_CONFIG = {
 
 const regex = /^\d+$/;
 
-export const TimePicker = ({
+const TimePicker = ({
 	ariaLabels = {
 		ampm: 'Select time of day (AM/PM) using up (PM) and down (AM) arrow keys',
 		clear: 'Delete the entered time',
diff --git a/packages/clay-toolbar/docs/toolbar.mdx b/packages/clay-toolbar/docs/toolbar.mdx
index aff6c810fa..63c3fd4b4a 100644
--- a/packages/clay-toolbar/docs/toolbar.mdx
+++ b/packages/clay-toolbar/docs/toolbar.mdx
@@ -6,14 +6,14 @@ packageNpm: '@clayui/toolbar'
 packageUse: "import TimePicker from '@clayui/toolbar';"
 packageTypes:
     [
-        'clay-toolbar/src',
-        'clay-toolbar/src/action',
-        'clay-toolbar/src/input',
-        'clay-toolbar/src/item',
-        'clay-toolbar/src/label',
-        'clay-toolbar/src/link',
-        'clay-toolbar/src/nav',
-        'clay-toolbar/src/section',
+        'clay-toolbar/src/index.tsx',
+        'clay-toolbar/src/Action.tsx',
+        'clay-toolbar/src/Input.tsx',
+        'clay-toolbar/src/Item.tsx',
+        'clay-toolbar/src/Label.tsx',
+        'clay-toolbar/src/Link.tsx',
+        'clay-toolbar/src/Nav.tsx',
+        'clay-toolbar/src/Section.tsx',
     ]
 ---
 
diff --git a/packages/clay-toolbar/src/Action.tsx b/packages/clay-toolbar/src/Action.tsx
index 6e2e48f24c..a2906bc5da 100644
--- a/packages/clay-toolbar/src/Action.tsx
+++ b/packages/clay-toolbar/src/Action.tsx
@@ -7,7 +7,7 @@ import ClayIcon from '@clayui/icon';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 	/**
 	 * Flag that determines if the Action will have a `disabled` class, disabling interactions.
 	 */
diff --git a/packages/clay-toolbar/src/Input.tsx b/packages/clay-toolbar/src/Input.tsx
index fdd3e4b802..1dba91b580 100644
--- a/packages/clay-toolbar/src/Input.tsx
+++ b/packages/clay-toolbar/src/Input.tsx
@@ -7,7 +7,7 @@ import {ClayInput} from '@clayui/form';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.ComponentProps<typeof ClayInput> {}
+interface IProps extends React.ComponentProps<typeof ClayInput> {}
 
 export const Input = ({className, ...otherProps}: IProps) => (
 	<ClayInput.Group>
diff --git a/packages/clay-toolbar/src/Item.tsx b/packages/clay-toolbar/src/Item.tsx
index 9a9e4d40c6..244dcdad7f 100644
--- a/packages/clay-toolbar/src/Item.tsx
+++ b/packages/clay-toolbar/src/Item.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLLIElement> {
+interface IProps extends React.HTMLAttributes<HTMLLIElement> {
 	/**
 	 * Flag to indicate if Item should auto expand to fill the remaining width.
 	 */
diff --git a/packages/clay-toolbar/src/Label.tsx b/packages/clay-toolbar/src/Label.tsx
index 36d775c27b..676d455ccc 100644
--- a/packages/clay-toolbar/src/Label.tsx
+++ b/packages/clay-toolbar/src/Label.tsx
@@ -7,7 +7,7 @@ import ClayLabel from '@clayui/label';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.ComponentProps<typeof ClayLabel> {}
+interface IProps extends React.ComponentProps<typeof ClayLabel> {}
 
 export const Label = ({children, className, ...otherProps}: IProps) => (
 	<ClayLabel
diff --git a/packages/clay-toolbar/src/Link.tsx b/packages/clay-toolbar/src/Link.tsx
index 16edbdd42b..539dcdc979 100644
--- a/packages/clay-toolbar/src/Link.tsx
+++ b/packages/clay-toolbar/src/Link.tsx
@@ -7,7 +7,7 @@ import ClayLink from '@clayui/link';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.ComponentProps<typeof ClayLink> {
+interface IProps extends React.ComponentProps<typeof ClayLink> {
 	/**
 	 * Flag that determines if the Link will have a `disabled` class, disabling interactions.
 	 */
diff --git a/packages/clay-toolbar/src/Nav.tsx b/packages/clay-toolbar/src/Nav.tsx
index 7053cf2425..36bf3c2ea9 100644
--- a/packages/clay-toolbar/src/Nav.tsx
+++ b/packages/clay-toolbar/src/Nav.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
+interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	/**
 	 * Specifies whether the `tbar-nav-wrap` class should be added to the Toolbar.Nav
 	 */
diff --git a/packages/clay-toolbar/src/index.tsx b/packages/clay-toolbar/src/index.tsx
index 1d3521d034..7b27a01973 100644
--- a/packages/clay-toolbar/src/index.tsx
+++ b/packages/clay-toolbar/src/index.tsx
@@ -36,7 +36,7 @@ interface IProps extends React.HTMLAttributes<HTMLElement> {
 		  };
 }
 
-export function Toolbar({
+function Toolbar({
 	children,
 	className,
 	inlineBreakpoint,
@@ -76,5 +76,4 @@ Toolbar.Link = Link;
 Toolbar.Nav = Nav;
 Toolbar.Section = Section;
 
-export {Action, Item, Input, Label, Link, Nav, Section};
 export default Toolbar;
diff --git a/packages/clay-tooltip/docs/tooltip.mdx b/packages/clay-tooltip/docs/tooltip.mdx
index 09a11026f3..3200f6bf80 100644
--- a/packages/clay-tooltip/docs/tooltip.mdx
+++ b/packages/clay-tooltip/docs/tooltip.mdx
@@ -4,7 +4,7 @@ description: 'Tooltips are brief pieces of information that appear on hover stat
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/popovers-tooltips/'
 packageNpm: '@clayui/tooltip'
 packageUse: "import Tooltip from '@clayui/tooltip';"
-packageTypes: ['clay-tooltip/src']
+packageTypes: ['clay-tooltip/src/Tooltip.tsx', 'clay-tooltip/src/TooltipProvider.tsx']
 ---
 
 Simplest way of using Tooltip is by leveraging it's `show` prop and specifying `alignPosition` to determine it's position relative to the element it's aligned to.
diff --git a/packages/clay-tooltip/src/TooltipProvider.tsx b/packages/clay-tooltip/src/TooltipProvider.tsx
index 652b6d7958..31e158a8d1 100644
--- a/packages/clay-tooltip/src/TooltipProvider.tsx
+++ b/packages/clay-tooltip/src/TooltipProvider.tsx
@@ -71,7 +71,7 @@ type TContentRenderer = (props: {
 	title: string;
 }) => React.ReactElement | React.ReactNode;
 
-interface IPropsBase {
+type Props = {
 	/**
 	 * Flag to indicate if tooltip should automatically align based on the window
 	 */
@@ -91,32 +91,25 @@ interface IPropsBase {
 	 * Delay in miliseconds before showing tooltip
 	 */
 	delay?: number;
-}
-
-interface IPropsWithChildren extends IPropsBase {
-	children: React.ReactElement;
-	scope?: never;
-}
 
-interface IPropsWithScope extends IPropsBase {
-	children?: never;
+	children?: React.ReactElement;
 
 	/**
 	 * CSS selector to scope provider to. All titles within this scope will be
 	 * rendered in the tooltip. Titles outside of this scope will be styled
 	 * as with the default browser.
 	 */
-	scope: string;
+	scope?: string;
 }
 
-export const TooltipProvider = ({
+export const ClayTooltipProvider = ({
 	autoAlign = true,
 	children,
 	containerProps = {},
 	contentRenderer = (props) => props.title,
 	delay = 600,
 	scope,
-}: IPropsWithChildren | IPropsWithScope) => {
+}: Props) => {
 	const [{align, floating, setAsHTML, title = ''}, dispatch] = useReducer(
 		reducer,
 		initialState
diff --git a/packages/clay-tooltip/src/index.tsx b/packages/clay-tooltip/src/index.tsx
index 3632eb7a08..f1db8dbfdf 100644
--- a/packages/clay-tooltip/src/index.tsx
+++ b/packages/clay-tooltip/src/index.tsx
@@ -4,8 +4,8 @@
  */
 
 import {Tooltip} from './Tooltip';
-import {TooltipProvider} from './TooltipProvider';
+import {ClayTooltipProvider} from './TooltipProvider';
 
-export {Tooltip, TooltipProvider as ClayTooltipProvider};
+export {Tooltip, ClayTooltipProvider};
 
 export default Tooltip;
diff --git a/packages/clay-upper-toolbar/docs/upper-toolbar.mdx b/packages/clay-upper-toolbar/docs/upper-toolbar.mdx
index 2ff0f46ada..5bdf3ebf2e 100644
--- a/packages/clay-upper-toolbar/docs/upper-toolbar.mdx
+++ b/packages/clay-upper-toolbar/docs/upper-toolbar.mdx
@@ -6,7 +6,7 @@ packageNpm: '@clayui/upper-toolbar'
 packageStatus: 'Deprecated'
 storybookPath: 'design-system-components-toolbar--upper-toolbar'
 packageUse: "import UpperToolbar from '@clayui/upper-toolbar';"
-packageTypes: ['clay-upper-toolbar/src']
+packageTypes: ['clay-upper-toolbar/src/index.tsx']
 ---
 
 <div className="clay-site-alert alert alert-warning">
@@ -15,11 +15,11 @@ packageTypes: ['clay-upper-toolbar/src']
 	[same result](https://storybook.clayui.com/?path=/story/design-system-components-toolbar--upper-toolbar).
 </div>
 
-### Introduction
+## Introduction
 
 The Upper Toolbar components can be composed together to make all sorts of toolbar variations. Combine Upper Toolbar with other Clay components to cover a variety of use cases.
 
-### Example
+## Example
 
 ```jsx preview
 import {Provider} from '@clayui/core';
diff --git a/packages/clay-upper-toolbar/src/index.tsx b/packages/clay-upper-toolbar/src/index.tsx
index f2b28f57ec..657e1f6153 100644
--- a/packages/clay-upper-toolbar/src/index.tsx
+++ b/packages/clay-upper-toolbar/src/index.tsx
@@ -8,7 +8,7 @@ import ClayLayout from '@clayui/layout';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface IInputProps extends React.ComponentProps<typeof ClayInput> {}
+interface IInputProps extends React.ComponentProps<typeof ClayInput> {}
 
 export const Input = ({className, ...otherProps}: IInputProps) => (
 	<Item expand>
@@ -53,7 +53,7 @@ export const Item = ({
 
 Item.displayName = 'ClayUpperToolbarItem';
 
-export const UpperToolbar = ({
+const UpperToolbar = ({
 	children,
 	className,
 	...otherProps
diff --git a/www/app/docs/(layout)/[...slug]/DocsLayout.tsx b/www/app/docs/(layout)/[...slug]/DocsLayout.tsx
index 884069d766..9f6f0a47b9 100644
--- a/www/app/docs/(layout)/[...slug]/DocsLayout.tsx
+++ b/www/app/docs/(layout)/[...slug]/DocsLayout.tsx
@@ -17,7 +17,7 @@ export async function DocsLayout({slug}: Props) {
 	const [file, fileMarkup, fileDesign] = await Promise.all([
 		AllCollection.getSource(slug),
 		slug.includes('markup')
-			? null
+			? true
 			: AllCollection.getSource([...slug, 'markup']),
 		lxc.getResource(slug),
 	]);
@@ -109,7 +109,7 @@ export async function DocsLayout({slug}: Props) {
 								workingDirectory="../packages"
 								filter={(type) => {
 									return (
-										!type.name.includes('Forward') &&
+										!type.name?.includes('Forward') &&
 										(type.kind === 'Function' ||
 											type.kind === 'Component')
 									);