From 2dbc411616f7276d832bb5007f41a37c9c93f69e Mon Sep 17 00:00:00 2001
From: Marcos Kolodny <marcoskolodny@gmail.com>
Date: Thu, 29 Aug 2024 15:07:58 +0200
Subject: [PATCH 1/6] fix(Buttons): avoid warnings related to change in order
 of react hooks (#1229)

---
 src/button.tsx | 39 +++++++++++++++++----------------------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/button.tsx b/src/button.tsx
index b3676fcd4..98f2c70b1 100644
--- a/src/button.tsx
+++ b/src/button.tsx
@@ -137,6 +137,20 @@ const renderButtonContent = ({
     const defaultIconSize = small ? styles.iconSize.small : styles.iconSize.default;
     const spinnerSizeRem = small ? styles.spinnerSize.small : styles.spinnerSize.default;
 
+    const buttonElement = renderButtonElement({
+        small,
+        content: children,
+        defaultIconSize,
+        TextContentRenderer,
+    });
+
+    const loadingButtonElement = renderButtonElement({
+        small,
+        content: loadingText,
+        defaultIconSize,
+        TextContentRenderer,
+    });
+
     return (
         <>
             {/* text content */}
@@ -153,12 +167,7 @@ const renderButtonContent = ({
                     </div>
                 )}
                 <div style={{display: 'flex', alignItems: 'baseline'}}>
-                    {renderButtonElement({
-                        small,
-                        content: children,
-                        defaultIconSize,
-                        TextContentRenderer,
-                    })}
+                    {buttonElement}
                     {withChevron && (
                         <div
                             style={{
@@ -197,12 +206,7 @@ const renderButtonContent = ({
                         : undefined
                 }
             >
-                {renderButtonElement({
-                    small,
-                    content: loadingText,
-                    defaultIconSize,
-                    TextContentRenderer,
-                })}
+                {loadingButtonElement}
             </div>
 
             {/* loading content */}
@@ -231,16 +235,7 @@ const renderButtonContent = ({
                         }}
                     />
                 )}
-                {loadingText ? (
-                    <Box paddingLeft={8}>
-                        {renderButtonElement({
-                            small,
-                            content: loadingText,
-                            defaultIconSize,
-                            TextContentRenderer,
-                        })}
-                    </Box>
-                ) : null}
+                {loadingText ? <Box paddingLeft={8}>{loadingButtonElement}</Box> : null}
             </div>
         </>
     );

From 768064701a8000e994a167061d1720b13ade9810 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Tue, 3 Sep 2024 12:15:33 +0000
Subject: [PATCH 2/6] chore(release): 15.19.0 [skip ci]

# [15.19.0](https://github.com/Telefonica/mistica-web/compare/v15.18.0...v15.19.0) (2024-09-03)

### Bug Fixes

* **Buttons:** avoid warnings related to change in order of react hooks ([#1229](https://github.com/Telefonica/mistica-web/issues/1229)) ([2dbc411](https://github.com/Telefonica/mistica-web/commit/2dbc411616f7276d832bb5007f41a37c9c93f69e))
* **i18n): Revert "feat(i18n:** improve texts sizes" because it is breaking ([#1226](https://github.com/Telefonica/mistica-web/issues/1226)) ([79eb4a4](https://github.com/Telefonica/mistica-web/commit/79eb4a427ef9f8d5a91bf56c8434ca1417a77df3))
* **Logo:** fix webpackChunkName magic comments ([#1214](https://github.com/Telefonica/mistica-web/issues/1214)) ([3d1f098](https://github.com/Telefonica/mistica-web/commit/3d1f098c6cbaf179b29de666ba824f1ae63dea9e))
* **Vivinho char:** vivinho char in headings being read as a separated heading ([#1209](https://github.com/Telefonica/mistica-web/issues/1209)) ([f0f5fb0](https://github.com/Telefonica/mistica-web/commit/f0f5fb05b99fc594479a19c3037cc9dfc7446bab))

### Features

* **Buttons:** refactor code and fix spacing bug in loading buttonLink ([#1212](https://github.com/Telefonica/mistica-web/issues/1212)) ([640e429](https://github.com/Telefonica/mistica-web/commit/640e429c8ab4493c5da1f39bad5fccf90eacc373))
* **i18n:** improve texts sizes ([#1204](https://github.com/Telefonica/mistica-web/issues/1204)) ([0345e7c](https://github.com/Telefonica/mistica-web/commit/0345e7cefd06b911377278b5928409cbed23f921))
* **Logo:** Refactor logo to improve bundle size and loading times ([#1210](https://github.com/Telefonica/mistica-web/issues/1210)) ([15b77cb](https://github.com/Telefonica/mistica-web/commit/15b77cb8ab932f68fb124d66887b8d49169b0095))
* **NavigationBar, FunnelNavigationBar, MainNavigationBar:** add alternative variant ([#1200](https://github.com/Telefonica/mistica-web/issues/1200)) ([eef87ec](https://github.com/Telefonica/mistica-web/commit/eef87ecdd32053f80f349aaf1598d8e61251b6eb))
---
 CHANGELOG.md            | 18 ++++++++++++++++++
 package.json            |  2 +-
 src/package-version.tsx |  2 +-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f52b7877..9699010f0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,21 @@
+# [15.19.0](https://github.com/Telefonica/mistica-web/compare/v15.18.0...v15.19.0) (2024-09-03)
+
+
+### Bug Fixes
+
+* **Buttons:** avoid warnings related to change in order of react hooks ([#1229](https://github.com/Telefonica/mistica-web/issues/1229)) ([2dbc411](https://github.com/Telefonica/mistica-web/commit/2dbc411616f7276d832bb5007f41a37c9c93f69e))
+* **i18n): Revert "feat(i18n:** improve texts sizes" because it is breaking ([#1226](https://github.com/Telefonica/mistica-web/issues/1226)) ([79eb4a4](https://github.com/Telefonica/mistica-web/commit/79eb4a427ef9f8d5a91bf56c8434ca1417a77df3))
+* **Logo:** fix webpackChunkName magic comments ([#1214](https://github.com/Telefonica/mistica-web/issues/1214)) ([3d1f098](https://github.com/Telefonica/mistica-web/commit/3d1f098c6cbaf179b29de666ba824f1ae63dea9e))
+* **Vivinho char:** vivinho char in headings being read as a separated heading ([#1209](https://github.com/Telefonica/mistica-web/issues/1209)) ([f0f5fb0](https://github.com/Telefonica/mistica-web/commit/f0f5fb05b99fc594479a19c3037cc9dfc7446bab))
+
+
+### Features
+
+* **Buttons:** refactor code and fix spacing bug in loading buttonLink ([#1212](https://github.com/Telefonica/mistica-web/issues/1212)) ([640e429](https://github.com/Telefonica/mistica-web/commit/640e429c8ab4493c5da1f39bad5fccf90eacc373))
+* **i18n:** improve texts sizes ([#1204](https://github.com/Telefonica/mistica-web/issues/1204)) ([0345e7c](https://github.com/Telefonica/mistica-web/commit/0345e7cefd06b911377278b5928409cbed23f921))
+* **Logo:** Refactor logo to improve bundle size and loading times ([#1210](https://github.com/Telefonica/mistica-web/issues/1210)) ([15b77cb](https://github.com/Telefonica/mistica-web/commit/15b77cb8ab932f68fb124d66887b8d49169b0095))
+* **NavigationBar, FunnelNavigationBar, MainNavigationBar:** add alternative variant ([#1200](https://github.com/Telefonica/mistica-web/issues/1200)) ([eef87ec](https://github.com/Telefonica/mistica-web/commit/eef87ecdd32053f80f349aaf1598d8e61251b6eb))
+
 # [15.18.0](https://github.com/Telefonica/mistica-web/compare/v15.17.0...v15.18.0) (2024-08-20)
 
 
diff --git a/package.json b/package.json
index 0b46d2828..c8ead6ca7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "15.18.0",
+    "version": "15.19.0",
     "license": "MIT",
     "repository": {
         "type": "git",
diff --git a/src/package-version.tsx b/src/package-version.tsx
index 75b96d4de..c9a5cc3c4 100644
--- a/src/package-version.tsx
+++ b/src/package-version.tsx
@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '15.18.0' as string;
+export const PACKAGE_VERSION = '15.19.0' as string;

From 3f99e4a85f4b810a5ee84abf8536384dde841749 Mon Sep 17 00:00:00 2001
From: Pedro Ladaria <pladaria@tuenti.com>
Date: Tue, 3 Sep 2024 14:20:34 +0200
Subject: [PATCH 3/6] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9699010f0..27c6331fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 ### Bug Fixes
 
 * **Buttons:** avoid warnings related to change in order of react hooks ([#1229](https://github.com/Telefonica/mistica-web/issues/1229)) ([2dbc411](https://github.com/Telefonica/mistica-web/commit/2dbc411616f7276d832bb5007f41a37c9c93f69e))
-* **i18n): Revert "feat(i18n:** improve texts sizes" because it is breaking ([#1226](https://github.com/Telefonica/mistica-web/issues/1226)) ([79eb4a4](https://github.com/Telefonica/mistica-web/commit/79eb4a427ef9f8d5a91bf56c8434ca1417a77df3))
+* **i18n:** revert text sizes improvement because it is breaking ([#1226](https://github.com/Telefonica/mistica-web/issues/1226)) ([79eb4a4](https://github.com/Telefonica/mistica-web/commit/79eb4a427ef9f8d5a91bf56c8434ca1417a77df3))
 * **Logo:** fix webpackChunkName magic comments ([#1214](https://github.com/Telefonica/mistica-web/issues/1214)) ([3d1f098](https://github.com/Telefonica/mistica-web/commit/3d1f098c6cbaf179b29de666ba824f1ae63dea9e))
 * **Vivinho char:** vivinho char in headings being read as a separated heading ([#1209](https://github.com/Telefonica/mistica-web/issues/1209)) ([f0f5fb0](https://github.com/Telefonica/mistica-web/commit/f0f5fb05b99fc594479a19c3037cc9dfc7446bab))
 

From ec7ed8b93d0b6892827263d35373896a8cf291b6 Mon Sep 17 00:00:00 2001
From: Marcos Kolodny <marcoskolodny@gmail.com>
Date: Wed, 4 Sep 2024 12:15:09 +0200
Subject: [PATCH 4/6] feat(NavigationBreadcrumbs): allow executing onNavigate
 when pressing a link (#1233)

---
 src/__tests__/navigation-breadcrumbs-test.tsx | 33 +++++++++++++++++++
 src/navigation-breadcrumbs.tsx                |  4 ++-
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/__tests__/navigation-breadcrumbs-test.tsx

diff --git a/src/__tests__/navigation-breadcrumbs-test.tsx b/src/__tests__/navigation-breadcrumbs-test.tsx
new file mode 100644
index 000000000..19345c49a
--- /dev/null
+++ b/src/__tests__/navigation-breadcrumbs-test.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import ThemeContextProvider from '../theme-context-provider';
+import {makeTheme} from './test-utils';
+import NavigationBreadcrumbs from '../navigation-breadcrumbs';
+import userEvent from '@testing-library/user-event';
+
+test('Breadcrumbs onNavigate is called when pressing a link', async () => {
+    const navigateSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <NavigationBreadcrumbs
+                title="Title"
+                breadcrumbs={[
+                    {title: 'breadcrumb 1', url: '#', onNavigate: () => navigateSpy('breadcrumb 1')},
+                    {title: 'breadcrumb 2', url: '#', onNavigate: () => navigateSpy('breadcrumb 2')},
+                ]}
+            />
+        </ThemeContextProvider>
+    );
+
+    const firstLink = await screen.findByRole('link', {name: 'breadcrumb 1'});
+    const secondLink = await screen.findByRole('link', {name: 'breadcrumb 2'});
+
+    await userEvent.click(firstLink);
+    expect(navigateSpy).toHaveBeenLastCalledWith('breadcrumb 1');
+    expect(navigateSpy).toHaveBeenCalledTimes(1);
+
+    await userEvent.click(secondLink);
+    expect(navigateSpy).toHaveBeenLastCalledWith('breadcrumb 2');
+    expect(navigateSpy).toHaveBeenCalledTimes(2);
+});
diff --git a/src/navigation-breadcrumbs.tsx b/src/navigation-breadcrumbs.tsx
index c4c858741..e22f572a3 100644
--- a/src/navigation-breadcrumbs.tsx
+++ b/src/navigation-breadcrumbs.tsx
@@ -21,6 +21,7 @@ export type NavigationBreadcrumbsProps = {
     breadcrumbs: ReadonlyArray<{
         readonly title: string;
         readonly url: string;
+        onNavigate?: () => void;
     }>;
     children?: void;
     dataAttributes?: DataAttributes;
@@ -37,7 +38,7 @@ const NavigationBreadcrumbs: React.FC<NavigationBreadcrumbsProps> = ({
     return (
         <nav aria-label={ariaLabel} {...getPrefixedDataAttributes(dataAttributes, 'NavigationBreadcrumbs')}>
             <ol className={styles.list}>
-                {breadcrumbs.map(({title, url}, index) => (
+                {breadcrumbs.map(({title, url, onNavigate}, index) => (
                     <li key={index} className={styles.listItem}>
                         <Text1 regular>
                             <TextLink
@@ -48,6 +49,7 @@ const NavigationBreadcrumbs: React.FC<NavigationBreadcrumbsProps> = ({
                                         : vars.colors.textPrimary,
                                 }}
                                 className={styles.link}
+                                onNavigate={onNavigate}
                             >
                                 {title}
                             </TextLink>

From 6a32227604773c545a01a54ef548ddac2a89e84b Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Fri, 6 Sep 2024 14:19:46 +0000
Subject: [PATCH 5/6] chore(release): 15.20.0 [skip ci]

# [15.20.0](https://github.com/Telefonica/mistica-web/compare/v15.19.0...v15.20.0) (2024-09-06)

### Features

* **NavigationBreadcrumbs:** allow executing onNavigate when pressing a link ([#1233](https://github.com/Telefonica/mistica-web/issues/1233)) ([ec7ed8b](https://github.com/Telefonica/mistica-web/commit/ec7ed8b93d0b6892827263d35373896a8cf291b6))
---
 CHANGELOG.md            | 7 +++++++
 package.json            | 2 +-
 src/package-version.tsx | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 27c6331fd..ff5a37438 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [15.20.0](https://github.com/Telefonica/mistica-web/compare/v15.19.0...v15.20.0) (2024-09-06)
+
+
+### Features
+
+* **NavigationBreadcrumbs:** allow executing onNavigate when pressing a link ([#1233](https://github.com/Telefonica/mistica-web/issues/1233)) ([ec7ed8b](https://github.com/Telefonica/mistica-web/commit/ec7ed8b93d0b6892827263d35373896a8cf291b6))
+
 # [15.19.0](https://github.com/Telefonica/mistica-web/compare/v15.18.0...v15.19.0) (2024-09-03)
 
 
diff --git a/package.json b/package.json
index c8ead6ca7..5ffa60a2b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "15.19.0",
+    "version": "15.20.0",
     "license": "MIT",
     "repository": {
         "type": "git",
diff --git a/src/package-version.tsx b/src/package-version.tsx
index c9a5cc3c4..2439dd773 100644
--- a/src/package-version.tsx
+++ b/src/package-version.tsx
@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '15.19.0' as string;
+export const PACKAGE_VERSION = '15.20.0' as string;

From 1dd287d6e7ffe0493c27112228cb2fb4227e0433 Mon Sep 17 00:00:00 2001
From: Marcos Kolodny <marcoskolodny@gmail.com>
Date: Wed, 11 Sep 2024 11:16:13 +0200
Subject: [PATCH 6/6] chore(Typescript): replace deprecated React.FC notation
 (#1234)

---
 ...onfig-npm-2.2.0-d45d42ae4d-7e82d56454.zip} | Bin 6164 -> 6230 bytes
 package.json                                  |   2 +-
 playroom/components/index.tsx                 |  20 +++++++--------
 playroom/components/loader.tsx                |  11 +++++---
 playroom/icons/icon-apple-off.tsx             |   2 +-
 playroom/icons/icon-apple-on.tsx              |   2 +-
 playroom/icons/icon-code.tsx                  |   2 +-
 playroom/icons/icon-moon.tsx                  |   2 +-
 playroom/icons/icon-sun.tsx                   |   2 +-
 ...vate-responsive-layout-scenarios-story.tsx |   2 +-
 src/__stories__/button-layout-story.tsx       |   2 +-
 src/__stories__/button-story.tsx              |   2 +-
 src/__stories__/chip-story.tsx                |   2 +-
 src/__stories__/fixed-to-top-story.tsx        |   2 +-
 src/__stories__/form-error-handler-story.tsx  |   4 +--
 src/__stories__/helpers.tsx                   |   2 +-
 src/__stories__/story.d.ts                    |   2 +-
 src/__stories__/text-link-story.tsx           |   2 +-
 src/__tests__/popover-test.tsx                |   2 +-
 src/__tests__/snackbar-test.tsx               |   2 +-
 src/__tests__/tooltip-test.tsx                |   2 +-
 src/accordion.tsx                             |   8 +++---
 src/avatar.tsx                                |   2 +-
 src/badge.tsx                                 |   2 +-
 src/button-fixed-footer-layout.tsx            |   4 +--
 src/button-group.tsx                          |   4 +--
 src/button-layout.tsx                         |   4 +--
 src/button.tsx                                |  10 ++++----
 src/callout.tsx                               |   4 +--
 src/card.tsx                                  |  10 ++++----
 src/checkbox.tsx                              |   4 +--
 src/chip.tsx                                  |   4 +--
 src/circle.tsx                                |   4 +--
 src/community/advanced-data-card.tsx          |  12 +++------
 src/community/blocks.tsx                      |  22 ++++++++--------
 src/counter.tsx                               |   4 +--
 src/credit-card-expiration-field.tsx          |   6 ++---
 src/credit-card-fields.tsx                    |   4 +--
 src/credit-card-number-field.tsx              |   6 ++---
 src/cvv-field.tsx                             |   4 +--
 src/date-field.tsx                            |   4 +--
 src/date-time-field.tsx                       |   4 +--
 src/date-time-picker.tsx                      |   8 +++++-
 src/decimal-field.tsx                         |   8 +++---
 src/dialog.tsx                                |   2 +-
 src/divider.tsx                               |   2 +-
 src/double-field.tsx                          |   2 +-
 src/email-field.tsx                           |   4 +--
 src/empty-state-card.tsx                      |   4 +--
 src/empty-state.tsx                           |   4 +--
 src/fade-in.tsx                               |   4 +--
 src/feedback.tsx                              |  20 +++++++--------
 src/fixed-to-top.tsx                          |   2 +-
 src/focus-trap.tsx                            |   2 +-
 src/form.tsx                                  |   4 +--
 src/grid-layout.tsx                           |   4 +--
 src/header.tsx                                |  16 ++++++------
 src/iban-field.tsx                            |   6 ++---
 src/icon-button.tsx                           |   4 +--
 src/icons/icon-amex.tsx                       |   2 +-
 src/icons/icon-chevron.tsx                    |  10 ++++----
 src/icons/icon-cvv-amex.tsx                   |   2 +-
 src/icons/icon-cvv-visa-mc.tsx                |   2 +-
 src/icons/icon-mastercard.tsx                 |   2 +-
 src/icons/icon-visa.tsx                       |   2 +-
 src/inline.tsx                                |   4 +--
 src/integer-field.tsx                         |   4 +--
 src/list.tsx                                  |  12 ++++-----
 src/loading-bar.tsx                           |   2 +-
 src/master-detail-layout.tsx                  |   2 +-
 src/menu.tsx                                  |  12 ++++-----
 src/month-field.tsx                           |   4 +--
 src/mosaic.tsx                                |  12 ++++-----
 src/navigation-bar.tsx                        |  20 +++++++--------
 src/navigation-breadcrumbs.tsx                |   4 +--
 src/negative-box.tsx                          |   2 +-
 src/nestable-context.tsx                      |  14 +++++-----
 src/overlay.tsx                               |   4 +--
 src/password-field.tsx                        |  12 ++++++---
 src/phone-number-field.tsx                    |  14 +++-------
 src/placeholder.tsx                           |   2 +-
 src/popover.tsx                               |   4 +--
 src/portal.tsx                                |   2 +-
 src/progress-bar.tsx                          |   8 +++---
 src/radio-button.tsx                          |   6 ++---
 src/responsive-layout.tsx                     |  16 +++++++-----
 src/screen-reader-only.tsx                    |   2 +-
 src/screen-size-context-provider.tsx          |   2 +-
 src/select.tsx                                |   4 +--
 src/spinner.tsx                               |   2 +-
 src/stack.tsx                                 |   4 +--
 src/stacking-group.tsx                        |   7 ++++-
 src/stepper.tsx                               |   4 +--
 src/switch-component.tsx                      |   2 +-
 src/tab-focus.tsx                             |   2 +-
 src/tabs.tsx                                  |   2 +-
 src/tag.tsx                                   |   4 +--
 src/text-field-base.tsx                       |  10 ++++----
 src/text-field-components.tsx                 |  10 ++++----
 src/text-link.tsx                             |   4 +--
 src/text.tsx                                  |  24 +++++++++---------
 src/theme-context-provider.tsx                |   2 +-
 src/theme-variant-context.tsx                 |   2 +-
 src/timer.tsx                                 |   8 +++---
 src/tooltip.tsx                               |   8 +++---
 src/utils/aspect-ratio-support.tsx            |   2 +-
 src/utils/document-visibility.tsx             |   2 +-
 yarn.lock                                     |  10 ++++----
 108 files changed, 297 insertions(+), 291 deletions(-)
 rename .yarn/cache/{@telefonica-eslint-config-npm-2.1.1-4cc790ac85-8f5d1e7189.zip => @telefonica-eslint-config-npm-2.2.0-d45d42ae4d-7e82d56454.zip} (53%)

diff --git a/.yarn/cache/@telefonica-eslint-config-npm-2.1.1-4cc790ac85-8f5d1e7189.zip b/.yarn/cache/@telefonica-eslint-config-npm-2.2.0-d45d42ae4d-7e82d56454.zip
similarity index 53%
rename from .yarn/cache/@telefonica-eslint-config-npm-2.1.1-4cc790ac85-8f5d1e7189.zip
rename to .yarn/cache/@telefonica-eslint-config-npm-2.2.0-d45d42ae4d-7e82d56454.zip
index 747aa54677187da82665b0454fc287bd13626410..5b7358ae95d954a03a9d5eeb66eaeba1c250e620 100644
GIT binary patch
delta 2100
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

delta 2031
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
NEf^yPEEE6$000Zi)LZ}n

diff --git a/package.json b/package.json
index 5ffa60a2b..7d3ec4ca2 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
         "@swc/core": "^1.3.95",
         "@swc/jest": "^0.2.29",
         "@telefonica/acceptance-testing": "5.0.0",
-        "@telefonica/eslint-config": "^2.1.1",
+        "@telefonica/eslint-config": "^2.2.0",
         "@telefonica/prettier-config": "^2.0.0",
         "@testing-library/dom": "^10.2.0",
         "@testing-library/jest-dom": "^6.4.6",
diff --git a/playroom/components/index.tsx b/playroom/components/index.tsx
index 9caf9ecf3..0fc6704ad 100644
--- a/playroom/components/index.tsx
+++ b/playroom/components/index.tsx
@@ -123,11 +123,11 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         {showPlatformSelector && (
                             <ToggleIconButton
                                 checkedProps={{
-                                    Icon: IconAppleOn as React.FC<IconProps>,
+                                    Icon: IconAppleOn as (props: IconProps) => JSX.Element,
                                     'aria-label': 'Change platform to android',
                                 }}
                                 uncheckedProps={{
-                                    Icon: IconAppleOff as React.FC<IconProps>,
+                                    Icon: IconAppleOff as (props: IconProps) => JSX.Element,
                                     'aria-label': 'Change platform to iOS',
                                 }}
                                 checked={os === 'ios'}
@@ -136,11 +136,11 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         )}
                         <ToggleIconButton
                             checkedProps={{
-                                Icon: IconSun as React.FC<IconProps>,
+                                Icon: IconSun as (props: IconProps) => JSX.Element,
                                 'aria-label': 'Switch to light mode',
                             }}
                             uncheckedProps={{
-                                Icon: IconMoon as React.FC<IconProps>,
+                                Icon: IconMoon as (props: IconProps) => JSX.Element,
                                 'aria-label': 'Switch to dark mode',
                             }}
                             checked={colorScheme === alternativeColorScheme}
@@ -155,7 +155,7 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         <IconButton
                             bleedRight
                             aria-label="Edit in Playroom"
-                            Icon={IconCode as React.FC<IconProps>}
+                            Icon={IconCode as (props: IconProps) => JSX.Element}
                             onPress={onEditStoryPress}
                         />
                     </Inline>
@@ -178,11 +178,11 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         {showPlatformSelector && (
                             <ToggleIconButton
                                 checkedProps={{
-                                    Icon: IconAppleOn as React.FC<IconProps>,
+                                    Icon: IconAppleOn as (props: IconProps) => JSX.Element,
                                     'aria-label': 'Change platform to android',
                                 }}
                                 uncheckedProps={{
-                                    Icon: IconAppleOff as React.FC<IconProps>,
+                                    Icon: IconAppleOff as (props: IconProps) => JSX.Element,
                                     'aria-label': 'Change platform to iOS',
                                 }}
                                 checked={os === 'ios'}
@@ -191,11 +191,11 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         )}
                         <ToggleIconButton
                             checkedProps={{
-                                Icon: IconSun as React.FC<IconProps>,
+                                Icon: IconSun as (props: IconProps) => JSX.Element,
                                 'aria-label': 'Change color scheme',
                             }}
                             uncheckedProps={{
-                                Icon: IconMoon as React.FC<IconProps>,
+                                Icon: IconMoon as (props: IconProps) => JSX.Element,
                                 'aria-label': 'Change color scheme',
                             }}
                             checked={colorScheme === alternativeColorScheme}
@@ -210,7 +210,7 @@ const PreviewToolsControls = React.forwardRef<HTMLDivElement, PreviewToolsContro
                         <IconButton
                             bleedRight
                             aria-label="Edit in Playroom"
-                            Icon={IconCode as React.FC<IconProps>}
+                            Icon={IconCode as (props: IconProps) => JSX.Element}
                             onPress={onEditStoryPress}
                         />
                     </Inline>
diff --git a/playroom/components/loader.tsx b/playroom/components/loader.tsx
index 089954c6f..91c85224c 100644
--- a/playroom/components/loader.tsx
+++ b/playroom/components/loader.tsx
@@ -3,13 +3,18 @@ import * as React from 'react';
 type Props = {
     load: string | (() => Promise<any>);
     render: (data: any) => React.ReactElement;
-    renderLoading?: () => React.ReactElement;
-    renderError?: () => React.ReactElement;
+    renderLoading?: () => React.ReactElement | null;
+    renderError?: () => React.ReactElement | null;
 };
 
 type LoaderState = 'loading' | 'error' | 'success';
 
-const Loader: React.FC<Props> = ({load, render, renderLoading = () => null, renderError = () => null}) => {
+const Loader = ({
+    load,
+    render,
+    renderLoading = () => null,
+    renderError = () => null,
+}: Props): JSX.Element | null => {
     const [loaderData, setLoaderData] = React.useState(null);
     const [loaderStatus, setLoaderStatus] = React.useState<LoaderState>('loading');
 
diff --git a/playroom/icons/icon-apple-off.tsx b/playroom/icons/icon-apple-off.tsx
index d846b9bcd..ca93c008c 100644
--- a/playroom/icons/icon-apple-off.tsx
+++ b/playroom/icons/icon-apple-off.tsx
@@ -6,7 +6,7 @@ type Props = {
     color?: string;
 };
 
-const IconSun: React.FC<Props> = ({size = 24, color}) => {
+const IconSun = ({size = 24, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 24 24">
             <g fill={color || skinVars.colors.neutralHigh} opacity="0.3">
diff --git a/playroom/icons/icon-apple-on.tsx b/playroom/icons/icon-apple-on.tsx
index 75276b9d1..604d7bd25 100644
--- a/playroom/icons/icon-apple-on.tsx
+++ b/playroom/icons/icon-apple-on.tsx
@@ -6,7 +6,7 @@ type Props = {
     color?: string;
 };
 
-const IconSun: React.FC<Props> = ({size = 24, color}) => {
+const IconSun = ({size = 24, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 24 24">
             <g fill={color || skinVars.colors.neutralHigh}>
diff --git a/playroom/icons/icon-code.tsx b/playroom/icons/icon-code.tsx
index c1112d691..cb7b736d0 100644
--- a/playroom/icons/icon-code.tsx
+++ b/playroom/icons/icon-code.tsx
@@ -6,7 +6,7 @@ type Props = {
     color?: string;
 };
 
-const IconCode: React.FC<Props> = ({size = 24, color}) => {
+const IconCode = ({size = 24, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 24 24">
             <path
diff --git a/playroom/icons/icon-moon.tsx b/playroom/icons/icon-moon.tsx
index f132ded89..8cdea757f 100644
--- a/playroom/icons/icon-moon.tsx
+++ b/playroom/icons/icon-moon.tsx
@@ -6,7 +6,7 @@ type Props = {
     color?: string;
 };
 
-const IconMoon: React.FC<Props> = ({size = 24, color}) => {
+const IconMoon = ({size = 24, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 24 24">
             <path
diff --git a/playroom/icons/icon-sun.tsx b/playroom/icons/icon-sun.tsx
index caa534dab..b38f524b6 100644
--- a/playroom/icons/icon-sun.tsx
+++ b/playroom/icons/icon-sun.tsx
@@ -6,7 +6,7 @@ type Props = {
     color?: string;
 };
 
-const IconSun: React.FC<Props> = ({size = 24, color}) => {
+const IconSun = ({size = 24, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 24 24">
             <path
diff --git a/src/__private_stories__/private-responsive-layout-scenarios-story.tsx b/src/__private_stories__/private-responsive-layout-scenarios-story.tsx
index 542ffac29..6d517f660 100644
--- a/src/__private_stories__/private-responsive-layout-scenarios-story.tsx
+++ b/src/__private_stories__/private-responsive-layout-scenarios-story.tsx
@@ -21,7 +21,7 @@ export default {
     parameters: {fullScreen: true},
 };
 
-const WithTitle: React.FC<{title: string; children: React.ReactNode}> = ({title, children}) => (
+const WithTitle = ({title, children}: {title: string; children: React.ReactNode}) => (
     <Stack space={24} dataAttributes={{testid: title}}>
         <Text5 as="div" textAlign="center">
             {title}
diff --git a/src/__stories__/button-layout-story.tsx b/src/__stories__/button-layout-story.tsx
index aaafd5eb4..6733a2c2f 100644
--- a/src/__stories__/button-layout-story.tsx
+++ b/src/__stories__/button-layout-story.tsx
@@ -12,7 +12,7 @@ type Props = {
     align?: 'center' | 'left' | 'right' | 'full-width';
 };
 
-const Template: React.FC<Props> = ({align = 'full-width'}) => (
+const Template = ({align = 'full-width'}: Props) => (
     <StorySection title={`ButtonLayout (align = ${align})`}>
         <Stack space={16}>
             <Title1 as="h2">One button</Title1>
diff --git a/src/__stories__/button-story.tsx b/src/__stories__/button-story.tsx
index 514af9096..d8b56afa7 100644
--- a/src/__stories__/button-story.tsx
+++ b/src/__stories__/button-story.tsx
@@ -76,7 +76,7 @@ type Props = {
     children: React.ReactNode;
 };
 
-const ButtonBackgroundContainer: React.FC<Props> = ({inverse, children}) => (
+const ButtonBackgroundContainer = ({inverse, children}: Props) => (
     <ResponsiveLayout fullWidth dataAttributes={{testid: 'content'}} isInverse={inverse}>
         <Box padding={16}>{children}</Box>
     </ResponsiveLayout>
diff --git a/src/__stories__/chip-story.tsx b/src/__stories__/chip-story.tsx
index e2e1096e1..a67d14881 100644
--- a/src/__stories__/chip-story.tsx
+++ b/src/__stories__/chip-story.tsx
@@ -32,7 +32,7 @@ type Props = {
     dataAttributes: DataAttributes;
 };
 
-const ChipBackgroundContainer: React.FC<Props> = ({inverse, dataAttributes, children}) => (
+const ChipBackgroundContainer = ({inverse, dataAttributes, children}: Props) => (
     <ResponsiveLayout isInverse={inverse} fullWidth>
         <Box padding={16} width="fit-content" dataAttributes={dataAttributes}>
             <div
diff --git a/src/__stories__/fixed-to-top-story.tsx b/src/__stories__/fixed-to-top-story.tsx
index d13e78d99..3de5e4565 100644
--- a/src/__stories__/fixed-to-top-story.tsx
+++ b/src/__stories__/fixed-to-top-story.tsx
@@ -7,7 +7,7 @@ export default {
 
 type Props = {background: string; height: number; top: number};
 
-const FixedDiv: React.FC<Props> = ({background, height, top}) => (
+const FixedDiv = ({background, height, top}: Props) => (
     <div style={{position: 'fixed', top, height, width: 300, background}}>
         top: {top}, height: {height}
     </div>
diff --git a/src/__stories__/form-error-handler-story.tsx b/src/__stories__/form-error-handler-story.tsx
index ee85c665a..bf3badbb4 100644
--- a/src/__stories__/form-error-handler-story.tsx
+++ b/src/__stories__/form-error-handler-story.tsx
@@ -7,7 +7,7 @@ export default {
 
 type CardProps = {show: boolean; children: React.ReactNode; onPress: any};
 
-const Card: React.FC<CardProps> = ({show, children, onPress}) => {
+const Card = ({show, children, onPress}: CardProps) => {
     return (
         <>
             <Touchable onPress={onPress} style={{background: 'lightgray', padding: 8}}>
@@ -18,7 +18,7 @@ const Card: React.FC<CardProps> = ({show, children, onPress}) => {
     );
 };
 
-const Cards: React.FC<any> = ({activeCard, setActiveCard}) => {
+const Cards = ({activeCard, setActiveCard}: any) => {
     const {formErrors} = useForm();
 
     return (
diff --git a/src/__stories__/helpers.tsx b/src/__stories__/helpers.tsx
index 6d8c43a0c..449a9803e 100644
--- a/src/__stories__/helpers.tsx
+++ b/src/__stories__/helpers.tsx
@@ -7,7 +7,7 @@ type Props = {
     children: React.ReactNode;
 };
 
-export const StorySection: React.FC<Props> = ({title, children}) => {
+export const StorySection = ({title, children}: Props): JSX.Element => {
     const isInverse = useIsInverseVariant();
     return (
         <div style={{marginBottom: 32}}>
diff --git a/src/__stories__/story.d.ts b/src/__stories__/story.d.ts
index 82000efc2..1b3d616aa 100644
--- a/src/__stories__/story.d.ts
+++ b/src/__stories__/story.d.ts
@@ -1,4 +1,4 @@
-declare type StoryComponent<T = {children?: ReactNode}> = React.FC<T> & {
+declare type StoryComponent<T = {children?: ReactNode}> = {(props: T): JSX.Element} & {
     storyName?: string;
     decorators?: Array<any>;
     parameters?: {[name: string]: any};
diff --git a/src/__stories__/text-link-story.tsx b/src/__stories__/text-link-story.tsx
index bc369dd83..22c945460 100644
--- a/src/__stories__/text-link-story.tsx
+++ b/src/__stories__/text-link-story.tsx
@@ -27,7 +27,7 @@ interface TextStyleWrapperProps {
     children: React.ReactNode;
 }
 
-const TextStyleWrapper: React.FC<TextStyleWrapperProps> = ({children, textStyle}) => {
+const TextStyleWrapper = ({children, textStyle}: TextStyleWrapperProps) => {
     if (textStyle === 'Text1') {
         return <Text1 regular>{children}</Text1>;
     }
diff --git a/src/__tests__/popover-test.tsx b/src/__tests__/popover-test.tsx
index 779bf0182..d48270cb9 100644
--- a/src/__tests__/popover-test.tsx
+++ b/src/__tests__/popover-test.tsx
@@ -6,7 +6,7 @@ import {makeTheme} from './test-utils';
 
 type Props = Omit<React.ComponentProps<typeof Popover>, 'description' | 'target'>;
 
-const TestPopover: React.FC<Props> = ({children, ...props}) => (
+const TestPopover = ({children, ...props}: Props) => (
     <ThemeContextProvider theme={makeTheme()}>
         <Popover {...props} description="Content" target={<span>Press me!</span>} />
     </ThemeContextProvider>
diff --git a/src/__tests__/snackbar-test.tsx b/src/__tests__/snackbar-test.tsx
index 0f4e8cd95..57fc714d3 100644
--- a/src/__tests__/snackbar-test.tsx
+++ b/src/__tests__/snackbar-test.tsx
@@ -190,7 +190,7 @@ test('nativeMessage should be called once, even if the component re-renders', as
     const onCloseMock = jest.fn();
     const nativeMessageMock = jest.spyOn(bridge, 'nativeMessage').mockResolvedValue();
 
-    const ComponentWithSnackbar: React.FC<{onClose: () => unknown}> = ({onClose}) => {
+    const ComponentWithSnackbar = ({onClose}: {onClose: () => unknown}) => {
         const [count, setCount] = React.useState(0);
         return (
             <>
diff --git a/src/__tests__/tooltip-test.tsx b/src/__tests__/tooltip-test.tsx
index a62f8352a..62c5c3739 100644
--- a/src/__tests__/tooltip-test.tsx
+++ b/src/__tests__/tooltip-test.tsx
@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 
 type Props = Omit<React.ComponentProps<typeof Tooltip>, 'children' | 'target'>;
 
-const TestTooltip: React.FC<Props> = (props) => (
+const TestTooltip = (props: Props) => (
     <ThemeContextProvider theme={makeTheme()}>
         <Tooltip
             {...props}
diff --git a/src/accordion.tsx b/src/accordion.tsx
index d78bb80a0..39cad35a7 100644
--- a/src/accordion.tsx
+++ b/src/accordion.tsx
@@ -230,7 +230,7 @@ type MultipleOpenProps = {
 
 type AccordionProps = AccordionBaseProps & ExclusifyUnion<SingleOpenProps | MultipleOpenProps>;
 
-export const Accordion: React.FC<AccordionProps> = ({
+export const Accordion = ({
     children,
     dataAttributes,
     index,
@@ -238,7 +238,7 @@ export const Accordion: React.FC<AccordionProps> = ({
     onChange,
     singleOpen,
     role,
-}) => {
+}: AccordionProps): JSX.Element => {
     const [indexList, toggle] = useAccordionState({
         value: index,
         defaultValue: defaultIndex,
@@ -285,7 +285,7 @@ export const BoxedAccordionItem = React.forwardRef<HTMLDivElement, BoxedAccordio
     )
 );
 
-export const BoxedAccordion: React.FC<AccordionProps> = ({
+export const BoxedAccordion = ({
     children,
     dataAttributes,
     index,
@@ -293,7 +293,7 @@ export const BoxedAccordion: React.FC<AccordionProps> = ({
     onChange,
     singleOpen,
     role,
-}) => {
+}: AccordionProps): JSX.Element => {
     const [indexList, toggle] = useAccordionState({
         value: index,
         defaultValue: defaultIndex,
diff --git a/src/avatar.tsx b/src/avatar.tsx
index 5d6703644..42b1b3ce6 100644
--- a/src/avatar.tsx
+++ b/src/avatar.tsx
@@ -33,7 +33,7 @@ type AvatarProps = {
     initials?: string;
     textColor?: string;
     backgroundColor?: string;
-    Icon?: React.FC<IconProps>;
+    Icon?: (props: IconProps) => JSX.Element;
     badge?: boolean | number;
     'aria-label'?: string;
     dataAttributes?: DataAttributes;
diff --git a/src/badge.tsx b/src/badge.tsx
index c4d7bcc25..24a35b7de 100644
--- a/src/badge.tsx
+++ b/src/badge.tsx
@@ -26,7 +26,7 @@ type Props = {
  *   <IconButton aria-label="Shopping Cart with 2 items" Icon={IconShoppingCartFilled}/>
  * </Badge>
  */
-const Badge: React.FC<Props> = ({children, value, right, top, dataAttributes}) => {
+const Badge = ({children, value, right, top, dataAttributes}: Props): JSX.Element | null => {
     const isInverse = useIsInverseVariant();
     const {textPresets} = useTheme();
     if (children && value === 0) {
diff --git a/src/button-fixed-footer-layout.tsx b/src/button-fixed-footer-layout.tsx
index 004f8927a..277ea7a67 100644
--- a/src/button-fixed-footer-layout.tsx
+++ b/src/button-fixed-footer-layout.tsx
@@ -22,7 +22,7 @@ type Props = {
     onChangeFooterHeight?: (heightInPx: number) => void;
 };
 
-const ButtonFixedFooterLayout: React.FC<Props> = ({
+const ButtonFixedFooterLayout = ({
     isFooterVisible = true,
     button,
     secondaryButton,
@@ -32,7 +32,7 @@ const ButtonFixedFooterLayout: React.FC<Props> = ({
     footerBgColor,
     containerBgColor,
     onChangeFooterHeight,
-}) => {
+}: Props): JSX.Element => {
     const {isDesktopOrBigger} = useScreenSize();
     const hasButton = !!button || !!secondaryButton;
     return (
diff --git a/src/button-group.tsx b/src/button-group.tsx
index b21d22f51..90a11c730 100644
--- a/src/button-group.tsx
+++ b/src/button-group.tsx
@@ -14,13 +14,13 @@ export interface ButtonGroupProps {
     align?: ByBreakpoint<'center' | 'left'>;
 }
 
-const ButtonGroup: React.FC<ButtonGroupProps> = ({
+const ButtonGroup = ({
     primaryButton,
     secondaryButton,
     link,
     align = 'left',
     dataAttributes,
-}) => {
+}: ButtonGroupProps): JSX.Element | null => {
     const anyAction = !!primaryButton || !!secondaryButton || !!link;
     const bothButtons = !!primaryButton && !!secondaryButton;
 
diff --git a/src/button-layout.tsx b/src/button-layout.tsx
index b182c519a..fb0056b04 100644
--- a/src/button-layout.tsx
+++ b/src/button-layout.tsx
@@ -24,7 +24,7 @@ type ButtonLayoutProps = {
 
 const buttonsRange = [ButtonPrimary, ButtonDanger, ButtonSecondary];
 
-const ButtonLayout: React.FC<ButtonLayoutProps> = ({
+const ButtonLayout = ({
     children,
     primaryButton,
     secondaryButton,
@@ -32,7 +32,7 @@ const ButtonLayout: React.FC<ButtonLayoutProps> = ({
     link,
     withMargins = false,
     dataAttributes,
-}) => {
+}: ButtonLayoutProps): JSX.Element => {
     const sortedButtons = React.Children.toArray(children as any).sort((b1: any, b2: any) => {
         const range1 = buttonsRange.indexOf(b1.type);
         const range2 = buttonsRange.indexOf(b2.type);
diff --git a/src/button.tsx b/src/button.tsx
index 98f2c70b1..af007dee7 100644
--- a/src/button.tsx
+++ b/src/button.tsx
@@ -86,7 +86,7 @@ const renderButtonElement = ({
     return resultChildrenArr;
 };
 
-const ButtonLinkChevron: React.FC = () => {
+const ButtonLinkChevron = () => {
     const {skinName} = useTheme();
 
     // vivo new skin has a different chevron
@@ -130,8 +130,8 @@ const renderButtonContent = ({
     shouldRenderSpinner: boolean;
     setShouldRenderSpinner: (value: boolean) => void;
     TextContentRenderer: (element: React.ReactNode, small?: boolean) => JSX.Element;
-    StartIcon?: React.FC<IconProps>;
-    EndIcon?: React.FC<IconProps>;
+    StartIcon?: (props: IconProps) => JSX.Element;
+    EndIcon?: (props: IconProps) => JSX.Element;
     withChevron?: boolean;
 }): React.ReactNode => {
     const defaultIconSize = small ? styles.iconSize.small : styles.iconSize.default;
@@ -260,8 +260,8 @@ interface CommonProps {
     'aria-expanded'?: 'true' | 'false' | boolean;
     'aria-haspopup'?: 'true' | 'false' | 'menu' | 'dialog' | boolean;
     tabIndex?: number;
-    StartIcon?: React.FC<IconProps>;
-    EndIcon?: React.FC<IconProps>;
+    StartIcon?: (props: IconProps) => JSX.Element;
+    EndIcon?: (props: IconProps) => JSX.Element;
     /** IMPORTANT: try to avoid using role="link" with onPress and first consider other alternatives like to/href + onNavigate */
     role?: string;
 }
diff --git a/src/callout.tsx b/src/callout.tsx
index a9a9dce91..745c90655 100644
--- a/src/callout.tsx
+++ b/src/callout.tsx
@@ -36,7 +36,7 @@ type Props = {
     role?: string;
 };
 
-const Callout: React.FC<Props> = ({
+const Callout = ({
     title,
     titleAs = 'h2',
     description,
@@ -49,7 +49,7 @@ const Callout: React.FC<Props> = ({
     'aria-label': ariaLabel,
     dataAttributes,
     role,
-}) => {
+}: Props): JSX.Element => {
     const variant = useThemeVariant();
     const {texts} = useTheme();
     return (
diff --git a/src/card.tsx b/src/card.tsx
index 547975568..bd8163341 100644
--- a/src/card.tsx
+++ b/src/card.tsx
@@ -55,7 +55,7 @@ const useInnerText = () => {
 };
 
 type BaseIconButtonAction = {
-    Icon: React.FC<IconProps>;
+    Icon: (props: IconProps) => JSX.Element;
     label: string;
 };
 
@@ -391,7 +391,7 @@ type CardContentProps = {
     buttonLink?: RendersNullableElement<typeof ButtonLink>;
 };
 
-const CardContent: React.FC<CardContentProps> = ({
+const CardContent = ({
     headline,
     headlineRef,
     pretitle,
@@ -407,7 +407,7 @@ const CardContent: React.FC<CardContentProps> = ({
     extraRef,
     button,
     buttonLink,
-}) => {
+}: CardContentProps) => {
     const {textPresets} = useTheme();
     return (
         <div
@@ -1129,7 +1129,7 @@ interface DisplayCardContentProps {
     extraRef?: (instance: HTMLElement | null) => void;
 }
 
-const DisplayCardContent: React.FC<DisplayCardContentProps> = ({
+const DisplayCardContent = ({
     title,
     headline,
     pretitle,
@@ -1138,7 +1138,7 @@ const DisplayCardContent: React.FC<DisplayCardContentProps> = ({
     extra,
     headlineRef,
     extraRef,
-}) => {
+}: DisplayCardContentProps) => {
     // using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users
     return (
         <div className={styles.flexColumn}>
diff --git a/src/checkbox.tsx b/src/checkbox.tsx
index 7338452be..56f85d130 100644
--- a/src/checkbox.tsx
+++ b/src/checkbox.tsx
@@ -13,7 +13,7 @@ import {combineRefs} from './utils/common';
 
 import type {DataAttributes} from './utils/types';
 
-const IconCheckbox: React.FC<{isChecked: boolean; disabled?: boolean}> = ({isChecked, disabled}) => {
+const IconCheckbox = ({isChecked, disabled}: {isChecked: boolean; disabled?: boolean}) => {
     const {isIos} = useTheme();
 
     const icon = isIos ? (
@@ -61,7 +61,7 @@ type RenderProps = {
         labelId: string;
         disabled: boolean;
         checked: boolean;
-    }) => React.ReactElement<any, any>; // Seems like this is the type returned by React.FC
+    }) => React.ReactElement;
     children?: undefined;
     disabled?: boolean;
     'aria-labelledby'?: string;
diff --git a/src/chip.tsx b/src/chip.tsx
index b693b6424..b20c1b6a1 100644
--- a/src/chip.tsx
+++ b/src/chip.tsx
@@ -18,7 +18,7 @@ import type {DataAttributes, IconProps} from './utils/types';
 
 interface SimpleChipProps {
     children: string;
-    Icon?: React.FC<IconProps>;
+    Icon?: (props: IconProps) => JSX.Element;
     id?: string;
     dataAttributes?: DataAttributes;
     badge?: boolean | number;
@@ -37,7 +37,7 @@ type ClickableChipProps = TouchableComponentProps<SimpleChipProps & {active?: bo
 
 type ChipProps = ExclusifyUnion<ClosableChipProps | ToggleChipProps | ClickableChipProps>;
 
-const Chip: React.FC<ChipProps> = (props: ChipProps) => {
+const Chip = (props: ChipProps): JSX.Element => {
     const {Icon, children, id, dataAttributes, active, badge, onClose, closeButtonLabel} = props;
     const {texts, isDarkMode, textPresets} = useTheme();
 
diff --git a/src/circle.tsx b/src/circle.tsx
index dd59bf267..56c3166f3 100644
--- a/src/circle.tsx
+++ b/src/circle.tsx
@@ -18,7 +18,7 @@ type BackgroundShorthandProps = {backgroundColor?: string; backgroundImage?: str
 
 type Props = CommonProps & ExclusifyUnion<BackgroundProps | BackgroundShorthandProps>;
 
-const Circle: React.FC<Props> = ({
+const Circle = ({
     children,
     background,
     backgroundColor,
@@ -26,7 +26,7 @@ const Circle: React.FC<Props> = ({
     size,
     border,
     dataAttributes,
-}) => {
+}: Props): JSX.Element => {
     const borderColor = border === true ? vars.colors.border : border;
     const borderProp = border ? `1px solid ${borderColor}` : undefined;
     const imageStyle = backgroundImage ? `url(${backgroundImage})` : '';
diff --git a/src/community/advanced-data-card.tsx b/src/community/advanced-data-card.tsx
index b68e30ddd..49d33d3e7 100644
--- a/src/community/advanced-data-card.tsx
+++ b/src/community/advanced-data-card.tsx
@@ -71,7 +71,7 @@ type CardContentProps = {
     descriptionLinesMax?: number;
 };
 
-const CardContent: React.FC<CardContentProps> = ({
+const CardContent = ({
     headline,
     pretitle,
     pretitleAs = 'p',
@@ -83,7 +83,7 @@ const CardContent: React.FC<CardContentProps> = ({
     subtitleLinesMax,
     description,
     descriptionLinesMax,
-}) => {
+}: CardContentProps) => {
     const {textPresets} = useTheme();
 
     return (
@@ -136,13 +136,7 @@ type CardFooterProps = {
     buttonLink?: RendersNullableElement<typeof ButtonLink>;
 };
 
-const CardFooter: React.FC<CardFooterProps> = ({
-    button,
-    footerImage,
-    footerText,
-    footerTextLinesMax,
-    buttonLink,
-}) => {
+const CardFooter = ({button, footerImage, footerText, footerTextLinesMax, buttonLink}: CardFooterProps) => {
     const hasButton = !!button;
     const hasFooterImage = !!footerImage;
     const hasFooterText = !!footerText;
diff --git a/src/community/blocks.tsx b/src/community/blocks.tsx
index 9772ad76d..72a5c47de 100644
--- a/src/community/blocks.tsx
+++ b/src/community/blocks.tsx
@@ -54,12 +54,12 @@ interface RowBlockWithStackingGroup extends RowBlockBaseProps {
 
 type RowBlockProps = ExclusifyUnion<RowBlockWithDescription | RowBlockWithStackingGroup>;
 
-export const RowBlock: React.FC<RowBlockProps> = ({
+export const RowBlock = ({
     title,
     stackingGroup,
     description,
     'aria-label': ariaLabel,
-}) => {
+}: RowBlockProps): JSX.Element => {
     return (
         <div aria-label={ariaLabel}>
             <Inline space="between" alignItems="center">
@@ -86,7 +86,7 @@ interface SimpleBlockProps {
     'aria-label'?: string;
 }
 
-export const SimpleBlock: React.FC<SimpleBlockProps> = ({image, description, 'aria-label': ariaLabel}) => {
+export const SimpleBlock = ({image, description, 'aria-label': ariaLabel}: SimpleBlockProps): JSX.Element => {
     return (
         <div aria-label={ariaLabel}>
             <Inline space={16} alignItems="center">
@@ -114,14 +114,14 @@ interface InformationBlockProps {
     'aria-label'?: string;
 }
 
-export const InformationBlock: React.FC<InformationBlockProps> = ({
+export const InformationBlock = ({
     title,
     description,
     secondaryValue,
     value,
     valueColor = vars.colors.textPrimary,
     'aria-label': ariaLabel,
-}) => {
+}: InformationBlockProps): JSX.Element => {
     return (
         <Inline space="between" alignItems="flex-end" aria-label={ariaLabel}>
             <BlockContent title={title} description={description} />
@@ -168,7 +168,7 @@ interface HighlightedValueBlockProps {
     'aria-label'?: string;
 }
 
-export const HighlightedValueBlock: React.FC<HighlightedValueBlockProps> = ({
+export const HighlightedValueBlock = ({
     headline,
     headings,
     mainHeading,
@@ -178,7 +178,7 @@ export const HighlightedValueBlock: React.FC<HighlightedValueBlockProps> = ({
     description,
     valueColor = vars.colors.textPrimary,
     'aria-label': ariaLabel,
-}) => {
+}: HighlightedValueBlockProps): JSX.Element => {
     return (
         <div aria-label={ariaLabel}>
             {headline && <Box paddingBottom={24}>{headline}</Box>}
@@ -230,13 +230,13 @@ interface ValueBlockProps {
     'aria-label'?: string;
 }
 
-export const ValueBlock: React.FC<ValueBlockProps> = ({
+export const ValueBlock = ({
     title,
     value,
     description,
     valueColor = vars.colors.textPrimary,
     'aria-label': ariaLabel,
-}) => {
+}: ValueBlockProps): JSX.Element => {
     return (
         <div aria-label={ariaLabel} className={styles.column}>
             <Text2 regular color={vars.colors.textPrimary}>
@@ -265,7 +265,7 @@ interface ProgressBlockProps {
     'aria-label'?: string;
 }
 
-export const ProgressBlock: React.FC<ProgressBlockProps> = ({
+export const ProgressBlock = ({
     title,
     stackingGroup,
     progressPercent,
@@ -273,7 +273,7 @@ export const ProgressBlock: React.FC<ProgressBlockProps> = ({
     heading,
     description,
     'aria-label': ariaLabel,
-}) => {
+}: ProgressBlockProps): JSX.Element => {
     return (
         <div aria-label={ariaLabel}>
             <Stack space={8}>
diff --git a/src/counter.tsx b/src/counter.tsx
index 62b2f1bee..11af2c5b0 100644
--- a/src/counter.tsx
+++ b/src/counter.tsx
@@ -68,7 +68,7 @@ type Props = {
     valueLabel?: string;
 };
 
-const Counter: React.FC<Props> = ({
+const Counter = ({
     value,
     defaultValue,
     onChangeValue,
@@ -81,7 +81,7 @@ const Counter: React.FC<Props> = ({
     increaseLabel,
     decreaseLabel,
     valueLabel,
-}) => {
+}: Props): JSX.Element => {
     const variant = useThemeVariant();
     const counterId = useAriaId();
     const {texts} = useTheme();
diff --git a/src/credit-card-expiration-field.tsx b/src/credit-card-expiration-field.tsx
index 7e0c760af..6c9db669c 100644
--- a/src/credit-card-expiration-field.tsx
+++ b/src/credit-card-expiration-field.tsx
@@ -12,7 +12,7 @@ type ExpirationDateValue = {
     raw: string;
 };
 
-const MonthYearDateInput: React.FC<any> = ({inputRef, defaultValue, value, ...rest}) => {
+const MonthYearDateInput = ({inputRef, defaultValue, value, ...rest}: any) => {
     const {texts} = useTheme();
     const keyDownRef = React.useRef('');
 
@@ -91,7 +91,7 @@ export interface CreditCardExpirationFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: ExpirationDateValue) => void;
 }
 
-const CreditCardExpirationField: React.FC<CreditCardExpirationFieldProps> = ({
+const CreditCardExpirationField = ({
     disabled,
     error,
     helperText,
@@ -106,7 +106,7 @@ const CreditCardExpirationField: React.FC<CreditCardExpirationFieldProps> = ({
     defaultValue,
     dataAttributes,
     ...rest
-}) => {
+}: CreditCardExpirationFieldProps): JSX.Element => {
     const {texts} = useTheme();
     const {setFormError, jumpToNext} = useForm();
 
diff --git a/src/credit-card-fields.tsx b/src/credit-card-fields.tsx
index f388e3b86..50bb95cc6 100644
--- a/src/credit-card-fields.tsx
+++ b/src/credit-card-fields.tsx
@@ -19,12 +19,12 @@ type CreditCardFieldsProps = {
     children?: void;
 };
 
-const CreditCardFields: React.FC<CreditCardFieldsProps> = ({
+const CreditCardFields = ({
     numberFieldName = 'ccNum',
     expirationFieldName = 'ccExp',
     cvvFieldName = 'ccCvv',
     acceptedCards,
-}) => {
+}: CreditCardFieldsProps): JSX.Element => {
     const {values} = useForm();
     const {texts} = useTheme();
     const cvvLength = getCvvLength(String(values[numberFieldName]));
diff --git a/src/credit-card-number-field.tsx b/src/credit-card-number-field.tsx
index 9639dc73f..393858a52 100644
--- a/src/credit-card-number-field.tsx
+++ b/src/credit-card-number-field.tsx
@@ -36,7 +36,7 @@ type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onInpu
     onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
 };
 
-const CreditCardInput: React.FC<Props> = ({inputRef, value, defaultValue, onChange, ...other}) => {
+const CreditCardInput = ({inputRef, value, defaultValue, onChange, ...other}: Props) => {
     const [selfValue, setSelfValue] = React.useState(defaultValue ?? '');
     const ref = React.useRef<HTMLInputElement | null>(null);
 
@@ -151,7 +151,7 @@ interface CreditCardNumberFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
 }
 
-const CreditCardNumberField: React.FC<CreditCardNumberFieldProps> = ({
+const CreditCardNumberField = ({
     disabled,
     error,
     helperText,
@@ -167,7 +167,7 @@ const CreditCardNumberField: React.FC<CreditCardNumberFieldProps> = ({
     defaultValue,
     dataAttributes,
     ...rest
-}) => {
+}: CreditCardNumberFieldProps): JSX.Element => {
     const {texts} = useTheme();
     const {jumpToNext, rawValues, setFormError} = useForm();
 
diff --git a/src/cvv-field.tsx b/src/cvv-field.tsx
index 816e79195..7bad12e1d 100644
--- a/src/cvv-field.tsx
+++ b/src/cvv-field.tsx
@@ -50,7 +50,7 @@ export interface CvvFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
 }
 
-const CvvField: React.FC<CvvFieldProps> = ({
+const CvvField = ({
     disabled,
     error,
     helperText,
@@ -67,7 +67,7 @@ const CvvField: React.FC<CvvFieldProps> = ({
     defaultValue,
     dataAttributes,
     ...rest
-}) => {
+}: CvvFieldProps): JSX.Element => {
     const {texts} = useTheme();
     const {setFormError, jumpToNext} = useForm();
     const [isCvvHelpOpen, setIsCvvHelpOpen] = React.useState(false);
diff --git a/src/date-field.tsx b/src/date-field.tsx
index af569b576..4ecc6e939 100644
--- a/src/date-field.tsx
+++ b/src/date-field.tsx
@@ -23,7 +23,7 @@ const ReactDateTimePicker = React.lazy(
     () => import(/* webpackChunkName: "date-time-picker" */ './date-time-picker')
 );
 
-const DateField: React.FC<DateFieldProps> = ({
+const DateField = ({
     disabled,
     error,
     helperText,
@@ -39,7 +39,7 @@ const DateField: React.FC<DateFieldProps> = ({
     max,
     dataAttributes,
     ...rest
-}) => {
+}: DateFieldProps): JSX.Element => {
     const processValue = (value: string) => value;
     const hasNativePicker = React.useMemo(() => {
         if (isFirefox()) {
diff --git a/src/date-time-field.tsx b/src/date-time-field.tsx
index 3507965a7..83954f790 100644
--- a/src/date-time-field.tsx
+++ b/src/date-time-field.tsx
@@ -23,7 +23,7 @@ const ReactDateTimePicker = React.lazy(
     () => import(/* webpackChunkName: "date-time-picker" */ './date-time-picker')
 );
 
-const FormDateField: React.FC<DateFieldProps> = ({
+const FormDateField = ({
     disabled,
     error,
     helperText,
@@ -44,7 +44,7 @@ const FormDateField: React.FC<DateFieldProps> = ({
     max = new Date('9999-12-31T23:59'),
     dataAttributes,
     ...rest
-}) => {
+}: DateFieldProps): JSX.Element => {
     const hasNativePicker = React.useMemo(() => {
         if (isFirefox()) {
             // disabled for firefox because the picker has no option to select time
diff --git a/src/date-time-picker.tsx b/src/date-time-picker.tsx
index 2df1678ad..da685ef6a 100644
--- a/src/date-time-picker.tsx
+++ b/src/date-time-picker.tsx
@@ -48,7 +48,13 @@ const getLocaleForMoment = (locale: Locale) => {
     return langToLocale[lang] || 'en-gb';
 };
 
-const DateTimePicker: React.FC<DateTimePickerProps> = ({withTime, mode, isValidDate, optional, ...rest}) => {
+const DateTimePicker = ({
+    withTime,
+    mode,
+    isValidDate,
+    optional,
+    ...rest
+}: DateTimePickerProps): JSX.Element => {
     const [showPicker, realSetShowPicker] = React.useState(false);
     const {
         texts,
diff --git a/src/decimal-field.tsx b/src/decimal-field.tsx
index 02184c98e..0585b27e2 100644
--- a/src/decimal-field.tsx
+++ b/src/decimal-field.tsx
@@ -49,14 +49,14 @@ const format = (value: any, maxDecimals: number) => {
  */
 type DecimalInputProps = any;
 
-export const DecimalInput: React.FC<DecimalInputProps> = ({
+export const DecimalInput = ({
     inputRef,
     value,
     defaultValue,
     onChange,
     maxDecimals,
     ...rest
-}) => {
+}: DecimalInputProps): JSX.Element => {
     const {i18n} = useTheme();
     const localDecimalChar = getLocalDecimalChar(i18n.locale);
 
@@ -109,7 +109,7 @@ export interface DecimalFieldProps extends CommonFormFieldProps {
     maxDecimals?: number;
 }
 
-const DecimalField: React.FC<DecimalFieldProps> = ({
+const DecimalField = ({
     disabled,
     error,
     helperText,
@@ -124,7 +124,7 @@ const DecimalField: React.FC<DecimalFieldProps> = ({
     maxDecimals = Infinity,
     dataAttributes,
     ...rest
-}) => {
+}: DecimalFieldProps): JSX.Element => {
     const {texts} = useTheme();
 
     const validate = (value: string | undefined, rawValue: string) => {
diff --git a/src/dialog.tsx b/src/dialog.tsx
index 7679af5a5..ee73540ee 100644
--- a/src/dialog.tsx
+++ b/src/dialog.tsx
@@ -61,7 +61,7 @@ export type DialogProps = ExclusifyUnion<AlertProps | ConfirmProps | ExtendedDia
 
 type InternalDialogProps = DialogProps & {showCancelButton: boolean; showAcceptButton: boolean};
 
-const InternalDialog: React.FC<InternalDialogProps> = (props) => {
+const InternalDialog = (props: InternalDialogProps) => {
     const {texts} = useTheme();
     const {
         className,
diff --git a/src/divider.tsx b/src/divider.tsx
index f56d671ba..e8524b340 100644
--- a/src/divider.tsx
+++ b/src/divider.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import {useIsInverseVariant} from './theme-variant-context';
 import * as styles from './divider.css';
 
-const Divider: React.FC<{children?: void}> = () => {
+const Divider = (): JSX.Element => {
     const isInverse = useIsInverseVariant();
     return <div className={styles.variants[isInverse ? 'inverse' : 'default']} />;
 };
diff --git a/src/double-field.tsx b/src/double-field.tsx
index a4892a91e..b1ed350ad 100644
--- a/src/double-field.tsx
+++ b/src/double-field.tsx
@@ -32,7 +32,7 @@ type Props = {
     layout?: '50/50' | '40/60' | '60/40';
 };
 
-const DoubleField: React.FC<Props> = ({children, fullWidth, layout}) => {
+const DoubleField = ({children, fullWidth, layout}: Props): JSX.Element => {
     let rightWidth: string;
     let leftWidth: string;
     if (layout === '40/60') {
diff --git a/src/email-field.tsx b/src/email-field.tsx
index 7db595a57..2c931d788 100644
--- a/src/email-field.tsx
+++ b/src/email-field.tsx
@@ -14,7 +14,7 @@ export interface EmailFieldProps extends CommonFormFieldProps {
     getSuggestions?: (value: string) => Array<string>;
 }
 
-const EmailField: React.FC<EmailFieldProps> = ({
+const EmailField = ({
     disabled,
     error,
     helperText,
@@ -29,7 +29,7 @@ const EmailField: React.FC<EmailFieldProps> = ({
     defaultValue,
     dataAttributes,
     ...rest
-}) => {
+}: EmailFieldProps): JSX.Element => {
     const {texts} = useTheme();
 
     const validate = (value: string | undefined, rawValue: string) => {
diff --git a/src/empty-state-card.tsx b/src/empty-state-card.tsx
index 993d937f9..f896beb0b 100644
--- a/src/empty-state-card.tsx
+++ b/src/empty-state-card.tsx
@@ -37,7 +37,7 @@ interface ImageProps extends CommonProps {
 
 type Props = IconProps | ImageProps;
 
-const EmptyStateCard: React.FC<Props> = ({
+const EmptyStateCard = ({
     title,
     titleAs = 'h3',
     description,
@@ -48,7 +48,7 @@ const EmptyStateCard: React.FC<Props> = ({
     imageUrl,
     'aria-label': ariaLabel,
     dataAttributes,
-}) => {
+}: Props): JSX.Element => {
     const {textPresets} = useTheme();
 
     let image;
diff --git a/src/empty-state.tsx b/src/empty-state.tsx
index bae1d0311..3d8192d86 100644
--- a/src/empty-state.tsx
+++ b/src/empty-state.tsx
@@ -53,7 +53,7 @@ interface IconProps extends BaseProps {
 
 type Props = IconProps | ImageProps | LargeImageProps;
 
-const EmptyState: React.FC<Props> = ({
+const EmptyState = ({
     title,
     titleAs = 'h1',
     description,
@@ -64,7 +64,7 @@ const EmptyState: React.FC<Props> = ({
     icon,
     'aria-label': ariaLabel,
     dataAttributes,
-}) => {
+}: Props): JSX.Element => {
     const {isDarkMode} = useTheme();
     const isInverse = useIsInverseVariant();
 
diff --git a/src/fade-in.tsx b/src/fade-in.tsx
index 9eacd66bb..ffa3fb8b0 100644
--- a/src/fade-in.tsx
+++ b/src/fade-in.tsx
@@ -14,13 +14,13 @@ type Props = {
     dataAttributes?: DataAttributes;
 };
 
-const FadeIn: React.FC<Props> = ({
+const FadeIn = ({
     children,
     className = '',
     duration = defaultDuration,
     delay = '0',
     dataAttributes,
-}) => {
+}: Props): JSX.Element => {
     return (
         <div
             {...getPrefixedDataAttributes(dataAttributes, 'FadeIn')}
diff --git a/src/feedback.tsx b/src/feedback.tsx
index 598d5c7e4..0e8cdfe2a 100644
--- a/src/feedback.tsx
+++ b/src/feedback.tsx
@@ -194,7 +194,7 @@ interface FeedbackScreenProps extends AssetFeedbackProps {
     isInverse?: boolean;
 }
 
-export const FeedbackScreen: React.FC<FeedbackScreenProps> = ({
+export const FeedbackScreen = ({
     title,
     description,
     children,
@@ -210,7 +210,7 @@ export const FeedbackScreen: React.FC<FeedbackScreenProps> = ({
     imageUrl,
     imageFit,
     dataAttributes,
-}) => {
+}: FeedbackScreenProps): JSX.Element => {
     useHapticFeedback(hapticFeedback);
     const {platformOverrides, isDarkMode} = useTheme();
     const {isTabletOrSmaller} = useScreenSize();
@@ -280,7 +280,7 @@ export const FeedbackScreen: React.FC<FeedbackScreenProps> = ({
     );
 };
 
-export const SuccessFeedbackScreen: React.FC<AssetFeedbackProps> = ({dataAttributes, ...props}) => {
+export const SuccessFeedbackScreen = ({dataAttributes, ...props}: AssetFeedbackProps): JSX.Element => {
     const {isTabletOrSmaller} = useScreenSize();
     const {skinName} = useTheme();
 
@@ -310,12 +310,12 @@ interface ErrorFeedbackScreenProps extends Omit<FeedbackProps, 'extra'> {
     errorReference?: string;
 }
 
-export const ErrorFeedbackScreen: React.FC<ErrorFeedbackScreenProps> = ({
+export const ErrorFeedbackScreen = ({
     children,
     errorReference,
     dataAttributes,
     ...otherProps
-}) => {
+}: ErrorFeedbackScreenProps): JSX.Element => {
     return (
         <FeedbackScreen
             {...otherProps}
@@ -338,14 +338,14 @@ export const ErrorFeedbackScreen: React.FC<ErrorFeedbackScreenProps> = ({
 };
 
 interface InfoFeedbackScreenProps extends FeedbackProps {
-    Icon?: React.FC<IconProps>;
+    Icon?: (props: IconProps) => JSX.Element;
 }
 
-export const InfoFeedbackScreen: React.FC<InfoFeedbackScreenProps> = ({
+export const InfoFeedbackScreen = ({
     dataAttributes,
     Icon = IconInfo,
     ...props
-}) => {
+}: InfoFeedbackScreenProps): JSX.Element => {
     return (
         <FeedbackScreen
             dataAttributes={{'component-name': 'InfoFeedbackScreen', ...dataAttributes}}
@@ -355,7 +355,7 @@ export const InfoFeedbackScreen: React.FC<InfoFeedbackScreenProps> = ({
     );
 };
 
-export const SuccessFeedback: React.FC<AssetFeedbackProps> = ({
+export const SuccessFeedback = ({
     title,
     description,
     children,
@@ -366,7 +366,7 @@ export const SuccessFeedback: React.FC<AssetFeedbackProps> = ({
     imageUrl,
     imageFit,
     dataAttributes,
-}) => {
+}: AssetFeedbackProps): JSX.Element => {
     useHapticFeedback('success');
     const {skinName, platformOverrides} = useTheme();
 
diff --git a/src/fixed-to-top.tsx b/src/fixed-to-top.tsx
index bf3eb3e78..befbf184a 100644
--- a/src/fixed-to-top.tsx
+++ b/src/fixed-to-top.tsx
@@ -9,7 +9,7 @@ type Props = {
     height: number;
 };
 
-const FixedToTop: React.FC<Props> = ({children, height}) => {
+const FixedToTop = ({children, height}: Props): JSX.Element => {
     const top = React.useContext(TopDistanceContext);
     return <TopDistanceContext.Provider value={top + height}>{children(top)}</TopDistanceContext.Provider>;
 };
diff --git a/src/focus-trap.tsx b/src/focus-trap.tsx
index 7a9ccb277..3505043f8 100644
--- a/src/focus-trap.tsx
+++ b/src/focus-trap.tsx
@@ -8,7 +8,7 @@ type Props = {
     group?: string;
 };
 
-const FocusTrap: React.FC<Props> = ({children, disabled, className, group}) => (
+const FocusTrap = ({children, disabled, className, group}: Props): JSX.Element => (
     <ReactFocusLock noFocusGuards disabled={disabled} className={className} group={group}>
         {children}
     </ReactFocusLock>
diff --git a/src/form.tsx b/src/form.tsx
index 941352705..13c8f9f93 100644
--- a/src/form.tsx
+++ b/src/form.tsx
@@ -29,7 +29,7 @@ type FormProps = {
     className?: string;
 };
 
-const Form: React.FC<FormProps> = ({
+const Form = ({
     children,
     className,
     onSubmit,
@@ -37,7 +37,7 @@ const Form: React.FC<FormProps> = ({
     autoJump = false,
     onValidationErrors,
     id: idProp,
-}) => {
+}: FormProps): JSX.Element => {
     const isMountedRef = React.useRef(true); // https://github.com/facebook/react/issues/14369#issuecomment-468305796
     const [values, setValues] = React.useState(initialValues);
     const [rawValues, setRawValues] = React.useState(initialValues);
diff --git a/src/grid-layout.tsx b/src/grid-layout.tsx
index b88befad9..68d85dfb8 100644
--- a/src/grid-layout.tsx
+++ b/src/grid-layout.tsx
@@ -72,7 +72,7 @@ type Props = CommonProps &
         | PropsTemplate8
     >;
 
-const GridLayout: React.FC<Props> = ({
+const GridLayout = ({
     dataAttributes,
     template,
     left,
@@ -80,7 +80,7 @@ const GridLayout: React.FC<Props> = ({
     verticalSpace,
     collapseBreakpoint = 'tablet',
     children,
-}) => {
+}: Props): JSX.Element => {
     const prefixedDataAttributes = getPrefixedDataAttributes(dataAttributes, 'GridLayout');
 
     const spanStyles = (n: number) => ({
diff --git a/src/header.tsx b/src/header.tsx
index d5b84a0eb..808ff5424 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -61,7 +61,7 @@ type HeaderProps = {
     isErrorAmount?: boolean;
 };
 
-export const Header: React.FC<HeaderProps> = ({
+export const Header = ({
     headline,
     pretitle,
     pretitleAs,
@@ -76,7 +76,7 @@ export const Header: React.FC<HeaderProps> = ({
     subtitle,
     isErrorAmount,
     secondaryButton,
-}) => {
+}: HeaderProps): JSX.Element => {
     const isInverse = useIsInverseVariant();
 
     const renderRichText = (richText: RichText, baseProps: Omit<TextPresetProps, 'children'>) => {
@@ -155,12 +155,12 @@ type MainSectionHeaderProps = {
     button?: RendersNullableElement<typeof ButtonPrimary> | RendersNullableElement<typeof ButtonSecondary>;
 };
 
-export const MainSectionHeader: React.FC<MainSectionHeaderProps> = ({
+export const MainSectionHeader = ({
     title,
     titleAs = 'h1',
     description,
     button,
-}) => {
+}: MainSectionHeaderProps): JSX.Element => {
     return (
         <Stack space={32}>
             <Stack space={{mobile: 12, desktop: 16}}>
@@ -188,7 +188,7 @@ type HeaderLayoutProps = {
     noPaddingY?: boolean;
 };
 
-export const HeaderLayout: React.FC<HeaderLayoutProps> = ({
+export const HeaderLayout = ({
     isInverse = true,
     breadcrumbs,
     header,
@@ -197,7 +197,7 @@ export const HeaderLayout: React.FC<HeaderLayoutProps> = ({
     dataAttributes,
     bleed = false,
     noPaddingY = false,
-}) => {
+}: HeaderLayoutProps): JSX.Element => {
     const isBleedActivated = bleed && isInverse && extra;
 
     const mainContent = (
@@ -262,11 +262,11 @@ type MainSectionHeaderLayoutProps = {
     dataAttributes?: DataAttributes;
 };
 
-export const MainSectionHeaderLayout: React.FC<MainSectionHeaderLayoutProps> = ({
+export const MainSectionHeaderLayout = ({
     isInverse = true,
     children,
     dataAttributes,
-}) => {
+}: MainSectionHeaderLayoutProps): JSX.Element => {
     useSetOverscrollColor(isInverse ? {topColor: vars.colors.backgroundBrandTop} : {});
     return (
         <ResponsiveLayout
diff --git a/src/iban-field.tsx b/src/iban-field.tsx
index e6bbf8041..981aeb77f 100644
--- a/src/iban-field.tsx
+++ b/src/iban-field.tsx
@@ -101,7 +101,7 @@ type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onInpu
     onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
 };
 
-const IbanInput: React.FC<Props> = ({inputRef, value, defaultValue, onChange, ...other}) => {
+const IbanInput = ({inputRef, value, defaultValue, onChange, ...other}: Props): JSX.Element => {
     const [selfValue, setSelfValue] = React.useState(defaultValue ?? '');
     const ref = React.useRef<HTMLInputElement | null>(null);
 
@@ -159,7 +159,7 @@ export interface IbanFieldProps extends CommonFormFieldProps {
     getSuggestions?: (value: string) => Array<string>;
 }
 
-const IbanField: React.FC<IbanFieldProps> = ({
+const IbanField = ({
     disabled,
     error,
     helperText,
@@ -173,7 +173,7 @@ const IbanField: React.FC<IbanFieldProps> = ({
     defaultValue,
     dataAttributes,
     ...rest
-}) => {
+}: IbanFieldProps): JSX.Element => {
     const {texts} = useTheme();
 
     const validate = (value: string | undefined, rawValue: string) => {
diff --git a/src/icon-button.tsx b/src/icon-button.tsx
index bf0e75bca..c978bfb84 100644
--- a/src/icon-button.tsx
+++ b/src/icon-button.tsx
@@ -132,7 +132,7 @@ interface BaseProps {
 }
 
 interface IconButtonBaseProps {
-    Icon: React.FC<IconProps>;
+    Icon: (props: IconProps) => JSX.Element;
     type?: IconButtonType;
     backgroundType?: IconButtonBackgroundType;
 }
@@ -289,7 +289,7 @@ export const IconButton = React.forwardRef<
 });
 
 type ToggleStateProps = {
-    Icon: React.FC<IconProps>;
+    Icon: (props: IconProps) => JSX.Element;
     type?: IconButtonType;
     backgroundType?: IconButtonBackgroundType;
 } & AriaProps;
diff --git a/src/icons/icon-amex.tsx b/src/icons/icon-amex.tsx
index ac9b3f5f0..709be7ddf 100644
--- a/src/icons/icon-amex.tsx
+++ b/src/icons/icon-amex.tsx
@@ -5,7 +5,7 @@ type Props = {
     size?: number | string;
 };
 
-const IconAmex: React.FC<Props> = ({role = 'presentation', size = 24}) => (
+const IconAmex = ({role = 'presentation', size = 24}: Props): JSX.Element => (
     <svg role={role} width={size} height={size} viewBox="0 0 32 32">
         <g fill="none" fillRule="evenodd">
             <rect width="32" height="32" fill="#FFF" fillRule="nonzero" rx="4" />
diff --git a/src/icons/icon-chevron.tsx b/src/icons/icon-chevron.tsx
index f1329c716..3c031ca9e 100644
--- a/src/icons/icon-chevron.tsx
+++ b/src/icons/icon-chevron.tsx
@@ -4,7 +4,7 @@ import {vars} from '../skins/skin-contract.css';
 import {applyCssVars} from '../utils/css';
 import * as styles from './icon-chevron.css';
 
-type IcnChevronRightSvgProps = {
+type IconChevronRightSvgProps = {
     size: number | string;
     color: string;
     transform: string;
@@ -13,14 +13,14 @@ type IcnChevronRightSvgProps = {
     style?: React.CSSProperties;
 };
 
-const IconChevronRightSvg: React.FC<IcnChevronRightSvgProps> = ({
+const IconChevronRightSvg = ({
     size,
     color,
     transform,
     transitionDuration,
     className,
     style,
-}) => (
+}: IconChevronRightSvgProps) => (
     <svg
         role="presentation"
         width={size}
@@ -60,14 +60,14 @@ type Props = {
     transitionDuration?: number;
 };
 
-const IconChevron: React.FC<Props> = ({
+const IconChevron = ({
     size = 24,
     color,
     className,
     style,
     transitionDuration = 300,
     direction = 'right',
-}) => {
+}: Props): JSX.Element => {
     const fillColor = color || vars.colors.neutralHigh;
     const props = {
         size,
diff --git a/src/icons/icon-cvv-amex.tsx b/src/icons/icon-cvv-amex.tsx
index 8e9896579..323a29a4c 100644
--- a/src/icons/icon-cvv-amex.tsx
+++ b/src/icons/icon-cvv-amex.tsx
@@ -7,7 +7,7 @@ type Props = {
     color?: string;
 };
 
-const IconCvvAmex: React.FC<Props> = ({role = 'presentation', size = 48, color}) => {
+const IconCvvAmex = ({role = 'presentation', size = 48, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 48 48" role={role} style={{flexShrink: 0}}>
             <g fill={color || vars.colors.brand}>
diff --git a/src/icons/icon-cvv-visa-mc.tsx b/src/icons/icon-cvv-visa-mc.tsx
index 7b582d772..854bbc16c 100644
--- a/src/icons/icon-cvv-visa-mc.tsx
+++ b/src/icons/icon-cvv-visa-mc.tsx
@@ -7,7 +7,7 @@ type Props = {
     color?: string;
 };
 
-const IconCvvVisaMc: React.FC<Props> = ({role = 'presentation', size = 48, color}) => {
+const IconCvvVisaMc = ({role = 'presentation', size = 48, color}: Props): JSX.Element => {
     return (
         <svg width={size} height={size} viewBox="0 0 48 48" role={role} style={{flexShrink: 0}}>
             <g fill={color || vars.colors.brand}>
diff --git a/src/icons/icon-mastercard.tsx b/src/icons/icon-mastercard.tsx
index d6a783d15..fb6f3ca93 100644
--- a/src/icons/icon-mastercard.tsx
+++ b/src/icons/icon-mastercard.tsx
@@ -5,7 +5,7 @@ type Props = {
     size?: number | string;
 };
 
-const IconMastercard: React.FC<Props> = ({role = 'presentation', size = 24}) => (
+const IconMastercard = ({role = 'presentation', size = 24}: Props): JSX.Element => (
     <svg role={role} width={size} height={size} viewBox="0 0 32 32">
         <g fill="none" fillRule="evenodd">
             <rect width="32" height="32" fill="#FFF" fillRule="nonzero" rx="4" />
diff --git a/src/icons/icon-visa.tsx b/src/icons/icon-visa.tsx
index 51c57ac7f..753444c60 100644
--- a/src/icons/icon-visa.tsx
+++ b/src/icons/icon-visa.tsx
@@ -5,7 +5,7 @@ type Props = {
     size?: number | string;
 };
 
-const IconVisa: React.FC<Props> = ({role = 'presentation', size = 24}) => (
+const IconVisa = ({role = 'presentation', size = 24}: Props): JSX.Element => (
     <svg role={role} width={size} height={size} viewBox="0 0 32 32">
         <g fill="none" fillRule="nonzero">
             <rect width="32" height="32" fill="#FFF" rx="4" />
diff --git a/src/inline.tsx b/src/inline.tsx
index f308d284e..02a398f01 100644
--- a/src/inline.tsx
+++ b/src/inline.tsx
@@ -49,7 +49,7 @@ type Props = {
     wrap?: boolean;
 };
 
-const Inline: React.FC<Props> = ({
+const Inline = ({
     space,
     className,
     children,
@@ -59,7 +59,7 @@ const Inline: React.FC<Props> = ({
     fullWidth,
     wrap,
     dataAttributes,
-}) => {
+}: Props): JSX.Element => {
     const {platformOverrides} = useTheme();
     const isStringSpace = typeof space === 'string';
 
diff --git a/src/integer-field.tsx b/src/integer-field.tsx
index 33ce3d177..5329b6918 100644
--- a/src/integer-field.tsx
+++ b/src/integer-field.tsx
@@ -45,7 +45,7 @@ export interface IntegerFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
 }
 
-const IntegerField: React.FC<IntegerFieldProps> = ({
+const IntegerField = ({
     disabled,
     error,
     helperText,
@@ -59,7 +59,7 @@ const IntegerField: React.FC<IntegerFieldProps> = ({
     defaultValue,
     dataAttributes,
     ...rest
-}) => {
+}: IntegerFieldProps): JSX.Element => {
     const {texts} = useTheme();
 
     const validate = (value: string | undefined, rawValue: string) => {
diff --git a/src/list.tsx b/src/list.tsx
index 2013f8fe3..05ae1d0f1 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -80,7 +80,7 @@ interface ContentProps extends CommonProps {
     labelId?: string;
 }
 
-export const Content: React.FC<ContentProps> = ({
+export const Content = ({
     withChevron,
     headline,
     headlineRef,
@@ -102,7 +102,7 @@ export const Content: React.FC<ContentProps> = ({
     labelId,
     disabled,
     control,
-}) => {
+}: ContentProps): JSX.Element => {
     const isInverse = useIsInverseVariant();
     const numTextLines = [headline, title, subtitle, description, extra].filter(Boolean).length;
     const centerY = numTextLines === 1;
@@ -645,12 +645,12 @@ type RowListProps = {
     dataAttributes?: DataAttributes;
 };
 
-export const RowList: React.FC<RowListProps> = ({
+export const RowList = ({
     children,
     ariaLabelledby,
     role = 'list',
     dataAttributes,
-}) => {
+}: RowListProps): JSX.Element => {
     const childrenContent = React.Children.toArray(children).filter(Boolean);
     const lastIndex = childrenContent.length - 1;
     return (
@@ -717,12 +717,12 @@ type BoxedRowListProps = {
     dataAttributes?: DataAttributes;
 };
 
-export const BoxedRowList: React.FC<BoxedRowListProps> = ({
+export const BoxedRowList = ({
     children,
     ariaLabelledby,
     role = 'list',
     dataAttributes,
-}) => (
+}: BoxedRowListProps): JSX.Element => (
     <Stack
         space={16}
         role={role}
diff --git a/src/loading-bar.tsx b/src/loading-bar.tsx
index a85dc36f8..7eb331b4c 100644
--- a/src/loading-bar.tsx
+++ b/src/loading-bar.tsx
@@ -9,7 +9,7 @@ import type {DataAttributes} from './utils/types';
 
 type Props = {visible: boolean; children?: void; dataAttributes?: DataAttributes};
 
-const LoadingBar: React.FC<Props> = ({visible, dataAttributes}) => {
+const LoadingBar = ({visible, dataAttributes}: Props): JSX.Element => {
     return (
         <Portal className={classnames(styles.portal, {[styles.hidden]: !visible})}>
             <div
diff --git a/src/master-detail-layout.tsx b/src/master-detail-layout.tsx
index 036089973..19785305b 100644
--- a/src/master-detail-layout.tsx
+++ b/src/master-detail-layout.tsx
@@ -11,7 +11,7 @@ type Props = {
     children?: void;
 };
 
-const MasterDetailLayout: React.FC<Props> = ({isOpen, master, detail}) => {
+const MasterDetailLayout = ({isOpen, master, detail}: Props): JSX.Element => {
     const {isTabletOrSmaller} = useScreenSize();
 
     if (isTabletOrSmaller) {
diff --git a/src/menu.tsx b/src/menu.tsx
index 8b2dd6da6..39a40df88 100644
--- a/src/menu.tsx
+++ b/src/menu.tsx
@@ -53,7 +53,7 @@ const getItemIndexInMenu = (menu: HTMLElement | null, item: HTMLElement | null):
 
 interface MenuItemBaseProps {
     label: string;
-    Icon?: React.FC<IconProps>;
+    Icon?: (props: IconProps) => JSX.Element;
     destructive?: boolean;
     disabled?: boolean;
     onPress: (item: number) => void;
@@ -71,7 +71,7 @@ interface MenuItemWithControlProps extends MenuItemBaseProps {
 
 type MenuItemProps = ExclusifyUnion<MenuItemWithControlProps | MenuItemWithoutControlProps>;
 
-export const MenuItem: React.FC<MenuItemProps> = ({
+export const MenuItem = ({
     label,
     Icon,
     destructive,
@@ -79,7 +79,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
     onPress,
     controlType,
     checked,
-}) => {
+}: MenuItemProps): JSX.Element => {
     const {focusedItem, setFocusedItem, closeMenu, isMenuOpen} = useMenuContext();
     const itemRef = React.useRef<HTMLDivElement | null>(null);
 
@@ -167,7 +167,7 @@ type MenuSectionProps = {
     children?: React.ReactNode;
 };
 
-export const MenuSection: React.FC<MenuSectionProps> = ({children}) => {
+export const MenuSection = ({children}: MenuSectionProps): JSX.Element => {
     return children ? (
         <>
             {children}
@@ -204,13 +204,13 @@ export type MenuProps = {
     dataAttributes?: DataAttributes;
 };
 
-export const Menu: React.FC<MenuProps> = ({
+export const Menu = ({
     renderTarget,
     renderMenu,
     width,
     position = 'left',
     dataAttributes,
-}) => {
+}: MenuProps): JSX.Element => {
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     const [target, setTarget] = React.useState<HTMLElement | null>(null);
     const [menu, setMenu] = React.useState<HTMLElement | null>(null);
diff --git a/src/month-field.tsx b/src/month-field.tsx
index 0297b46dc..18747b4d3 100644
--- a/src/month-field.tsx
+++ b/src/month-field.tsx
@@ -22,7 +22,7 @@ const ReactDateTimePicker = React.lazy(
     () => import(/* webpackChunkName: "date-time-picker" */ './date-time-picker')
 );
 
-const DateField: React.FC<DateFieldProps> = ({
+const DateField = ({
     disabled,
     error,
     helperText,
@@ -38,7 +38,7 @@ const DateField: React.FC<DateFieldProps> = ({
     max,
     dataAttributes,
     ...rest
-}) => {
+}: DateFieldProps): JSX.Element => {
     const processValue = (value: string) => value;
     const hasNativePicker = React.useMemo(() => isInputTypeSupported('month'), []);
     const {texts} = useTheme();
diff --git a/src/mosaic.tsx b/src/mosaic.tsx
index f536d6c5d..71e9f79a4 100644
--- a/src/mosaic.tsx
+++ b/src/mosaic.tsx
@@ -12,7 +12,7 @@ type HorizontalMosaicPageProps = {
     isEven: boolean;
 };
 
-const HorizontalMosaicPage: React.FC<HorizontalMosaicPageProps> = ({items, isEven}) => {
+const HorizontalMosaicPage = ({items, isEven}: HorizontalMosaicPageProps) => {
     return (
         <div className={items.length === 1 ? styles.singleItemRowContainer : styles.squareContainer}>
             <Grid gap={GRID_GAP} rows={2} columns={2} height="100%">
@@ -45,12 +45,12 @@ type HorizontalMosaicProps = {
     dataAttributes?: DataAttributes;
 };
 
-export const HorizontalMosaic: React.FC<HorizontalMosaicProps> = ({
+export const HorizontalMosaic = ({
     items,
     withBullets,
     free,
     dataAttributes,
-}) => {
+}: HorizontalMosaicProps): JSX.Element => {
     const itemsCount = items.length;
 
     const pagesCount = itemsCount < 5 ? Math.min(itemsCount, 1) : Math.floor((itemsCount + 1) / 3);
@@ -79,7 +79,7 @@ type VerticalMosaicPageProps = {
     items: ReadonlyArray<React.ReactElement>;
 };
 
-const VerticalMosaicPage: React.FC<VerticalMosaicPageProps> = ({items}) => {
+const VerticalMosaicPage = ({items}: VerticalMosaicPageProps) => {
     switch (items.length) {
         case 1:
         case 2:
@@ -123,12 +123,12 @@ const VerticalMosaicPage: React.FC<VerticalMosaicPageProps> = ({items}) => {
     }
 };
 
-type Props = {
+type VerticalMosaicProps = {
     items: ReadonlyArray<React.ReactElement>;
     dataAttributes?: DataAttributes;
 };
 
-export const VerticalMosaic: React.FC<Props> = ({items, dataAttributes}) => {
+export const VerticalMosaic = ({items, dataAttributes}: VerticalMosaicProps): JSX.Element => {
     const itemsCount = items.length;
 
     const pagesCount = Math.ceil(itemsCount / 4);
diff --git a/src/navigation-bar.tsx b/src/navigation-bar.tsx
index f5f547e95..ad0e63e6a 100644
--- a/src/navigation-bar.tsx
+++ b/src/navigation-bar.tsx
@@ -104,11 +104,11 @@ type NavigationBarContentContainerProps = {
     desktopOnly?: boolean;
 };
 
-const NavigationBarContentContainer: React.FC<NavigationBarContentContainerProps> = ({
+const NavigationBarContentContainer = ({
     right,
     children,
     desktopOnly,
-}) => {
+}: NavigationBarContentContainerProps) => {
     return (
         <div className={classnames(styles.navigationBarContent, {[styles.desktopOnly]: desktopOnly})}>
             {children}
@@ -141,7 +141,7 @@ type MainNavigationBarProps = MainNavigationBarPropsBase;
 
 type MenuTransitionState = 'closed' | 'opening' | 'open' | 'closing';
 
-export const MainNavigationBar: React.FC<MainNavigationBarProps> = ({
+export const MainNavigationBar = ({
     sections = [],
     selectedIndex,
     right,
@@ -152,7 +152,7 @@ export const MainNavigationBar: React.FC<MainNavigationBarProps> = ({
     burgerMenuExtra,
     logo,
     large = false,
-}) => {
+}: MainNavigationBarProps): JSX.Element => {
     const {texts, isDarkMode} = useTheme();
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
     const [menuTransitionState, setMenuTransitionState] = React.useState<MenuTransitionState>('closed');
@@ -348,7 +348,7 @@ interface NavigationBarNotFixedProps extends NavigationBarCommonProps {
 
 type NavigationBarProps = NavigationBarTopFixedProps | NavigationBarNotFixedProps;
 
-export const NavigationBar: React.FC<NavigationBarProps> = ({
+export const NavigationBar = ({
     onBack,
     title,
     titleAs,
@@ -358,7 +358,7 @@ export const NavigationBar: React.FC<NavigationBarProps> = ({
     topFixed = true,
     paddingX = 0,
     withBorder = true,
-}) => {
+}: NavigationBarProps): JSX.Element => {
     const {texts} = useTheme();
     const content = (
         <NavigationBarContentContainer right={right}>
@@ -418,14 +418,14 @@ type FunnelNavigationBarProps = {
     withBorder?: boolean;
 };
 
-export const FunnelNavigationBar: React.FC<FunnelNavigationBarProps> = ({
+export const FunnelNavigationBar = ({
     logo,
     right,
     variant,
     isInverse = false,
     topFixed = true,
     withBorder = true,
-}) => {
+}: FunnelNavigationBarProps): JSX.Element => {
     logo = logo ?? <Logo size={{mobile: 40, desktop: 48}} />;
 
     return (
@@ -452,7 +452,7 @@ type NavigationBarActionGroupProps = {
     children: React.ReactNode;
 };
 
-export const NavigationBarActionGroup: React.FC<NavigationBarActionGroupProps> = ({children}) => {
+export const NavigationBarActionGroup = ({children}: NavigationBarActionGroupProps): JSX.Element => {
     return (
         <div className={styles.lineHeightFix} data-component-name="NavigationBarActionGroup">
             <Inline space={24} alignItems="center">
@@ -464,7 +464,7 @@ export const NavigationBarActionGroup: React.FC<NavigationBarActionGroupProps> =
 
 type NavigationBarActionProps = TouchableProps;
 
-export const NavigationBarAction: React.FC<NavigationBarActionProps> = ({children, ...touchableProps}) => {
+export const NavigationBarAction = ({children, ...touchableProps}: NavigationBarActionProps): JSX.Element => {
     const isInverse = useIsInverseVariant();
     return (
         <BaseTouchable
diff --git a/src/navigation-breadcrumbs.tsx b/src/navigation-breadcrumbs.tsx
index e22f572a3..7c8f7c89e 100644
--- a/src/navigation-breadcrumbs.tsx
+++ b/src/navigation-breadcrumbs.tsx
@@ -28,12 +28,12 @@ export type NavigationBreadcrumbsProps = {
     'aria-label'?: string;
 };
 
-const NavigationBreadcrumbs: React.FC<NavigationBreadcrumbsProps> = ({
+const NavigationBreadcrumbs = ({
     title,
     breadcrumbs,
     dataAttributes,
     'aria-label': ariaLabel = 'Breadcrumb',
-}) => {
+}: NavigationBreadcrumbsProps): JSX.Element => {
     const isInverse = useIsInverseVariant();
     return (
         <nav aria-label={ariaLabel} {...getPrefixedDataAttributes(dataAttributes, 'NavigationBreadcrumbs')}>
diff --git a/src/negative-box.tsx b/src/negative-box.tsx
index 38199ce16..a13c69b63 100644
--- a/src/negative-box.tsx
+++ b/src/negative-box.tsx
@@ -6,7 +6,7 @@ type Props = {
     left?: boolean;
 };
 
-const NegativeBox: React.FC<Props> = ({left, right, children}) => {
+const NegativeBox = ({left, right, children}: Props): JSX.Element => {
     const marginLeft = left || (!left && !right) ? -16 : undefined;
     const marginRight = right || (!left && !right) ? -16 : undefined;
     return <div style={{marginLeft, marginRight}}>{children}</div>;
diff --git a/src/nestable-context.tsx b/src/nestable-context.tsx
index 7756aa047..816d7a878 100644
--- a/src/nestable-context.tsx
+++ b/src/nestable-context.tsx
@@ -38,9 +38,9 @@ const isObject = (object: any): object is Record<string, unknown> =>
     object !== null && typeof object === 'object' && !Array.isArray(object);
 
 export type NestableContext<Value> = {
-    Getter: React.FC<{children: (value: Value) => React.ReactNode}>;
-    Provider: React.FC<ProviderProps>;
-    Setter: React.FC<{value: Value}>;
+    Getter: (props: {children: (value: Value) => React.ReactNode}) => JSX.Element;
+    Provider: (props: ProviderProps) => JSX.Element;
+    Setter: (props: {value: Value}) => null;
     useValue: () => Value;
     useSetValue: (value: Value) => void;
 };
@@ -81,7 +81,7 @@ export const createNestableContext = <Value,>(
         }
     };
 
-    const Provider: React.FC<ProviderProps> = ({children}) => {
+    const Provider = ({children}: ProviderProps) => {
         React.useEffect(() => {
             providerInstances++;
 
@@ -128,14 +128,12 @@ export const createNestableContext = <Value,>(
 
     const useValue = () => React.useContext(ValueContext);
 
-    const Setter: React.FC<{value: Value}> = ({value}) => {
+    const Setter = ({value}: {value: Value}) => {
         useSetValue(value);
         return null;
     };
 
-    const Getter: React.FC<{children: (value: Value) => React.ReactNode}> = ({children}) => (
-        <>{children(useValue())}</>
-    );
+    const Getter = ({children}: {children: (value: Value) => React.ReactNode}) => <>{children(useValue())}</>;
 
     return {Setter, Provider, Getter, useSetValue, useValue};
 };
diff --git a/src/overlay.tsx b/src/overlay.tsx
index 23df6a931..6bbdd239d 100644
--- a/src/overlay.tsx
+++ b/src/overlay.tsx
@@ -25,14 +25,14 @@ type Props = {
     dataAttributes?: DataAttributes;
 };
 
-const Overlay: React.FC<Props> = ({
+const Overlay = ({
     onPress,
     children,
     className,
     style,
     disableScroll = false,
     dataAttributes,
-}) => {
+}: Props): JSX.Element => {
     useDisableBodyScroll(disableScroll);
     const {platformOverrides} = useTheme();
 
diff --git a/src/password-field.tsx b/src/password-field.tsx
index 3272f9dfe..1db06f9fe 100644
--- a/src/password-field.tsx
+++ b/src/password-field.tsx
@@ -12,11 +12,15 @@ export interface PasswordFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
 }
 
-const PasswordAdornment: React.FC<{
+const PasswordAdornment = ({
+    isVisible,
+    setVisibility,
+    focus,
+}: {
     isVisible: boolean;
     setVisibility: (isVisible: boolean) => void;
     focus: () => void;
-}> = ({isVisible, setVisibility, focus}) => {
+}) => {
     const {texts} = useTheme();
     return (
         <FieldEndIcon
@@ -31,7 +35,7 @@ const PasswordAdornment: React.FC<{
     );
 };
 
-const PasswordField: React.FC<PasswordFieldProps> = ({
+const PasswordField = ({
     disabled,
     error,
     helperText,
@@ -46,7 +50,7 @@ const PasswordField: React.FC<PasswordFieldProps> = ({
     defaultValue,
     dataAttributes,
     ...rest
-}) => {
+}: PasswordFieldProps): JSX.Element => {
     const [isVisible, setIsVisible] = React.useState(false);
     const caretPositionRef = React.useRef<number>(0);
     const inputRef = React.useRef<HTMLInputElement | null>(null);
diff --git a/src/phone-number-field.tsx b/src/phone-number-field.tsx
index c01bab644..90a97183a 100644
--- a/src/phone-number-field.tsx
+++ b/src/phone-number-field.tsx
@@ -25,15 +25,7 @@ type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'o
 
 const isValidPrefix = (prefix: string): boolean => !!prefix.match(/^\+\d+$/);
 
-const PhoneInput: React.FC<InputProps> = ({
-    inputRef,
-    value,
-    defaultValue,
-    onChange,
-    prefix,
-    e164,
-    ...other
-}) => {
+const PhoneInput = ({inputRef, value, defaultValue, onChange, prefix, e164, ...other}: InputProps) => {
     const [selfValue, setSelfValue] = React.useState(defaultValue ?? '');
     const ref = React.useRef<HTMLInputElement | null>(null);
     const {i18n} = useTheme();
@@ -106,7 +98,7 @@ export interface PhoneNumberFieldProps extends CommonFormFieldProps {
     e164?: boolean;
 }
 
-const PhoneNumberField: React.FC<PhoneNumberFieldProps> = ({
+const PhoneNumberField = ({
     disabled,
     error,
     helperText,
@@ -121,7 +113,7 @@ const PhoneNumberField: React.FC<PhoneNumberFieldProps> = ({
     e164,
     dataAttributes,
     ...rest
-}) => {
+}: PhoneNumberFieldProps): JSX.Element => {
     const {i18n} = useTheme();
 
     const processValue = (value: string) => {
diff --git a/src/placeholder.tsx b/src/placeholder.tsx
index a6f4d86fc..d01d33d4f 100644
--- a/src/placeholder.tsx
+++ b/src/placeholder.tsx
@@ -8,7 +8,7 @@ type PlaceholderProps = {
     children?: void;
 };
 
-export const Placeholder: React.FC<PlaceholderProps> = ({width = 'auto', height = 120}) => {
+export const Placeholder = ({width = 'auto', height = 120}: PlaceholderProps): JSX.Element => {
     return (
         <div
             style={{
diff --git a/src/popover.tsx b/src/popover.tsx
index 24afe8c04..2d8ba7995 100644
--- a/src/popover.tsx
+++ b/src/popover.tsx
@@ -29,7 +29,7 @@ type Props = {
     dataAttributes?: DataAttributes;
 };
 
-const Popover: React.FC<Props> = ({
+const Popover = ({
     open,
     extra,
     children,
@@ -41,7 +41,7 @@ const Popover: React.FC<Props> = ({
     description,
     asset,
     ...props
-}) => {
+}: Props): JSX.Element => {
     return (
         <BaseTooltip
             content={
diff --git a/src/portal.tsx b/src/portal.tsx
index cc74f7ca6..78473c9f5 100644
--- a/src/portal.tsx
+++ b/src/portal.tsx
@@ -16,7 +16,7 @@ type Props = {
     className?: string;
 };
 
-export const Portal: React.FC<Props> = ({children, className}) => {
+export const Portal = ({children, className}: Props): JSX.Element | null => {
     const [container, setContainer] = React.useState<HTMLDivElement | null>(null);
 
     React.useEffect(() => {
diff --git a/src/progress-bar.tsx b/src/progress-bar.tsx
index f99c06a3e..992046c26 100644
--- a/src/progress-bar.tsx
+++ b/src/progress-bar.tsx
@@ -20,7 +20,7 @@ type ProgressBarProps = {
     reverse?: boolean;
 };
 
-export const ProgressBar: React.FC<ProgressBarProps> = ({
+export const ProgressBar = ({
     progressPercent,
     color,
     'aria-label': ariaLabel,
@@ -28,7 +28,7 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
     'aria-hidden': ariaHidden,
     dataAttributes,
     reverse = false,
-}) => {
+}: ProgressBarProps): JSX.Element => {
     const {texts} = useTheme();
     const progressValue = Math.max(0, Math.min(100, progressPercent));
 
@@ -75,7 +75,7 @@ type ProgressBarSteppedProps = {
     'aria-hidden'?: React.HTMLAttributes<HTMLDivElement>['aria-hidden'];
 };
 
-export const ProgressBarStepped: React.FC<ProgressBarSteppedProps> = ({
+export const ProgressBarStepped = ({
     steps,
     currentStep = 0,
     color,
@@ -83,7 +83,7 @@ export const ProgressBarStepped: React.FC<ProgressBarSteppedProps> = ({
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     'aria-hidden': ariaHidden,
-}) => {
+}: ProgressBarSteppedProps): JSX.Element => {
     const {texts} = useTheme();
 
     const [step, setStep] = React.useState(Math.ceil(currentStep));
diff --git a/src/radio-button.tsx b/src/radio-button.tsx
index 967599d1f..18dac3c26 100644
--- a/src/radio-button.tsx
+++ b/src/radio-button.tsx
@@ -55,14 +55,14 @@ type PropsChildren = {
     'aria-labelledby'?: string;
 };
 
-const RadioButton: React.FC<PropsRender | PropsChildren> = ({
+const RadioButton = ({
     value,
     id,
     dataAttributes,
     'aria-labelledby': ariaLabelledby,
     'aria-label': ariaLabel,
     ...rest
-}) => {
+}: PropsRender | PropsChildren): JSX.Element => {
     const {disabled, selectedValue, focusableValue, select, selectNext, selectPrev} = useRadioContext();
     const labelId = useAriaId(ariaLabelledby);
     const ref = React.useRef<HTMLDivElement>(null);
@@ -160,7 +160,7 @@ type RadioGroupProps = {
     dataAttributes?: DataAttributes;
 };
 
-export const RadioGroup: React.FC<RadioGroupProps> = (props) => {
+export const RadioGroup = (props: RadioGroupProps): JSX.Element => {
     const {
         value: valueContext,
         defaultValue,
diff --git a/src/responsive-layout.tsx b/src/responsive-layout.tsx
index 2d271dd73..86cc8ab8f 100644
--- a/src/responsive-layout.tsx
+++ b/src/responsive-layout.tsx
@@ -18,9 +18,7 @@ type Props = {
     dataAttributes?: DataAttributes;
 };
 
-export const InternalResponsiveLayout: React.FC<
-    Props & {shouldExpandWhenNested?: boolean | 'desktop'; innerDivClassName?: string}
-> = ({
+export const InternalResponsiveLayout = ({
     children,
     isInverse = false,
     variant,
@@ -30,7 +28,7 @@ export const InternalResponsiveLayout: React.FC<
     dataAttributes,
     shouldExpandWhenNested = false,
     innerDivClassName,
-}) => {
+}: Props & {shouldExpandWhenNested?: boolean | 'desktop'; innerDivClassName?: string}): JSX.Element => {
     // @deprecated @TODO https://jira.tid.es/browse/WEB-1611
     const outsideVariant: Variant = useThemeVariant();
     const internalVariant: Variant | undefined = variant || (isInverse && 'inverse') || undefined;
@@ -71,17 +69,21 @@ export const InternalResponsiveLayout: React.FC<
     );
 };
 
-const ResponsiveLayout: React.FC<Props> = ({children, ...props}) => (
+const ResponsiveLayout = ({children, ...props}: Props): JSX.Element => (
     <InternalResponsiveLayout {...props} shouldExpandWhenNested>
         {children}
     </InternalResponsiveLayout>
 );
 
-export const ResetResponsiveLayout: React.FC<{
+export const ResetResponsiveLayout = ({
+    children,
+    skipMobile = false,
+    skipDesktop = false,
+}: {
     children: React.ReactNode;
     skipMobile?: boolean;
     skipDesktop?: boolean;
-}> = ({children, skipMobile = false, skipDesktop = false}) => {
+}): JSX.Element => {
     return (
         <div
             className={classnames({
diff --git a/src/screen-reader-only.tsx b/src/screen-reader-only.tsx
index c3ecba342..ea7837cae 100644
--- a/src/screen-reader-only.tsx
+++ b/src/screen-reader-only.tsx
@@ -9,7 +9,7 @@ type Props = {
     dataAttributes?: DataAttributes;
 };
 
-const ScreenReaderOnly: React.FC<Props> = ({children, dataAttributes}) => {
+const ScreenReaderOnly = ({children, dataAttributes}: Props): JSX.Element => {
     const prefixedDataAttributes = getPrefixedDataAttributes(dataAttributes, 'ScreenReaderOnly');
 
     if (React.Children.count(children) === 1) {
diff --git a/src/screen-size-context-provider.tsx b/src/screen-size-context-provider.tsx
index 23e179244..42a34942b 100644
--- a/src/screen-size-context-provider.tsx
+++ b/src/screen-size-context-provider.tsx
@@ -8,7 +8,7 @@ type Props = {
     children: React.ReactNode;
 };
 
-const ScreenSizeContextProvider: React.FC<Props> = ({children}) => {
+const ScreenSizeContextProvider = ({children}: Props): JSX.Element => {
     /**
      * To avoid problems with react hydrate, the server rendered content and the first client render should
      * be equal. To achieve that, we always do a first render in client with isServerSide state at true, and
diff --git a/src/select.tsx b/src/select.tsx
index c94b30190..95e5ac78f 100644
--- a/src/select.tsx
+++ b/src/select.tsx
@@ -40,7 +40,7 @@ export type SelectProps = {
     children?: void;
 };
 
-const Select: React.FC<SelectProps> = ({
+const Select = ({
     id,
     label,
     helperText: helperTextProp,
@@ -56,7 +56,7 @@ const Select: React.FC<SelectProps> = ({
     onBlur,
     autoFocus = false,
     native,
-}) => {
+}: SelectProps): JSX.Element => {
     const inputRef = React.useRef<HTMLSelectElement | HTMLInputElement>(null);
     const focusableRef = React.useRef<HTMLSelectElement | HTMLDivElement>(null);
     const fieldRef = React.useRef<HTMLDivElement>(null);
diff --git a/src/spinner.tsx b/src/spinner.tsx
index 8bc2b814a..98341ac69 100644
--- a/src/spinner.tsx
+++ b/src/spinner.tsx
@@ -16,7 +16,7 @@ type Props = {
     children?: void;
 };
 
-const Spinner: React.FC<Props> = ({color, delay = '500ms', size = 24, style, rolePresentation}) => {
+const Spinner = ({color, delay = '500ms', size = 24, style, rolePresentation}: Props): JSX.Element => {
     const {texts, platformOverrides} = useTheme();
     const isInverse = useIsInverseVariant();
     color = color || (isInverse ? vars.colors.controlActivatedInverse : vars.colors.controlActivated);
diff --git a/src/stack.tsx b/src/stack.tsx
index 4c3be8c0d..965b43bf4 100644
--- a/src/stack.tsx
+++ b/src/stack.tsx
@@ -42,14 +42,14 @@ type Props = {
     dataAttributes?: DataAttributes;
 };
 
-const Stack: React.FC<Props> = ({
+const Stack = ({
     space,
     className,
     children,
     role,
     'aria-labelledby': ariaLabelledby,
     dataAttributes,
-}) => {
+}: Props): JSX.Element => {
     const isFlexStack = typeof space === 'string';
 
     return (
diff --git a/src/stacking-group.tsx b/src/stacking-group.tsx
index f434ff7be..8a363a4c1 100644
--- a/src/stacking-group.tsx
+++ b/src/stacking-group.tsx
@@ -18,7 +18,12 @@ type Props = {
     children: React.ReactNode;
 };
 
-const StackingGroup: React.FC<Props> = ({moreItemsStyle, stacked = true, maxItems = Infinity, children}) => {
+const StackingGroup = ({
+    moreItemsStyle,
+    stacked = true,
+    maxItems = Infinity,
+    children,
+}: Props): JSX.Element => {
     const isInverse = useIsInverseVariant();
     const countChildren = React.Children.count(children);
     const moreItemsCount = countChildren - maxItems + 1;
diff --git a/src/stepper.tsx b/src/stepper.tsx
index 6989b467c..8d89749c3 100644
--- a/src/stepper.tsx
+++ b/src/stepper.tsx
@@ -19,12 +19,12 @@ type StepperProps = {
     dataAttributes?: DataAttributes;
 };
 
-const Stepper: React.FC<StepperProps> = ({
+const Stepper = ({
     steps,
     currentIndex,
     'aria-label': ariaLabel,
     dataAttributes,
-}: StepperProps) => {
+}: StepperProps): JSX.Element => {
     const {textPresets} = useTheme();
     const {isDesktopOrBigger} = useScreenSize();
     const {height, ref} = useElementDimensions();
diff --git a/src/switch-component.tsx b/src/switch-component.tsx
index e591193c5..e10f00807 100644
--- a/src/switch-component.tsx
+++ b/src/switch-component.tsx
@@ -50,7 +50,7 @@ type PropsChildren = {
     dataAttributes?: DataAttributes;
 };
 
-const Switch: React.FC<PropsRender | PropsChildren> = (props) => {
+const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
     const {isIos, isDarkMode} = useTheme();
     const labelId = useAriaId(props['aria-labelledby']);
     const {defaultValue, value, onChange, focusableRef, disabled} = useControlProps({
diff --git a/src/tab-focus.tsx b/src/tab-focus.tsx
index 2aff81749..858c97ef2 100644
--- a/src/tab-focus.tsx
+++ b/src/tab-focus.tsx
@@ -19,7 +19,7 @@ type Props = {
 
 let isMounted = false;
 
-const TabFocus: React.FC<Props> = ({children, disabled}) => {
+const TabFocus = ({children, disabled}: Props): JSX.Element => {
     React.useEffect(() => {
         if (disabled) {
             return;
diff --git a/src/tabs.tsx b/src/tabs.tsx
index c3e69300b..ba273e17f 100644
--- a/src/tabs.tsx
+++ b/src/tabs.tsx
@@ -40,7 +40,7 @@ export type TabsProps = {
     dataAttributes?: DataAttributes;
 };
 
-const Tabs: React.FC<TabsProps> = ({selectedIndex, onChange, tabs, dataAttributes}: TabsProps) => {
+const Tabs = ({selectedIndex, onChange, tabs, dataAttributes}: TabsProps): JSX.Element => {
     const {textPresets} = useTheme();
     const id = useAriaId();
     const {ref} = useElementDimensions();
diff --git a/src/tag.tsx b/src/tag.tsx
index 868557d88..222c0ca25 100644
--- a/src/tag.tsx
+++ b/src/tag.tsx
@@ -21,14 +21,14 @@ export type TagProps = {
     // not using "TagType" and repeating the union to make these props playroom autocomplete friendly
     type?: 'promo' | 'active' | 'inactive' | 'success' | 'warning' | 'error';
     children: string;
-    Icon?: React.FC<IconProps>;
+    Icon?: (props: IconProps) => JSX.Element;
     dataAttributes?: DataAttributes;
     badge?: boolean | number;
 };
 
 const {colors} = vars;
 
-const Tag: React.FC<TagProps> = ({Icon, children, dataAttributes, type = 'promo', badge}) => {
+const Tag = ({Icon, children, dataAttributes, type = 'promo', badge}: TagProps): JSX.Element | null => {
     const {textPresets} = useTheme();
     const themeVariant = useThemeVariant();
     const badgeValue = badge === true ? undefined : badge || 0;
diff --git a/src/text-field-base.tsx b/src/text-field-base.tsx
index 99e626971..3b0fbff30 100644
--- a/src/text-field-base.tsx
+++ b/src/text-field-base.tsx
@@ -35,19 +35,19 @@ type FieldEndIconProps = {
     disabled?: boolean;
 } & ExclusifyUnion<
     | {
-          Icon: React.FC<IconProps>;
+          Icon: (props: IconProps) => JSX.Element;
           'aria-label'?: string;
           onPress: (event: React.MouseEvent<HTMLElement>) => void;
       }
     | {
-          checkedProps: {Icon: React.FC<IconProps>; 'aria-label'?: string};
-          uncheckedProps: {Icon: React.FC<IconProps>; 'aria-label'?: string};
+          checkedProps: {Icon: (props: IconProps) => JSX.Element; 'aria-label'?: string};
+          uncheckedProps: {Icon: (props: IconProps) => JSX.Element; 'aria-label'?: string};
           onChange?: (checked: boolean) => void | undefined | Promise<void>;
           checked?: boolean;
       }
 >;
 
-export const FieldEndIcon: React.FC<FieldEndIconProps> = ({
+export const FieldEndIcon = ({
     hasBackgroundColor = true,
     onPress,
     onChange,
@@ -56,7 +56,7 @@ export const FieldEndIcon: React.FC<FieldEndIconProps> = ({
     checkedProps,
     uncheckedProps,
     'aria-label': ariaLabel,
-}) => {
+}: FieldEndIconProps): JSX.Element => {
     return (
         <div className={styles.fieldEndIconContainer}>
             {checkedProps ? (
diff --git a/src/text-field-components.tsx b/src/text-field-components.tsx
index f36ff5a7c..482a8f0f7 100644
--- a/src/text-field-components.tsx
+++ b/src/text-field-components.tsx
@@ -23,7 +23,7 @@ type LabelProps = {
     optional?: boolean;
 };
 
-export const Label: React.FC<LabelProps> = ({
+export const Label = ({
     shrinkLabel,
     forId,
     inputState,
@@ -31,7 +31,7 @@ export const Label: React.FC<LabelProps> = ({
     children,
     style,
     optional,
-}) => {
+}: LabelProps): JSX.Element => {
     const isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
     const [transitionStyle, setTransitionStyle] = React.useState('initial');
     const {texts} = useTheme();
@@ -76,7 +76,7 @@ type HelperTextProps = {
     children?: void;
 };
 
-export const HelperText: React.FC<HelperTextProps> = ({leftText, rightText, error, id}) => {
+export const HelperText = ({leftText, rightText, error, id}: HelperTextProps): JSX.Element => {
     const isInverse = useIsInverseVariant();
     const leftColor = isInverse
         ? vars.colors.textPrimaryInverse
@@ -117,7 +117,7 @@ type FieldContainerProps = {
     dataAttributes?: DataAttributes;
 };
 
-export const FieldContainer: React.FC<FieldContainerProps> = ({
+export const FieldContainer = ({
     multiline,
     disabled,
     children,
@@ -127,7 +127,7 @@ export const FieldContainer: React.FC<FieldContainerProps> = ({
     fullWidth,
     readOnly,
     dataAttributes,
-}) => {
+}: FieldContainerProps): JSX.Element => {
     return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div
diff --git a/src/text-link.tsx b/src/text-link.tsx
index 3e8af1820..76da0de03 100644
--- a/src/text-link.tsx
+++ b/src/text-link.tsx
@@ -31,14 +31,14 @@ interface CommonProps {
 
 export type TextLinkProps = AlwaysTouchableComponentProps & CommonProps;
 
-const TextLink: React.FC<TextLinkProps> = ({
+const TextLink = ({
     children,
     className = '',
     disabled,
     style,
     trackEvent,
     ...props
-}) => {
+}: TextLinkProps): JSX.Element => {
     const isInverse = useIsInverseVariant();
     const {isDarkMode} = useTheme();
     const {formStatus} = useForm();
diff --git a/src/text.tsx b/src/text.tsx
index 5addf4d3a..b944cfa20 100644
--- a/src/text.tsx
+++ b/src/text.tsx
@@ -126,7 +126,7 @@ interface TextProps extends TextPresetProps {
     forzeMobileSize?: never;
 }
 
-export const Text: React.FC<TextProps> = ({
+export const Text = ({
     weight,
     color = vars.colors.textPrimary,
     decoration,
@@ -150,7 +150,7 @@ export const Text: React.FC<TextProps> = ({
     'aria-level': ariaLevel,
     'aria-label': ariaLabel,
     dataAttributes,
-}) => {
+}: TextProps): JSX.Element | null => {
     const {skinName} = useTheme();
     const isInverse = useIsInverseVariant();
     const lineClampValue = lineClamp(truncate);
@@ -346,7 +346,7 @@ export const textProps = {
     },
 };
 
-export const Text10: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSizes, ...props}) => {
+export const Text10 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetProps): JSX.Element => {
     const {textPresets} = useTheme();
     return (
         <Text
@@ -358,7 +358,7 @@ export const Text10: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSi
     );
 };
 
-export const Text9: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSizes, ...props}) => {
+export const Text9 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetProps): JSX.Element => {
     const {textPresets} = useTheme();
     return (
         <Text
@@ -370,7 +370,7 @@ export const Text9: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSiz
     );
 };
 
-export const Text8: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSizes, ...props}) => {
+export const Text8 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetProps): JSX.Element => {
     const {textPresets} = useTheme();
     return (
         <Text
@@ -382,7 +382,7 @@ export const Text8: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSiz
     );
 };
 
-export const Text7: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSizes, ...props}) => {
+export const Text7 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetProps): JSX.Element => {
     const {textPresets} = useTheme();
     return (
         <Text
@@ -394,7 +394,7 @@ export const Text7: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSiz
     );
 };
 
-export const Text6: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSizes, ...props}) => {
+export const Text6 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetProps): JSX.Element => {
     const {textPresets} = useTheme();
     return (
         <Text
@@ -406,7 +406,7 @@ export const Text6: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSiz
     );
 };
 
-export const Text5: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSizes, ...props}) => {
+export const Text5 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetProps): JSX.Element => {
     const {textPresets} = useTheme();
     return (
         <Text
@@ -418,7 +418,7 @@ export const Text5: React.FC<TextPresetProps> = ({dataAttributes, forceMobileSiz
     );
 };
 
-export const Text4: React.FC<LightRegularMediumProps> = ({dataAttributes, forceMobileSizes, ...props}) => (
+export const Text4 = ({dataAttributes, forceMobileSizes, ...props}: LightRegularMediumProps): JSX.Element => (
     <Text
         {...getTextSizes({forceMobileSizes, ...textProps.text4})}
         weight={getWeight(props)}
@@ -427,7 +427,7 @@ export const Text4: React.FC<LightRegularMediumProps> = ({dataAttributes, forceM
     />
 );
 
-export const Text3: React.FC<LightRegularMediumProps> = ({dataAttributes, forceMobileSizes, ...props}) => (
+export const Text3 = ({dataAttributes, forceMobileSizes, ...props}: LightRegularMediumProps): JSX.Element => (
     <Text
         {...getTextSizes({forceMobileSizes, ...textProps.text3})}
         weight={getWeight(props)}
@@ -436,7 +436,7 @@ export const Text3: React.FC<LightRegularMediumProps> = ({dataAttributes, forceM
     />
 );
 
-export const Text2: React.FC<RegularMediumProps> = ({dataAttributes, forceMobileSizes, ...props}) => (
+export const Text2 = ({dataAttributes, forceMobileSizes, ...props}: RegularMediumProps): JSX.Element => (
     <Text
         {...getTextSizes({forceMobileSizes, ...textProps.text2})}
         weight={getWeight(props)}
@@ -445,7 +445,7 @@ export const Text2: React.FC<RegularMediumProps> = ({dataAttributes, forceMobile
     />
 );
 
-export const Text1: React.FC<RegularMediumProps> = ({dataAttributes, forceMobileSizes, ...props}) => (
+export const Text1 = ({dataAttributes, forceMobileSizes, ...props}: RegularMediumProps): JSX.Element => (
     <Text
         {...getTextSizes({forceMobileSizes, ...textProps.text1})}
         weight={getWeight(props)}
diff --git a/src/theme-context-provider.tsx b/src/theme-context-provider.tsx
index f0b9a3508..aee6ef932 100644
--- a/src/theme-context-provider.tsx
+++ b/src/theme-context-provider.tsx
@@ -120,7 +120,7 @@ type TextPresetsVars = {
     };
 };
 
-const ThemeContextProvider: React.FC<Props> = ({theme, children, as, withoutStyles = false}) => {
+const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Props): JSX.Element => {
     const nextAriaId = React.useRef(1);
     const getAriaId = React.useCallback((): string => `aria-id-hook-${nextAriaId.current++}`, []);
 
diff --git a/src/theme-variant-context.tsx b/src/theme-variant-context.tsx
index 59c4169bf..74499112f 100644
--- a/src/theme-variant-context.tsx
+++ b/src/theme-variant-context.tsx
@@ -11,7 +11,7 @@ type ThemeVariantProps = {
     children: React.ReactNode;
 };
 
-export const ThemeVariant: React.FC<ThemeVariantProps> = ({isInverse, variant, children}) => (
+export const ThemeVariant = ({isInverse, variant, children}: ThemeVariantProps): JSX.Element => (
     <ThemeVariantContext.Provider value={variant ?? (isInverse ? 'inverse' : 'default')}>
         {children}
     </ThemeVariantContext.Provider>
diff --git a/src/timer.tsx b/src/timer.tsx
index 5d22ccaa4..953732631 100644
--- a/src/timer.tsx
+++ b/src/timer.tsx
@@ -190,7 +190,7 @@ const useTimerState = ({
     return timerValue;
 };
 
-export const TextTimer: React.FC<TextTimerProps> = ({
+export const TextTimer = ({
     endTimestamp,
     labelType = 'none',
     minTimeUnit,
@@ -198,7 +198,7 @@ export const TextTimer: React.FC<TextTimerProps> = ({
     onProgress,
     dataAttributes,
     'aria-label': ariaLabel,
-}) => {
+}: TextTimerProps): JSX.Element => {
     const {texts} = useTheme();
     const labelId = useAriaId();
 
@@ -306,7 +306,7 @@ export const TextTimer: React.FC<TextTimerProps> = ({
     );
 };
 
-export const Timer: React.FC<TimerProps> = ({
+export const Timer = ({
     boxed,
     endTimestamp,
     minTimeUnit,
@@ -314,7 +314,7 @@ export const Timer: React.FC<TimerProps> = ({
     onProgress,
     dataAttributes,
     'aria-label': ariaLabel,
-}) => {
+}: TimerProps): JSX.Element => {
     const {texts} = useTheme();
     const labelId = useAriaId();
     const themeVariant = useThemeVariant();
diff --git a/src/tooltip.tsx b/src/tooltip.tsx
index aa57bc616..f38fc76c9 100644
--- a/src/tooltip.tsx
+++ b/src/tooltip.tsx
@@ -158,7 +158,7 @@ type BaseTooltipProps = {
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
 };
 
-export const BaseTooltip: React.FC<BaseTooltipProps> = ({
+export const BaseTooltip = ({
     content,
     target,
     width,
@@ -171,7 +171,7 @@ export const BaseTooltip: React.FC<BaseTooltipProps> = ({
     closeButtonLabel,
     hasPointerInteractionOnly = false,
     trackingEvent,
-}) => {
+}: BaseTooltipProps): JSX.Element => {
     const {texts} = useTheme();
     const tooltipId = useAriaId();
     const {openTooltipId} = useTooltipState();
@@ -604,7 +604,7 @@ export const BaseTooltip: React.FC<BaseTooltipProps> = ({
     );
 };
 
-const Tooltip: React.FC<Props> = ({
+const Tooltip = ({
     centerContent,
     extra,
     children,
@@ -612,7 +612,7 @@ const Tooltip: React.FC<Props> = ({
     title,
     description,
     ...props
-}) => {
+}: Props): JSX.Element => {
     return (
         <BaseTooltip
             content={
diff --git a/src/utils/aspect-ratio-support.tsx b/src/utils/aspect-ratio-support.tsx
index 30854bbce..72dc9c7c4 100644
--- a/src/utils/aspect-ratio-support.tsx
+++ b/src/utils/aspect-ratio-support.tsx
@@ -13,7 +13,7 @@ type Props = {
     children: React.ReactNode;
 };
 
-export const AspectRatioSupportProvider: React.FC<Props> = ({children}) => {
+export const AspectRatioSupportProvider = ({children}: Props): JSX.Element => {
     // In SSR (and in first client side render) we assume the browser will support it
     const [isSupported, setIsSupported] = React.useState(true);
 
diff --git a/src/utils/document-visibility.tsx b/src/utils/document-visibility.tsx
index 3e30f48b1..1a2d1fb29 100644
--- a/src/utils/document-visibility.tsx
+++ b/src/utils/document-visibility.tsx
@@ -12,7 +12,7 @@ type Props = {
     children: React.ReactNode;
 };
 
-export const DocumentVisibilityProvider: React.FC<Props> = ({hidden, children}) => {
+export const DocumentVisibilityProvider = ({hidden, children}: Props): JSX.Element => {
     const {platformOverrides} = useTheme();
     const [visible, setVisible] = React.useState(!hidden);
     React.useEffect(() => {
diff --git a/yarn.lock b/yarn.lock
index 836646176..b641e42c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5435,9 +5435,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@telefonica/eslint-config@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "@telefonica/eslint-config@npm:2.1.1"
+"@telefonica/eslint-config@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "@telefonica/eslint-config@npm:2.2.0"
   dependencies:
     "@babel/core": ^7.0.0
     "@babel/eslint-parser": ^7.23.9
@@ -5456,7 +5456,7 @@ __metadata:
     eslint-plugin-testing-library: ^6.2.0
   peerDependencies:
     eslint: ^8.0.0
-  checksum: 8f5d1e71897613af0854ff3e5556b2d1fb94a77fd344bf75bc9d75673eca936652369f6ebcb162a48ada2d133bc1eeaa9772c2ebf467db9b3737b8f65cfa991b
+  checksum: 7e82d56454126df6e9c140ca3ac7528db9ea51ebdcb38b3311efaea63fa0a87f9026f7d4330c5f0ca1a31d21434abc8169dde0b48a20542c93a62ad9aa83269e
   languageName: node
   linkType: hard
 
@@ -5512,7 +5512,7 @@ __metadata:
     "@swc/jest": ^0.2.29
     "@tef-novum/webview-bridge": ^3.27.0
     "@telefonica/acceptance-testing": 5.0.0
-    "@telefonica/eslint-config": ^2.1.1
+    "@telefonica/eslint-config": ^2.2.0
     "@telefonica/libphonenumber": ^2.9.0
     "@telefonica/prettier-config": ^2.0.0
     "@testing-library/dom": ^10.2.0