diff --git a/.storybook/css/fonts/vivo-type-bold.woff2 b/.storybook/css/fonts/vivo-type-bold.woff2
index 368c1a3af2..89244bdf7d 100644
Binary files a/.storybook/css/fonts/vivo-type-bold.woff2 and b/.storybook/css/fonts/vivo-type-bold.woff2 differ
diff --git a/.storybook/css/fonts/vivo-type-light.woff2 b/.storybook/css/fonts/vivo-type-light.woff2
index 5c7ba4e7f9..b668ad0c64 100644
Binary files a/.storybook/css/fonts/vivo-type-light.woff2 and b/.storybook/css/fonts/vivo-type-light.woff2 differ
diff --git a/.storybook/css/fonts/vivo-type-medium.woff2 b/.storybook/css/fonts/vivo-type-medium.woff2
new file mode 100644
index 0000000000..d87f998c74
Binary files /dev/null and b/.storybook/css/fonts/vivo-type-medium.woff2 differ
diff --git a/.storybook/css/fonts/vivo-type-regular.woff2 b/.storybook/css/fonts/vivo-type-regular.woff2
index 9ad164df14..f56c280c61 100644
Binary files a/.storybook/css/fonts/vivo-type-regular.woff2 and b/.storybook/css/fonts/vivo-type-regular.woff2 differ
diff --git a/.storybook/css/vivo-font.css b/.storybook/css/vivo-font.css
index 714f602cbd..10043d0480 100644
--- a/.storybook/css/vivo-font.css
+++ b/.storybook/css/vivo-font.css
@@ -19,7 +19,7 @@
     font-family: 'Vivo Type';
     font-style: normal;
     font-weight: 500;
-    src: url('./fonts/vivo-type-bold.woff2') format('woff2');
+    src: url('./fonts/vivo-type-medium.woff2') format('woff2');
 }
 
 /* Bold */
diff --git a/.yarn/cache/cubic-bezier-npm-0.1.2-e7baa5c16d-db21ebda82.zip b/.yarn/cache/cubic-bezier-npm-0.1.2-e7baa5c16d-db21ebda82.zip
new file mode 100644
index 0000000000..87cd6d7402
Binary files /dev/null and b/.yarn/cache/cubic-bezier-npm-0.1.2-e7baa5c16d-db21ebda82.zip differ
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d20495aba0..a0757b7c80 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,31 @@
+## [16.6.1](https://github.com/Telefonica/mistica-web/compare/v16.6.0...v16.6.1) (2024-11-26)
+
+
+### Bug Fixes
+
+* **Header, Cards, Hero:** fix spacings logic ([#1298](https://github.com/Telefonica/mistica-web/issues/1298)) ([327ac5f](https://github.com/Telefonica/mistica-web/commit/327ac5fe90b5bb3dc2a23af5bb890368439d1d77))
+
+# [16.6.0](https://github.com/Telefonica/mistica-web/compare/v16.5.0...v16.6.0) (2024-11-26)
+
+
+### Features
+
+* **data-testid:** support for Callout, HighlightedCard, Hero, EmptyState and Headers ([#1296](https://github.com/Telefonica/mistica-web/issues/1296)) ([15b798c](https://github.com/Telefonica/mistica-web/commit/15b798c91a4ad898d95036c8dd54e4a41997f3c1))
+* **Header, Cards, Hero, CoverHero:** improve a11y ([#1292](https://github.com/Telefonica/mistica-web/issues/1292)) ([cdcf2fc](https://github.com/Telefonica/mistica-web/commit/cdcf2fcafcd4df435f38927cbbc65d52c9b29590))
+* **InfoSheet:** update styles and allow adding a button to the content ([#1294](https://github.com/Telefonica/mistica-web/issues/1294)) ([c4a0749](https://github.com/Telefonica/mistica-web/commit/c4a0749d816702644020112fd00d6d6b2a61ae39))
+* **Meter:** New component ([#1281](https://github.com/Telefonica/mistica-web/issues/1281)) ([1a061d8](https://github.com/Telefonica/mistica-web/commit/1a061d8b645a418930ae0a8921db1900b8e084ce))
+* **Sheet:** allow closing the sheet with the keyboard or a screen reader ([#1293](https://github.com/Telefonica/mistica-web/issues/1293)) ([42099fb](https://github.com/Telefonica/mistica-web/commit/42099fb17e1f5682f196ee5390ceb386616a2d59))
+
+# [16.5.0](https://github.com/Telefonica/mistica-web/compare/v16.4.0...v16.5.0) (2024-11-18)
+
+
+### Features
+
+* **Accordion, BoxedAccordion:** allow detail and right content in header ([#1290](https://github.com/Telefonica/mistica-web/issues/1290)) ([087c486](https://github.com/Telefonica/mistica-web/commit/087c4866757733339e51ed9de54b844fecf7aed5))
+* **HorizontalMosaic, VerticalMosaic:** allow passing gridMode information to each item ([#1289](https://github.com/Telefonica/mistica-web/issues/1289)) ([bb8852c](https://github.com/Telefonica/mistica-web/commit/bb8852c439cb33b2ae7c877a2ac32760ec29180c))
+* **MainNavigationBar:** add menu ([#1280](https://github.com/Telefonica/mistica-web/issues/1280)) ([3973ead](https://github.com/Telefonica/mistica-web/commit/3973ead1ebef7f613b1aebd3c18306fc88999de0))
+* **vivo-type:** added medium weight ([#1291](https://github.com/Telefonica/mistica-web/issues/1291)) ([8a38d2c](https://github.com/Telefonica/mistica-web/commit/8a38d2c1c16a17b931f96c75b400d7ba8c036a93))
+
 # [16.4.0](https://github.com/Telefonica/mistica-web/compare/v16.3.1...v16.4.0) (2024-11-04)
 
 
diff --git a/css/vivo-new.css b/css/vivo-new.css
index 2d7c67e48c..ef685c7702 100644
--- a/css/vivo-new.css
+++ b/css/vivo-new.css
@@ -200,13 +200,13 @@
     --mistica-line-height-4: 1.5rem;
     --mistica-font-size-5: 1.25rem;
     --mistica-line-height-5: 1.5rem;
-    --mistica-font-weight-5: 400;
+    --mistica-font-weight-5: 500;
     --mistica-font-size-6: 1.5rem;
     --mistica-line-height-6: 2rem;
-    --mistica-font-weight-6: 400;
+    --mistica-font-weight-6: 500;
     --mistica-font-size-7: 1.75rem;
     --mistica-line-height-7: 2rem;
-    --mistica-font-weight-7: 400;
+    --mistica-font-weight-7: 500;
     --mistica-font-size-8: 2rem;
     --mistica-line-height-8: 2.5rem;
     --mistica-font-weight-8: 400;
@@ -218,18 +218,18 @@
     --mistica-font-weight-10: 400;
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
-    --mistica-font-weight-cardTitle: 400;
-    --mistica-font-weight-button: 400;
+    --mistica-font-weight-cardTitle: 500;
+    --mistica-font-weight-button: 500;
     --mistica-font-size-tabsLabel: 1.125rem;
     --mistica-line-height-tabsLabel: 1.5rem;
-    --mistica-font-weight-tabsLabel: 400;
-    --mistica-font-weight-link: 400;
-    --mistica-font-weight-title1: 400;
-    --mistica-font-weight-title2: 400;
+    --mistica-font-weight-tabsLabel: 500;
+    --mistica-font-weight-link: 500;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-weight-title2: 500;
     --mistica-font-size-title3: 1.125rem;
     --mistica-line-height-title3: 1.5rem;
-    --mistica-font-weight-title3: 400;
-    --mistica-font-weight-indicator: 400;
+    --mistica-font-weight-title3: 500;
+    --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 400;
 }
 
diff --git a/package.json b/package.json
index 92decd251f..8c86050acd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "16.4.0",
+    "version": "16.6.1",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -151,6 +151,7 @@
         "@vanilla-extract/dynamic": "^2.1.1",
         "@vanilla-extract/sprinkles": "^1.6.2",
         "classnames": "^2.3.1",
+        "cubic-bezier": "^0.1.2",
         "lottie-react": "^2.4.0",
         "moment": "^2.29.1",
         "react-autosuggest": "^10.1.0",
diff --git a/packages/generate-design-tokens/.gitignore b/packages/generate-design-tokens/.gitignore
new file mode 100644
index 0000000000..8011525325
--- /dev/null
+++ b/packages/generate-design-tokens/.gitignore
@@ -0,0 +1 @@
+.yarn
\ No newline at end of file
diff --git a/packages/generate-design-tokens/.yarn/cache/@telefonica-prettier-config-npm-2.0.0-44dbed316e-b7fe4ee936.zip b/packages/generate-design-tokens/.yarn/cache/@telefonica-prettier-config-npm-2.0.0-44dbed316e-b7fe4ee936.zip
new file mode 100644
index 0000000000..75caa3a116
Binary files /dev/null and b/packages/generate-design-tokens/.yarn/cache/@telefonica-prettier-config-npm-2.0.0-44dbed316e-b7fe4ee936.zip differ
diff --git a/packages/generate-design-tokens/.yarn/cache/prettier-npm-3.3.3-e811f023f3-bc86043548.zip b/packages/generate-design-tokens/.yarn/cache/prettier-npm-3.3.3-e811f023f3-bc86043548.zip
new file mode 100644
index 0000000000..b14018ab51
Binary files /dev/null and b/packages/generate-design-tokens/.yarn/cache/prettier-npm-3.3.3-e811f023f3-bc86043548.zip differ
diff --git a/packages/generate-design-tokens/.yarn/install-state.gz b/packages/generate-design-tokens/.yarn/install-state.gz
deleted file mode 100644
index 7885c4decc..0000000000
Binary files a/packages/generate-design-tokens/.yarn/install-state.gz and /dev/null differ
diff --git a/packages/generate-design-tokens/index.js b/packages/generate-design-tokens/index.js
index 2f1ce8b455..2496712dc7 100644
--- a/packages/generate-design-tokens/index.js
+++ b/packages/generate-design-tokens/index.js
@@ -3,6 +3,7 @@ import path from 'path';
 import url from 'url';
 // eslint-disable-next-line import/extensions
 import {generateSkinCssSrc, buildRadius, generateCommonCssSrc} from './css-generator.js';
+import prettier from 'prettier';
 
 /*
 By default, this script will look for the design tokens inside .github folder but you may want to clone the mistica-design repo elsewhere.
@@ -16,12 +17,15 @@ To run this script locally using a custom path for the tokens, you can do the fo
     DESIGN_TOKENS_FOLDER="/path/to/mistica-design/tokens" node index.js
 */
 
-const DESIGN_TOKENS_FOLDER = process.env.DESIGN_TOKENS_FOLDER || '../../../mistica-design/tokens/';
-
 // in node >= 20 we could use import.meta.dirname instead
 // @ts-ignore
 const currentDir = url.fileURLToPath(new URL('.', import.meta.url));
 
+const DESIGN_TOKENS_FOLDER =
+    process.env.DESIGN_TOKENS_FOLDER || path.join(currentDir, '../../.github/mistica-design/tokens/');
+
+console.log('Using design tokens from:', DESIGN_TOKENS_FOLDER);
+
 const SKINS_FOLDER = path.join(currentDir, '..', '..', 'src', 'skins');
 const CSS_FOLDER = path.join(currentDir, '..', '..', 'css');
 
@@ -31,6 +35,23 @@ const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const toCamelCase = (str) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
 const toPascalCase = (str) => capitalize(toCamelCase(str));
 
+const jsonSort = (obj) => {
+    if (Array.isArray(obj)) {
+        return obj.map(jsonSort);
+    }
+
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+
+    return Object.keys(obj)
+        .sort((a, b) => a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}))
+        .reduce((acc, key) => {
+            acc[key] = jsonSort(obj[key]);
+            return acc;
+        }, {});
+};
+
 /**
  * @param {{angle: number, colors: Array<{
  *     value: string,
@@ -123,7 +144,7 @@ export const get${toPascalCase(skinName)}Skin: GetKnownSkin = () => {
                 )
                 .join(',')}
         },
-        textPresets: ${JSON.stringify(textTokens)},
+        textPresets: ${JSON.stringify(jsonSort(textTokens))},
     };
     return skin;
 };
@@ -142,10 +163,22 @@ export type Colors = {
 };`;
 };
 
-const generateSkinFiles = () => {
+const formatCss = async (source) =>
+    prettier.format(source, {
+        ...(await prettier.resolveConfig('.')),
+        parser: 'css',
+    });
+
+const formatTs = async (source) =>
+    prettier.format(source, {
+        ...(await prettier.resolveConfig('.')),
+        parser: 'typescript',
+    });
+
+const generateSkinFiles = async () => {
     let anyGeneratedSkin;
 
-    KNOWN_SKINS.forEach((skinName) => {
+    for (const skinName of KNOWN_SKINS) {
         console.log('Generating tokens for skin', skinName);
 
         if (!fs.existsSync(path.join(DESIGN_TOKENS_FOLDER, `${skinName}.json`))) {
@@ -153,20 +186,20 @@ const generateSkinFiles = () => {
             return;
         }
 
-        const skinSrc = generateSkinSrc(skinName);
+        const skinSrc = await formatTs(generateSkinSrc(skinName));
         fs.writeFileSync(path.join(SKINS_FOLDER, `${skinName}.tsx`), skinSrc);
 
-        const skinCssSrc = generateSkinCssSrc(skinName, DESIGN_TOKENS_FOLDER);
+        const skinCssSrc = await formatCss(generateSkinCssSrc(skinName, DESIGN_TOKENS_FOLDER));
         fs.writeFileSync(path.join(CSS_FOLDER, `${skinName}.css`), skinCssSrc);
 
         anyGeneratedSkin = skinName;
-    });
+    }
 
     if (anyGeneratedSkin) {
-        const typesSrc = generateColorTypesSrc(anyGeneratedSkin);
+        const typesSrc = await formatTs(generateColorTypesSrc(anyGeneratedSkin));
         fs.writeFileSync(path.join(SKINS_FOLDER, 'types', 'colors.tsx'), typesSrc);
 
-        const commonCssSrc = generateCommonCssSrc(DESIGN_TOKENS_FOLDER);
+        const commonCssSrc = await formatCss(generateCommonCssSrc(DESIGN_TOKENS_FOLDER));
         fs.writeFileSync(path.join(CSS_FOLDER, `mistica-common.css`), commonCssSrc);
     }
 };
diff --git a/packages/generate-design-tokens/package.json b/packages/generate-design-tokens/package.json
index 210a24edd2..ee48c7a95d 100644
--- a/packages/generate-design-tokens/package.json
+++ b/packages/generate-design-tokens/package.json
@@ -1,5 +1,10 @@
 {
     "name": "generate-design-tokens",
     "type": "module",
-    "packageManager": "yarn@3.2.4"
+    "packageManager": "yarn@3.2.4",
+    "dependencies": {
+        "@telefonica/prettier-config": "^2.0.0",
+        "prettier": "^3.3.3"
+    },
+    "prettier": "@telefonica/prettier-config"
 }
diff --git a/packages/generate-design-tokens/yarn.lock b/packages/generate-design-tokens/yarn.lock
index 26c86cb7bc..0e0d359504 100644
--- a/packages/generate-design-tokens/yarn.lock
+++ b/packages/generate-design-tokens/yarn.lock
@@ -3,9 +3,31 @@
 
 __metadata:
   version: 6
+  cacheKey: 8
+
+"@telefonica/prettier-config@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@telefonica/prettier-config@npm:2.0.0"
+  peerDependencies:
+    prettier: ^3.0.0
+  checksum: b7fe4ee936195f26b1b1977236b97ec241afa01b12d72d801272788bf9699cd4b9a6e3feccde86bd88b311335f0cfd39ec0b53a9bb44dacf5c01b5627729f174
+  languageName: node
+  linkType: hard
 
 "generate-design-tokens@workspace:.":
   version: 0.0.0-use.local
   resolution: "generate-design-tokens@workspace:."
+  dependencies:
+    "@telefonica/prettier-config": ^2.0.0
+    prettier: ^3.3.3
   languageName: unknown
   linkType: soft
+
+"prettier@npm:^3.3.3":
+  version: 3.3.3
+  resolution: "prettier@npm:3.3.3"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: bc8604354805acfdde6106852d14b045bb20827ad76a5ffc2455b71a8257f94de93f17f14e463fe844808d2ccc87248364a5691488a3304f1031326e62d9276e
+  languageName: node
+  linkType: hard
diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx
index 5d9f5662c1..5acaae3e67 100644
--- a/playroom/snippets.tsx
+++ b/playroom/snippets.tsx
@@ -135,77 +135,253 @@ const accordionSnippets: Array<Snippet> = [
         </Accordion>
         `,
     },
+    {
+        group: 'Accordion',
+        name: 'Accordion (detail and right)',
+        code: `
+        <Accordion>
+          <AccordionItem
+            asset={<IconInvoicePlanFileRegular />}
+            title="What is Movistar Money"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a loan available to anyone, whether or not you're a Movistar
+                customer. It offers from €2,000 to €15,000 with a simple and fast
+                application process, and you receive the money in less than 48 hours.
+              </Text3>
+            }
+          />
+          <AccordionItem
+            asset={<IconLocationMapRegular />}
+            title="To whom is it aimed?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                The Movistar Money loan service is aimed at anyone, whether you are a{" "}
+                <TextLink href="https://example.org" newTab>
+                  Movistar
+                </TextLink>{" "}
+                customer or not.
+              </Text3>
+            }
+          />
+          <AccordionItem
+            asset={<IconLockEyeClosedRegular />}
+            title="Who offers Movistar Money?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                <p>
+                  At Telefónica, we have our own financial institution, Telefonica
+                  Consumer Finance, and agreements with other institutions to assist
+                  you in obtaining your loan.
+                </p>
+                <br />
+                <Image src="https://picsum.photos/1200/1200" aspectRatio="16:9" />
+                <br />
+                <p>
+                  Depending on the characteristics of the information you provide us,
+                  your application will be sent to one of the institutions{" "}
+                  <TextLink href="https://example.org" newTab>
+                    with which Movistar has agreements
+                  </TextLink>
+                  .
+                </p>
+              </Text3>
+            }
+          />
+          <AccordionItem
+            asset={<IconIdCardRegular />}
+            title="How can I hire it?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a very agile process that you can access through the
+                money.movistar.es website. You can find more detailed information
+                about the process on our "How It Works" page.
+              </Text3>
+            }
+          />
+          <AccordionItem
+            asset={<IconLifeguardFloatRegular />}
+            title="What should I do if I don't receive the SMS with the contracting code?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It may take a few minutes until you receive the SMS with the code. If
+                you still haven't received the code, you can request a new one by
+                clicking on "resend SMS."
+              </Text3>
+            }
+          />
+        </Accordion>
+        `,
+    },
     {
         group: 'Accordion',
         name: 'BoxedAccordion',
         code: `
-      <BoxedAccordion>
-        <BoxedAccordionItem
-          asset={<IconInvoicePlanFileRegular />}
-          title="What is Movistar Money"
-          content={
-            <Text3 color={colors.textSecondary}>
-              It's a loan available to anyone, whether or not you're a Movistar
-              customer. It offers from €2,000 to €15,000 with a simple and fast
-              application process, and you receive the money in less than 48 hours.
-            </Text3>
-          }
-        />
-        <BoxedAccordionItem
-          asset={<IconLocationMapRegular />}
-          title="To whom is it aimed?"
-          content={
-            <Text3 color={colors.textSecondary}>
-              The Movistar Money loan service is aimed at anyone, whether you are a{" "}
-              <TextLink href="https://example.org" newTab>Movistar</TextLink> customer or not.
-            </Text3>
-          }
-        />
-        <BoxedAccordionItem
-          asset={<IconLockEyeClosedRegular />}
-          title="Who offers Movistar Money?"
-          content={
-            <Text3 color={colors.textSecondary}>
-              <p>
-                At Telefónica, we have our own financial institution, Telefonica
-                Consumer Finance, and agreements with other institutions to assist
-                you in obtaining your loan.
-              </p>
-              <br />
-              <Image src="${imagePlaceholder}" aspectRatio="16:9" />
-              <br />
-              <p>
-                Depending on the characteristics of the information you provide us,
-                your application will be sent to one of the institutions{" "}
-                <TextLink href="https://example.org" newTab>with which Movistar has agreements</TextLink>.
-              </p>
-            </Text3>
-          }
-        />
-        <BoxedAccordionItem
-          asset={<IconIdCardRegular />}
-          title="How can I hire it?"
-          content={
-            <Text3 color={colors.textSecondary}>
-              It's a very agile process that you can access through the
-              money.movistar.es website. You can find more detailed information
-              about the process on our "How It Works" page.
-            </Text3>
-          }
-        />
-        <BoxedAccordionItem
-          asset={<IconLifeguardFloatRegular />}
-          title="What should I do if I don't receive the SMS with the contracting code?"
-          content={
-            <Text3 color={colors.textSecondary}>
-              It may take a few minutes until you receive the SMS with the code. If
-              you still haven't received the code, you can request a new one by
-              clicking on "resend SMS."
-            </Text3>
-          }
-        />
-      </BoxedAccordion>
-      `,
+        <BoxedAccordion>
+          <BoxedAccordionItem
+            asset={<IconInvoicePlanFileRegular />}
+            title="What is Movistar Money"
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a loan available to anyone, whether or not you're a Movistar
+                customer. It offers from €2,000 to €15,000 with a simple and fast
+                application process, and you receive the money in less than 48 hours.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLocationMapRegular />}
+            title="To whom is it aimed?"
+            content={
+              <Text3 color={colors.textSecondary}>
+                The Movistar Money loan service is aimed at anyone, whether you are a{" "}
+                <TextLink href="https://example.org" newTab>Movistar</TextLink> customer or not.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLockEyeClosedRegular />}
+            title="Who offers Movistar Money?"
+            content={
+              <Text3 color={colors.textSecondary}>
+                <p>
+                  At Telefónica, we have our own financial institution, Telefonica
+                  Consumer Finance, and agreements with other institutions to assist
+                  you in obtaining your loan.
+                </p>
+                <br />
+                <Image src="${imagePlaceholder}" aspectRatio="16:9" />
+                <br />
+                <p>
+                  Depending on the characteristics of the information you provide us,
+                  your application will be sent to one of the institutions{" "}
+                  <TextLink href="https://example.org" newTab>with which Movistar has agreements</TextLink>.
+                </p>
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconIdCardRegular />}
+            title="How can I hire it?"
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a very agile process that you can access through the
+                money.movistar.es website. You can find more detailed information
+                about the process on our "How It Works" page.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLifeguardFloatRegular />}
+            title="What should I do if I don't receive the SMS with the contracting code?"
+            content={
+              <Text3 color={colors.textSecondary}>
+                It may take a few minutes until you receive the SMS with the code. If
+                you still haven't received the code, you can request a new one by
+                clicking on "resend SMS."
+              </Text3>
+            }
+          />
+        </BoxedAccordion>
+        `,
+    },
+    {
+        group: 'Accordion',
+        name: 'BoxedAccordion (detail and right)',
+        code: `
+        <BoxedAccordion>
+          <BoxedAccordionItem
+            asset={<IconInvoicePlanFileRegular />}
+            title="What is Movistar Money"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a loan available to anyone, whether or not you're a Movistar
+                customer. It offers from €2,000 to €15,000 with a simple and fast
+                application process, and you receive the money in less than 48 hours.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLocationMapRegular />}
+            title="To whom is it aimed?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                The Movistar Money loan service is aimed at anyone, whether you are a{" "}
+                <TextLink href="https://example.org" newTab>
+                  Movistar
+                </TextLink>{" "}
+                customer or not.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLockEyeClosedRegular />}
+            title="Who offers Movistar Money?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                <p>
+                  At Telefónica, we have our own financial institution, Telefonica
+                  Consumer Finance, and agreements with other institutions to assist
+                  you in obtaining your loan.
+                </p>
+                <br />
+                <Image src="https://picsum.photos/1200/1200" aspectRatio="16:9" />
+                <br />
+                <p>
+                  Depending on the characteristics of the information you provide us,
+                  your application will be sent to one of the institutions{" "}
+                  <TextLink href="https://example.org" newTab>
+                    with which Movistar has agreements
+                  </TextLink>
+                  .
+                </p>
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconIdCardRegular />}
+            title="How can I hire it?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It's a very agile process that you can access through the
+                money.movistar.es website. You can find more detailed information
+                about the process on our "How It Works" page.
+              </Text3>
+            }
+          />
+          <BoxedAccordionItem
+            asset={<IconLifeguardFloatRegular />}
+            title="What should I do if I don't receive the SMS with the contracting code?"
+            detail="Detail"
+            right={<Placeholder width={32} height={32} />}
+            content={
+              <Text3 color={colors.textSecondary}>
+                It may take a few minutes until you receive the SMS with the code. If
+                you still haven't received the code, you can request a new one by
+                clicking on "resend SMS."
+              </Text3>
+            }
+          />
+        </BoxedAccordion>
+        `,
     },
 ];
 
@@ -2302,100 +2478,102 @@ const exampleScreens: Array<Snippet> = [
       setState("isSheetOpen", false);
     }}
   >
-    <ResponsiveLayout>
-      <Box paddingBottom={80} paddingTop={0}>
-        <Stack space={24}>
-          <Text4 medium>Summary of your order</Text4>
-          <Callout
-            asset={<IconTruckRegular color={colors.brand} />}
-            description="Products may be shipped separately depending on availability."
-          />
-
+    {({ modalTitleId }) => (
+      <SheetBody modalTitleId={modalTitleId}>
+        <Box paddingBottom={80} paddingTop={0}>
           <Stack space={24}>
-            <Stack space={8}>
-              <NegativeBox>
-                <RowList>
-                  <Row
-                    asset={
-                      <Image
-                        src="${imagePlaceholder}"
-                        height={64}
-                        aspectRatio="1:1"
-                      />
-                    }
-                    title="iPhone 14 Pro"
-                    subtitle="Color: Green"
-                    description="Capacity: 256 GB"
-                    right={
-                      <div
-                        style={{
-                          height: "100%",
-                          display: "flex",
-                          alignItems: "flex-end",
-                          justifyContent: "center",
-                          flexDirection: "column",
-                        }}
-                      >
-                        <Text2 color={colors.textSecondary}>1.379 €</Text2>
-                        <Text4 medium>1.379 €</Text4>
-                      </div>
-                    }
-                  />
-                  <Row
-                    asset={
-                      <Image
-                        src="${imagePlaceholder}"
-                        height={64}
-                        aspectRatio="1:1"
-                      />
-                    }
-                    title="AirPods 3ª gen."
-                    subtitle="Color: White"
-                    right={
-                      <div
-                        style={{
-                          height: "100%",
-                          display: "flex",
-                          alignItems: "flex-end",
-                          justifyContent: "center",
-
-                          flexDirection: "column",
-                        }}
-                      >
-                        <Text4 medium>200 €</Text4>
-                      </div>
-                    }
-                  />
-                </RowList>
-              </NegativeBox>
+            <Text4 medium>Summary of your order</Text4>
+            <Callout
+              asset={<IconTruckRegular color={colors.brand} />}
+              description="Products may be shipped separately depending on availability."
+            />
+
+            <Stack space={24}>
+              <Stack space={8}>
+                <NegativeBox>
+                  <RowList>
+                    <Row
+                      asset={
+                        <Image
+                          src="${imagePlaceholder}"
+                          height={64}
+                          aspectRatio="1:1"
+                        />
+                      }
+                      title="iPhone 14 Pro"
+                      subtitle="Color: Green"
+                      description="Capacity: 256 GB"
+                      right={
+                        <div
+                          style={{
+                            height: "100%",
+                            display: "flex",
+                            alignItems: "flex-end",
+                            justifyContent: "center",
+                            flexDirection: "column",
+                          }}
+                        >
+                          <Text2 color={colors.textSecondary}>1.379 €</Text2>
+                          <Text4 medium>1.379 €</Text4>
+                        </div>
+                      }
+                    />
+                    <Row
+                      asset={
+                        <Image
+                          src="${imagePlaceholder}"
+                          height={64}
+                          aspectRatio="1:1"
+                        />
+                      }
+                      title="AirPods 3ª gen."
+                      subtitle="Color: White"
+                      right={
+                        <div
+                          style={{
+                            height: "100%",
+                            display: "flex",
+                            alignItems: "flex-end",
+                            justifyContent: "center",
+
+                            flexDirection: "column",
+                          }}
+                        >
+                          <Text4 medium>200 €</Text4>
+                        </div>
+                      }
+                    />
+                  </RowList>
+                </NegativeBox>
+                <Divider />
+              </Stack>
+              <Stack space={16}>
+                <Inline space="between">
+                  <Text3>Subtotal</Text3>
+                  <Text3>1.369 €</Text3>
+                </Inline>
+                <Inline space="between">
+                  <Text3 color={colors.promoHigh}>Promoción 7% descuento</Text3>
+                  <Text3 color={colors.promoHigh}>-100 €</Text3>
+                </Inline>
+                <Inline space="between">
+                  <Text3>Shipping costs</Text3>
+                  <Text3>0 €</Text3>
+                </Inline>
+              </Stack>
               <Divider />
-            </Stack>
-            <Stack space={16}>
-              <Inline space="between">
-                <Text3>Subtotal</Text3>
-                <Text3>1.369 €</Text3>
-              </Inline>
-              <Inline space="between">
-                <Text3 color={colors.promoHigh}>Promoción 7% descuento</Text3>
-                <Text3 color={colors.promoHigh}>-100 €</Text3>
-              </Inline>
-              <Inline space="between">
-                <Text3>Shipping costs</Text3>
-                <Text3>0 €</Text3>
-              </Inline>
-            </Stack>
-            <Divider />
-            <Stack space={8}>
-              <Inline space="between">
-                <Text4 medium>Total</Text4>
-                <Text4 medium>1.269 €</Text4>
-              </Inline>
-              <Text1 color={colors.textSecondary}>* All taxes included</Text1>
+              <Stack space={8}>
+                <Inline space="between">
+                  <Text4 medium>Total</Text4>
+                  <Text4 medium>1.269 €</Text4>
+                </Inline>
+                <Text1 color={colors.textSecondary}>* All taxes included</Text1>
+              </Stack>
             </Stack>
           </Stack>
-        </Stack>
       </Box>
-    </ResponsiveLayout>
+      </SheetBody>
+    )}
   </Sheet>
 )}
 
@@ -2408,33 +2586,278 @@ const navigationBarSnippets = [
         group: 'NavigationBar',
         name: 'MainNavigationBar',
         code: `
-<MainNavigationBar
-  sections={["Start", "Account", "Explore", "Support"].map((title, idx) => ({
-    title,
-    onPress: () => setState("index", idx),
-  }))}
-  selectedIndex={getState("index", 0)}
-  right={
-    <NavigationBarActionGroup>
-      <NavigationBarAction
-        onPress={() => {}}
-        aria-label="shopping cart with 2 items"
-      >
-        <Badge value={2}>
-          <IconShoppingCartRegular color="currentColor" />
-        </Badge>
-      </NavigationBarAction>
-      <NavigationBarAction onPress={() => {}} aria-label="Open profile">
-        <Avatar
-          size={isDesktopOrBigger ? 32 : 24}
-          initials="ML"
-          src="${imagePlaceholder}"
-        />
-        {isDesktopOrBigger && "María López Serrano"}
-      </NavigationBarAction>
-    </NavigationBarActionGroup>
-  }
-/>`,
+          <MainNavigationBar
+            sections={[
+              {
+                title: "Start",
+                onPress: () => setState("index", 0),
+              },
+              {
+                title: "Account",
+                onPress: () => setState("index", 1),
+              },
+              {
+                title: "Explore",
+                onPress: () => setState("index", 2),
+              },
+              {
+                title: "Support",
+                onPress: () => setState("index", 3),
+              },
+            ]}
+            selectedIndex={getState("index", 0)}
+            right={
+              <NavigationBarActionGroup>
+                <NavigationBarAction
+                  onPress={() => {}}
+                  aria-label="shopping cart with 2 items"
+                >
+                  <Badge value={2}>
+                    <IconShoppingCartRegular color="currentColor" />
+                  </Badge>
+                </NavigationBarAction>
+                <NavigationBarAction onPress={() => {}} aria-label="Open profile">
+                  <Avatar
+                    size={isDesktopOrBigger ? 32 : 24}
+                    initials="ML"
+                    src="${imagePlaceholder}"
+                  />
+                  {isDesktopOrBigger && "María López Serrano"}
+                </NavigationBarAction>
+              </NavigationBarActionGroup>
+            }
+          />`,
+    },
+    {
+        group: 'NavigationBar',
+        name: 'MainNavigationBar with menu',
+        code: `
+          <MainNavigationBar
+            sections={[
+              {
+                onPress: () => setState("index", 0),
+                title: "Start",
+                menu: {
+                  columns: [
+                    {
+                      title: "Start 1",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                        {
+                          title: "item 2",
+                          href: "https://www.google.com/",
+                        },
+                        {
+                          title: "item 3",
+                          to: "#",
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+              {
+                onPress: () => setState("index", 1),
+                title: "Account",
+                menu: {
+                  columns: [
+                    {
+                      title: "Account 1",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+              {
+                onPress: () => setState("index", 2),
+                title: "Explore",
+                menu: {
+                  columns: [
+                    {
+                      title: "Explore 1",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                        {
+                          title: "item 2",
+                          href: "https://www.google.com/",
+                        },
+                        {
+                          title: "item 3",
+                          to: "#",
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+            ]}
+            selectedIndex={getState("index", 0)}
+          />`,
+    },
+    {
+        group: 'NavigationBar',
+        name: 'MainNavigationBar with large menu',
+        code: `
+          <MainNavigationBar
+            desktopLargeMenu
+            sections={[
+              {
+                onPress: () => setState("index", 0),
+                title: "Start",
+                menu: {
+                  columns: [
+                    {
+                      title: "Start 1",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                        {
+                          title: "item 2",
+                          href: "https://www.google.com/",
+                        },
+                        {
+                          title: "item 3",
+                          to: "#",
+                        },
+                      ],
+                    },
+                    {
+                      title: "Start 2",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                        {
+                          title: "item 2",
+                          href: "https://www.google.com/",
+                        },
+                        {
+                          title: "item 3",
+                          to: "#",
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+              {
+                onPress: () => setState("index", 1),
+                title: "Account",
+                menu: {
+                  columns: [
+                    {
+                      title: "Account 1",
+                      items: [
+                        {
+                          title: "item 1",
+                          onPress: () => {},
+                        },
+                      ],
+                    },
+                  ],
+                },
+              },
+              {
+                onPress: () => setState("index", 2),
+                title: "Explore",
+                menu: {
+                  content: ({ closeMenu }) => (
+                    <Stack space={16}>
+                      <Text2 regular>Custom content</Text2>
+                      <Placeholder />
+                      <ButtonPrimary onPress={closeMenu}>Close menu</ButtonPrimary>
+                    </Stack>
+                  ),
+                },
+              },
+              {
+                onPress: () => setState("index", 3),
+                title: "Support",
+                menu: {
+                  content: isDesktopOrBigger ? (
+                    <Grid columns={12} gap={24}>
+                      {Array.from({ length: 3 }, (_, index) => (
+                        <GridItem columnSpan={2} key={index}>
+                          <Stack space={24}>
+                            <Title1>Contenidos</Title1>
+                            <Stack space={16}>
+                              {[
+                                "Destacados",
+                                "Todo fútbol",
+                                "#0",
+                                "Cine",
+                                "Oferta comercial",
+                                "Mi Movistar",
+                                "Movistar Cloud",
+                              ].map((title, index) => (
+                                <TextLink
+                                  key={index}
+                                  onPress={() => {}}
+                                  style={{ color: colors.textPrimary }}
+                                >
+                                  {title}
+                                </TextLink>
+                              ))}
+                            </Stack>
+                          </Stack>
+                        </GridItem>
+                      ))}
+
+                      <GridItem columnSpan={5} columnStart={8}>
+                        <DisplayMediaCard
+                          headline={<Tag type="promo">Oferta</Tag>}
+                          title="Movistar Plus+"
+                          onPress={() => {}}
+                          description="Contrata solo TV por 9,99 €"
+                          backgroundImage="${imagePlaceholder}"
+                        />
+                      </GridItem>
+                    </Grid>
+                  ) : (
+                    <Stack space={40}>
+                      {Array.from({ length: 3 }, (_, index) => (
+                        <Stack space={16} key={index}>
+                          <Title1>Title</Title1>
+                          <NegativeBox>
+                            <RowList>
+                              <Row title="Title" onPress={() => {}} />
+                              <Row title="Title" onPress={() => {}} />
+                              <Row title="Title" onPress={() => {}} />
+                              <Row title="Title" onPress={() => {}} />
+                            </RowList>
+                          </NegativeBox>
+                        </Stack>
+                      ))}
+
+                      <DisplayMediaCard
+                        headline={<Tag type="promo">Oferta</Tag>}
+                        title="Movistar Plus+"
+                        aspectRatio="1:1"
+                        onPress={() => {}}
+                        description="Contrata solo TV por 9,99 €"
+                        backgroundImage="${imagePlaceholder}"
+                      />
+                    </Stack>
+                  ),
+                },
+              },
+            ]}
+            selectedIndex={getState("index", 0)}
+          />`,
     },
     {
         group: 'NavigationBar',
@@ -2804,14 +3227,13 @@ const alertSnippets = [
       setState("isSheetOpen", false);
     }}
   >
-    <ResponsiveLayout>
-      <Box
-        paddingBottom={{ mobile: 16, desktop: 40 }}
-        paddingTop={{ mobile: 0, desktop: 40 }}
-      >
-        <Placeholder />
-      </Box>
-    </ResponsiveLayout>
+    {({ modalTitleId }) => (
+      <SheetBody modalTitleId={modalTitleId}>
+        <Box paddingBottom={{ mobile: 16, desktop: 0 }}>
+          <Placeholder />
+        </Box>
+      </SheetBody>
+    )}
   </Sheet>
 )}`,
     },
@@ -3721,6 +4143,24 @@ const ratingSnippets: Array<Snippet> = [
     },
 ];
 
+const meterSnippets: Array<Snippet> = [
+    {
+        group: 'Meter',
+        name: 'Meter Linear',
+        code: '<Meter width={200} type="linear" values={[33, 33, 0]} />',
+    },
+    {
+        group: 'Meter',
+        name: 'Meter Angular',
+        code: '<Meter width={200} type="angular" values={[33, 33, 0]} />',
+    },
+    {
+        group: 'Meter',
+        name: 'Meter Circular',
+        code: '<Meter width={200} type="circular" values={[33, 33, 0]} />',
+    },
+];
+
 export default [
     ...buttonSnippets,
     ...formSnippets,
@@ -3767,6 +4207,7 @@ export default [
     ...sliderSnippets,
     ...cardSnippets,
     ...exampleScreens,
+    ...meterSnippets,
     {
         group: 'Progress',
         name: 'Stepper',
diff --git a/src/__private_stories__/sheet-presets-story.tsx b/src/__private_stories__/sheet-presets-story.tsx
index 1aa0eaab0f..f72e671c97 100644
--- a/src/__private_stories__/sheet-presets-story.tsx
+++ b/src/__private_stories__/sheet-presets-story.tsx
@@ -215,6 +215,7 @@ ActionsList.argTypes = {
 
 type InfoSheetArgs = SheetArgs & {
     numItems: number;
+    buttonText: string;
     iconType: 'bullet' | 'regular' | 'small';
 };
 
@@ -222,6 +223,7 @@ export const Info: StoryComponent<InfoSheetArgs> = ({
     title,
     subtitle,
     description,
+    buttonText,
     multiparagraphDescription,
     numItems,
     iconType,
@@ -246,6 +248,7 @@ export const Info: StoryComponent<InfoSheetArgs> = ({
                     onClose={() => {
                         setOpen(false);
                     }}
+                    button={buttonText ? {text: buttonText} : undefined}
                     title={title}
                     subtitle={subtitle}
                     description={
@@ -276,6 +279,7 @@ Info.storyName = 'InfoSheet';
 Info.args = {
     title: 'Title',
     subtitle: 'Subtitle',
+    buttonText: '',
     description: 'Description',
     numItems: 5,
     iconType: 'bullet',
diff --git a/src/__private_stories__/skin-components-story.tsx b/src/__private_stories__/skin-components-story.tsx
index 0d1feef45c..4a07528dda 100644
--- a/src/__private_stories__/skin-components-story.tsx
+++ b/src/__private_stories__/skin-components-story.tsx
@@ -51,6 +51,7 @@ import {
     Placeholder,
     NegativeBox,
     IconInvoicePlanFileRegular,
+    Meter,
 } from '..';
 import avatarImg from '../__stories__/images/avatar.jpg';
 import usingVrImg from '../__stories__/images/using-vr.jpg';
@@ -315,6 +316,28 @@ export const Default: StoryComponent<Args> = ({variant}) => {
                             steps={['First', 'Second', 'Third', 'Fourth', 'Fifth']}
                         />
 
+                        {/** Meter */}
+                        <Inline space={16}>
+                            <Meter
+                                width={200}
+                                type="linear"
+                                values={[30, 30, 0]}
+                                arial-label="linear meter"
+                            />
+                            <Meter
+                                width={200}
+                                type="angular"
+                                values={[30, 30, 0]}
+                                arial-label="angular meter"
+                            />
+                            <Meter
+                                width={200}
+                                type="circular"
+                                values={[30, 30, 0]}
+                                arial-label="circular meter"
+                            />
+                        </Inline>
+
                         {/** TextLink */}
                         <TextLink onPress={() => {}}>This is a text link</TextLink>
                     </ComponentsGroup>
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-false-over-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-false-over-inverse-false-1-snap.png
new file mode 100644
index 0000000000..83be4e1532
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-false-over-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-false-1-snap.png
new file mode 100644
index 0000000000..e5f0dbd98a
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-true-1-snap.png
new file mode 100644
index 0000000000..c175fa6e7e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-detail-right-true-over-inverse-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-false-over-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-false-over-inverse-false-1-snap.png
new file mode 100644
index 0000000000..6ffb3aa038
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-false-over-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-true-over-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-true-over-inverse-false-1-snap.png
new file mode 100644
index 0000000000..3f0975b191
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-detail-right-true-over-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-1-snap.png
deleted file mode 100644
index a245324914..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-2-snap.png
deleted file mode 100644
index 33601d356b..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-false-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-1-snap.png
deleted file mode 100644
index a245324914..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-2-snap.png
deleted file mode 100644
index c701e1858e..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-false-single-open-true-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-1-snap.png
deleted file mode 100644
index 15f2510543..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-2-snap.png
deleted file mode 100644
index 3eb96c3fa1..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-false-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-1-snap.png
deleted file mode 100644
index 15f2510543..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-2-snap.png
deleted file mode 100644
index b1490666bb..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-inverse-true-single-open-true-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-1-snap.png
new file mode 100644
index 0000000000..dfc02b702e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-2-snap.png
new file mode 100644
index 0000000000..6ffb3aa038
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-1-snap.png
new file mode 100644
index 0000000000..dfc02b702e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-2-snap.png
new file mode 100644
index 0000000000..6d6ce641fc
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-false-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-1-snap.png
new file mode 100644
index 0000000000..6b109fb53e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-2-snap.png
new file mode 100644
index 0000000000..7009adf376
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-1-snap.png
new file mode 100644
index 0000000000..6b109fb53e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-2-snap.png
new file mode 100644
index 0000000000..db63f224d7
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-accordion-over-inverse-true-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-false-1-snap.png
new file mode 100644
index 0000000000..b6edf7d834
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-true-1-snap.png
new file mode 100644
index 0000000000..8d7a79b18d
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-detail-right-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-false-1-snap.png
new file mode 100644
index 0000000000..99fda83712
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-true-1-snap.png
new file mode 100644
index 0000000000..95546ea764
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-detail-right-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-1-snap.png
new file mode 100644
index 0000000000..e48f81a0a6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-2-snap.png
new file mode 100644
index 0000000000..99fda83712
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-1-snap.png
new file mode 100644
index 0000000000..e48f81a0a6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-2-snap.png
new file mode 100644
index 0000000000..d304355baa
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-false-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-1-snap.png
new file mode 100644
index 0000000000..a4a6294c83
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-2-snap.png
new file mode 100644
index 0000000000..488443934b
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-1-snap.png
new file mode 100644
index 0000000000..a4a6294c83
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-2-snap.png
new file mode 100644
index 0000000000..e17326bc13
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-over-inverse-true-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-1-snap.png
deleted file mode 100644
index 92fdec3a90..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-2-snap.png
deleted file mode 100644
index 7626ff2c36..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-false-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-1-snap.png
deleted file mode 100644
index 92fdec3a90..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-2-snap.png
deleted file mode 100644
index 42c3863989..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-false-single-open-true-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-1-snap.png
new file mode 100644
index 0000000000..b719b3e99a
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-2-snap.png
new file mode 100644
index 0000000000..95844db292
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-1-snap.png
new file mode 100644
index 0000000000..b719b3e99a
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-2-snap.png
new file mode 100644
index 0000000000..059044441a
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-false-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-1-snap.png
new file mode 100644
index 0000000000..7843c19bc1
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-2-snap.png
similarity index 53%
rename from src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-2-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-2-snap.png
index 026d797638..e40ae6ef7b 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-1-snap.png
new file mode 100644
index 0000000000..7843c19bc1
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-2-snap.png
new file mode 100644
index 0000000000..7201907771
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-over-inverse-true-single-open-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-1-snap.png
deleted file mode 100644
index de75142b29..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-false-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-1-snap.png
deleted file mode 100644
index de75142b29..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-2-snap.png
deleted file mode 100644
index 93fa7f2fad..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/accordion-screenshot-test-tsx-boxed-accordion-inverse-true-single-open-true-2-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-with-chevron-and-big-font-size-in-vivo-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-with-chevron-and-big-font-size-in-vivo-1-snap.png
index 13f430503b..19429f5e73 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-with-chevron-and-big-font-size-in-vivo-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-with-chevron-and-big-font-size-in-vivo-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-with-chevron-in-vivo-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-with-chevron-in-vivo-1-snap.png
index 889e93b9b9..3b0cfb0577 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-with-chevron-in-vivo-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-with-chevron-in-vivo-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-1-snap.png
index eaab3c4087..a4e49fb1ca 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-2-snap.png
index cc84d22bbe..09c78a5f2e 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/carousel-screenshot-test-tsx-carousel-mobile-in-vivo-new-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-false-1-snap.png
index 6381b030cb..e271daf34e 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-true-1-snap.png
index bbb08be9bc..2763776250 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-false-disabled-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-true-disabled-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-true-disabled-false-1-snap.png
index 890a2e3865..0cc20df814 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-true-disabled-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-0-max-4-default-value-0-removable-true-disabled-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-false-1-snap.png
index dcd0747d0b..e17efbe710 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-true-1-snap.png
index 85de44187a..021ed2429d 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-false-disabled-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-true-disabled-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-true-disabled-true-1-snap.png
index f1baea479c..df86ad95cb 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-true-disabled-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/counter-screenshot-test-tsx-counter-min-3-max-4-default-value-3-removable-true-disabled-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png
index 086efbcf60..60026b6eaf 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png
index 9a37b8e240..bf6f05bd01 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-success-feedback-screen-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-0-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-0-1-snap.png
new file mode 100644
index 0000000000..b821f456a7
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-0-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-100-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-100-1-snap.png
new file mode 100644
index 0000000000..e9c3b1be08
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-100-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-20-20-20-20-0-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-20-20-20-20-0-1-snap.png
new file mode 100644
index 0000000000..4aeedb633f
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-20-20-20-20-0-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-33-33-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-33-33-1-snap.png
new file mode 100644
index 0000000000..54ff5ecdf3
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-angular-33-33-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-0-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-0-1-snap.png
new file mode 100644
index 0000000000..dbc29a2116
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-0-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-100-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-100-1-snap.png
new file mode 100644
index 0000000000..010c50f2c1
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-100-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-20-20-20-20-0-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-20-20-20-20-0-1-snap.png
new file mode 100644
index 0000000000..22bd931cc1
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-20-20-20-20-0-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-33-33-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-33-33-1-snap.png
new file mode 100644
index 0000000000..a4240b7d65
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-circular-33-33-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-0-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-0-1-snap.png
new file mode 100644
index 0000000000..b5ef63caa4
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-0-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-100-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-100-1-snap.png
new file mode 100644
index 0000000000..e870eb2965
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-100-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-20-20-20-20-0-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-20-20-20-20-0-1-snap.png
new file mode 100644
index 0000000000..fa9f6be23e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-20-20-20-20-0-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-33-33-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-33-33-1-snap.png
new file mode 100644
index 0000000000..2313ac1c1b
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-default-linear-33-33-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-inverse-angular-33-33-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-inverse-angular-33-33-1-snap.png
new file mode 100644
index 0000000000..7b599e3aa0
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-inverse-angular-33-33-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-inverse-circular-33-33-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-inverse-circular-33-33-1-snap.png
new file mode 100644
index 0000000000..2e772fd4f8
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-inverse-circular-33-33-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-inverse-linear-33-33-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-inverse-linear-33-33-1-snap.png
new file mode 100644
index 0000000000..3d946a3433
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-inverse-linear-33-33-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-media-angular-33-33-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-media-angular-33-33-1-snap.png
new file mode 100644
index 0000000000..d1360aad72
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-media-angular-33-33-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-media-circular-33-33-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-media-circular-33-33-1-snap.png
new file mode 100644
index 0000000000..ecd87d59ae
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-media-circular-33-33-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-media-linear-33-33-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-media-linear-33-33-1-snap.png
new file mode 100644
index 0000000000..2d7067ee7b
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/meter-screenshot-test-tsx-meter-media-linear-33-33-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-inverse-with-large-menu-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-inverse-with-large-menu-in-desktop-1-snap.png
new file mode 100644
index 0000000000..aafd7f2020
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-inverse-with-large-menu-in-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-inverse-with-small-menu-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-inverse-with-small-menu-in-desktop-1-snap.png
new file mode 100644
index 0000000000..50dfa6d59f
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-inverse-with-small-menu-in-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-1-snap.png
new file mode 100644
index 0000000000..920046b835
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-2-snap.png
new file mode 100644
index 0000000000..4fc1fa999c
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-3-snap.png
new file mode 100644
index 0000000000..acae5014aa
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-custom-content-in-desktop-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-1-snap.png
new file mode 100644
index 0000000000..f9859c263f
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-2-snap.png
new file mode 100644
index 0000000000..d7d6f827b3
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-3-snap.png
new file mode 100644
index 0000000000..02590d3be7
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-large-menu-and-default-content-in-desktop-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-1-snap.png
new file mode 100644
index 0000000000..14a114c887
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-2-snap.png
new file mode 100644
index 0000000000..3fe86cb96d
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-3-snap.png
new file mode 100644
index 0000000000..f4b7bfcc0f
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-4-snap.png
new file mode 100644
index 0000000000..44fbc84a4d
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-custom-content-in-mobile-ios-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-1-snap.png
new file mode 100644
index 0000000000..569adf6b43
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-2-snap.png
new file mode 100644
index 0000000000..3fe86cb96d
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-3-snap.png
new file mode 100644
index 0000000000..3f4a56de1d
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-4-snap.png
new file mode 100644
index 0000000000..44fbc84a4d
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-menu-and-default-content-in-mobile-ios-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-1-snap.png
new file mode 100644
index 0000000000..dc011a1074
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-2-snap.png
new file mode 100644
index 0000000000..eb52819bf6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-3-snap.png
new file mode 100644
index 0000000000..02590d3be7
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-custom-content-in-desktop-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-default-content-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-default-content-in-desktop-1-snap.png
new file mode 100644
index 0000000000..8988bfb7ef
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-default-content-in-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-default-content-in-desktop-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-default-content-in-desktop-2-snap.png
new file mode 100644
index 0000000000..2276be60bf
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-default-content-in-desktop-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-default-content-in-desktop-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-default-content-in-desktop-3-snap.png
new file mode 100644
index 0000000000..02590d3be7
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-with-small-menu-and-default-content-in-desktop-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-3-snap.png
index cea6117e8a..328721ec6c 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-alternative-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-alternative-3-snap.png
index aac9ddf92d..dc7af795ab 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-alternative-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-alternative-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-dark-mode-3-snap.png
index f9029ca56b..547f931dcd 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-3-snap.png
index 0f83c2e424..121cda6250 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-4-snap.png
index 16f2decc76..265406cca0 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-4-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-3-snap.png
index b1d918593f..300f21e405 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-and-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-3-snap.png
index c95e6ddf3b..9a41ce9a65 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-1-snap.png
index 9265f6c059..b1f983738e 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-3-snap.png
index 6e1f26c7c2..afd286ad98 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-alternative-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-3-snap.png
index f2f358d650..0329236296 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-1-snap.png
index f1591598a5..747ced21d1 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-3-snap.png
index f57528c0a8..8272268c78 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-3-snap.png
index d27b9d3e10..13abe38cfb 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-and-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-3-snap.png
index 123e528efb..39fa3e5ebd 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-3-snap.png
index bd0620f440..4406fd9594 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-alternative-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-3-snap.png
index e6101adf93..ff207a137b 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-3-snap.png
index 80be1de25e..878b9a4a90 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-3-snap.png
index 0dfc2e7b9e..2757b91404 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-and-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-3-snap.png
index 70917892ca..23fb830047 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-alternative-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-alternative-3-snap.png
index 0344b1c610..bbeadc1c64 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-alternative-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-alternative-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-dark-mode-3-snap.png
index fcc8074840..498cfecbfa 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png
index cf63ba861e..b1882a61aa 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-3-snap.png
index 3d96d2e61d..35ba39d8cb 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-4-snap.png
index 0ad09a9ba2..0f9cae6f11 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-4-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-3-snap.png
index 5c6f62c07d..0217ab0496 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-and-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-3-snap.png
index fc100da15a..fe41d1ae9f 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-3-snap.png
index bede1f6607..4898c28c32 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-dark-mode-3-snap.png
index 12937e374e..81f27687fd 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-3-snap.png
index 0a4d326dc4..95eea61457 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-3-snap.png
index 7a3e407290..2ec005423a 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-and-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-3-snap.png
index cb5d48e407..f983c3794d 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-alternative-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-alternative-3-snap.png
index 0bcfdc8d25..cb90bd393a 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-alternative-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-alternative-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-dark-mode-3-snap.png
index 6125055bb9..297e140381 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-3-snap.png
index c4a0b1a1fc..8aa6178d95 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-3-snap.png
index c5c579c041..e1bbcacd8d 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-and-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-1-snap.png
index 14c594da53..23acc486d6 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-2-snap.png
index 08b610a9db..63044ffdcc 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-3-snap.png
index 74119eadd0..78a37dd9c1 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-4-snap.png
index c70bbac2d9..f0eb1eced3 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-4-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-1-snap.png
index 12a21ea7cd..7dd1b7b3b4 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-2-snap.png
index 43b64d4164..4f0e63507b 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-3-snap.png
index c905125369..68aed81f5a 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-4-snap.png
index a2c2a0759a..ba80bad9b1 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-4-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-alternative-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-1-snap.png
index 3212c0deaf..0f56ed8c97 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-2-snap.png
index f02f9812f8..f4395cd2d2 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-3-snap.png
index 3d8309abf8..046f9724ad 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-4-snap.png
index 4342f4e778..5ccdb83f4b 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-4-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-dark-mode-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-1-snap.png
index d5e91548ca..4a46b37795 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png
index 2aa1dc9e0e..608335c998 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-3-snap.png
index 5adcb18c89..30f599a46e 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-4-snap.png
index 8abd3df38c..7c2b40eef3 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-4-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-1-snap.png
index 3a892cb459..e14504ddc9 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap.png
index c9d887db9f..fdb6d9bb36 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-3-snap.png
index 420f10209f..0a50dbf381 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-4-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-4-snap.png
index 96b4c692e5..d2a8a04823 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-4-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-and-dark-mode-4-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-desktop-1-snap.png
index 885efdc7c0..e0d409e2e8 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-mobile-ios-1-snap.png
index d68bf19184..9855ce0aa9 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-mobile-ios-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-text-preset-vars-screenshot-test-tsx-text-presets-as-css-vars-in-vivo-new-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-in-desktop-1-snap.png
index 3c8a46a9e5..567a9546a1 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-in-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-in-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-in-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-in-mobile-ios-1-snap.png
index cda7ca9370..83c2cf6783 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-in-mobile-ios-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-in-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-dismiss-button-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-dismiss-button-in-desktop-1-snap.png
new file mode 100644
index 0000000000..e73641e6c3
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-dismiss-button-in-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-dismiss-button-in-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-dismiss-button-in-mobile-ios-1-snap.png
new file mode 100644
index 0000000000..5796b63ec5
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-dismiss-button-in-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-multiple-description-paragraphs-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-multiple-description-paragraphs-1-snap.png
index 12abfebf6e..484a04a6a0 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-multiple-description-paragraphs-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-with-multiple-description-paragraphs-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-sheet-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-sheet-in-desktop-1-snap.png
index 4cdcb27583..18d6eb8040 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-sheet-in-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-sheet-in-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-sheet-in-large-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-sheet-in-large-desktop-1-snap.png
new file mode 100644
index 0000000000..b2fc4393a2
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-sheet-in-large-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-sheet-in-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-sheet-in-mobile-ios-1-snap.png
index 38589dd0d8..58ad8723bd 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-sheet-in-mobile-ios-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/sheet-screenshot-test-tsx-sheet-in-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-false-1-snap.png
index f06b5608ca..6077fc9674 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-true-1-snap.png
index faee300285..c4e34d8e2e 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-false-inverse-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-false-1-snap.png
index f20b3acf2d..fa88e240a8 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-true-1-snap.png
index ad29f701f3..8a61fa95e0 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-circle-stacked-true-inverse-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-false-1-snap.png
index 8b52cb1381..355bd89c60 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-true-1-snap.png
index 3b161cdc87..d44c79dd00 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-false-inverse-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-false-1-snap.png
index db5c00edf3..ba5756fc5b 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-false-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-true-1-snap.png
index 6b0753fe63..56ca2ba469 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-true-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/stacking-group-screenshot-test-tsx-stacking-group-type-square-stacked-true-inverse-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png
index 93825e35c7..7a065a17f2 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png
index e665ba133e..0820759478 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/success-feedback-screenshot-test-tsx-success-feedback-component-appears-properly-with-vivo-new-skin-on-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/tooltip-screenshot-test-tsx-tooltip-arrow-appears-properly-in-vivo-new-skin-when-target-is-close-to-viewport-edges-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/tooltip-screenshot-test-tsx-tooltip-arrow-appears-properly-in-vivo-new-skin-when-target-is-close-to-viewport-edges-1-snap.png
index bed16462ef..de2d7f2e76 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/tooltip-screenshot-test-tsx-tooltip-arrow-appears-properly-in-vivo-new-skin-when-target-is-close-to-viewport-edges-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/tooltip-screenshot-test-tsx-tooltip-arrow-appears-properly-in-vivo-new-skin-when-target-is-close-to-viewport-edges-1-snap.png differ
diff --git a/src/__screenshot_tests__/accordion-screenshot-test.tsx b/src/__screenshot_tests__/accordion-screenshot-test.tsx
index 346d4e9600..f2b53b4fb6 100644
--- a/src/__screenshot_tests__/accordion-screenshot-test.tsx
+++ b/src/__screenshot_tests__/accordion-screenshot-test.tsx
@@ -1,21 +1,17 @@
 import {openStoryPage, screen} from '../test-utils';
 
 test.each`
-    component            | inverse  | singleOpen
-    ${'Accordion'}       | ${false} | ${false}
-    ${'Accordion'}       | ${false} | ${true}
-    ${'Accordion'}       | ${true}  | ${false}
-    ${'Accordion'}       | ${true}  | ${true}
-    ${'Boxed accordion'} | ${false} | ${false}
-    ${'Boxed accordion'} | ${false} | ${true}
-    ${'Boxed accordion'} | ${true}  | ${false}
-    ${'Boxed accordion'} | ${true}  | ${true}
-`('$component. inverse($inverse) singleOpen($singleOpen)', async ({component, inverse, singleOpen}) => {
+    overInverse | singleOpen
+    ${false}    | ${false}
+    ${false}    | ${true}
+    ${true}     | ${false}
+    ${true}     | ${true}
+`('Accordion. overInverse($overInverse) singleOpen($singleOpen)', async ({overInverse, singleOpen}) => {
     await openStoryPage({
-        id: `components-accordions--${component.toLowerCase().replace(' ', '-')}-story`,
+        id: 'components-accordions--accordion-story',
         device: 'MOBILE_IOS',
         args: {
-            inverse,
+            overInverse,
             singleOpen,
         },
     });
@@ -32,3 +28,99 @@ test.each`
 
     expect(await accordion.screenshot()).toMatchImageSnapshot();
 });
+
+test.each`
+    inverse  | overInverse | singleOpen
+    ${false} | ${false}    | ${false}
+    ${false} | ${false}    | ${true}
+    ${false} | ${true}     | ${false}
+    ${false} | ${true}     | ${true}
+    ${true}  | ${false}    | ${false}
+    ${true}  | ${false}    | ${true}
+    ${true}  | ${true}     | ${false}
+    ${true}  | ${true}     | ${true}
+`(
+    'BoxedAccordion. inverse($inverse) overInverse($overInverse) singleOpen($singleOpen)',
+    async ({inverse, overInverse, singleOpen}) => {
+        await openStoryPage({
+            id: 'components-accordions--boxed-accordion-story',
+            device: 'MOBILE_IOS',
+            args: {
+                inverse,
+                overInverse,
+                singleOpen,
+            },
+        });
+
+        const accordion = await screen.findByTestId('accordion');
+
+        expect(await accordion.screenshot()).toMatchImageSnapshot();
+
+        await (await screen.findByTestId('accordion-item-1')).click();
+        await (await screen.findByTestId('accordion-item-1')).click();
+        await (await screen.findByTestId('accordion-item-2')).click();
+        await (await screen.findByTestId('accordion-item-4')).click();
+        await (await screen.findByTestId('accordion-item-6')).click();
+
+        expect(await accordion.screenshot()).toMatchImageSnapshot();
+    }
+);
+
+test.each`
+    detail      | right    | overInverse
+    ${''}       | ${false} | ${false}
+    ${''}       | ${true}  | ${false}
+    ${'Detail'} | ${false} | ${false}
+    ${'Detail'} | ${true}  | ${false}
+    ${'Detail'} | ${true}  | ${true}
+`(
+    'Accordion. detail($detail) right($right) overInverse($overInverse)',
+    async ({detail, right, overInverse}) => {
+        await openStoryPage({
+            id: 'components-accordions--accordion-story',
+            device: 'MOBILE_IOS',
+            args: {
+                detail,
+                right,
+                overInverse,
+            },
+        });
+
+        const accordion = await screen.findByTestId('accordion');
+
+        await (await screen.findByTestId('accordion-item-1')).click();
+        await (await screen.findByTestId('accordion-item-1')).click();
+        await (await screen.findByTestId('accordion-item-2')).click();
+        await (await screen.findByTestId('accordion-item-4')).click();
+        await (await screen.findByTestId('accordion-item-6')).click();
+
+        expect(await accordion.screenshot()).toMatchImageSnapshot();
+    }
+);
+
+test.each`
+    detail      | right
+    ${''}       | ${false}
+    ${''}       | ${true}
+    ${'Detail'} | ${false}
+    ${'Detail'} | ${true}
+`('BoxedAccordion. detail($detail) right($right)', async ({detail, right}) => {
+    await openStoryPage({
+        id: 'components-accordions--boxed-accordion-story',
+        device: 'MOBILE_IOS',
+        args: {
+            detail,
+            right,
+        },
+    });
+
+    const accordion = await screen.findByTestId('accordion');
+
+    await (await screen.findByTestId('accordion-item-1')).click();
+    await (await screen.findByTestId('accordion-item-1')).click();
+    await (await screen.findByTestId('accordion-item-2')).click();
+    await (await screen.findByTestId('accordion-item-4')).click();
+    await (await screen.findByTestId('accordion-item-6')).click();
+
+    expect(await accordion.screenshot()).toMatchImageSnapshot();
+});
diff --git a/src/__screenshot_tests__/meter-screenshot-test.tsx b/src/__screenshot_tests__/meter-screenshot-test.tsx
new file mode 100644
index 0000000000..e8cd4117ac
--- /dev/null
+++ b/src/__screenshot_tests__/meter-screenshot-test.tsx
@@ -0,0 +1,44 @@
+import {openStoryPage, screen} from '../test-utils';
+
+test.each`
+    values                 | type          | themeVariant
+    ${[0]}                 | ${'linear'}   | ${'default'}
+    ${[0]}                 | ${'circular'} | ${'default'}
+    ${[0]}                 | ${'angular'}  | ${'default'}
+    ${[100]}               | ${'linear'}   | ${'default'}
+    ${[100]}               | ${'circular'} | ${'default'}
+    ${[100]}               | ${'angular'}  | ${'default'}
+    ${[33, 33]}            | ${'linear'}   | ${'default'}
+    ${[33, 33]}            | ${'circular'} | ${'default'}
+    ${[33, 33]}            | ${'angular'}  | ${'default'}
+    ${[33, 33]}            | ${'linear'}   | ${'inverse'}
+    ${[33, 33]}            | ${'circular'} | ${'inverse'}
+    ${[33, 33]}            | ${'angular'}  | ${'inverse'}
+    ${[33, 33]}            | ${'linear'}   | ${'media'}
+    ${[33, 33]}            | ${'circular'} | ${'media'}
+    ${[33, 33]}            | ${'angular'}  | ${'media'}
+    ${[20, 20, 20, 20, 0]} | ${'linear'}   | ${'default'}
+    ${[20, 20, 20, 20, 0]} | ${'circular'} | ${'default'}
+    ${[20, 20, 20, 20, 0]} | ${'angular'}  | ${'default'}
+`('Meter $themeVariant $type $values', async ({themeVariant, values, type}) => {
+    await openStoryPage({
+        id: 'components-data-visualizations-meter--meter-story',
+        args: {
+            themeVariant,
+            width: 200,
+            type,
+            valuesCount: values.length,
+            ...values.reduce(
+                (acc: Array<number>, value: number, index: number) => ({
+                    ...acc,
+                    [`value${index + 1}`]: value,
+                }),
+                {}
+            ),
+        },
+    });
+
+    const stepper = await screen.findByTestId('Meter');
+    const image = await stepper.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
diff --git a/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx b/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx
index a79bc5cd75..0a6a0f9074 100644
--- a/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx
+++ b/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx
@@ -164,3 +164,67 @@ test.each(DEVICES)('MainNavigationBar without sections (%s)', async (device) =>
 
     expect(image).toMatchImageSnapshot();
 });
+
+test.each`
+    menuType   | content
+    ${'large'} | ${'default'}
+    ${'large'} | ${'custom'}
+    ${'small'} | ${'default'}
+    ${'small'} | ${'custom'}
+`('MainNavigationBar with $menuType menu and $content content in DESKTOP', async ({menuType, content}) => {
+    const page = await openStoryPage({
+        id: 'components-navigation-bars-mainnavigationbar--default',
+        device: 'DESKTOP',
+        args: {sections: true, desktopLargeMenu: menuType === 'large', menu: content},
+    });
+
+    // first section opened
+    await page.click(await screen.findByRole('button', {name: 'Start'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    // second section opened
+    await page.click(await screen.findByRole('button', {name: 'Account'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    // close menu with ESC key
+    await page.keyboard.press('Escape');
+    expect(await page.screenshot()).toMatchImageSnapshot();
+});
+
+test.each(['default', 'custom'])('MainNavigationBar with menu and %s content in MOBILE_IOS', async (menu) => {
+    const page = await openStoryPage({
+        id: 'components-navigation-bars-mainnavigationbar--default',
+        device: 'MOBILE_IOS',
+        args: {sections: true, menu},
+    });
+
+    await page.click(await screen.findByRole('button', {name: 'Abrir menú de navegación'}));
+
+    // open first section
+    await page.click(await screen.findByRole('button', {name: 'Start'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    // go back
+    await page.click(await screen.findByRole('button', {name: 'Atrás'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    // open second section
+    await page.click(await screen.findByRole('button', {name: 'Account'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+
+    // close menu
+    await page.click(await screen.findByRole('button', {name: 'Cerrar menú de navegación'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+});
+
+test.each(['large', 'small'])('MainNavigationBar inverse with %s menu in DESKTOP', async (menuType) => {
+    const page = await openStoryPage({
+        id: 'components-navigation-bars-mainnavigationbar--default',
+        device: 'DESKTOP',
+        args: {sections: true, desktopLargeMenu: menuType === 'large', menu: 'default', variant: 'inverse'},
+    });
+
+    // first section opened
+    await page.click(await screen.findByRole('button', {name: 'Start'}));
+    expect(await page.screenshot()).toMatchImageSnapshot({failureThreshold: 0.00001});
+});
diff --git a/src/__screenshot_tests__/sheet-screenshot-test.tsx b/src/__screenshot_tests__/sheet-screenshot-test.tsx
index c111790c3a..e06711c4de 100644
--- a/src/__screenshot_tests__/sheet-screenshot-test.tsx
+++ b/src/__screenshot_tests__/sheet-screenshot-test.tsx
@@ -3,7 +3,7 @@ import {openStoryPage, screen} from '../test-utils';
 const TESTABLE_DEVICES = ['MOBILE_IOS', 'DESKTOP'] as const;
 const TESTABLE_DEVICES_WITH_LARGE_DESKTOP = [...TESTABLE_DEVICES, 'LARGE_DESKTOP'] as const;
 
-test.each(TESTABLE_DEVICES)('Sheet in %s', async (device) => {
+test.each(TESTABLE_DEVICES_WITH_LARGE_DESKTOP)('Sheet in %s', async (device) => {
     const page = await openStoryPage({
         id: 'components-modals-sheet--default',
         device,
@@ -87,6 +87,23 @@ test('InfoSheet with multiple description paragraphs', async () => {
     expect(image).toMatchImageSnapshot();
 });
 
+test.each(TESTABLE_DEVICES)('InfoSheet with dismiss button in %s', async (device) => {
+    const page = await openStoryPage({
+        id: 'private-sheet-presets--info',
+        device,
+        args: {buttonText: 'Dismiss'},
+    });
+
+    const button = await screen.findByRole('button', {name: 'Open'});
+    await button.click();
+
+    await screen.findByRole('dialog');
+
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test.each(TESTABLE_DEVICES_WITH_LARGE_DESKTOP)('ActionsSheet in %s', async (device) => {
     const page = await openStoryPage({
         id: 'private-sheet-presets--actions',
diff --git a/src/__stories__/accordion-story.tsx b/src/__stories__/accordion-story.tsx
index c20d437ed1..eec2f44906 100644
--- a/src/__stories__/accordion-story.tsx
+++ b/src/__stories__/accordion-story.tsx
@@ -25,97 +25,103 @@ export default {
     parameters: {fullScreen: true},
 };
 
-type Args = {title: string; subtitle: string; singleOpen: boolean; inverse: boolean};
+type Args = {
+    title: string;
+    subtitle: string;
+    detail: string;
+    right: boolean;
+    singleOpen: boolean;
+    overInverse: boolean;
+};
+
+type BoxedArgs = Args & {inverse: boolean};
 
-const Template: StoryComponent<Args & {type?: 'boxed'}> = ({title, subtitle, singleOpen, inverse, type}) => {
+const Template: StoryComponent<BoxedArgs & {type?: 'boxed'}> = ({
+    title,
+    subtitle,
+    detail,
+    right,
+    singleOpen,
+    inverse,
+    overInverse,
+    type,
+}) => {
     const content = <Placeholder height={100} />;
 
     const AccordionComponent = type === 'boxed' ? BoxedAccordion : Accordion;
     const ItemComponent = type === 'boxed' ? BoxedAccordionItem : AccordionItem;
 
+    const getAccordionItemContentProps = () => {
+        return {
+            title,
+            subtitle,
+            content,
+            detail,
+            right: right ? (
+                <div style={{display: 'flex', alignItems: 'center', height: '100%'}}>
+                    <div style={{width: 32, height: 32, borderRadius: '50%', background: 'pink'}} />
+                </div>
+            ) : undefined,
+            ...(type === 'boxed' && {isInverse: inverse}),
+        };
+    };
+
     return (
-        <ResponsiveLayout fullWidth isInverse={inverse}>
+        <ResponsiveLayout fullWidth variant={overInverse ? 'inverse' : 'default'}>
             <Box padding={16}>
                 <AccordionComponent singleOpen={singleOpen} dataAttributes={{testid: 'accordion'}}>
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
-                        {...(type === 'boxed' && {isInverse: inverse})}
+                        {...getAccordionItemContentProps()}
                         dataAttributes={{testid: 'accordion-item-1'}}
                     />
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<IconThumbUpFilled size={24} />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-2'}}
                     />
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={
                             <Circle backgroundColor={skinVars.colors.brandLow} size={40}>
                                 <IconMobileDeviceRegular color={skinVars.colors.brand} />
                             </Circle>
                         }
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-3'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Circle size={40} backgroundImage={laptopImg} />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-4'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Image src={usingVrImg} height={80} aspectRatio="16:9" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-5'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Image src={personPortraitImg} width={80} aspectRatio="7:10" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-6'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Image src={touchImg} width={80} aspectRatio="1:1" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-7'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Avatar size={40} src={avatarImg} />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-8'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Avatar size={40} initials="MS" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-9'}}
                     />
                 </AccordionComponent>
@@ -127,14 +133,16 @@ const Template: StoryComponent<Args & {type?: 'boxed'}> = ({title, subtitle, sin
 const defaultArgs = {
     title: 'Title',
     subtitle: 'Subtitle',
+    detail: '',
+    right: false,
     singleOpen: false,
-    inverse: false,
+    overInverse: false,
 };
 
-export const AccordionStory: StoryComponent<Args> = (args) => <Template {...args} />;
+export const AccordionStory: StoryComponent<Args> = (args) => <Template inverse={false} {...args} />;
 AccordionStory.storyName = 'Accordion';
 AccordionStory.args = defaultArgs;
 
-export const BoxedAccordionStory: StoryComponent<Args> = (args) => <Template type="boxed" {...args} />;
+export const BoxedAccordionStory: StoryComponent<BoxedArgs> = (args) => <Template type="boxed" {...args} />;
 BoxedAccordionStory.storyName = 'BoxedAccordion';
-BoxedAccordionStory.args = defaultArgs;
+BoxedAccordionStory.args = {...defaultArgs, inverse: false};
diff --git a/src/__stories__/cover-hero-story.tsx b/src/__stories__/cover-hero-story.tsx
index 5a70572d78..4472f9e2c2 100644
--- a/src/__stories__/cover-hero-story.tsx
+++ b/src/__stories__/cover-hero-story.tsx
@@ -13,6 +13,7 @@ import usingVrImg from './images/using-vr.jpg';
 import beachImg from './images/beach.jpg';
 import beachVideo from './videos/beach.mp4';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 
 export default {
@@ -30,7 +31,9 @@ type Args = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     description: string;
     extra: boolean;
     sideExtra: boolean;
@@ -56,7 +59,9 @@ export const Default: StoryComponent<Args> = ({
     headlineType,
     headline,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     description,
     extra,
     sideExtra,
@@ -92,7 +97,9 @@ export const Default: StoryComponent<Args> = ({
             dataAttributes={{testid: 'cover-hero'}}
             headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
             pretitle={pretitle}
+            pretitleAs={pretitleAs}
             title={title}
+            titleAs={titleAs}
             description={description}
             extra={extra ? <Placeholder /> : undefined}
             sideExtra={sideExtra ? <Placeholder /> : undefined}
@@ -118,7 +125,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Hero',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h1',
     description: 'This is a long description with a long text to see how this works',
     extra: false,
     sideExtra: false,
@@ -197,6 +206,14 @@ Default.argTypes = {
             },
         },
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
 
 export const CoverHeroInSlideshow: StoryComponent = () => (
diff --git a/src/__stories__/data-card-story.tsx b/src/__stories__/data-card-story.tsx
index d0602c45ef..aeced7f28c 100644
--- a/src/__stories__/data-card-story.tsx
+++ b/src/__stories__/data-card-story.tsx
@@ -17,6 +17,7 @@ import {
 import {Placeholder} from '../placeholder';
 import avatarImg from './images/avatar.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {AspectRatio} from '../card';
 import type {TagType} from '..';
 
@@ -29,7 +30,9 @@ type DataCardArgs = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     subtitle: string;
     description: string;
     ariaLabel: string;
@@ -47,7 +50,9 @@ export const Default: StoryComponent<DataCardArgs> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     subtitle,
     description,
     ariaLabel,
@@ -99,7 +104,9 @@ export const Default: StoryComponent<DataCardArgs> = ({
             asset={assetElement}
             headline={headline && <Tag type={headlineType}>{headline}</Tag>}
             pretitle={pretitle}
+            pretitleAs={pretitleAs}
             title={title}
+            titleAs={titleAs}
             subtitle={subtitle}
             description={description}
             extra={extra ? <Placeholder /> : undefined}
@@ -142,7 +149,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
     extra: false,
@@ -177,6 +186,14 @@ Default.argTypes = {
             },
         },
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
 
 export const Group: StoryComponent = () => {
diff --git a/src/__stories__/display-data-card-story.tsx b/src/__stories__/display-data-card-story.tsx
index 8cd8a30ab3..bb44a1b516 100644
--- a/src/__stories__/display-data-card-story.tsx
+++ b/src/__stories__/display-data-card-story.tsx
@@ -20,6 +20,7 @@ import {
 import {Placeholder} from '../placeholder';
 import avatarImg from './images/avatar.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {AspectRatio} from '../card';
 import type {TagType} from '..';
 
@@ -32,7 +33,9 @@ type DisplayDataCardArgs = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     description: string;
     extra: boolean;
     closable: boolean;
@@ -57,7 +60,9 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     description,
     extra,
     actions = 'button',
@@ -141,7 +146,9 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
             asset={assetElement}
             headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
             pretitle={pretitle}
+            pretitleAs={pretitleAs}
             title={title}
+            titleAs={titleAs}
             description={description}
             aspectRatio={aspectRatioValue as AspectRatio}
             extra={extra ? <Placeholder /> : undefined}
@@ -158,7 +165,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     description: 'This is a description for the card',
     extra: false,
     actions: 'button',
@@ -201,6 +210,14 @@ Default.argTypes = {
             },
         },
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
 
 export const Group: StoryComponent = () => {
diff --git a/src/__stories__/display-media-card-story.tsx b/src/__stories__/display-media-card-story.tsx
index 42e6ae96f4..554717bf7a 100644
--- a/src/__stories__/display-media-card-story.tsx
+++ b/src/__stories__/display-media-card-story.tsx
@@ -23,6 +23,7 @@ import avatarImg from './images/avatar.jpg';
 import beachVideo from './videos/beach.mp4';
 import beachImg from './images/beach.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 
 export default {
@@ -39,7 +40,9 @@ type DisplayMediaCardArgs = {
     background: 'image' | 'video';
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     description: string;
     extra: boolean;
     closable: boolean;
@@ -65,7 +68,9 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
     headlineType,
     background,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     description,
     extra,
     actions = 'button',
@@ -153,7 +158,9 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
                     asset={assetElement}
                     headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
                     pretitle={pretitle}
+                    pretitleAs={pretitleAs}
                     title={title}
+                    titleAs={titleAs}
                     description={description}
                     {...interactiveActions}
                     aria-label="Display media card label"
@@ -174,7 +181,9 @@ Default.args = {
     background: 'image',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     description: 'This is a description for the card',
     extra: false,
     actions: 'button',
@@ -215,6 +224,14 @@ Default.argTypes = {
         options: ['1:1', '16:9', '7:10', '9:10', 'auto'],
         control: {type: 'select'},
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
 Default.parameters = {fullScreen: true};
 
diff --git a/src/__stories__/hero-story.tsx b/src/__stories__/hero-story.tsx
index 05b72ecc14..1cad9490ae 100644
--- a/src/__stories__/hero-story.tsx
+++ b/src/__stories__/hero-story.tsx
@@ -4,6 +4,7 @@ import usingVrImg from './images/using-vr.jpg';
 import beachImg from './images/beach.jpg';
 import beachVideo from './videos/beach.mp4';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 import type {AspectRatio} from '../video';
 
@@ -19,7 +20,9 @@ type HeroArgs = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     description: string;
     extra: boolean;
     actions: 'button' | 'link' | 'button and link';
@@ -36,7 +39,9 @@ export const Default: StoryComponent<HeroArgs> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     description,
     actions,
     desktopMediaPosition,
@@ -65,7 +70,9 @@ export const Default: StoryComponent<HeroArgs> = ({
             media={mediaComponent}
             headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
             pretitle={pretitle}
+            pretitleAs={pretitleAs}
             title={title}
+            titleAs={titleAs}
             description={description}
             extra={extra ? <Placeholder /> : undefined}
             button={button}
@@ -85,7 +92,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Hero',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h1',
     description: 'This is a long description with a long text to see how this works',
     extra: false,
     actions: 'button and link',
@@ -128,4 +137,12 @@ Default.argTypes = {
             },
         },
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
diff --git a/src/__stories__/main-navigation-bar-story.tsx b/src/__stories__/main-navigation-bar-story.tsx
index b570b2197c..1d632883fe 100644
--- a/src/__stories__/main-navigation-bar-story.tsx
+++ b/src/__stories__/main-navigation-bar-story.tsx
@@ -7,6 +7,8 @@ import {
     NavigationBarAction,
     NavigationBarActionGroup,
     Placeholder,
+    Stack,
+    Text3,
     useScreenSize,
 } from '..';
 import avatarImg from './images/avatar.jpg';
@@ -21,7 +23,7 @@ export default {
     },
 };
 
-const sectionTitles = ['Start', 'Account', 'Explore', 'Support'];
+const sectionTitles = ['Start', 'Account', 'Explore', 'Support'] as const;
 
 type Args = {
     variant: Variant;
@@ -29,20 +31,75 @@ type Args = {
     burgerMenuExtra: boolean;
     large: boolean;
     sections: boolean;
+    menu: 'undefined' | 'default' | 'custom';
+    desktopLargeMenu: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({variant, border, burgerMenuExtra, large, sections}) => {
+export const Default: StoryComponent<Args> = ({
+    variant,
+    border,
+    burgerMenuExtra,
+    large,
+    sections,
+    menu,
+    desktopLargeMenu,
+}) => {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const {isDesktopOrBigger} = useScreenSize();
+
+    const sectionDefaultMenuItemsCount = {
+        Start: 3,
+        Account: 1,
+        Explore: 2,
+        Support: 3,
+    };
+
     return (
         <MainNavigationBar
             variant={variant}
             large={large}
             withBorder={border}
             burgerMenuExtra={burgerMenuExtra ? <Placeholder /> : undefined}
+            desktopLargeMenu={desktopLargeMenu}
             sections={
                 sections
-                    ? sectionTitles.map((title, idx) => ({title, onPress: () => setSelectedIndex(idx)}))
+                    ? sectionTitles.map((title, idx) => ({
+                          title,
+                          onPress: () => setSelectedIndex(idx),
+                          menu:
+                              menu === 'undefined'
+                                  ? undefined
+                                  : menu === 'default'
+                                    ? {
+                                          title: `${title} menu`,
+                                          columns: Array.from(
+                                              {length: desktopLargeMenu ? 2 : 1},
+                                              (_, columnIndex) => ({
+                                                  title: `${title} ${columnIndex + 1}`,
+                                                  items: Array.from(
+                                                      {length: sectionDefaultMenuItemsCount[title]},
+                                                      (_, index) => ({
+                                                          title: `item ${index + 1}`,
+                                                          onPress: () => {},
+                                                      })
+                                                  ),
+                                              })
+                                          ),
+                                      }
+                                    : {
+                                          content: (
+                                              <Stack space={16}>
+                                                  <Text3 regular>{title} menu</Text3>
+                                                  {Array.from(
+                                                      {length: sectionDefaultMenuItemsCount[title]},
+                                                      (_, index) => (
+                                                          <Placeholder key={index} />
+                                                      )
+                                                  )}
+                                              </Stack>
+                                          ),
+                                      },
+                      }))
                     : undefined
             }
             selectedIndex={selectedIndex}
@@ -71,6 +128,8 @@ Default.args = {
     burgerMenuExtra: false,
     large: false,
     sections: true,
+    menu: 'undefined',
+    desktopLargeMenu: false,
 };
 
 Default.argTypes = {
@@ -78,4 +137,10 @@ Default.argTypes = {
         options: ['default', 'inverse', 'alternative'],
         control: {type: 'select'},
     },
+    menu: {
+        options: ['undefined', 'default', 'custom'],
+        control: {type: 'select'},
+        if: {arg: 'sections'},
+    },
+    desktopLargeMenu: {if: {arg: 'sections'}},
 };
diff --git a/src/__stories__/media-card-story.tsx b/src/__stories__/media-card-story.tsx
index 6fa815fe41..745abc95b7 100644
--- a/src/__stories__/media-card-story.tsx
+++ b/src/__stories__/media-card-story.tsx
@@ -21,6 +21,7 @@ import tennisImg from './images/tennis.jpg';
 import beachVideo from './videos/beach.mp4';
 import avatarImg from './images/avatar.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 
 export default {
@@ -36,7 +37,9 @@ type Args = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     subtitle: string;
     description: string;
     extra: boolean;
@@ -50,7 +53,9 @@ export const Default: StoryComponent<Args> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     subtitle,
     description,
     actions = 'button',
@@ -99,7 +104,9 @@ export const Default: StoryComponent<Args> = ({
             dataAttributes={{testid: 'media-card'}}
             headline={headline && <Tag type={headlineType}>{headline}</Tag>}
             pretitle={pretitle}
+            pretitleAs={pretitleAs}
             title={title}
+            titleAs={titleAs}
             subtitle={subtitle}
             description={description}
             asset={assetElement}
@@ -153,7 +160,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
     extra: false,
@@ -179,6 +188,14 @@ Default.argTypes = {
         options: ['button', 'link', 'button and link', 'onPress', 'href', 'to', 'none'],
         control: {type: 'select'},
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
 
 export const Group: StoryComponent = () => {
diff --git a/src/__stories__/meter-story.tsx b/src/__stories__/meter-story.tsx
new file mode 100644
index 0000000000..e594847306
--- /dev/null
+++ b/src/__stories__/meter-story.tsx
@@ -0,0 +1,127 @@
+import * as React from 'react';
+import {Box, Meter, ResponsiveLayout} from '..';
+import beachImg from './images/beach.jpg';
+
+import type {MeterType} from '../meter';
+
+export default {
+    title: 'Components/Data Visualizations/Meter',
+    argTypes: {
+        type: {
+            options: ['angular', 'circular', 'linear'] as Array<MeterType>,
+            control: {type: 'select'},
+        },
+        themeVariant: {
+            options: ['default', 'inverse', 'media'],
+            control: {type: 'select'},
+        },
+        valuesCount: {
+            control: {type: 'range', min: 1, max: 8, step: 1},
+        },
+        fullWidth: {
+            control: {type: 'boolean'},
+        },
+        width: {
+            if: {arg: 'fullWidth', eq: false},
+            control: {type: 'range', min: 64, max: 600, step: 1},
+        },
+        value1: {
+            control: {type: 'range', min: 0, max: 100, step: 1},
+        },
+        value2: {
+            control: {type: 'range', min: 0, max: 100, step: 1},
+        },
+        value3: {
+            control: {type: 'range', min: 0, max: 100, step: 1},
+        },
+        value4: {
+            control: {type: 'range', min: 0, max: 100, step: 1},
+        },
+        value5: {
+            control: {type: 'range', min: 0, max: 100, step: 1},
+        },
+        value6: {
+            control: {type: 'range', min: 0, max: 100, step: 1},
+        },
+        value7: {
+            control: {type: 'range', min: 0, max: 100, step: 1},
+        },
+        value8: {
+            control: {type: 'range', min: 0, max: 100, step: 1},
+        },
+    },
+    parameters: {
+        fullScreen: true,
+    },
+};
+
+type MeterStoryArgs = {
+    type: MeterType;
+    reverse: boolean;
+    ariaLabel: string;
+    themeVariant: 'default' | 'inverse' | 'media';
+    fullWidth: boolean;
+    width: number;
+    valuesCount: number;
+    value1: number;
+    value2: number;
+    value3: number;
+    value4: number;
+    value5: number;
+    value6: number;
+    value7: number;
+    value8: number;
+};
+
+export const MeterStory: StoryComponent<MeterStoryArgs> = ({
+    type,
+    reverse,
+    themeVariant,
+    valuesCount,
+    fullWidth,
+    width,
+    ariaLabel,
+    ...valuesArgs
+}) => {
+    const values = Object.values(valuesArgs).slice(0, valuesCount);
+    return (
+        <div
+            style={{
+                backgroundImage: themeVariant === 'media' ? `url(${beachImg})` : '',
+                backgroundPosition: 'center',
+                backgroundSize: 'cover',
+            }}
+        >
+            <ResponsiveLayout variant={themeVariant} fullWidth>
+                <Box padding={16}>
+                    <Meter
+                        aria-label={ariaLabel || undefined}
+                        type={type}
+                        reverse={reverse}
+                        values={values}
+                        width={fullWidth ? '100%' : width}
+                    />
+                </Box>
+            </ResponsiveLayout>
+        </div>
+    );
+};
+
+MeterStory.storyName = 'Meter';
+MeterStory.args = {
+    type: 'angular',
+    reverse: false,
+    ariaLabel: 'Meter example',
+    themeVariant: 'default',
+    fullWidth: false,
+    width: 400,
+    valuesCount: 8,
+    value1: 10,
+    value2: 10,
+    value3: 10,
+    value4: 10,
+    value5: 10,
+    value6: 10,
+    value7: 10,
+    value8: 10,
+};
diff --git a/src/__stories__/naked-card-story.tsx b/src/__stories__/naked-card-story.tsx
index cac8979fd8..e6b6d8c4da 100644
--- a/src/__stories__/naked-card-story.tsx
+++ b/src/__stories__/naked-card-story.tsx
@@ -23,6 +23,7 @@ import beachVideo from './videos/beach.mp4';
 import {SmallNakedCard} from '../card';
 import avatarImg from './images/avatar.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 
 export default {
@@ -41,7 +42,9 @@ type Args = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     subtitle: string;
     description: string;
     extra: boolean;
@@ -55,7 +58,9 @@ export const Default: StoryComponent<Args> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     subtitle,
     description,
     actions = 'button',
@@ -106,7 +111,9 @@ export const Default: StoryComponent<Args> = ({
                     dataAttributes={{testid: 'naked-card'}}
                     headline={headline && <Tag type={headlineType}>{headline}</Tag>}
                     pretitle={pretitle}
+                    pretitleAs={pretitleAs}
                     title={title}
+                    titleAs={titleAs}
                     subtitle={subtitle}
                     description={description}
                     media={
@@ -160,7 +167,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
     extra: false,
@@ -186,6 +195,14 @@ Default.argTypes = {
         options: ['button', 'link', 'button and link', 'onPress', 'href', 'to', 'none'],
         control: {type: 'select'},
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
 
 type SmallArgs = {
diff --git a/src/__stories__/poster-card-story.tsx b/src/__stories__/poster-card-story.tsx
index d134708eff..238a44c0f6 100644
--- a/src/__stories__/poster-card-story.tsx
+++ b/src/__stories__/poster-card-story.tsx
@@ -20,6 +20,7 @@ import avatarImg from './images/avatar.jpg';
 import beachVideo from './videos/beach.mp4';
 import beachImg from './images/beach.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 
 export default {
@@ -39,7 +40,9 @@ type PosterCardArgs = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     subtitle: string;
     description: string;
     extra: boolean;
@@ -63,7 +66,9 @@ export const Default: StoryComponent<PosterCardArgs> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     subtitle,
     description,
     extra,
@@ -144,7 +149,9 @@ export const Default: StoryComponent<PosterCardArgs> = ({
                     asset={assetElement}
                     headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
                     pretitle={pretitle}
+                    pretitleAs={pretitleAs}
                     title={title}
+                    titleAs={titleAs}
                     subtitle={subtitle}
                     description={description}
                     extra={extra ? <Placeholder /> : undefined}
@@ -169,7 +176,9 @@ Default.args = {
     variant: 'default',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
     extra: false,
@@ -226,6 +235,14 @@ Default.argTypes = {
         options: ['onPress', 'href', 'to', 'none'],
         control: {type: 'select'},
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
 
 Default.parameters = {fullScreen: true};
diff --git a/src/__stories__/sheet-story.tsx b/src/__stories__/sheet-story.tsx
index 69e1ab37ab..1f64727b99 100644
--- a/src/__stories__/sheet-story.tsx
+++ b/src/__stories__/sheet-story.tsx
@@ -6,7 +6,7 @@ import {
     ButtonPrimary,
     Inline,
     Placeholder,
-    ResponsiveLayout,
+    SheetBody,
     showSheet,
     Stack,
     Text2,
@@ -45,7 +45,10 @@ export const Default: StoryComponent = () => {
                     description="Check Sheet component docs for more info."
                     asset={<IconInformationRegular />}
                     buttonLink={
-                        <ButtonLink href="https://github.com/Telefonica/mistica-web/blob/master/doc/sheet.md">
+                        <ButtonLink
+                            small
+                            href="https://github.com/Telefonica/mistica-web/blob/master/doc/sheet.md"
+                        >
                             See docs
                         </ButtonLink>
                     }
@@ -58,11 +61,13 @@ export const Default: StoryComponent = () => {
                         setOpen(false);
                     }}
                 >
-                    <ResponsiveLayout>
-                        <Box paddingBottom={{mobile: 16, desktop: 40}} paddingTop={{mobile: 0, desktop: 40}}>
-                            <Placeholder />
-                        </Box>
-                    </ResponsiveLayout>
+                    {({modalTitleId}) => (
+                        <SheetBody modalTitleId={modalTitleId}>
+                            <Box paddingBottom={{mobile: 16, desktop: 0}}>
+                                <Placeholder />
+                            </Box>
+                        </SheetBody>
+                    )}
                 </Sheet>
             )}
         </Box>
@@ -124,6 +129,7 @@ export const ShowSheet: StoryComponent<ShowSheetArgs> = ({
                                             },
                                         },
                                     ],
+                                    button: {text: 'Dismiss'},
                                 },
                             }).then((response) => {
                                 setOpenDialogType(undefined);
diff --git a/src/__tests__/accordion-test.tsx b/src/__tests__/accordion-test.tsx
index 1abd8ba0ea..753a1f0c8b 100644
--- a/src/__tests__/accordion-test.tsx
+++ b/src/__tests__/accordion-test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import userEvent from '@testing-library/user-event';
 import {render, screen, waitFor} from '@testing-library/react';
-import {ThemeContextProvider, Text3, AccordionItem, Accordion} from '..';
+import {ThemeContextProvider, Text3, AccordionItem, Accordion, Text2} from '..';
 import {makeTheme} from './test-utils';
 
 const items = [
@@ -139,3 +139,28 @@ test('Accordion with singleOpen', async () => {
     });
     expect(screen.getByText('Content 3')).toBeInTheDocument();
 });
+
+test('Accordion with custom labels is accessible', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Accordion>
+                <AccordionItem
+                    title="Title 1"
+                    content={<Text3 regular>Content 1</Text3>}
+                    aria-label="Custom label 1"
+                />
+                <AccordionItem
+                    title="Title 2"
+                    content={<Text3 regular>Content 2</Text3>}
+                    aria-labelledby="item2-id"
+                />
+            </Accordion>
+            <Text2 regular id="item2-id">
+                Custom label 2
+            </Text2>
+        </ThemeContextProvider>
+    );
+
+    expect(screen.getByLabelText('Custom label 1')).toBeInTheDocument();
+    expect(screen.getByLabelText('Custom label 2')).toBeInTheDocument();
+});
diff --git a/src/__tests__/advanced-data-card-test.tsx b/src/__tests__/advanced-data-card-test.tsx
new file mode 100644
index 0000000000..3a3f81989a
--- /dev/null
+++ b/src/__tests__/advanced-data-card-test.tsx
@@ -0,0 +1,124 @@
+import * as React from 'react';
+import {AdvancedDataCard} from '../community';
+import {makeTheme} from './test-utils';
+import {render, screen} from '@testing-library/react';
+import ThemeContextProvider from '../theme-context-provider';
+import Tag from '../tag';
+import Stack from '../stack';
+import {Text2} from '../text';
+
+const titleFirst =
+    'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2Extra line 3Extra line 4';
+const pretitleFirst =
+    'Pretitle Headline Title Subtitle Description Extra line 1Extra line 2Extra line 3Extra line 4';
+
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'AdvancedDataCard "href" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <AdvancedDataCard
+                    href="https://example.org"
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    titleAs={titleAs}
+                    subtitle="Subtitle"
+                    title="Title"
+                    description="Description"
+                    extra={[
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>,
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 3</Text2>
+                            <Text2 regular>Extra line 4</Text2>
+                        </Stack>,
+                    ]}
+                />
+            </ThemeContextProvider>
+        );
+
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
+
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'AdvancedDataCard "to" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <AdvancedDataCard
+                    to="/foo/bar"
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    titleAs={titleAs}
+                    subtitle="Subtitle"
+                    title="Title"
+                    description="Description"
+                    extra={[
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>,
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 3</Text2>
+                            <Text2 regular>Extra line 4</Text2>
+                        </Stack>,
+                    ]}
+                />
+            </ThemeContextProvider>
+        );
+
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
+
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'AdvancedDataCard "onPress" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <AdvancedDataCard
+                    onPress={() => {}}
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    titleAs={titleAs}
+                    subtitle="Subtitle"
+                    title="Title"
+                    description="Description"
+                    extra={[
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>,
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 3</Text2>
+                            <Text2 regular>Extra line 4</Text2>
+                        </Stack>,
+                    ]}
+                />
+            </ThemeContextProvider>
+        );
+
+        await screen.findByRole('button', {name: expectedLabel});
+    }
+);
diff --git a/src/__tests__/cover-hero-test.tsx b/src/__tests__/cover-hero-test.tsx
new file mode 100644
index 0000000000..bce8fc7f01
--- /dev/null
+++ b/src/__tests__/cover-hero-test.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import CoverHero from '../cover-hero';
+import Tag from '../tag';
+import {makeTheme} from './test-utils';
+import {render, screen} from '@testing-library/react';
+import ThemeContextProvider from '../theme-context-provider';
+
+const pretitleFirst = 'PretitleHeadlineTitleDescription';
+const titleFirst = 'TitleHeadlinePretitleDescription';
+
+test.each`
+    pretitleAs   | titleAs      | expectedOrder
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${undefined} | ${'span'}    | ${titleFirst}
+    ${undefined} | ${'h1'}      | ${titleFirst}
+    ${'span'}    | ${undefined} | ${titleFirst}
+    ${'h3'}      | ${undefined} | ${titleFirst}
+    ${'h3'}      | ${'h1'}      | ${titleFirst}
+    ${'span'}    | ${'h1'}      | ${titleFirst}
+    ${'h1'}      | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h3'}      | ${pretitleFirst}
+    ${'h1'}      | ${'span'}    | ${pretitleFirst}
+`(
+    'CoverHero has correct reading order with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedOrder}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <CoverHero
+                    background="white"
+                    headline={<Tag>Headline</Tag>}
+                    pretitle="Pretitle"
+                    title="Title"
+                    description="Description"
+                    titleAs={titleAs}
+                    pretitleAs={pretitleAs}
+                    dataAttributes={{testid: 'cover-hero'}}
+                />
+            </ThemeContextProvider>
+        );
+
+        const coverHero = await screen.findByTestId('cover-hero');
+        expect(coverHero.textContent).toEqual(expectedOrder);
+    }
+);
diff --git a/src/__tests__/data-card-test.tsx b/src/__tests__/data-card-test.tsx
index 2056c341b0..4b4dc2cf17 100644
--- a/src/__tests__/data-card-test.tsx
+++ b/src/__tests__/data-card-test.tsx
@@ -8,71 +8,104 @@ import Stack from '../stack';
 import {Text2} from '../text';
 import userEvent from '@testing-library/user-event';
 
-test('DataCard "href" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <DataCard
-                href="https://example.org"
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+const titleFirst = 'Title Headline Pretitle Description Extra line 1Extra line 2';
+const pretitleFirst = 'Pretitle Headline Title Description Extra line 1Extra line 2';
 
-    await screen.findByRole('link', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'DataCard "href" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <DataCard
+                    href="https://example.org"
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('DataCard "to" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <DataCard
-                to="/foo/bar"
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('link', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'DataCard "to" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <DataCard
+                    to="/foo/bar"
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('DataCard "onPress" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <DataCard
-                onPress={() => {}}
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('button', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'DataCard "onPress" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <DataCard
+                    onPress={() => {}}
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
+
+        await screen.findByRole('button', {name: expectedLabel});
+    }
+);
 
 test('DataCard onClose custom label', async () => {
     const closeSpy = jest.fn();
diff --git a/src/__tests__/display-data-card-test.tsx b/src/__tests__/display-data-card-test.tsx
index 49e33ffc06..e0420f5df4 100644
--- a/src/__tests__/display-data-card-test.tsx
+++ b/src/__tests__/display-data-card-test.tsx
@@ -8,71 +8,104 @@ import Stack from '../stack';
 import {Text2} from '../text';
 import userEvent from '@testing-library/user-event';
 
-test('DisplayDataCard "href" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <DisplayDataCard
-                href="https://example.org"
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+const titleFirst = 'Title Headline Pretitle Description Extra line 1Extra line 2';
+const pretitleFirst = 'Pretitle Headline Title Description Extra line 1Extra line 2';
 
-    await screen.findByRole('link', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'DisplayDataCard "href" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <DisplayDataCard
+                    href="https://example.org"
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('DisplayDataCard "to" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <DisplayDataCard
-                to="/foo/bar"
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('link', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'DisplayDataCard "to" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <DisplayDataCard
+                    to="/foo/bar"
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('DisplayDataCard "onPress" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <DisplayDataCard
-                onPress={() => {}}
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('button', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'DisplayDataCard "onPress" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <DisplayDataCard
+                    onPress={() => {}}
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
+
+        await screen.findByRole('button', {name: expectedLabel});
+    }
+);
 
 test('DisplayDataCard onClose custom label', async () => {
     const closeSpy = jest.fn();
diff --git a/src/__tests__/display-media-card-test.tsx b/src/__tests__/display-media-card-test.tsx
index da8d978d22..24db7b9898 100644
--- a/src/__tests__/display-media-card-test.tsx
+++ b/src/__tests__/display-media-card-test.tsx
@@ -8,74 +8,107 @@ import Stack from '../stack';
 import {Text2} from '../text';
 import userEvent from '@testing-library/user-event';
 
-test('DisplayMediaCard "href" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <DisplayMediaCard
-                href="https://example.org"
-                backgroundImage="https://source.unsplash.com/900x900/"
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+const titleFirst = 'Title Headline Pretitle Description Extra line 1Extra line 2';
+const pretitleFirst = 'Pretitle Headline Title Description Extra line 1Extra line 2';
 
-    await screen.findByRole('link', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'DisplayMediaCard "href" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <DisplayMediaCard
+                    href="https://example.org"
+                    backgroundImage="https://source.unsplash.com/900x900/"
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('DisplayMediaCard "to" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <DisplayMediaCard
-                to="/foo/bar"
-                backgroundImage="https://source.unsplash.com/900x900/"
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('link', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'DisplayMediaCard "to" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <DisplayMediaCard
+                    to="/foo/bar"
+                    backgroundImage="https://source.unsplash.com/900x900/"
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('DisplayMediaCard "onPress" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <DisplayMediaCard
-                onPress={() => {}}
-                backgroundImage="https://source.unsplash.com/900x900/"
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('button', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'DisplayMediaCard "onPress" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <DisplayMediaCard
+                    onPress={() => {}}
+                    backgroundImage="https://source.unsplash.com/900x900/"
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
+
+        await screen.findByRole('button', {name: expectedLabel});
+    }
+);
 
 test('DisplayMediaCard onClose custom label', async () => {
     const closeSpy = jest.fn();
diff --git a/src/__tests__/header-test.tsx b/src/__tests__/header-test.tsx
new file mode 100644
index 0000000000..31de0a8f68
--- /dev/null
+++ b/src/__tests__/header-test.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import {Header} from '../header';
+import {makeTheme} from './test-utils';
+import {render, screen} from '@testing-library/react';
+import ThemeContextProvider from '../theme-context-provider';
+
+const pretitleFirst = 'PretitleHeadlineTitleDescription';
+const titleFirst = 'TitleHeadlinePretitleDescription';
+
+test.each`
+    pretitleAs   | titleAs      | expectedOrder
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${undefined} | ${'span'}    | ${titleFirst}
+    ${undefined} | ${'h1'}      | ${titleFirst}
+    ${'span'}    | ${undefined} | ${titleFirst}
+    ${'h3'}      | ${undefined} | ${titleFirst}
+    ${'h3'}      | ${'h1'}      | ${titleFirst}
+    ${'span'}    | ${'h1'}      | ${titleFirst}
+    ${'h1'}      | ${undefined} | ${pretitleFirst}
+    ${'h1'}      | ${'h3'}      | ${pretitleFirst}
+    ${'h1'}      | ${'span'}    | ${pretitleFirst}
+`(
+    'Header has correct reading order with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedOrder}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <Header
+                    headline="Headline"
+                    pretitle="Pretitle"
+                    title="Title"
+                    description="Description"
+                    titleAs={titleAs}
+                    pretitleAs={pretitleAs}
+                    dataAttributes={{testid: 'header'}}
+                />
+            </ThemeContextProvider>
+        );
+
+        const header = await screen.findByTestId('header');
+        expect(header.textContent).toEqual(expectedOrder);
+    }
+);
diff --git a/src/__tests__/hero-test.tsx b/src/__tests__/hero-test.tsx
new file mode 100644
index 0000000000..c93a08832a
--- /dev/null
+++ b/src/__tests__/hero-test.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Hero from '../hero';
+import Tag from '../tag';
+import {makeTheme} from './test-utils';
+import {render, screen} from '@testing-library/react';
+import ThemeContextProvider from '../theme-context-provider';
+
+const pretitleFirst = 'PretitleHeadlineTitleDescription';
+const titleFirst = 'TitleHeadlinePretitleDescription';
+
+test.each`
+    pretitleAs   | titleAs      | expectedOrder
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${undefined} | ${'span'}    | ${titleFirst}
+    ${undefined} | ${'h1'}      | ${titleFirst}
+    ${'span'}    | ${undefined} | ${titleFirst}
+    ${'h3'}      | ${undefined} | ${titleFirst}
+    ${'h3'}      | ${'h1'}      | ${titleFirst}
+    ${'span'}    | ${'h1'}      | ${titleFirst}
+    ${'h1'}      | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h3'}      | ${pretitleFirst}
+    ${'h1'}      | ${'span'}    | ${pretitleFirst}
+`(
+    'Hero has correct reading order with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedOrder}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <Hero
+                    media={<></>}
+                    headline={<Tag>Headline</Tag>}
+                    pretitle="Pretitle"
+                    title="Title"
+                    description="Description"
+                    titleAs={titleAs}
+                    pretitleAs={pretitleAs}
+                    dataAttributes={{testid: 'hero'}}
+                />
+            </ThemeContextProvider>
+        );
+
+        const hero = await screen.findByTestId('hero');
+        expect(hero.textContent).toEqual(expectedOrder);
+    }
+);
diff --git a/src/__tests__/main-navigation-bar-test.tsx b/src/__tests__/main-navigation-bar-test.tsx
new file mode 100644
index 0000000000..12f131f428
--- /dev/null
+++ b/src/__tests__/main-navigation-bar-test.tsx
@@ -0,0 +1,155 @@
+import * as React from 'react';
+import {makeTheme} from './test-utils';
+import {render, screen, waitFor} from '@testing-library/react';
+import ThemeContextProvider from '../theme-context-provider';
+import {MainNavigationBar} from '../navigation-bar';
+import userEvent from '@testing-library/user-event';
+import {act} from 'react-dom/test-utils';
+import {ButtonPrimary} from '../button';
+
+test('MainNavigationBar section with interaction is accessible', async () => {
+    const firstSectionOnPressSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <MainNavigationBar
+                sections={[
+                    // Section with custom interaction
+                    {
+                        title: 'section 1',
+                        onPress: firstSectionOnPressSpy,
+                        menu: {
+                            columns: [
+                                {
+                                    title: 'column 1',
+                                    items: [
+                                        {title: 'item 1-1', onPress: () => {}},
+                                        {title: 'item 1-2', href: '#'},
+                                        {title: 'item 1-3', to: '/'},
+                                    ],
+                                },
+                            ],
+                        },
+                    },
+                    // Section without custom interaction
+                    {
+                        title: 'section 2',
+                        menu: {
+                            columns: [
+                                {
+                                    title: 'column 2',
+                                    items: [{title: 'item 2-1', onPress: () => {}}],
+                                },
+                            ],
+                        },
+                    },
+                ]}
+            />
+        </ThemeContextProvider>
+    );
+
+    const firstSectionButton = await screen.findByRole('button', {name: 'section 1'});
+
+    // Section buttons that control menu should not have aria-expanded
+    const firstSectionMenuButton = await screen.findByRole('button', {
+        name: 'section 1, Abrir submenú',
+        expanded: false,
+    });
+
+    // Menu is initially closed, no section should be visible
+    expect(screen.queryByText('item 1-1')).not.toBeInTheDocument();
+    expect(screen.queryByText('item 2-1')).not.toBeInTheDocument();
+
+    // Focus arrow in order for it to appear in the screen
+    await act(async () => {
+        firstSectionMenuButton.focus();
+    });
+
+    await userEvent.click(firstSectionMenuButton);
+
+    // First section should be visible, while second one shouldn't
+    expect(screen.getByRole('button', {name: 'item 1-1'})).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: /item 1-2/})).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: /item 1-3/})).toBeInTheDocument();
+    expect(screen.queryByRole('button', {name: 'item 2-1'})).not.toBeInTheDocument();
+
+    // Remove mouse hover from section in order to close the menu
+    await userEvent.unhover(firstSectionButton);
+
+    // Section onPress shouldn't have been called
+    expect(firstSectionOnPressSpy).toHaveBeenCalledTimes(0);
+
+    // Click in the section's tab
+    await userEvent.click(firstSectionButton);
+    expect(firstSectionOnPressSpy).toHaveBeenCalledTimes(1);
+
+    // The second section has no custom interaction, it should control the menu when pressed
+    const secondSectionButton = await screen.findByRole('button', {
+        name: 'section 2, Abrir submenú',
+        expanded: false,
+    });
+
+    // Open second section's menu
+    await userEvent.hover(secondSectionButton);
+
+    await waitFor(() => {
+        expect(firstSectionMenuButton).toHaveAttribute('aria-expanded', 'false');
+        expect(secondSectionButton).toHaveAttribute('aria-expanded', 'true');
+
+        // Second section should be visible, while first one shouldn't
+        expect(screen.getByText('item 2-1')).toBeInTheDocument();
+        expect(screen.queryByText('item 1-1')).not.toBeInTheDocument();
+    });
+
+    // Close the menu with ESC key
+    await userEvent.keyboard('{Escape}');
+
+    await waitFor(() => {
+        expect(firstSectionMenuButton).toHaveAttribute('aria-expanded', 'false');
+        expect(secondSectionButton).toHaveAttribute('aria-expanded', 'false');
+
+        // Buttons that open the menu should have aria-haspopup
+        expect(firstSectionMenuButton).toHaveAttribute('aria-haspopup', 'true');
+        expect(secondSectionButton).toHaveAttribute('aria-haspopup', 'true');
+
+        // Menu is closed, no section should be visible
+        expect(screen.queryByText('item 1-1')).not.toBeInTheDocument();
+        expect(screen.queryByText('item 2-1')).not.toBeInTheDocument();
+    });
+});
+
+test('MainNavigationBar menu closeMenu callback closes the menu', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <MainNavigationBar
+                sections={[
+                    {
+                        title: 'section 1',
+                        menu: {
+                            content: ({closeMenu}) => (
+                                <ButtonPrimary onPress={closeMenu}>Close menu</ButtonPrimary>
+                            ),
+                        },
+                    },
+                ]}
+            />
+        </ThemeContextProvider>
+    );
+
+    // Open the menu
+    const sectionButton = await screen.findByRole('button', {name: 'section 1, Abrir submenú'});
+    await userEvent.hover(sectionButton);
+
+    await waitFor(() => {
+        expect(sectionButton).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    // Close the menu with the closeMenu callback
+    const closeButton = await screen.findByRole('button', {name: 'Close menu'});
+    await userEvent.click(closeButton);
+
+    await waitFor(() => {
+        expect(sectionButton).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.queryByText('Close menu')).not.toBeInTheDocument();
+    });
+});
diff --git a/src/__tests__/media-card-test.tsx b/src/__tests__/media-card-test.tsx
index 35776af9de..710d23fe10 100644
--- a/src/__tests__/media-card-test.tsx
+++ b/src/__tests__/media-card-test.tsx
@@ -9,83 +9,107 @@ import Image from '../image';
 import {Text2} from '../text';
 import userEvent from '@testing-library/user-event';
 
-test('MediaCard "href" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <MediaCard
-                href="https://example.org"
-                media={<Image src="https://source.unsplash.com/900x900/" />}
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                subtitle="Subtitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+const titleFirst = 'Title Headline Pretitle Description Extra line 1Extra line 2';
+const pretitleFirst = 'Pretitle Headline Title Description Extra line 1Extra line 2';
 
-    await screen.findByRole('link', {
-        name: 'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2',
-    });
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'MediaCard "href" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <MediaCard
+                    href="https://example.org"
+                    media={<Image src="https://source.unsplash.com/900x900/" />}
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('MediaCard "to" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <MediaCard
-                to="/foo/bar"
-                media={<Image src="https://source.unsplash.com/900x900/" />}
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                subtitle="Subtitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('link', {
-        name: 'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2',
-    });
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'MediaCard "to" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <MediaCard
+                    to="/foo/bar"
+                    media={<Image src="https://source.unsplash.com/900x900/" />}
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('MediaCard "onPress" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <MediaCard
-                onPress={() => {}}
-                media={<Image src="https://source.unsplash.com/900x900/" />}
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                subtitle="Subtitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('button', {
-        name: 'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2',
-    });
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'MediaCard "onPress" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <MediaCard
+                    onPress={() => {}}
+                    media={<Image src="https://source.unsplash.com/900x900/" />}
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
+
+        await screen.findByRole('button', {name: expectedLabel});
+    }
+);
 
 test('MediaCard onClose custom label', async () => {
     const closeSpy = jest.fn();
diff --git a/src/__tests__/meter-test.tsx b/src/__tests__/meter-test.tsx
new file mode 100644
index 0000000000..0148d0bffd
--- /dev/null
+++ b/src/__tests__/meter-test.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {screen, render} from '@testing-library/react';
+import ThemeContextProvider from '../theme-context-provider';
+import {makeTheme} from './test-utils';
+import Meter from '../meter';
+
+test('Meter custom label', () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Meter aria-label="Patata" values={[10, 20, 30]} />
+        </ThemeContextProvider>
+    );
+
+    const meter = screen.getByRole('meter', {name: 'Patata'});
+    expect(meter).toBeInTheDocument();
+});
+
+test('Meter default label', () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Meter values={[10, 20, 30]} />
+        </ThemeContextProvider>
+    );
+
+    const expectedLabel =
+        'Indicador de progreso con 3 secciones, total 60% de 100%. Sección 1: 10%. Sección 2: 20%. Sección 3: 30%';
+
+    const meter = screen.getByRole('meter', {name: expectedLabel});
+    expect(meter).toBeInTheDocument();
+});
diff --git a/src/__tests__/mosaic-test.tsx b/src/__tests__/mosaic-test.tsx
new file mode 100644
index 0000000000..b5b6bb2f60
--- /dev/null
+++ b/src/__tests__/mosaic-test.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import ThemeContextProvider from '../theme-context-provider';
+import {makeTheme} from './test-utils';
+import {HorizontalMosaic, VerticalMosaic} from '../mosaic';
+import {Text2} from '../text';
+
+const ITEMS_COUNT = [1, 2, 3, 4, 5, 6];
+
+const verticalMosaicItemsGridMode = [
+    // 1 item
+    ['horizontal'],
+
+    // 2 items
+    ['square', 'square'],
+
+    // 3 items
+    ['vertical', 'square', 'square'],
+
+    // 4 items
+    ['vertical', 'square', 'square', 'vertical'],
+
+    // 5 items
+    ['vertical', 'square', 'square', 'vertical', 'horizontal'],
+
+    // 6 items
+    ['vertical', 'square', 'square', 'vertical', 'square', 'square'],
+];
+
+const horizontalMosaicItemsGridMode = [
+    // 1 item
+    ['horizontal'],
+
+    // 2 items
+    ['horizontal', 'horizontal'],
+
+    // 3 items
+    ['horizontal', 'square', 'square'],
+
+    // 4 items
+    ['square', 'square', 'square', 'square'],
+
+    // 5 items
+    ['horizontal', 'square', 'square', 'horizontal', 'horizontal'],
+
+    // 6 items
+    ['horizontal', 'square', 'square', 'square', 'square', 'horizontal'],
+];
+
+test.each(ITEMS_COUNT)(
+    'VerticalMosaic - gridMode passed as a function is correct with %s items',
+    (itemsCount) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <VerticalMosaic
+                    items={Array.from({length: itemsCount}, (_, index) => ({gridMode}) => (
+                        <Text2 regular>{`${index + 1}-${gridMode}`}</Text2>
+                    ))}
+                />
+            </ThemeContextProvider>
+        );
+
+        const expectedGridModes = verticalMosaicItemsGridMode[itemsCount - 1];
+
+        expectedGridModes.forEach((gridMode, index) => {
+            expect(screen.getByText(`${index + 1}-${gridMode}`)).toBeInTheDocument();
+        });
+    }
+);
+
+test.each(ITEMS_COUNT)(
+    'HorizontalMosaic - gridMode passed as a function is correct with %s items',
+    (itemsCount) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <HorizontalMosaic
+                    items={Array.from({length: itemsCount}, (_, index) => ({gridMode}) => (
+                        <Text2 regular>{`${index + 1}-${gridMode}`}</Text2>
+                    ))}
+                />
+            </ThemeContextProvider>
+        );
+
+        const expectedGridModes = horizontalMosaicItemsGridMode[itemsCount - 1];
+
+        expectedGridModes.forEach((gridMode, index) => {
+            expect(screen.getByText(`${index + 1}-${gridMode}`)).toBeInTheDocument();
+        });
+    }
+);
diff --git a/src/__tests__/naked-card-test.tsx b/src/__tests__/naked-card-test.tsx
index 4cdce0b345..d68672fa09 100644
--- a/src/__tests__/naked-card-test.tsx
+++ b/src/__tests__/naked-card-test.tsx
@@ -9,83 +9,107 @@ import Image from '../image';
 import {Text2} from '../text';
 import userEvent from '@testing-library/user-event';
 
-test('NakedCard "href" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <NakedCard
-                href="https://example.org"
-                media={<Image src="https://source.unsplash.com/900x900/" />}
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                subtitle="Subtitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+const titleFirst = 'Title Headline Pretitle Description Extra line 1Extra line 2';
+const pretitleFirst = 'Pretitle Headline Title Description Extra line 1Extra line 2';
 
-    await screen.findByRole('link', {
-        name: 'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2',
-    });
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'NakedCard "href" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <NakedCard
+                    href="https://example.org"
+                    media={<Image src="https://source.unsplash.com/900x900/" />}
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('NakedCard "to" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <NakedCard
-                to="/foo/bar"
-                media={<Image src="https://source.unsplash.com/900x900/" />}
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                subtitle="Subtitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('link', {
-        name: 'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2',
-    });
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'NakedCard "to" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <NakedCard
+                    to="/foo/bar"
+                    media={<Image src="https://source.unsplash.com/900x900/" />}
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('NakedCard "onPress" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <NakedCard
-                onPress={() => {}}
-                media={<Image src="https://source.unsplash.com/900x900/" />}
-                headline={<Tag type="promo">Headline</Tag>}
-                pretitle="Pretitle"
-                subtitle="Subtitle"
-                title="Title"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('button', {
-        name: 'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2',
-    });
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'NakedCard "onPress" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <NakedCard
+                    onPress={() => {}}
+                    media={<Image src="https://source.unsplash.com/900x900/" />}
+                    headline={<Tag type="promo">Headline</Tag>}
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
+
+        await screen.findByRole('button', {name: expectedLabel});
+    }
+);
 
 test('NakedCard onClose custom label', async () => {
     const closeSpy = jest.fn();
diff --git a/src/__tests__/poster-card-test.tsx b/src/__tests__/poster-card-test.tsx
index bca1d5ef10..af50daef48 100644
--- a/src/__tests__/poster-card-test.tsx
+++ b/src/__tests__/poster-card-test.tsx
@@ -7,83 +7,107 @@ import Stack from '../stack';
 import {Text2} from '../text';
 import userEvent from '@testing-library/user-event';
 
-test('PosterCard "href" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <PosterCard
-                href="https://example.org"
-                isInverse
-                headline="Headline"
-                pretitle="Pretitle"
-                title="Title"
-                subtitle="Subtitle"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+const titleFirst = 'Title Headline Pretitle Description Extra line 1Extra line 2';
+const pretitleFirst = 'Pretitle Headline Title Description Extra line 1Extra line 2';
 
-    await screen.findByRole('link', {
-        name: 'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2',
-    });
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'PosterCard "href" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <PosterCard
+                    href="https://example.org"
+                    isInverse
+                    headline="Headline"
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('PosterCard "to" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <PosterCard
-                to="/foo/bar"
-                isInverse
-                headline="Headline"
-                pretitle="Pretitle"
-                title="Title"
-                subtitle="Subtitle"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('link', {
-        name: 'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2',
-    });
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'PosterCard "to" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <PosterCard
+                    to="/foo/bar"
+                    isInverse
+                    headline="Headline"
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
 
-test('PosterCard "onPress" label', async () => {
-    render(
-        <ThemeContextProvider theme={makeTheme()}>
-            <PosterCard
-                onPress={() => {}}
-                isInverse
-                headline="Headline"
-                pretitle="Pretitle"
-                title="Title"
-                subtitle="Subtitle"
-                description="Description"
-                extra={
-                    <Stack space={4}>
-                        <Text2 regular>Extra line 1</Text2>
-                        <Text2 regular>Extra line 2</Text2>
-                    </Stack>
-                }
-            />
-        </ThemeContextProvider>
-    );
+        await screen.findByRole('link', {name: expectedLabel});
+    }
+);
 
-    await screen.findByRole('button', {
-        name: 'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2',
-    });
-});
+test.each`
+    pretitleAs   | titleAs      | expectedLabel
+    ${undefined} | ${undefined} | ${titleFirst}
+    ${'h1'}      | ${'h2'}      | ${pretitleFirst}
+    ${'h2'}      | ${'h1'}      | ${titleFirst}
+`(
+    'PosterCard "onPress" label with pretitleAs={$pretitleAs} and titleAs={$titleAs}',
+    async ({pretitleAs, titleAs, expectedLabel}) => {
+        render(
+            <ThemeContextProvider theme={makeTheme()}>
+                <PosterCard
+                    onPress={() => {}}
+                    isInverse
+                    headline="Headline"
+                    pretitle="Pretitle"
+                    pretitleAs={pretitleAs}
+                    title="Title"
+                    titleAs={titleAs}
+                    description="Description"
+                    extra={
+                        <Stack space={4}>
+                            <Text2 regular>Extra line 1</Text2>
+                            <Text2 regular>Extra line 2</Text2>
+                        </Stack>
+                    }
+                />
+            </ThemeContextProvider>
+        );
+
+        await screen.findByRole('button', {name: expectedLabel});
+    }
+);
 
 test('PosterCard onClose custom label', async () => {
     const closeSpy = jest.fn();
diff --git a/src/__tests__/sheet-test.tsx b/src/__tests__/sheet-test.tsx
index 123edc5de3..21ead7375a 100644
--- a/src/__tests__/sheet-test.tsx
+++ b/src/__tests__/sheet-test.tsx
@@ -299,7 +299,7 @@ test('showSheet INFO', async () => {
         {timeout: 5000}
     );
 
-    expect(resultSpy).toHaveBeenCalledWith(undefined);
+    expect(resultSpy).toHaveBeenCalledWith({action: 'DISMISS'});
 }, 30000);
 
 test('showSheet ACTIONS_LIST', async () => {
@@ -593,7 +593,7 @@ test('showSheet fails if there is already a sheet open', async () => {
 test('showSheet with native implementation INFO', async () => {
     const resultSpy = jest.fn();
 
-    const nativeImplementation = jest.fn();
+    const nativeImplementation = jest.fn(() => Promise.resolve({action: 'DISMISS' as const, result: []}));
     render(
         <ThemeContextProvider theme={makeTheme()}>
             <SheetRoot nativeImplementation={nativeImplementation} />
diff --git a/src/__tests__/testid-test.tsx b/src/__tests__/testid-test.tsx
index 277a1e5db7..63c981c76c 100644
--- a/src/__tests__/testid-test.tsx
+++ b/src/__tests__/testid-test.tsx
@@ -4,15 +4,24 @@ import {screen, render, within} from '@testing-library/react';
 import {
     ButtonPrimary,
     ButtonSecondary,
+    Callout,
     DataCard,
     DateField,
+    Hero,
+    Image,
+    HighlightedCard,
     IconShopRegular,
+    Meter,
     Placeholder,
     SearchField,
     Stack,
     SuccessFeedbackScreen,
     TextField,
     ThemeContextProvider,
+    Tag,
+    CoverHero,
+    Header,
+    MainSectionHeader,
 } from '..';
 import {makeTheme} from './test-utils';
 
@@ -100,6 +109,15 @@ test('Cards test ids', () => {
     );
 });
 
+test('HighlightedCard test ids', () => {
+    checkTestIds(<HighlightedCard title="Title" description="Description" imageUrl="https://anyurl.com" />, [
+        {
+            componentName: 'HighlightedCard',
+            internalTestIds: ['title', 'description', 'image'],
+        },
+    ]);
+});
+
 test('FeedbackScreen test ids', () => {
     checkTestIds(
         <SuccessFeedbackScreen
@@ -173,3 +191,100 @@ test('Buttons test ids', () => {
         ]
     );
 });
+
+test('Callout test ids', () => {
+    checkTestIds(
+        <Callout title="Title" description="Description" asset={<IconShopRegular />} onClose={() => {}} />,
+        [
+            {
+                componentName: 'Callout',
+                internalTestIds: ['title', 'description', 'asset', 'closeButton'],
+            },
+        ]
+    );
+});
+
+test('Hero test ids', () => {
+    checkTestIds(
+        <Hero
+            background="default"
+            media={<Image src="https://anyurl.com" />}
+            headline={<Tag type="active">tag</Tag>}
+            pretitle="pretitle"
+            title="title"
+            description="description"
+            button={<ButtonPrimary fake>button</ButtonPrimary>}
+            desktopMediaPosition="right"
+            extra={<Placeholder />}
+        />,
+        [
+            {
+                componentName: 'Hero',
+                internalTestIds: ['headline', 'pretitle', 'title', 'description', 'slot'],
+            },
+        ]
+    );
+});
+
+test('CoverHero test ids', () => {
+    checkTestIds(
+        <CoverHero
+            backgroundImage="https://anyurl.com"
+            headline={<Tag type="active">tag</Tag>}
+            pretitle="pretitle"
+            title="title"
+            description="description"
+            button={<ButtonPrimary fake>button</ButtonPrimary>}
+            extra={<Placeholder />}
+            sideExtra={<Placeholder />}
+        />,
+        [
+            {
+                componentName: 'CoverHero',
+                internalTestIds: ['headline', 'pretitle', 'title', 'description', 'slot', 'sideSlot'],
+            },
+        ]
+    );
+});
+
+test('Header test ids', () => {
+    checkTestIds(
+        <Header
+            headline={<Tag type="active">tag</Tag>}
+            pretitle="pretitle"
+            title="title"
+            description="description"
+        />,
+        [
+            {
+                componentName: 'Header',
+                internalTestIds: ['headline', 'pretitle', 'title', 'description'],
+            },
+        ]
+    );
+});
+
+test('MainSectionHeader test ids', () => {
+    checkTestIds(
+        <MainSectionHeader
+            title="Title"
+            description="Description"
+            button={<ButtonPrimary href="asdf">Action</ButtonPrimary>}
+        />,
+        [
+            {
+                componentName: 'MainSectionHeader',
+                internalTestIds: ['title', 'description'],
+            },
+        ]
+    );
+});
+
+test('Meter test ids', () => {
+    checkTestIds(<Meter values={[10, 20, 30]} />, [
+        {
+            componentName: 'Meter',
+            internalTestIds: [],
+        },
+    ]);
+});
diff --git a/src/accordion.css.ts b/src/accordion.css.ts
index f7481b1ca3..5a70b34bba 100644
--- a/src/accordion.css.ts
+++ b/src/accordion.css.ts
@@ -52,6 +52,10 @@ export const touchableBackgroundInverse = style({
     },
 });
 
+export const rightContentContainer = style({
+    height: '100%',
+});
+
 export const chevronContainer = style({
     height: '100%',
     display: 'flex',
diff --git a/src/accordion.tsx b/src/accordion.tsx
index 776ed37790..a2b4850e5c 100644
--- a/src/accordion.tsx
+++ b/src/accordion.tsx
@@ -14,6 +14,7 @@ import {Boxed} from './boxed';
 import {useIsInverseOrMediaVariant} from './theme-variant-context';
 import {CSSTransition} from 'react-transition-group';
 import {isRunningAcceptanceTest} from './utils/platform';
+import Inline from './inline';
 
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {DataAttributes, TrackingEvent} from './utils/types';
@@ -43,6 +44,10 @@ interface AccordionItemContentProps {
     dataAttributes?: DataAttributes;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     role?: string;
+    detail?: string;
+    right?: React.ReactNode;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 
 const useAccordionState = ({
@@ -119,7 +124,18 @@ const getAccordionItemIndex = (element: Element | null) => {
 };
 
 const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemContentProps>(
-    ({content, dataAttributes, trackingEvent, ...props}, ref) => {
+    (
+        {
+            content,
+            dataAttributes,
+            trackingEvent,
+            right,
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledby,
+            ...props
+        },
+        ref
+    ) => {
         const panelContainerRef = React.useRef<HTMLDivElement | null>(null);
         const itemRef = React.useRef<HTMLDivElement | null>(null);
         const {index, toggle} = useAccordionContext();
@@ -148,27 +164,36 @@ const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemCon
                     trackingEvent={trackingEvent}
                     aria-expanded={isOpen}
                     aria-controls={panelId}
+                    aria-label={ariaLabel}
+                    aria-labelledby={ariaLabelledby}
                 >
                     <Box paddingX={16}>
                         <HeaderContent
                             labelId={labelId}
                             {...props}
-                            right={
-                                <div className={styles.chevronContainer}>
-                                    <IconChevron
-                                        size={24}
-                                        transitionDuration={ACCORDION_TRANSITION_DURATION_IN_MS}
-                                        direction={isOpen ? 'up' : 'down'}
-                                        color={
-                                            isInverse
-                                                ? skinVars.colors.inverse
-                                                : isOpen
-                                                  ? skinVars.colors.neutralHigh
-                                                  : skinVars.colors.neutralMedium
-                                        }
-                                    />
-                                </div>
-                            }
+                            right={({centerY}) => (
+                                <Inline
+                                    space={4}
+                                    alignItems={centerY ? 'center' : undefined}
+                                    className={styles.rightContentContainer}
+                                >
+                                    {right}
+                                    <div className={styles.chevronContainer}>
+                                        <IconChevron
+                                            size={24}
+                                            transitionDuration={ACCORDION_TRANSITION_DURATION_IN_MS}
+                                            direction={isOpen ? 'up' : 'down'}
+                                            color={
+                                                isInverse
+                                                    ? skinVars.colors.inverse
+                                                    : isOpen
+                                                      ? skinVars.colors.neutralHigh
+                                                      : skinVars.colors.neutralMedium
+                                            }
+                                        />
+                                    </div>
+                                </Inline>
+                            )}
                         />
                     </Box>
                 </BaseTouchable>
@@ -272,7 +297,7 @@ interface BoxedAccordionItemProps extends AccordionItemContentProps {
 export const BoxedAccordionItem = React.forwardRef<HTMLDivElement, BoxedAccordionItemProps>(
     ({dataAttributes, isInverse, ...props}, ref) => (
         <Boxed
-            isInverse={isInverse}
+            variant={isInverse ? 'inverse' : 'default'}
             ref={ref}
             dataAttributes={{'component-name': 'BoxedAccordionItem', ...dataAttributes}}
         >
diff --git a/src/avatar.tsx b/src/avatar.tsx
index ef07aeca72..3277cafb1a 100644
--- a/src/avatar.tsx
+++ b/src/avatar.tsx
@@ -43,7 +43,7 @@ type AvatarProps = {
 /**
  * Not using TextPresets here because we don't want to scale the avatar text with the device settings
  */
-const renderText = (size: number, text: string): JSX.Element | null => {
+export const renderText = (size: number, text: string): JSX.Element | null => {
     if (!text) {
         return null;
     }
diff --git a/src/callout.tsx b/src/callout.tsx
index 98d4709920..f0bf975044 100644
--- a/src/callout.tsx
+++ b/src/callout.tsx
@@ -63,15 +63,24 @@ const Callout = ({
             {...getPrefixedDataAttributes(dataAttributes, 'Callout')}
         >
             <ThemeVariant isInverse={false}>
-                {asset && <Box paddingRight={16}>{asset}</Box>}
+                {asset && (
+                    <Box paddingRight={16} dataAttributes={{testid: 'asset'}}>
+                        {asset}
+                    </Box>
+                )}
                 <div className={styles.content}>
                     <Stack space={16}>
                         <Inline fullWidth alignItems="flex-start" space="between">
                             <Stack space={4}>
-                                <Text3 as={titleAs} regular>
+                                <Text3 as={titleAs} regular dataAttributes={{testid: 'title'}}>
                                     {title}
                                 </Text3>
-                                <Text2 as="p" regular color={vars.colors.textSecondary}>
+                                <Text2
+                                    as="p"
+                                    regular
+                                    color={vars.colors.textSecondary}
+                                    dataAttributes={{testid: 'description'}}
+                                >
                                     {description}
                                 </Text2>
                             </Stack>
@@ -93,6 +102,7 @@ const Callout = ({
                     {onClose && (
                         <div className={styles.closeButtonContainer}>
                             <IconButton
+                                dataAttributes={{testid: 'closeButton'}}
                                 small
                                 bleedY
                                 bleedRight
diff --git a/src/card.css.ts b/src/card.css.ts
index 6613731128..97bf5e2ca7 100644
--- a/src/card.css.ts
+++ b/src/card.css.ts
@@ -415,7 +415,7 @@ export const dataCardTopActionsWithoutIcon = style({
     },
 });
 
-export const flexColumn = style({
+export const flexColumn = sprinkles({
     display: 'flex',
     flexDirection: 'column',
 });
diff --git a/src/card.tsx b/src/card.tsx
index c0c50a78ea..7733afc06a 100644
--- a/src/card.tsx
+++ b/src/card.tsx
@@ -27,22 +27,23 @@ import {getPrefixedDataAttributes} from './utils/dom';
 import {isRunningAcceptanceTest} from './utils/platform';
 import {applyCssVars} from './utils/css';
 import * as tokens from './text-tokens';
+import {
+    type DataAttributes,
+    type HeadingType,
+    type IconProps,
+    type RendersElement,
+    type RendersNullableElement,
+    type TrackingEvent,
+} from './utils/types';
+import {isBiggerHeading} from './utils/headings';
 
 import type {Variant} from './theme-variant-context';
 import type {PressHandler} from './touchable';
 import type {VideoElement, VideoSource} from './video';
 import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
 import type {ExclusifyUnion} from './utils/utility-types';
-import type {
-    DataAttributes,
-    HeadingType,
-    IconProps,
-    RendersElement,
-    RendersNullableElement,
-    TrackingEvent,
-} from './utils/types';
 
-const useInnerText = () => {
+export const useInnerText = (): {text: string; ref: (instance: HTMLElement | null) => void} => {
     const [text, setText] = React.useState('');
 
     const ref: React.LegacyRef<HTMLElement> = React.useCallback((node: HTMLElement) => {
@@ -369,6 +370,7 @@ type CardContentProps = {
     headline?: string | RendersNullableElement<typeof Tag>;
     headlineRef?: (instance: HTMLElement | null) => void;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     pretitleLinesMax?: number;
     title?: string;
     titleAs?: HeadingType;
@@ -387,6 +389,7 @@ const CardContent = ({
     headline,
     headlineRef,
     pretitle,
+    pretitleAs,
     pretitleLinesMax,
     title,
     titleAs = 'h3',
@@ -405,31 +408,85 @@ const CardContent = ({
         <div className={styles.cardContentContainer}>
             {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
             <div className={styles.flexColumn}>
-                {title && (
-                    <div style={{paddingBottom: subtitle || description ? 4 : 0}} data-testid="title">
-                        <Text
-                            {...textProps.text4}
-                            truncate={titleLinesMax}
-                            weight={textPresets.cardTitle.weight}
-                            as={titleAs}
-                            hyphens="auto"
-                        >
-                            {title}
-                        </Text>
-                    </div>
-                )}
-                {headline && (
-                    // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
-                    <div ref={headlineRef} style={{order: -2, paddingBottom: 8}} data-testid="headline">
-                        {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
-                    </div>
-                )}
-                {pretitle && (
-                    <div style={{order: -1, paddingBottom: 4}} data-testid="pretitle">
-                        <Text2 truncate={pretitleLinesMax} as="div" regular hyphens="auto">
-                            {pretitle}
-                        </Text2>
-                    </div>
+                {isBiggerHeading(titleAs, pretitleAs) ? (
+                    <>
+                        {title && (
+                            <div style={{paddingBottom: subtitle || description ? 4 : 0}} data-testid="title">
+                                <Text
+                                    {...textProps.text4}
+                                    truncate={titleLinesMax}
+                                    weight={textPresets.cardTitle.weight}
+                                    as={titleAs}
+                                    hyphens="auto"
+                                >
+                                    {title}
+                                </Text>
+                            </div>
+                        )}
+                        {headline && (
+                            <div
+                                ref={headlineRef}
+                                style={{
+                                    order: -2,
+                                    paddingBottom: pretitle || title || subtitle || description ? 8 : 0,
+                                }}
+                                data-testid="headline"
+                            >
+                                {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
+                            </div>
+                        )}
+                        {pretitle && (
+                            <div style={{order: -1, paddingBottom: 4}} data-testid="pretitle">
+                                <Text2 truncate={pretitleLinesMax} as={pretitleAs} regular hyphens="auto">
+                                    {pretitle}
+                                </Text2>
+                            </div>
+                        )}
+                    </>
+                ) : (
+                    <>
+                        <>
+                            {pretitle && (
+                                <div style={{paddingBottom: 4}} data-testid="pretitle">
+                                    <Text2 truncate={pretitleLinesMax} as={pretitleAs} regular hyphens="auto">
+                                        {pretitle}
+                                    </Text2>
+                                </div>
+                            )}
+                            {headline && (
+                                <div
+                                    ref={headlineRef}
+                                    style={{
+                                        order: -1,
+                                        paddingBottom: pretitle || title || subtitle || description ? 8 : 0,
+                                    }}
+                                    data-testid="headline"
+                                >
+                                    {typeof headline === 'string' ? (
+                                        <Tag type="promo">{headline}</Tag>
+                                    ) : (
+                                        headline
+                                    )}
+                                </div>
+                            )}
+                            {title && (
+                                <div
+                                    style={{paddingBottom: subtitle || description ? 4 : 0}}
+                                    data-testid="title"
+                                >
+                                    <Text
+                                        {...textProps.text4}
+                                        truncate={titleLinesMax}
+                                        weight={textPresets.cardTitle.weight}
+                                        as={titleAs}
+                                        hyphens="auto"
+                                    >
+                                        {title}
+                                    </Text>
+                                </div>
+                            )}
+                        </>
+                    </>
                 )}
                 {subtitle && (
                     <div style={{paddingBottom: description ? 4 : 0}} data-testid="subtitle">
@@ -502,6 +559,7 @@ interface MediaCardBaseProps {
     asset?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     pretitleLinesMax?: number;
     title?: string;
     titleAs?: HeadingType;
@@ -535,6 +593,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
             asset,
             headline,
             pretitle,
+            pretitleAs,
             pretitleLinesMax,
             subtitle,
             subtitleLinesMax,
@@ -561,7 +620,12 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
 
         const ariaLabel =
             ariaLabelProp ||
-            [title, headlineText, pretitle, subtitle, description, extraText].filter(Boolean).join(' ');
+            (isBiggerHeading(titleAs, pretitleAs)
+                ? [title, headlineText, pretitle, subtitle, description, extraText]
+                : [pretitle, headlineText, title, subtitle, description, extraText]
+            )
+                .filter(Boolean)
+                .join(' ');
 
         return (
             <CardContainer
@@ -578,7 +642,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                         aria-label={isTouchable ? ariaLabel : undefined}
                     >
                         {isTouchable && <div className={styles.touchableMediaCardOverlay} />}
-                        <div className={styles.mediaCard}>
+                        <div className={styles.mediaCard} aria-hidden={isTouchable}>
                             <div style={applyCssVars({[mediaStyles.vars.mediaBorderRadius]: '0px'})}>
                                 {media}
                             </div>
@@ -587,6 +651,7 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                                     headline={headline}
                                     headlineRef={headlineRef}
                                     pretitle={pretitle}
+                                    pretitleAs={pretitleAs}
                                     pretitleLinesMax={pretitleLinesMax}
                                     title={title}
                                     titleAs={titleAs}
@@ -633,6 +698,7 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
             asset,
             headline,
             pretitle,
+            pretitleAs,
             pretitleLinesMax,
             subtitle,
             subtitleLinesMax,
@@ -660,7 +726,12 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
 
         const ariaLabel =
             ariaLabelProp ||
-            [title, headlineText, pretitle, subtitle, description, extraText].filter(Boolean).join(' ');
+            (isBiggerHeading(titleAs, pretitleAs)
+                ? [title, headlineText, pretitle, subtitle, description, extraText]
+                : [pretitle, headlineText, title, subtitle, description, extraText]
+            )
+                .filter(Boolean)
+                .join(' ');
 
         return (
             <CardContainer
@@ -675,7 +746,7 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                     className={styles.touchable}
                     aria-label={isTouchable ? ariaLabel : undefined}
                 >
-                    <div className={styles.mediaCard}>
+                    <div className={styles.mediaCard} aria-hidden={isTouchable}>
                         <div style={{position: 'relative'}}>
                             {isTouchable && (
                                 <div
@@ -691,6 +762,7 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                                 headline={headline}
                                 headlineRef={headlineRef}
                                 pretitle={pretitle}
+                                pretitleAs={pretitleAs}
                                 pretitleLinesMax={pretitleLinesMax}
                                 title={title}
                                 titleAs={titleAs}
@@ -786,7 +858,7 @@ export const SmallNakedCard = React.forwardRef<HTMLDivElement, SmallNakedCardPro
                     className={styles.touchable}
                     aria-label={isTouchable ? ariaLabel : undefined}
                 >
-                    <div className={styles.mediaCard}>
+                    <div className={styles.mediaCard} aria-hidden={isTouchable}>
                         <div style={{position: 'relative'}}>
                             {isTouchable && (
                                 <div
@@ -857,6 +929,7 @@ interface DataCardBaseProps {
     asset?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     pretitleLinesMax?: number;
     title?: string;
     titleAs?: HeadingType;
@@ -891,6 +964,7 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
             asset,
             headline,
             pretitle,
+            pretitleAs,
             pretitleLinesMax,
             title,
             titleAs = 'h3',
@@ -921,7 +995,12 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
 
         const ariaLabel =
             ariaLabelProp ||
-            [title, headlineText, pretitle, description, extraText].filter(Boolean).join(' ');
+            (isBiggerHeading(titleAs, pretitleAs)
+                ? [title, headlineText, pretitle, subtitle, description, extraText]
+                : [pretitle, headlineText, title, subtitle, description, extraText]
+            )
+                .filter(Boolean)
+                .join(' ');
 
         return (
             <CardContainer
@@ -939,7 +1018,7 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
                         aria-label={isTouchable ? ariaLabel : undefined}
                     >
                         {isTouchable && <div className={styles.touchableCardOverlay} />}
-                        <div className={styles.dataCard}>
+                        <div className={styles.dataCard} aria-hidden={isTouchable}>
                             <Inline space={0}>
                                 <Stack space={16}>
                                     {asset && (
@@ -957,6 +1036,7 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
                                         headline={headline}
                                         headlineRef={headlineRef}
                                         pretitle={pretitle}
+                                        pretitleAs={pretitleAs}
                                         pretitleLinesMax={pretitleLinesMax}
                                         title={title}
                                         titleAs={titleAs}
@@ -1070,7 +1150,7 @@ export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
                         aria-label={isTouchable ? ariaLabel : undefined}
                     >
                         {isTouchable && <div className={overlayStyle} />}
-                        <section className={styles.snapCard}>
+                        <section className={styles.snapCard} aria-hidden={isTouchable}>
                             <div>
                                 {asset && (
                                     <div
@@ -1136,8 +1216,10 @@ export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
 
 interface DisplayCardContentProps {
     title?: React.ReactNode;
+    titleAs?: HeadingType;
     headline?: React.ReactNode;
     pretitle?: React.ReactNode;
+    pretitleAs?: HeadingType;
     subtitle?: React.ReactNode;
     description?: React.ReactNode;
     extra?: React.ReactNode;
@@ -1147,8 +1229,10 @@ interface DisplayCardContentProps {
 
 const DisplayCardContent = ({
     title,
+    titleAs = 'h3',
     headline,
     pretitle,
+    pretitleAs,
     subtitle,
     description,
     extra,
@@ -1158,21 +1242,56 @@ const DisplayCardContent = ({
     // 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}>
-            {title && (
-                <div style={{paddingBottom: subtitle || description ? 4 : 0}} data-testid="title">
-                    {title}
-                </div>
-            )}
-            {headline && (
-                // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
-                <div ref={headlineRef} style={{order: -2, paddingBottom: 16}} data-testid="headline">
-                    {headline}
-                </div>
-            )}
-            {pretitle && (
-                <div style={{order: -1, paddingBottom: 4}} data-testid="pretitle">
-                    {pretitle}
-                </div>
+            {isBiggerHeading(titleAs, pretitleAs) ? (
+                <>
+                    {title && (
+                        <div style={{paddingBottom: subtitle || description ? 4 : 0}} data-testid="title">
+                            {title}
+                        </div>
+                    )}
+                    {headline && (
+                        <div
+                            ref={headlineRef}
+                            style={{
+                                order: -2,
+                                paddingBottom: pretitle || title || subtitle || description ? 16 : 0,
+                            }}
+                            data-testid="headline"
+                        >
+                            {headline}
+                        </div>
+                    )}
+                    {pretitle && (
+                        <div style={{order: -1, paddingBottom: 4}} data-testid="pretitle">
+                            {pretitle}
+                        </div>
+                    )}
+                </>
+            ) : (
+                <>
+                    {pretitle && (
+                        <div style={{paddingBottom: 4}} data-testid="pretitle">
+                            {pretitle}
+                        </div>
+                    )}
+                    {headline && (
+                        <div
+                            ref={headlineRef}
+                            style={{
+                                order: -1,
+                                paddingBottom: pretitle || title || subtitle || description ? 16 : 0,
+                            }}
+                            data-testid="headline"
+                        >
+                            {headline}
+                        </div>
+                    )}
+                    {title && (
+                        <div style={{paddingBottom: subtitle || description ? 4 : 0}} data-testid="title">
+                            {title}
+                        </div>
+                    )}
+                </>
             )}
 
             {subtitle && (
@@ -1212,6 +1331,7 @@ interface CommonDisplayCardProps {
     dataAttributes?: DataAttributes;
     headline?: React.ReactComponentElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     pretitleLinesMax?: number;
     title: string;
     titleAs?: HeadingType;
@@ -1275,6 +1395,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
             asset,
             headline,
             pretitle,
+            pretitleAs,
             pretitleLinesMax,
             title,
             titleAs = 'h3',
@@ -1323,7 +1444,12 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
 
         const ariaLabel =
             ariaLabelProp ||
-            [title, headlineText, pretitle, description, extraText].filter(Boolean).join(' ');
+            (isBiggerHeading(titleAs, pretitleAs)
+                ? [title, headlineText, pretitle, description, extraText]
+                : [pretitle, headlineText, title, description, extraText]
+            )
+                .filter(Boolean)
+                .join(' ');
 
         return (
             <CardContainer
@@ -1357,7 +1483,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
                     >
                         {isTouchable && <div className={overlayStyle} />}
 
-                        <div className={styles.displayCardContainer}>
+                        <div className={styles.displayCardContainer} aria-hidden={isTouchable}>
                             {(hasImage || hasVideo) && (
                                 <ThemeVariant variant={isExternalInverse ? 'inverse' : 'default'}>
                                     <div className={styles.displayCardBackground}>
@@ -1411,13 +1537,14 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
                                                     </Text6>
                                                 ) : undefined
                                             }
+                                            titleAs={titleAs}
                                             headline={headline}
                                             pretitle={
                                                 pretitle ? (
                                                     <Text2
                                                         forceMobileSizes
                                                         truncate={pretitleLinesMax}
-                                                        as="div"
+                                                        as={pretitleAs}
                                                         regular
                                                         textShadow={textShadow}
                                                     >
@@ -1425,6 +1552,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
                                                     </Text2>
                                                 ) : undefined
                                             }
+                                            pretitleAs={pretitleAs}
                                             description={
                                                 description ? (
                                                     <Text3
@@ -1514,6 +1642,7 @@ interface PosterCardBaseProps {
     dataAttributes?: DataAttributes;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     pretitleLinesMax?: number;
     title?: string;
     titleAs?: HeadingType;
@@ -1568,6 +1697,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
             asset,
             headline,
             pretitle,
+            pretitleAs,
             pretitleLinesMax,
             title,
             titleAs = 'h3',
@@ -1633,7 +1763,12 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
 
         const ariaLabel =
             ariaLabelProp ||
-            [title, headlineText, pretitle, subtitle, description, extraText].filter(Boolean).join(' ');
+            (isBiggerHeading(titleAs, pretitleAs)
+                ? [title, headlineText, pretitle, subtitle, description, extraText]
+                : [pretitle, headlineText, title, subtitle, description, extraText]
+            )
+                .filter(Boolean)
+                .join(' ');
 
         return (
             <CardContainer
@@ -1724,13 +1859,14 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                                                 </Text>
                                             ) : undefined
                                         }
+                                        titleAs={titleAs}
                                         headline={headline}
                                         pretitle={
                                             pretitle ? (
                                                 <Text2
                                                     forceMobileSizes
                                                     truncate={pretitleLinesMax}
-                                                    as="div"
+                                                    as={pretitleAs}
                                                     regular
                                                     textShadow={textShadow}
                                                 >
@@ -1738,6 +1874,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                                                 </Text2>
                                             ) : undefined
                                         }
+                                        pretitleAs={pretitleAs}
                                         subtitle={
                                             subtitle ? (
                                                 <Text2
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-and-link-footer-image-false-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-and-link-footer-image-false-1-snap.png
index 9ddaa5f769..15e8a70275 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-and-link-footer-image-false-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-and-link-footer-image-false-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-and-link-footer-image-true-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-and-link-footer-image-true-1-snap.png
index 7b19189181..e2cc070daf 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-and-link-footer-image-true-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-and-link-footer-image-true-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-footer-image-false-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-footer-image-false-1-snap.png
index d14e59a8c7..55c1e31088 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-footer-image-false-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-footer-image-false-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-footer-image-true-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-footer-image-true-1-snap.png
index fb6acaa8cc..757177b424 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-footer-image-true-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-button-footer-image-true-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-link-footer-image-false-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-link-footer-image-false-1-snap.png
index 6c688b8fe8..ad93627b6c 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-link-footer-image-false-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-link-footer-image-false-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-link-footer-image-true-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-link-footer-image-true-1-snap.png
index e4688a3826..38b07b1ab7 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-link-footer-image-true-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-link-footer-image-true-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-none-footer-image-false-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-none-footer-image-false-1-snap.png
index 0955811ef0..7b27f68f34 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-none-footer-image-false-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-none-footer-image-false-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-none-footer-image-true-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-none-footer-image-true-1-snap.png
index 7d775e24e2..37723c560e 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-none-footer-image-true-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-actions-none-footer-image-true-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-0-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-0-1-snap.png
index 9ddaa5f769..15e8a70275 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-0-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-0-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-1-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-1-1-snap.png
index f63ab76adb..34748e3635 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-1-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-1-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-3-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-3-1-snap.png
index 334010b211..6b803ac56d 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-3-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-3-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-3-no-divider-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-3-no-divider-1-snap.png
index 3de229ac74..fa32bd2b11 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-3-no-divider-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/advanced-data-card-screenshot-test-tsx-advanced-data-card-extras-3-no-divider-1-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-progress-block-2-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-progress-block-2-snap.png
index a9b0c388e7..6f184ae6c1 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-progress-block-2-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-progress-block-2-snap.png differ
diff --git a/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-row-block-1-snap.png b/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-row-block-1-snap.png
index 5b36b6ef70..b412e48096 100644
Binary files a/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-row-block-1-snap.png and b/src/community/__screenshot_tests__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-row-block-1-snap.png differ
diff --git a/src/community/__stories__/advanced-data-card-story.tsx b/src/community/__stories__/advanced-data-card-story.tsx
index 08a2548429..414a5e028e 100644
--- a/src/community/__stories__/advanced-data-card-story.tsx
+++ b/src/community/__stories__/advanced-data-card-story.tsx
@@ -7,6 +7,7 @@ import Image from '../../image';
 import StackingGroup from '../../stacking-group';
 import {Placeholder} from '../../placeholder';
 
+import type {HeadingType} from '../../utils/types';
 import type {TagType} from '../../tag';
 
 export default {
@@ -17,7 +18,9 @@ type Args = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     subtitle: string;
     description: string;
     stackingGroup: boolean;
@@ -33,7 +36,9 @@ export const Default: StoryComponent<Args> = ({
     headlineType,
     headline,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     subtitle,
     description,
     stackingGroup,
@@ -86,7 +91,9 @@ export const Default: StoryComponent<Args> = ({
             }
             headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
             pretitle={pretitle}
+            pretitleAs={pretitleAs}
             title={title}
+            titleAs={titleAs}
             subtitle={subtitle}
             description={description}
             aria-label="aria label"
@@ -109,7 +116,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'headline',
     pretitle: 'pretitle',
+    pretitleAs: 'span',
     title: 'title',
+    titleAs: 'h3',
     subtitle: 'subtitle',
     description: 'description',
     stackingGroup: true,
@@ -138,4 +147,12 @@ Default.argTypes = {
         ],
         control: {type: 'select'},
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
diff --git a/src/community/advanced-data-card.css.ts b/src/community/advanced-data-card.css.ts
index ff39516781..0fbea9ffd9 100644
--- a/src/community/advanced-data-card.css.ts
+++ b/src/community/advanced-data-card.css.ts
@@ -264,3 +264,8 @@ export const topActionsWithoutIcon = style({
         },
     },
 });
+
+export const flexColumn = style({
+    display: 'flex',
+    flexDirection: 'column',
+});
diff --git a/src/community/advanced-data-card.tsx b/src/community/advanced-data-card.tsx
index 1f945d056b..8aba0fbed8 100644
--- a/src/community/advanced-data-card.tsx
+++ b/src/community/advanced-data-card.tsx
@@ -13,11 +13,13 @@ import {vars} from '../skins/skin-contract.css';
 import Box from '../box';
 import Touchable from '../touchable';
 import classNames from 'classnames';
-import {CardActionsGroup} from '../card';
+import {CardActionsGroup, useInnerText} from '../card';
 import {useTheme} from '../hooks';
 import {getPrefixedDataAttributes} from '../utils/dom';
 import Inline from '../inline';
 import {applyCssVars} from '../utils/css';
+import Tag from '../tag';
+import {isBiggerHeading} from '../utils/headings';
 
 import type {PressHandler} from '../touchable';
 import type {ExclusifyUnion} from '../utils/utility-types';
@@ -27,7 +29,6 @@ import type Image from '../image';
 import type {ButtonPrimary, ButtonLink} from '../button';
 import type {DataAttributes, HeadingType, TrackingEvent} from '../utils/types';
 import type {RendersNullableElement} from '../utils/renders-element';
-import type Tag from '../tag';
 import type {
     HighlightedValueBlock,
     InformationBlock,
@@ -59,11 +60,12 @@ type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;
 
 type CardContentProps = {
     headline?: string | RendersNullableElement<typeof Tag>;
+    headlineRef?: (instance: HTMLElement | null) => void;
     pretitle?: string;
-    pretitleAs?: string;
+    pretitleAs?: HeadingType;
     pretitleLinesMax?: number;
     title?: string;
-    titleAs?: string;
+    titleAs: HeadingType;
     titleLinesMax?: number;
     subtitle?: string;
     subtitleLinesMax?: number;
@@ -73,11 +75,12 @@ type CardContentProps = {
 
 const CardContent = ({
     headline,
+    headlineRef,
     pretitle,
-    pretitleAs = 'p',
+    pretitleAs,
     pretitleLinesMax,
     title,
-    titleAs = 'h3',
+    titleAs,
     titleLinesMax,
     subtitle,
     subtitleLinesMax,
@@ -87,36 +90,88 @@ const CardContent = ({
     const {textPresets} = useTheme();
 
     return (
-        <Stack space={4}>
-            {headline}
-            {pretitle && (
-                <Text2
-                    color={vars.colors.textPrimary}
-                    truncate={pretitleLinesMax}
-                    as={pretitleAs}
-                    regular
-                    hyphens="auto"
-                >
-                    {pretitle}
-                </Text2>
+        /** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */
+        <div className={styles.flexColumn}>
+            {isBiggerHeading(titleAs, pretitleAs) ? (
+                <>
+                    {title && (
+                        <div style={{paddingBottom: subtitle || description ? 4 : 0}}>
+                            <Text
+                                {...textProps.text4}
+                                truncate={titleLinesMax}
+                                weight={textPresets.cardTitle.weight}
+                                as={titleAs}
+                                hyphens="auto"
+                            >
+                                {title}
+                            </Text>
+                        </div>
+                    )}
+                    {headline && (
+                        <div
+                            ref={headlineRef}
+                            style={{
+                                order: -2,
+                                paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
+                            }}
+                        >
+                            {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
+                        </div>
+                    )}
+                    {pretitle && (
+                        <div style={{order: -1, paddingBottom: title || subtitle || description ? 4 : 0}}>
+                            <Text2 truncate={pretitleLinesMax} as={pretitleAs} regular hyphens="auto">
+                                {pretitle}
+                            </Text2>
+                        </div>
+                    )}
+                </>
+            ) : (
+                <>
+                    {pretitle && (
+                        <div style={{paddingBottom: title || subtitle || description ? 4 : 0}}>
+                            <Text2 truncate={pretitleLinesMax} as={pretitleAs} regular hyphens="auto">
+                                {pretitle}
+                            </Text2>
+                        </div>
+                    )}
+                    {headline && (
+                        <div
+                            ref={headlineRef}
+                            style={{
+                                order: -1,
+                                paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
+                            }}
+                        >
+                            {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
+                        </div>
+                    )}
+                    {title && (
+                        <div style={{paddingBottom: subtitle || description ? 4 : 0}}>
+                            <Text
+                                {...textProps.text4}
+                                truncate={titleLinesMax}
+                                weight={textPresets.cardTitle.weight}
+                                as={titleAs}
+                                hyphens="auto"
+                            >
+                                {title}
+                            </Text>
+                        </div>
+                    )}
+                </>
+            )}
+            {subtitle && (
+                <div style={{paddingBottom: description ? 4 : 0}}>
+                    <Text2 truncate={subtitleLinesMax} as="div" regular hyphens="auto">
+                        {subtitle}
+                    </Text2>
+                </div>
             )}
-
-            <Text
-                {...textProps.text4}
-                truncate={titleLinesMax}
-                weight={textPresets.cardTitle.weight}
-                as={titleAs}
-                hyphens="auto"
-            >
-                {title}
-            </Text>
-            <Text2 color={vars.colors.textPrimary} truncate={subtitleLinesMax} as="p" regular hyphens="auto">
-                {subtitle}
-            </Text2>
             {description && (
                 <Text2
                     truncate={descriptionLinesMax}
-                    as="p"
+                    as="div"
                     regular
                     color={vars.colors.textSecondary}
                     hyphens="auto"
@@ -124,7 +179,7 @@ const CardContent = ({
                     {description}
                 </Text2>
             )}
-        </Stack>
+        </div>
     );
 };
 
@@ -246,7 +301,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
             pretitleAs,
             pretitleLinesMax,
             title,
-            titleAs,
+            titleAs = 'h3',
             titleLinesMax,
             subtitle,
             subtitleLinesMax,
@@ -265,7 +320,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
 
             dataAttributes,
             actions,
-            'aria-label': ariaLabel,
+            'aria-label': ariaLabelProp,
             onClose,
             ...touchableProps
         },
@@ -280,6 +335,18 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
 
         const topActionsCount = (actions?.length || 0) + (onClose ? 1 : 0);
 
+        const {text: headlineText, ref: headlineRef} = useInnerText();
+        const {text: extraText, ref: extraRef} = useInnerText();
+
+        const ariaLabel =
+            ariaLabelProp ||
+            (isBiggerHeading(titleAs, pretitleAs)
+                ? [title, headlineText, pretitle, subtitle, description, extraText]
+                : [pretitle, headlineText, title, subtitle, description, extraText]
+            )
+                .filter(Boolean)
+                .join(' ');
+
         return (
             <section
                 className={styles.container}
@@ -301,6 +368,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                                 styles.cardContentStyle,
                                 !hasFooter && !hasExtras ? styles.minHeight : ''
                             )}
+                            aria-hidden={isTouchable}
                         >
                             <Box paddingTop={8}>
                                 <Inline space={0}>
@@ -308,6 +376,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                                         {stackingGroup}
                                         <CardContent
                                             headline={headline}
+                                            headlineRef={headlineRef}
                                             pretitle={pretitle}
                                             pretitleAs={pretitleAs}
                                             pretitleLinesMax={pretitleLinesMax}
@@ -334,7 +403,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                         </div>
                         <div style={{flexGrow: 1}} />
                         {hasExtras && (
-                            <div className={styles.extra}>
+                            <div className={styles.extra} ref={extraRef}>
                                 {extra.map((item, index) => {
                                     return (
                                         <div key={index}>
diff --git a/src/cover-hero.css.ts b/src/cover-hero.css.ts
index 921f992dcc..224a816150 100644
--- a/src/cover-hero.css.ts
+++ b/src/cover-hero.css.ts
@@ -126,3 +126,8 @@ export const sixColumns = style({
 });
 
 export const sideExtra = sprinkles({position: 'relative'});
+
+export const flexColumn = sprinkles({
+    display: 'flex',
+    flexDirection: 'column',
+});
diff --git a/src/cover-hero.tsx b/src/cover-hero.tsx
index 7a03b97b63..d2096ca0f7 100644
--- a/src/cover-hero.tsx
+++ b/src/cover-hero.tsx
@@ -12,6 +12,7 @@ import * as mediaStyles from './image.css';
 import GridLayout from './grid-layout';
 import {CoverHeroMedia} from './cover-hero-media';
 import {getPrefixedDataAttributes} from './utils/dom';
+import {isBiggerHeading} from './utils/headings';
 
 import type {DataAttributes, HeadingType} from './utils/types';
 import type {ImageProps, VideoProps} from './cover-hero-media';
@@ -26,6 +27,7 @@ type BaseProps = {
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
     pretitleLinesMax?: number;
+    pretitleAs?: HeadingType;
     title: string;
     titleLinesMax?: number;
     titleAs?: HeadingType;
@@ -73,6 +75,7 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
             headline,
             pretitle,
             pretitleLinesMax,
+            pretitleAs,
             title,
             titleLinesMax,
             titleAs = 'h1',
@@ -108,22 +111,70 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
 
         const textShadow = hasMedia ? '0 0 15px rgba(0, 0, 0, 0.4)' : undefined;
 
+        const pretitleContent = pretitle ? (
+            <Text3
+                regular
+                as={pretitleAs}
+                truncate={pretitleLinesMax}
+                textShadow={textShadow}
+                dataAttributes={{testid: 'pretitle'}}
+            >
+                {pretitle}
+            </Text3>
+        ) : undefined;
+
+        const titleContent = title ? (
+            <Text8
+                as={titleAs}
+                truncate={titleLinesMax}
+                textShadow={textShadow}
+                dataAttributes={{testid: 'title'}}
+            >
+                {title}
+            </Text8>
+        ) : undefined;
+
+        const headlineContent = headline ? (
+            <div style={{order: -1}}>
+                <Box
+                    dataAttributes={{testid: 'headline'}}
+                    paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}
+                >
+                    {headline}
+                </Box>
+            </div>
+        ) : undefined;
+
         const mainContent = (
             <div className={styles.mainContent}>
-                {headline && <Box paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}>{headline}</Box>}
                 <Stack space={16}>
-                    <Stack space={8}>
-                        {pretitle && (
-                            <div className={styles.sixColumns}>
-                                <Text3 regular truncate={pretitleLinesMax} textShadow={textShadow}>
-                                    {pretitle}
-                                </Text3>
-                            </div>
+                    {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
+                    <div className={styles.flexColumn}>
+                        {isBiggerHeading(titleAs, pretitleAs) ? (
+                            <>
+                                {titleContent}
+                                {headlineContent}
+                                {pretitleContent && (
+                                    <div
+                                        className={styles.sixColumns}
+                                        style={{paddingBottom: title ? 8 : 0, order: -1}}
+                                    >
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                {pretitleContent && (
+                                    <div className={styles.sixColumns} style={{paddingBottom: title ? 8 : 0}}>
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                                {headlineContent}
+                                {titleContent}
+                            </>
                         )}
-                        <Text8 as={titleAs} truncate={titleLinesMax} textShadow={textShadow}>
-                            {title}
-                        </Text8>
-                    </Stack>
+                    </div>
                     {description && (
                         <div className={styles.sixColumns}>
                             <Text3
@@ -132,13 +183,14 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                                 truncate={descriptionLinesMax}
                                 color={hasMedia ? vars.colors.textPrimary : vars.colors.textSecondary}
                                 textShadow={textShadow}
+                                dataAttributes={{testid: 'description'}}
                             >
                                 {description}
                             </Text3>
                         </div>
                     )}
                 </Stack>
-                {extra}
+                {extra && <div data-testid="slot">{extra}</div>}
             </div>
         );
 
@@ -180,7 +232,11 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                                         template="8+4"
                                         collapseBreakpoint="mobile"
                                         left={mainContent}
-                                        right={<div className={styles.sideExtra}>{sideExtra}</div>}
+                                        right={
+                                            <div className={styles.sideExtra} data-testid="sideSlot">
+                                                {sideExtra}
+                                            </div>
+                                        }
                                     />
                                 )}
                                 <ButtonGroup
diff --git a/src/empty-state.tsx b/src/empty-state.tsx
index 502f8e1232..ff1f98f7c5 100644
--- a/src/empty-state.tsx
+++ b/src/empty-state.tsx
@@ -67,7 +67,9 @@ const EmptyState = ({
     const {isDarkMode} = useTheme();
     const isInverse = useIsInverseOrMediaVariant();
 
-    const image = imageUrl ? <img className={styles.smallImage} alt="" src={imageUrl} /> : undefined;
+    const image = imageUrl ? (
+        <img data-testid="image" className={styles.smallImage} alt="" src={imageUrl} />
+    ) : undefined;
 
     const buttons: ButtonGroupProps = {
         ...(button?.type === ButtonPrimary ? {primaryButton: button} : {secondaryButton: button}),
@@ -92,13 +94,21 @@ const EmptyState = ({
                         largeImageUrl ? styles.contentVariants.largeImage : styles.contentVariants.default
                     }
                 >
-                    {image ?? (asset && <div className={styles.assetContainer}>{asset}</div>)}
+                    {image ??
+                        (asset && (
+                            <div data-testid="asset" className={styles.assetContainer}>
+                                {asset}
+                            </div>
+                        ))}
                     <Stack space={16}>
-                        <Text6 as={titleAs}>{title}</Text6>
+                        <Text6 as={titleAs} dataAttributes={{testid: 'title'}}>
+                            {title}
+                        </Text6>
                         <Text3
                             regular
                             as="p"
                             color={isInverse ? vars.colors.inverse : vars.colors.textSecondary}
+                            dataAttributes={{testid: 'description'}}
                         >
                             {description}
                         </Text3>
@@ -115,6 +125,7 @@ const EmptyState = ({
                         width="100%"
                     >
                         <div
+                            data-testid="image"
                             className={styles.largeImage}
                             style={{backgroundImage: `url(${largeImageUrl})`}}
                         />
diff --git a/src/header.css.ts b/src/header.css.ts
index cae9bbbaeb..6eda6c6c41 100644
--- a/src/header.css.ts
+++ b/src/header.css.ts
@@ -23,3 +23,8 @@ export const hideOnDesktop = style({
         },
     },
 });
+
+export const flexColumn = sprinkles({
+    display: 'flex',
+    flexDirection: 'column',
+});
diff --git a/src/header.tsx b/src/header.tsx
index 3c2b3743ac..95c1730f79 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -10,10 +10,16 @@ import {vars} from './skins/skin-contract.css';
 import * as styles from './header.css';
 import {getPrefixedDataAttributes} from './utils/dom';
 import {Title3, Title4} from './title';
+import {
+    type DataAttributes,
+    type HeadingType,
+    type RendersElement,
+    type RendersNullableElement,
+} from './utils/types';
+import {isBiggerHeading} from './utils/headings';
 
 import type NavigationBreadcrumbs from './navigation-breadcrumbs';
 import type {ButtonPrimary, ButtonSecondary} from './button';
-import type {DataAttributes, HeadingType, RendersElement, RendersNullableElement} from './utils/types';
 import type {TextPresetProps} from './text';
 
 type OverridableTextProps = {
@@ -45,47 +51,105 @@ export const Header = ({
     dataAttributes,
     small = false,
 }: HeaderProps): JSX.Element => {
-    const renderRichText = (richText: RichText, baseProps: Omit<TextPresetProps, 'children'>) => {
-        if (typeof richText === 'string') {
-            return (
-                <Text3 regular {...baseProps}>
-                    {richText}
-                </Text3>
-            );
+    const renderPretitle = () => {
+        if (!pretitle) {
+            return null;
         }
-        const {text, ...textProps} = richText;
+        const baseTextProps = {
+            regular: true,
+            color: vars.colors.textPrimary,
+            as: pretitleAs,
+            dataAttributes: {testid: 'pretitle'},
+        } as const;
+
+        if (typeof pretitle === 'string') {
+            return <Text3 {...baseTextProps}>{pretitle}</Text3>;
+        }
+        const {text, ...textProps} = pretitle;
         return (
-            <Text3 regular {...baseProps} {...textProps}>
-                {richText.text}
+            <Text3 {...baseTextProps} {...textProps}>
+                {text}
             </Text3>
         );
     };
 
+    const pretitleContent = renderPretitle();
+
+    const titleContent = title ? (
+        small ? (
+            <Title3 as={titleAs} dataAttributes={{testid: 'title'}}>
+                {title}
+            </Title3>
+        ) : (
+            <Title4 as={titleAs} dataAttributes={{testid: 'title'}}>
+                {title}
+            </Title4>
+        )
+    ) : undefined;
+
+    const headlineContent = headline ? (
+        <div
+            style={{paddingBottom: pretitle || title || description ? 8 : 0, order: -1}}
+            data-testid="headline"
+        >
+            {headline}
+        </div>
+    ) : undefined;
+
     return (
-        <Stack space={{mobile: 24, desktop: 32}} dataAttributes={dataAttributes}>
+        <Stack space={{mobile: 24, desktop: 32}} dataAttributes={{testid: 'Header', ...dataAttributes}}>
             {(title || pretitle || description) && (
                 <Box paddingRight={16}>
-                    <Stack space={8}>
-                        {headline}
-                        {pretitle &&
-                            renderRichText(pretitle, {color: vars.colors.textPrimary, as: pretitleAs})}
-                        {title &&
-                            (small ? (
-                                <Title3 as={titleAs}>{title}</Title3>
-                            ) : (
-                                <Title4 as={titleAs}>{title}</Title4>
-                            ))}
-                        {description &&
-                            (small ? (
-                                <Text2 regular color={vars.colors.textSecondary}>
-                                    {description}
-                                </Text2>
-                            ) : (
-                                <Text3 regular color={vars.colors.textSecondary}>
-                                    {description}
-                                </Text3>
-                            ))}
-                    </Stack>
+                    {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
+                    <div className={styles.flexColumn}>
+                        {isBiggerHeading(titleAs, pretitleAs) ? (
+                            <>
+                                {titleContent && (
+                                    <div style={{paddingBottom: description ? 8 : 0}}>{titleContent}</div>
+                                )}
+                                {headlineContent}
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: title || description ? 8 : 0, order: -1}}>
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: title || description ? 8 : 0}}>
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                                {headlineContent}
+                                {titleContent && (
+                                    <div style={{paddingBottom: description ? 8 : 0}}>{titleContent}</div>
+                                )}
+                            </>
+                        )}
+
+                        {description && (
+                            <div style={{order: 1}}>
+                                {small ? (
+                                    <Text2
+                                        regular
+                                        color={vars.colors.textSecondary}
+                                        dataAttributes={{testid: 'description'}}
+                                    >
+                                        {description}
+                                    </Text2>
+                                ) : (
+                                    <Text3
+                                        regular
+                                        color={vars.colors.textSecondary}
+                                        dataAttributes={{testid: 'description'}}
+                                    >
+                                        {description}
+                                    </Text3>
+                                )}
+                            </div>
+                        )}
+                    </div>
                 </Box>
             )}
         </Stack>
@@ -97,6 +161,7 @@ type MainSectionHeaderProps = {
     titleAs?: HeadingType;
     description?: string;
     button?: RendersNullableElement<typeof ButtonPrimary> | RendersNullableElement<typeof ButtonSecondary>;
+    dataAttributes?: DataAttributes;
 };
 
 export const MainSectionHeader = ({
@@ -104,12 +169,23 @@ export const MainSectionHeader = ({
     titleAs = 'h1',
     description,
     button,
+    dataAttributes,
 }: MainSectionHeaderProps): JSX.Element => {
     return (
-        <Stack space={32}>
+        <Stack
+            space={32}
+            dataAttributes={{
+                testid: 'MainSectionHeader',
+                ...dataAttributes,
+            }}
+        >
             <Stack space={{mobile: 12, desktop: 16}}>
-                {title && <Text7 as={titleAs}>{title}</Text7>}
-                {description && <Text6>{description}</Text6>}
+                {title && (
+                    <Text7 as={titleAs} dataAttributes={{testid: 'title'}}>
+                        {title}
+                    </Text7>
+                )}
+                {description && <Text6 dataAttributes={{testid: 'description'}}>{description}</Text6>}
             </Stack>
             {button}
         </Stack>
@@ -154,8 +230,8 @@ export const HeaderLayout = ({
     useSetOverscrollColor(isInverse ? {topColor: vars.colors.backgroundBrandTop} : {});
 
     return (
-        <div {...getPrefixedDataAttributes({'component-name': 'HeaderLayout', ...dataAttributes})}>
-            <ResponsiveLayout isInverse={isInverse}>
+        <div {...getPrefixedDataAttributes(dataAttributes, 'HeaderLayout')}>
+            <ResponsiveLayout variant={isInverse ? 'inverse' : undefined}>
                 <Box
                     paddingTop={
                         noPaddingY
@@ -214,8 +290,12 @@ export const MainSectionHeaderLayout = ({
     useSetOverscrollColor(isInverse ? {topColor: vars.colors.backgroundBrandTop} : {});
     return (
         <ResponsiveLayout
-            isInverse={isInverse}
-            dataAttributes={{'component-name': 'MainSectionHeaderLayout', ...dataAttributes}}
+            variant={isInverse ? 'inverse' : undefined}
+            dataAttributes={{
+                'component-name': 'MainSectionHeaderLayout',
+                testid: 'MainSectionHeaderLayout',
+                ...dataAttributes,
+            }}
         >
             <GridLayout
                 template="6+6"
diff --git a/src/hero.css.ts b/src/hero.css.ts
index 4485e10460..6e7ab36bca 100644
--- a/src/hero.css.ts
+++ b/src/hero.css.ts
@@ -57,3 +57,8 @@ export const expandedContent = style({
     flexDirection: 'column',
     flex: 1,
 });
+
+export const flexColumn = sprinkles({
+    display: 'flex',
+    flexDirection: 'column',
+});
diff --git a/src/hero.tsx b/src/hero.tsx
index fb30a8638c..a4c3dae3cd 100644
--- a/src/hero.tsx
+++ b/src/hero.tsx
@@ -15,12 +15,18 @@ import {getPrefixedDataAttributes} from './utils/dom';
 import {useIsInverseOrMediaVariant} from './theme-variant-context';
 import {applyCssVars} from './utils/css';
 import {InternalResponsiveLayout, ResetResponsiveLayout} from './responsive-layout';
+import {
+    type DataAttributes,
+    type HeadingType,
+    type RendersElement,
+    type RendersNullableElement,
+} from './utils/types';
+import {isBiggerHeading} from './utils/headings';
 
 import type Image from './image';
 import type Video from './video';
 import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
 import type Tag from './tag';
-import type {DataAttributes, HeadingType, RendersElement, RendersNullableElement} from './utils/types';
 
 const CONTENT_BACKGROUND_COLOR = {
     default: skinVars.colors.background,
@@ -49,6 +55,7 @@ const Layout = ({children, isInverse, backgroundColor}: LayoutProps) => {
 type HeroContentProps = {
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     title?: string;
     titleAs?: HeadingType;
     description?: string;
@@ -64,6 +71,7 @@ const HeroContent = ({
     title,
     titleAs = 'h1',
     pretitle,
+    pretitleAs,
     description,
     descriptionLinesMax,
     extra,
@@ -71,31 +79,67 @@ const HeroContent = ({
     secondaryButton,
     buttonLink,
 }: HeroContentProps) => {
+    const titleContent = title ? (
+        <Text8 as={titleAs} dataAttributes={{testid: 'title'}}>
+            {title}
+        </Text8>
+    ) : undefined;
+
+    const pretitleContent = pretitle ? (
+        <Text3 as={pretitleAs} regular dataAttributes={{testid: 'pretitle'}}>
+            {pretitle}
+        </Text3>
+    ) : undefined;
+
+    const headlineContent = headline ? (
+        <div
+            data-testid="headline"
+            style={{paddingBottom: pretitle || title || description ? 16 : 0, order: -1}}
+        >
+            {headline}
+        </div>
+    ) : undefined;
+
     return (
         <section className={styles.contentContainer}>
             <div>
                 <Stack space={16}>
-                    {headline && headline}
-                    <Stack space={8}>
-                        {pretitle && (
-                            <Text3 as="p" regular>
-                                {pretitle}
-                            </Text3>
+                    {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
+                    <div className={styles.flexColumn}>
+                        {isBiggerHeading(titleAs, pretitleAs) ? (
+                            <>
+                                {titleContent}
+                                {headlineContent}
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: title ? 8 : 0, order: -1}}>
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: title ? 8 : 0}}>{pretitleContent}</div>
+                                )}
+                                {headlineContent}
+                                {titleContent}
+                            </>
                         )}
-                        {title && <Text8 as={titleAs}>{title}</Text8>}
-                    </Stack>
+                    </div>
+
                     {description && (
                         <Text3
                             as="p"
                             regular
                             color={skinVars.colors.textSecondary}
                             truncate={descriptionLinesMax}
+                            dataAttributes={{testid: 'description'}}
                         >
                             {description}
                         </Text3>
                     )}
                 </Stack>
-                {extra && <div>{extra}</div>}
+                {extra && <div data-testid="slot">{extra}</div>}
             </div>
             {(button || buttonLink) && (
                 <div className={styles.actions}>
@@ -113,6 +157,7 @@ type HeroProps = {
     media: RendersElement<typeof Image> | RendersElement<typeof Video>;
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     title?: string;
     titleAs?: HeadingType;
     description?: string;
@@ -151,7 +196,7 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
                 <ResetResponsiveLayout>
                     <div style={applyCssVars({[mediaStyles.vars.mediaBorderRadius]: '0px'})}>
                         <div
-                            {...getPrefixedDataAttributes({'component-name': 'Hero', ...dataAttributes})}
+                            {...getPrefixedDataAttributes(dataAttributes, 'Hero')}
                             ref={ref}
                             style={{
                                 ...(height === '100vh' ? {maxHeight: '-webkit-fill-available'} : {}), // Hack to avoid issues in Safari with 100vh
@@ -209,7 +254,7 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
 
         return (
             <div
-                {...getPrefixedDataAttributes({'component-name': 'Hero', ...dataAttributes})}
+                {...getPrefixedDataAttributes(dataAttributes, 'Hero')}
                 ref={ref}
                 style={{
                     ...(height === '100vh' ? {maxHeight: '-webkit-fill-available'} : {}), // Hack to avoid issues in Safari with 100vh
diff --git a/src/highlighted-card.tsx b/src/highlighted-card.tsx
index e685b41a84..6d4edbea68 100644
--- a/src/highlighted-card.tsx
+++ b/src/highlighted-card.tsx
@@ -73,9 +73,13 @@ const Content = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
     const content = (
         <Boxed
             ref={ref}
-            isInverse={isInverse}
+            variant={isInverse ? 'inverse' : 'default'}
             className={styles.container}
-            dataAttributes={{'component-name': 'HighlightedCard', ...dataAttributes}}
+            dataAttributes={{
+                'component-name': 'HighlightedCard',
+                testid: 'HighlightedCard',
+                ...dataAttributes,
+            }}
             width={width ? `${width}px` : '100%'}
             minHeight="100%"
         >
@@ -94,6 +98,7 @@ const Content = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
                             weight={textPresets.cardTitle.weight}
                             as={titleAs}
                             hyphens="auto"
+                            dataAttributes={{testid: 'title'}}
                         >
                             {title}
                         </Text>
@@ -105,6 +110,7 @@ const Content = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
                             truncate={descriptionLinesMax}
                             as="p"
                             hyphens="auto"
+                            dataAttributes={{testid: 'description'}}
                         >
                             {description}
                         </Text2>
@@ -119,6 +125,7 @@ const Content = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
             </div>
             {imageUrl && (
                 <div
+                    data-testid="image"
                     {...(imageAlt
                         ? {
                               role: 'img',
diff --git a/src/index.tsx b/src/index.tsx
index e8d1dc47e8..fe30cf3310 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -64,6 +64,7 @@ export {default as HorizontalScroll} from './horizontal-scroll';
 export {default as HighlightedCard} from './highlighted-card';
 export {default as Stepper} from './stepper';
 export {ProgressBar, ProgressBarStepped} from './progress-bar';
+export {default as Meter} from './meter';
 export {Rating, InfoRating} from './rating';
 export {VerticalMosaic, HorizontalMosaic} from './mosaic';
 export {Timer, TextTimer} from './timer';
diff --git a/src/maybe-dismissable.tsx b/src/maybe-dismissable.tsx
index bb78735f4e..6627c412e0 100644
--- a/src/maybe-dismissable.tsx
+++ b/src/maybe-dismissable.tsx
@@ -43,6 +43,7 @@ const MaybeDismissable = ({
             <ThemeVariant variant={variant}>
                 <div className={styles.dismissableButton}>
                     <IconButton
+                        dataAttributes={{testid: 'closeButton'}}
                         onPress={onClose}
                         aria-label={texts.closeButtonLabel || t(tokens.closeButtonLabel)}
                         small
diff --git a/src/meter.tsx b/src/meter.tsx
new file mode 100644
index 0000000000..ea1cf6a902
--- /dev/null
+++ b/src/meter.tsx
@@ -0,0 +1,494 @@
+// https://www.figma.com/design/jWWCJ9kYl6I5uHLz3GcgRp/%F0%9F%94%B6-%5BREADY%5D-Data-Visualizations-Specs
+'use client';
+import * as React from 'react';
+import {vars} from './skins/skin-contract.css';
+// @ts-expect-error - no types
+import bezier from 'cubic-bezier';
+import {getPrefixedDataAttributes} from './utils/dom';
+import {useThemeVariant} from './theme-variant-context';
+import {useElementDimensions, useTheme} from './hooks';
+import {meterTotalLabel, meterSectionLabel} from './text-tokens';
+import {isRunningAcceptanceTest} from './utils/platform';
+
+import type {DataAttributes} from './utils/types';
+
+const VIEW_BOX_WIDTH = 100;
+const CENTER_X = VIEW_BOX_WIDTH / 2;
+const CENTER_Y = VIEW_BOX_WIDTH / 2;
+
+const STROKE_WIDTH_PX = 6;
+const SEPARATION_PX = 2;
+
+const ANIMATION_DELAY_MS = 200;
+const ANIMATION_DURATION_MS = 1000;
+const ANIMATION_EPSILON = 1000 / 60 / ANIMATION_DURATION_MS / 4;
+
+const MAX_SEGMENT_VALUE = 100;
+const SMALL_VALUE_THRESHOLD = 0.0001;
+
+const TYPE_LINEAR = 'linear';
+const TYPE_ANGULAR = 'angular';
+const TYPE_CIRCULAR = 'circular';
+
+export type MeterType = typeof TYPE_LINEAR | typeof TYPE_ANGULAR | typeof TYPE_CIRCULAR;
+
+const DEFAULT_COLORS = [
+    vars.colors.controlActivated,
+    vars.colors.warning,
+    vars.colors.success,
+    vars.colors.highlight,
+    vars.colors.promo,
+];
+
+const DEFAULT_COLORS_INVERSE = [
+    vars.colors.controlActivatedInverse,
+    vars.colors.warning,
+    vars.colors.success,
+    vars.colors.highlight,
+    vars.colors.promo,
+];
+
+/**
+ * "start"/"end" values for each segment of the meter. The values are in the range [0, 1]
+ */
+type Segment = {
+    start: number;
+    end: number;
+};
+
+/**
+ * Cubic bezier easing function https://github.com/arian/cubic-bezier/blob/27d2512d15a0b873fa0fca8769069c7b290e80f8/index.js
+ * @param time - time in the range [0, 1]
+ */
+const timingFunction: (time: number) => number = bezier(0.75, 0, 0.27, 1, ANIMATION_EPSILON);
+
+const clamp = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max);
+
+/**
+ * Calculate the start and end segment values for each segment of the meter
+ */
+const calculateSegments = (
+    currentValues: Array<number>,
+    targetValues: Array<number>,
+    time: number,
+    reverse: boolean
+): Array<Segment> => {
+    const segments: Array<Segment> = [];
+
+    let startValue = 0;
+    let endValue = 0;
+    for (let i = 0; i < currentValues.length; i++) {
+        startValue += currentValues[i];
+        endValue += targetValues[i];
+
+        // each segment has an accumulated delay time. The last segment has no delay
+        const delay = ANIMATION_DELAY_MS * (reverse ? i : currentValues.length - 1 - i);
+        const animationTime = clamp((time - delay) / ANIMATION_DURATION_MS, 0, 1);
+
+        const t = clamp(timingFunction(animationTime), 0, 1);
+        const start = segments.at(-1)?.end || 0;
+        const end = clamp(startValue + (endValue - startValue) * t, 0, 1 - SMALL_VALUE_THRESHOLD);
+        segments.push({start, end});
+    }
+    return segments;
+};
+
+const createPath = ({
+    x1,
+    y1,
+    x2,
+    y2,
+    radius,
+    clockwise = 1,
+    largeArchFlag = 0,
+}: {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    radius: number;
+    clockwise?: 0 | 1 | boolean;
+    largeArchFlag?: 0 | 1 | boolean;
+}): string => {
+    const xAxisRotation = 0;
+    if (radius) {
+        //  https://www.nan.fyi/svg-paths/arcs
+        return `M ${x1} ${y1} A ${radius} ${radius} ${xAxisRotation} ${+largeArchFlag} ${+clockwise} ${x2} ${y2}`;
+    } else {
+        // https://www.nan.fyi/svg-paths/lines
+        return `M ${x1} ${y1} L ${x2} ${y2}`;
+    }
+};
+
+type MeterProps = {
+    type?: MeterType;
+    /** Position of the meter. 0 is at the start, 100 is at the end. The sum of the values must not exceed 100. */
+    values: Array<number>;
+    width?: number | string;
+    colors?: Array<string>;
+    reverse?: boolean;
+    dataAttributes?: DataAttributes;
+    'aria-hidden'?: boolean | 'true' | 'false';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+
+const MeterComponent = ({
+    type = TYPE_ANGULAR,
+    width: widthProp = '100%',
+    colors,
+    values: valuesProp,
+    reverse = false,
+    dataAttributes,
+    'aria-hidden': ariaHidden = false,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+}: MeterProps): JSX.Element => {
+    const {borderRadii, t} = useTheme();
+    const {ref: containerRef, width: containerWidth} = useElementDimensions();
+    const hasRoundLineCaps = parseInt(borderRadii.bar) !== 0;
+    const themeVariant = useThemeVariant();
+    const isOverMedia = themeVariant === 'media';
+    const isInverse = themeVariant === 'inverse';
+    const segmentColors = colors || (isInverse || isOverMedia ? DEFAULT_COLORS_INVERSE : DEFAULT_COLORS);
+    const [width, setWidth] = React.useState<number>(typeof widthProp === 'number' ? widthProp : 0);
+    const scaleFactor = width === 0 ? 1 : VIEW_BOX_WIDTH / width;
+    const lineCapRadiusPx = hasRoundLineCaps ? STROKE_WIDTH_PX / 2 : 0;
+    const lineCapRadius = lineCapRadiusPx * scaleFactor;
+    const strokeWidth = STROKE_WIDTH_PX * scaleFactor;
+    const radius = type === TYPE_LINEAR ? 0 : CENTER_X - strokeWidth / 2;
+    const separation = SEPARATION_PX * scaleFactor;
+
+    const id = React.useId();
+    const markerCurrentId = `marker-current-${id}`;
+    const markerStartId = `marker-start-${id}`;
+    const maskLastSegmentId = `mask-last-segment-${id}`;
+    const maskBarTrackId = `mask-bar-track-${id}`;
+
+    const shouldAnimate = React.useMemo(() => {
+        return (
+            window.matchMedia(`(prefers-reduced-motion: reduce)`).matches !== true &&
+            !isRunningAcceptanceTest()
+        );
+    }, []);
+
+    const maxValue =
+        type === TYPE_LINEAR
+            ? VIEW_BOX_WIDTH - lineCapRadius * 2
+            : type === TYPE_CIRCULAR
+              ? Math.PI * 2
+              : Math.PI;
+
+    const segmentSeparation =
+        type === TYPE_LINEAR ? separation / VIEW_BOX_WIDTH : separation / radius / maxValue;
+
+    const height =
+        type === TYPE_LINEAR ? STROKE_WIDTH_PX : type === TYPE_CIRCULAR ? width : width / 2 + lineCapRadiusPx;
+
+    const viewBoxHeight =
+        type === TYPE_LINEAR
+            ? strokeWidth
+            : type === TYPE_CIRCULAR
+              ? VIEW_BOX_WIDTH
+              : CENTER_X + lineCapRadius;
+
+    const trackbarColor = isOverMedia
+        ? vars.colors.inverse
+        : isInverse
+          ? vars.colors.barTrackInverse
+          : vars.colors.barTrack;
+
+    //  scale values to the range [0, 1]
+    const values = React.useMemo(() => {
+        return valuesProp.map((v) => v / MAX_SEGMENT_VALUE);
+    }, [valuesProp]);
+
+    // the animation starts with these values
+    const initialValuesRef = React.useRef<Array<number>>(
+        Array.from({length: values.length}, () => (reverse ? 1 : 0))
+    );
+
+    const [segments, setSegments] = React.useState<Array<Segment>>(() => {
+        return values.map(() => ({start: 0, end: 0}));
+    });
+
+    // this is to know which are the first and last visible segments, which have special treatments
+    let firstNonZeroIndex = -1;
+    let lastNonZeroIndex = -1;
+    for (let i = 0; i < segments.length; i++) {
+        if (segments[i].end - segments[i].start > SMALL_VALUE_THRESHOLD) {
+            if (firstNonZeroIndex < 0) {
+                firstNonZeroIndex = i;
+            }
+            lastNonZeroIndex = i;
+        }
+    }
+
+    const lastSegment: Segment | undefined = segments.at(-1);
+
+    React.useEffect(() => {
+        if (typeof widthProp === 'number') {
+            setWidth(widthProp);
+        } else {
+            setWidth(containerWidth);
+        }
+    }, [widthProp, containerWidth]);
+
+    React.useEffect(() => {
+        let raf: number;
+        const start = performance.now();
+        const end = start + ANIMATION_DURATION_MS + ANIMATION_DELAY_MS * (values.length - 1);
+        let currentSegments: Array<Segment> = [];
+        const animate = () => {
+            const now = performance.now();
+            currentSegments = calculateSegments(initialValuesRef.current, values, now - start, reverse);
+            if (shouldAnimate && now < end) {
+                raf = requestAnimationFrame(animate); // request next frame
+            } else {
+                currentSegments = calculateSegments(initialValuesRef.current, values, end - start, reverse); // set the final values
+                initialValuesRef.current = values;
+            }
+            setSegments(currentSegments);
+        };
+        animate();
+        return () => {
+            cancelAnimationFrame(raf);
+            // animation was cancelled, snapshot current values
+            initialValuesRef.current = currentSegments.map((s) => s.end - s.start);
+        };
+    }, [radius, values, type, reverse, shouldAnimate]);
+
+    const getX = React.useCallback(
+        (value: number) =>
+            type === TYPE_LINEAR
+                ? lineCapRadius + maxValue * value
+                : CENTER_X - radius * Math.cos(value * maxValue),
+        [lineCapRadius, maxValue, radius, type]
+    );
+
+    const getY = React.useCallback(
+        (value: number) =>
+            type === TYPE_LINEAR ? strokeWidth / 2 : CENTER_Y - radius * Math.sin(value * maxValue),
+        [maxValue, radius, strokeWidth, type]
+    );
+
+    const getColor = (index: number) => segmentColors[index % segmentColors.length];
+
+    const totalPercent = Math.round((lastSegment?.end || 0) * 100);
+
+    const valueText =
+        t(meterTotalLabel, values.length, totalPercent) +
+        ' ' +
+        values.map((v, i) => `${t(meterSectionLabel, i + 1, Math.round(v * 100))}`).join('. ');
+
+    return (
+        <div
+            ref={containerRef}
+            style={{width: widthProp}}
+            role="meter"
+            aria-label={ariaLabel || (ariaLabelledBy ? undefined : valueText)}
+            aria-labelledby={ariaLabelledBy}
+            aria-valuenow={totalPercent}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-live="polite"
+            aria-valuetext={valueText}
+            aria-hidden={ariaHidden}
+            {...getPrefixedDataAttributes(dataAttributes, 'Meter')}
+        >
+            <svg
+                viewBox={`0 0 ${VIEW_BOX_WIDTH} ${viewBoxHeight}`}
+                style={{
+                    width,
+                    height,
+                    display: 'block',
+                    transform: `rotate(${type === TYPE_CIRCULAR ? '90deg' : 0})`,
+                }}
+                // always hidden
+                aria-hidden="true"
+            >
+                <defs>
+                    {hasRoundLineCaps && (
+                        <>
+                            <marker
+                                id={markerCurrentId}
+                                viewBox="0 0 10 10"
+                                markerWidth={1}
+                                markerHeight={1}
+                                orient="auto"
+                                refX={5}
+                                refY={5}
+                            >
+                                <rect x={4} y={0} width={2} height={10} fill={getColor(lastNonZeroIndex)} />
+                                <path
+                                    d={createPath({x1: 5, y1: 0, x2: 5, y2: 10, radius: 5})}
+                                    fill={getColor(lastNonZeroIndex)}
+                                />
+                            </marker>
+                            <marker
+                                id={markerStartId}
+                                viewBox="0 0 10 10"
+                                markerWidth={1}
+                                markerHeight={1}
+                                orient="auto"
+                                refX={5}
+                                refY={5}
+                            >
+                                <rect x={4} y={0} width={2} height={10} fill={getColor(firstNonZeroIndex)} />
+                                <path
+                                    d={createPath({x1: 5, y1: 0, x2: 5, y2: 10, radius: 5, clockwise: 0})}
+                                    fill={getColor(firstNonZeroIndex)}
+                                />
+                            </marker>
+                        </>
+                    )}
+                    <mask id={maskBarTrackId} maskUnits="userSpaceOnUse">
+                        <rect x={0} y={0} width={VIEW_BOX_WIDTH} height={viewBoxHeight} fill="white" />
+                        {firstNonZeroIndex >= 0 && lastSegment && (
+                            <>
+                                <path
+                                    // this path is used to mask the trackbar
+                                    stroke="black"
+                                    fill="none"
+                                    strokeWidth={strokeWidth + separation * 2}
+                                    strokeLinecap={
+                                        type === TYPE_CIRCULAR || !hasRoundLineCaps ? 'butt' : 'round'
+                                    }
+                                    d={createPath({
+                                        x1: getX(0),
+                                        y1: getY(0),
+                                        x2: getX(
+                                            clamp(
+                                                lastSegment.end + (hasRoundLineCaps ? 0 : segmentSeparation),
+                                                0,
+                                                1 - SMALL_VALUE_THRESHOLD
+                                            )
+                                        ),
+                                        y2: getY(
+                                            clamp(
+                                                lastSegment.end + (hasRoundLineCaps ? 0 : segmentSeparation),
+                                                0,
+                                                1 - SMALL_VALUE_THRESHOLD
+                                            )
+                                        ),
+                                        radius,
+                                        largeArchFlag: type === TYPE_CIRCULAR ? lastSegment.end >= 0.5 : 0,
+                                    })}
+                                />
+                                {type === TYPE_CIRCULAR && hasRoundLineCaps && (
+                                    // the circular type has butt line caps, so we need to add a circle to the end
+                                    <circle
+                                        cx={getX(lastSegment.end)}
+                                        cy={getY(lastSegment.end)}
+                                        r={strokeWidth / 2 + separation}
+                                        fill="black"
+                                    />
+                                )}
+                                {type === TYPE_CIRCULAR && lastSegment.end <= 0.5 && (
+                                    // small patch to remove the circular mask when the last segment is too near to the start
+                                    <rect
+                                        x={0}
+                                        y={CENTER_Y + separation}
+                                        width={strokeWidth + separation * 2}
+                                        height={strokeWidth / 2 + separation}
+                                        fill="white"
+                                    />
+                                )}
+                            </>
+                        )}
+                    </mask>
+                    {type === TYPE_CIRCULAR && (
+                        <mask id={maskLastSegmentId} maskUnits="userSpaceOnUse">
+                            <rect x={0} y={0} width={VIEW_BOX_WIDTH} height={viewBoxHeight} fill="white" />
+                            <path
+                                stroke="black"
+                                strokeWidth={strokeWidth}
+                                fill="none"
+                                d={createPath({
+                                    x1: getX(1 - segmentSeparation),
+                                    y1: getY(1 - segmentSeparation),
+                                    x2: getX(1),
+                                    y2: getY(1),
+                                    radius,
+                                })}
+                            />
+                        </mask>
+                    )}
+                </defs>
+
+                <path
+                    stroke={trackbarColor}
+                    opacity={isOverMedia ? 0.5 : 1}
+                    fill="none"
+                    strokeWidth={strokeWidth}
+                    strokeLinecap={type === TYPE_CIRCULAR || !hasRoundLineCaps ? 'butt' : 'round'}
+                    d={createPath({
+                        x1: getX(0),
+                        y1: getY(0),
+                        x2: getX(1 - (type === TYPE_CIRCULAR ? segmentSeparation : 0)),
+                        y2: getY(1 - (type === TYPE_CIRCULAR ? segmentSeparation : 0)),
+                        largeArchFlag: 1,
+                        radius,
+                    })}
+                    mask={`url("#${maskBarTrackId}")`}
+                />
+
+                {firstNonZeroIndex >= 0 &&
+                    [...segments].reverse().map((segment, reversedIndex) => {
+                        // note that the list is reversed, so the first segment is drawn last
+                        const index = segments.length - 1 - reversedIndex;
+                        const color = getColor(index);
+                        const isFirst = index === firstNonZeroIndex;
+                        const isLast = index === lastNonZeroIndex;
+                        const start =
+                            isFirst || segment.end - segment.start < segmentSeparation
+                                ? segment.start
+                                : segment.start + segmentSeparation / 2;
+                        const end =
+                            isLast || segment.end - segment.start < segmentSeparation
+                                ? segment.end
+                                : segment.end - segmentSeparation / 2;
+
+                        if (end - start < SMALL_VALUE_THRESHOLD) {
+                            return null;
+                        }
+
+                        const shouldIncludeStartMarker = isFirst && type !== TYPE_CIRCULAR;
+                        return (
+                            <path
+                                key={reversedIndex}
+                                stroke={color}
+                                fill="none"
+                                strokeWidth={strokeWidth}
+                                strokeLinecap="butt"
+                                markerEnd={isLast ? `url(#${markerCurrentId})` : undefined}
+                                markerStart={shouldIncludeStartMarker ? `url(#${markerStartId})` : undefined}
+                                mask={
+                                    isLast && type === TYPE_CIRCULAR
+                                        ? `url("#${maskLastSegmentId}")`
+                                        : undefined
+                                }
+                                d={createPath({
+                                    x1: getX(start),
+                                    y1: getY(start),
+                                    x2: getX(end),
+                                    y2: getY(end),
+                                    largeArchFlag: type === TYPE_CIRCULAR ? end - start >= 0.5 : 0,
+                                    radius,
+                                })}
+                            />
+                        );
+                    })}
+            </svg>
+        </div>
+    );
+};
+
+/**
+ * This wrapper is to force a remount when some specific props change
+ */
+const Meter = (props: MeterProps): JSX.Element => {
+    return <MeterComponent {...props} key={`${props.type},${props.values.length},${props.reverse}`} />;
+};
+
+export default Meter;
diff --git a/src/mosaic.tsx b/src/mosaic.tsx
index 71e9f79a4c..1e10c7b60c 100644
--- a/src/mosaic.tsx
+++ b/src/mosaic.tsx
@@ -7,20 +7,32 @@ import type {DataAttributes} from './utils/types';
 
 const GRID_GAP = {mobile: 8, desktop: 16} as const;
 
+type MosaicItemGridMode = 'horizontal' | 'square' | 'vertical';
+
+type MosaicItem = React.ReactElement | ((config: {gridMode: MosaicItemGridMode}) => React.ReactElement);
+
 type HorizontalMosaicPageProps = {
-    items: ReadonlyArray<React.ReactElement>;
+    items: ReadonlyArray<MosaicItem>;
     isEven: boolean;
 };
 
+const renderItem = (item: MosaicItem, gridMode: MosaicItemGridMode) => {
+    return typeof item === 'function' ? item({gridMode}) : item;
+};
+
 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%">
                 {items.length === 3 ? (
                     <>
-                        <GridItem columnSpan={isEven ? 2 : undefined}>{items[0]}</GridItem>
-                        <GridItem>{items[1]}</GridItem>
-                        <GridItem columnSpan={isEven ? undefined : 2}>{items[2]}</GridItem>
+                        <GridItem columnSpan={isEven ? 2 : undefined}>
+                            {renderItem(items[0], isEven ? 'horizontal' : 'square')}
+                        </GridItem>
+                        <GridItem>{renderItem(items[1], 'square')}</GridItem>
+                        <GridItem columnSpan={isEven ? undefined : 2}>
+                            {renderItem(items[2], isEven ? 'square' : 'horizontal')}
+                        </GridItem>
                     </>
                 ) : (
                     items.map((item, itemIndex) => (
@@ -29,7 +41,7 @@ const HorizontalMosaicPage = ({items, isEven}: HorizontalMosaicPageProps) => {
                             rowSpan={items.length === 1 ? 2 : undefined}
                             key={itemIndex}
                         >
-                            {item}
+                            {renderItem(item, items.length === 4 ? 'square' : 'horizontal')}
                         </GridItem>
                     ))
                 )}
@@ -39,7 +51,7 @@ const HorizontalMosaicPage = ({items, isEven}: HorizontalMosaicPageProps) => {
 };
 
 type HorizontalMosaicProps = {
-    items: ReadonlyArray<React.ReactElement>;
+    items: ReadonlyArray<MosaicItem>;
     withBullets?: boolean;
     free?: boolean;
     dataAttributes?: DataAttributes;
@@ -54,7 +66,7 @@ export const HorizontalMosaic = ({
     const itemsCount = items.length;
 
     const pagesCount = itemsCount < 5 ? Math.min(itemsCount, 1) : Math.floor((itemsCount + 1) / 3);
-    const pages = Array.from({length: pagesCount}, () => [] as Array<React.ReactElement>);
+    const pages = Array.from({length: pagesCount}, () => [] as Array<MosaicItem>);
 
     items.forEach((item, index) => {
         const itemPageIndex = Math.min(pagesCount - 1, Math.floor(index / 3));
@@ -76,7 +88,7 @@ export const HorizontalMosaic = ({
 };
 
 type VerticalMosaicPageProps = {
-    items: ReadonlyArray<React.ReactElement>;
+    items: ReadonlyArray<MosaicItem>;
 };
 
 const VerticalMosaicPage = ({items}: VerticalMosaicPageProps) => {
@@ -88,7 +100,7 @@ const VerticalMosaicPage = ({items}: VerticalMosaicPageProps) => {
                     <Grid gap={GRID_GAP} columns={2} height="100%">
                         {items.map((item, itemIndex) => (
                             <GridItem columnSpan={items.length === 2 ? undefined : 2} key={itemIndex}>
-                                {item}
+                                {renderItem(item, items.length === 2 ? 'square' : 'horizontal')}
                             </GridItem>
                         ))}
                     </Grid>
@@ -101,7 +113,7 @@ const VerticalMosaicPage = ({items}: VerticalMosaicPageProps) => {
                     <Grid gap={GRID_GAP} columns={2} flow="column" height="100%">
                         {items.map((item, itemIndex) => (
                             <GridItem rowSpan={itemIndex === 0 ? 2 : undefined} key={itemIndex}>
-                                {item}
+                                {renderItem(item, itemIndex === 0 ? 'vertical' : 'square')}
                             </GridItem>
                         ))}
                     </Grid>
@@ -113,10 +125,10 @@ const VerticalMosaicPage = ({items}: VerticalMosaicPageProps) => {
             return (
                 <div className={styles.fourItemsContainer}>
                     <Grid gap={GRID_GAP} rows={3} columns={2} height="100%">
-                        <GridItem rowSpan={2}>{items[0]}</GridItem>
-                        <GridItem>{items[1]}</GridItem>
-                        <GridItem rowSpan={2}>{items[3]}</GridItem>
-                        <GridItem>{items[2]}</GridItem>
+                        <GridItem rowSpan={2}>{renderItem(items[0], 'vertical')}</GridItem>
+                        <GridItem>{renderItem(items[1], 'square')}</GridItem>
+                        <GridItem rowSpan={2}>{renderItem(items[3], 'vertical')}</GridItem>
+                        <GridItem>{renderItem(items[2], 'square')}</GridItem>
                     </Grid>
                 </div>
             );
@@ -124,7 +136,7 @@ const VerticalMosaicPage = ({items}: VerticalMosaicPageProps) => {
 };
 
 type VerticalMosaicProps = {
-    items: ReadonlyArray<React.ReactElement>;
+    items: ReadonlyArray<MosaicItem>;
     dataAttributes?: DataAttributes;
 };
 
@@ -132,7 +144,7 @@ export const VerticalMosaic = ({items, dataAttributes}: VerticalMosaicProps): JS
     const itemsCount = items.length;
 
     const pagesCount = Math.ceil(itemsCount / 4);
-    const pages = Array.from({length: pagesCount}, () => [] as Array<React.ReactElement<any>>);
+    const pages = Array.from({length: pagesCount}, () => [] as Array<MosaicItem>);
 
     items.forEach((item, index) => {
         const itemPageIndex = Math.floor(index / 4);
diff --git a/src/navigation-bar.css.ts b/src/navigation-bar.css.ts
index 7064f89452..6acfa945ab 100644
--- a/src/navigation-bar.css.ts
+++ b/src/navigation-bar.css.ts
@@ -2,11 +2,15 @@ import {style, styleVariants} from '@vanilla-extract/css';
 import {sprinkles} from './sprinkles.css';
 import {NAVBAR_HEIGHT_DESKTOP, NAVBAR_HEIGHT_DESKTOP_LARGE, NAVBAR_HEIGHT_MOBILE} from './theme';
 import * as mq from './media-queries.css';
-import {vars as colorVars} from './skins/skin-contract.css';
+import {vars} from './skins/skin-contract.css';
 
 const NAVBAR_ZINDEX = 25;
 
-const BURGER_MENU_ANIMATION_DURATION_MS = 300;
+export const DESKTOP_SMALL_MENU_WIDTH = 184;
+
+export const BURGER_MENU_ANIMATION_DURATION_MS = 300;
+export const DESKTOP_MENU_ANIMATION_DURATION_MS = 400;
+const DESKTOP_MENU_CONTENT_ANIMATION_DURATION_MS = 800;
 
 export const burgerIconContainer = style([
     sprinkles({
@@ -96,12 +100,12 @@ const navbarBase = style([
 ]);
 
 export const navbarBorderColorVariants = styleVariants({
-    default: [navbarBase, {borderColor: colorVars.colors.divider}],
+    default: [navbarBase, {borderColor: vars.colors.divider}],
     noBorder: [navbarBase, {borderColor: 'transparent'}],
     menuOpen: [
         navbarBase,
         {
-            borderColor: colorVars.colors.divider,
+            borderColor: vars.colors.divider,
 
             '@media': {
                 [mq.tabletOrSmaller]: {
@@ -112,6 +116,63 @@ export const navbarBorderColorVariants = styleVariants({
     ],
 });
 
+export const desktopMenuFirstSection = style({});
+export const desktopMenuLastSection = style({});
+
+export const desktopMenuSectionContainer = style([
+    sprinkles({position: 'relative', display: 'flex'}),
+    {
+        '::after': {
+            content: '',
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+        },
+
+        selectors: {
+            // Add extra width on the left/right of interactive area so that we cover the space between sections
+            [`&:not(${desktopMenuFirstSection}):after`]: {
+                left: -16,
+            },
+            [`&:not(${desktopMenuLastSection}):after`]: {
+                right: -16,
+            },
+        },
+    },
+]);
+
+export const desktopMenuSectionWithArrowWrapper = sprinkles({
+    position: 'relative',
+});
+
+export const desktopMenuSectionArrowContainer = style([
+    sprinkles({
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'center',
+    }),
+    {
+        // Avoid element from affecting hover status of the section
+        zIndex: -1,
+        right: -8,
+    },
+]);
+
+export const desktopMenuSectionArrow = style([
+    sprinkles({
+        border: 'none',
+        background: 'transparent',
+        padding: 0,
+    }),
+    {
+        transition: `opacity 0.1s`,
+    },
+]);
+
 export const section = style([
     sprinkles({
         height: NAVBAR_HEIGHT_DESKTOP,
@@ -120,57 +181,63 @@ export const section = style([
         paddingX: 8,
         border: 'none',
         background: 'transparent',
+        position: 'relative',
     }),
     {
+        zIndex: 1,
         borderBottom: `2px solid transparent`,
         transition: 'border-color 300ms ease-in-out',
     },
 ]);
 
 export const selectedSectionVariantes = styleVariants({
-    default: {borderColor: colorVars.colors.controlActivated},
-    inverse: {borderColor: colorVars.colors.inverse},
+    default: {borderColor: vars.colors.controlActivated},
+    inverse: {borderColor: vars.colors.inverse},
 });
 
 export const textWrapperVariants = styleVariants({
     default: {
-        color: colorVars.colors.textPrimary,
+        color: vars.colors.textPrimary,
         '@media': {
             [mq.supportsHover]: {
                 ':hover': {
-                    color: colorVars.colors.textSecondary,
+                    color: vars.colors.textSecondary,
                 },
             },
         },
     },
     inverse: {
-        color: colorVars.colors.textPrimaryInverse,
+        color: vars.colors.textPrimaryInverse,
         '@media': {
             [mq.supportsHover]: {
                 ':hover': {
-                    color: colorVars.colors.textSecondaryInverse,
+                    color: vars.colors.textSecondaryInverse,
                 },
             },
         },
     },
 });
 
-export const navigationBarContent = style({
-    alignItems: 'center',
-    width: '100%',
-    display: 'flex',
-    height: NAVBAR_HEIGHT_DESKTOP,
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            height: NAVBAR_HEIGHT_MOBILE - borderWidth,
-        },
-        [mq.desktopOrBigger]: {
-            ':last-child': {
-                height: NAVBAR_HEIGHT_DESKTOP - borderWidth,
+export const navigationBarContent = style([
+    sprinkles({
+        alignItems: 'center',
+        width: '100%',
+        display: 'flex',
+    }),
+    {
+        height: NAVBAR_HEIGHT_DESKTOP,
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                height: NAVBAR_HEIGHT_MOBILE - borderWidth,
+            },
+            [mq.desktopOrBigger]: {
+                ':last-child': {
+                    height: NAVBAR_HEIGHT_DESKTOP - borderWidth,
+                },
             },
         },
     },
-});
+]);
 
 export const navigationBarAction = sprinkles({
     border: 'none',
@@ -186,18 +253,38 @@ export const desktopOnly = style({
     },
 });
 
-export const navigationBarContentRight = style({
-    display: 'flex',
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    paddingLeft: 136,
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            paddingLeft: 24,
+export const navigationBarContentRight = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    }),
+    {
+        height: NAVBAR_HEIGHT_DESKTOP,
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                paddingLeft: 24,
+                flex: 1,
+                height: NAVBAR_HEIGHT_MOBILE - borderWidth,
+            },
+            [mq.desktopOrBigger]: {
+                ':last-child': {
+                    height: NAVBAR_HEIGHT_DESKTOP - borderWidth,
+                },
+            },
         },
     },
-});
+]);
+
+export const navigationBarContentRightExpanded = style([
+    navigationBarContentRight,
+    sprinkles({
+        flex: 1,
+    }),
+    {
+        paddingLeft: 136,
+    },
+]);
 
 const spacerMobile = style({
     '@media': {
@@ -221,34 +308,49 @@ export const spacerLarge = style([
     spacerMobile,
 ]);
 
-export const burgerMenuTransition = styleVariants({
-    entering: {
-        transform: 'translate(0vw)',
-    },
-    entered: {
-        transform: 'translate(0vw)',
-    },
-    exiting: {
+export const burgerMenuTransition = {
+    enter: style({
         transform: 'translate(-100vw)',
-    },
-    exited: {
+    }),
+    enterActive: style({
+        transform: 'translate(0)',
+        transition: `transform ${BURGER_MENU_ANIMATION_DURATION_MS}ms ease-out`,
+        '@media': {
+            ['(prefers-reduced-motion)']: {
+                transition: 'none',
+            },
+        },
+    }),
+    exit: style({
+        transform: 'translate(0)',
+    }),
+    exitActive: style({
         transform: 'translate(-100vw)',
-    },
-    unmounted: {},
-});
+        transition: `transform ${BURGER_MENU_ANIMATION_DURATION_MS}ms ease-out`,
+        '@media': {
+            ['(prefers-reduced-motion)']: {
+                transition: 'none',
+            },
+        },
+    }),
+};
 
-export const mainNavbarContent = style({
+export const mainNavbarContent = sprinkles({
     display: 'flex',
     alignItems: 'center',
 });
 
+export const mainNavBarSectionsContainer = style([
+    sprinkles({display: 'flex', flex: 1}),
+    {minWidth: 'fit-content'},
+]);
+
 export const logoContainer = style([
     sprinkles({
         display: 'flex',
         justifyContent: 'center',
     }),
     {
-        marginRight: 48,
         '@media': {
             [mq.tabletOrSmaller]: {
                 marginRight: 0,
@@ -259,6 +361,7 @@ export const logoContainer = style([
 
 export const burgerMenuButton = style({
     marginRight: 24,
+    width: 'fit-content',
     '@media': {
         [mq.desktopOrBigger]: {
             display: 'none',
@@ -266,41 +369,58 @@ export const burgerMenuButton = style({
     },
 });
 
-export const burgerMenu = style([
+export const burgerMenu = sprinkles({
+    position: 'fixed',
+    top: NAVBAR_HEIGHT_MOBILE,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: vars.colors.background,
+});
+
+export const burgerMenuContainer = sprinkles({
+    height: '100%',
+    position: 'relative',
+});
+
+export const burgerMenuContentContainer = style([
     sprinkles({
-        position: 'fixed',
-        top: NAVBAR_HEIGHT_MOBILE,
-        left: 0,
-        right: 0,
-        background: colorVars.colors.background,
+        overflowY: 'auto',
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+        top: 0,
     }),
     {
-        height: `calc(100vh - ${NAVBAR_HEIGHT_MOBILE}px)`,
-        overflowY: 'auto',
         transition: `transform ${BURGER_MENU_ANIMATION_DURATION_MS}ms ease-out`,
+        '@media': {
+            ['(prefers-reduced-motion)']: {
+                transition: 'none',
+            },
+        },
     },
 ]);
 
 export const iconButtonVariants = styleVariants({
     default: [
-        sprinkles({color: colorVars.colors.neutralHigh}),
+        sprinkles({color: vars.colors.neutralHigh}),
         {
             '@media': {
                 [mq.supportsHover]: {
                     ':hover': {
-                        color: colorVars.colors.neutralMedium,
+                        color: vars.colors.neutralMedium,
                     },
                 },
             },
         },
     ],
     inverse: [
-        sprinkles({color: colorVars.colors.inverse}),
+        sprinkles({color: vars.colors.inverse}),
         {
             '@media': {
                 [mq.supportsHover]: {
                     ':hover': {
-                        color: colorVars.colors.inverse,
+                        color: vars.colors.inverse,
                     },
                 },
             },
@@ -313,3 +433,97 @@ export const lineHeightFix = style({
     // use display inline and other components like Badge use inline-block.
     lineHeight: 0,
 });
+
+export const mainNavigationBarContentWrapper = style([
+    sprinkles({width: '100%'}),
+    {
+        transition: `clip-path ${DESKTOP_MENU_ANIMATION_DURATION_MS}ms cubic-bezier(0.65, 0, 0.35, 1)`,
+        '@media': {
+            ['(prefers-reduced-motion)']: {
+                transition: 'none',
+            },
+        },
+    },
+]);
+
+export const desktopMenuWrapper = sprinkles({
+    position: 'absolute',
+    left: 0,
+    right: 0,
+});
+
+export const desktopMenuContainer = style([
+    sprinkles({
+        position: 'fixed',
+        left: 0,
+        right: 0,
+    }),
+    {
+        zIndex: NAVBAR_ZINDEX,
+    },
+]);
+
+export const desktopMenuBackgroundContainer = style([
+    sprinkles({
+        background: vars.colors.backgroundContainer,
+        position: 'absolute',
+        left: 0,
+        right: 0,
+    }),
+    {
+        transition: `height ${DESKTOP_MENU_ANIMATION_DURATION_MS}ms cubic-bezier(0.65, 0, 0.35, 1)`,
+        boxShadow: '0px 2px 4px rgba(0,0,0,0.2)',
+        '@media': {
+            ['(prefers-reduced-motion)']: {
+                transition: 'none',
+            },
+        },
+    },
+]);
+
+export const desktopSmallMenuContainer = style([
+    sprinkles({
+        background: vars.colors.backgroundContainer,
+        position: 'fixed',
+        paddingY: 40,
+        paddingX: 24,
+        overflowY: 'auto',
+    }),
+    {
+        zIndex: NAVBAR_ZINDEX,
+        borderRadius: `0 0 ${vars.borderRadii.popup} ${vars.borderRadii.popup}`,
+        width: DESKTOP_SMALL_MENU_WIDTH,
+        boxShadow: '0px 2px 4px rgba(0,0,0,0.2)',
+    },
+]);
+
+export const desktopMenu = style([
+    sprinkles({
+        paddingY: 40,
+        position: 'relative',
+    }),
+    {
+        transform: 'translateY(-16px)',
+        opacity: 0,
+        '@media': {
+            ['(prefers-reduced-motion)']: {
+                transition: 'none',
+            },
+        },
+    },
+]);
+
+export const desktopMenuContentFadeIn = style({
+    transform: 'translateY(0)',
+    opacity: 1,
+    transition: `opacity ${DESKTOP_MENU_CONTENT_ANIMATION_DURATION_MS}ms cubic-bezier(0.33, 1, 0.68, 1), transform ${DESKTOP_MENU_CONTENT_ANIMATION_DURATION_MS}ms cubic-bezier(0.33, 1, 0.68, 1)`,
+    '@media': {
+        ['(prefers-reduced-motion)']: {
+            transition: 'none',
+        },
+    },
+});
+
+export const desktopMenuColumnItem = style({
+    color: vars.colors.textPrimary,
+});
diff --git a/src/navigation-bar.tsx b/src/navigation-bar.tsx
index 709a71b4c0..5fc78f82f1 100644
--- a/src/navigation-bar.tsx
+++ b/src/navigation-bar.tsx
@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
-import {Transition} from 'react-transition-group';
+import {CSSTransition} from 'react-transition-group';
 import classnames from 'classnames';
-import ResponsiveLayout from './responsive-layout';
+import ResponsiveLayout, {ResetResponsiveLayout} from './responsive-layout';
 import Inline from './inline';
 import Touchable, {BaseTouchable} from './touchable';
 import {Text2, Text3} from './text';
@@ -11,7 +11,6 @@ import IconMenuRegular from './generated/mistica-icons/icon-menu-regular';
 import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import IconChevronLeftRegular from './generated/mistica-icons/icon-chevron-left-regular';
 import {IconButton} from './icon-button';
-import NegativeBox from './negative-box';
 import {Row, RowList} from './list';
 import {ThemeVariant, useIsInverseOrMediaVariant} from './theme-variant-context';
 import FocusTrap from './focus-trap';
@@ -21,15 +20,35 @@ import {useSetModalState} from './modal-context-provider';
 import {Logo} from './logo';
 import {vars} from './skins/skin-contract.css';
 import * as styles from './navigation-bar.css';
-import {getPrefixedDataAttributes} from './utils/dom';
+import {cancelEvent, getPrefixedDataAttributes} from './utils/dom';
 import Stack from './stack';
 import Box from './box';
 import {isRunningAcceptanceTest} from './utils/platform';
 import * as tokens from './text-tokens';
+import {NAVBAR_HEIGHT_DESKTOP, NAVBAR_HEIGHT_DESKTOP_LARGE} from './theme';
+import TextLink from './text-link';
+import {Title1, Title3} from './title';
+import {ButtonLink} from './button';
+import {Grid, GridItem} from './grid';
+import {DOWN, ESC, UP} from './utils/keys';
+import {debounce, isEqual} from './utils/helpers';
+import NegativeBox from './negative-box';
 
+import type {ExclusifyUnion} from './utils/utility-types';
 import type {Variant} from './theme-variant-context';
 import type {TouchableProps} from './touchable';
-import type {DataAttributes, HeadingType} from './utils/types';
+import type {DataAttributes, HeadingType, IconProps} from './utils/types';
+
+const MAIN_NAVIGATION_BAR_MENU_DEBOUNCE_TIME = 120;
+
+const MenuSectionArrow = ({size = 24, color = vars.colors.neutralHigh, style, className}: IconProps) => (
+    <svg width={size} height={size} viewBox="0 0 8 8" style={style} className={className}>
+        <path
+            d="M6.32595 3.46071L3.03801 0.158595L3.03292 0.153747L3.032 0.152903L3.02931 0.150463L3.02848 0.149738L3.02248 0.144353C2.88533 0.021206 2.71386 -0.0126731 2.56343 0.00394249C2.41648 0.0201739 2.27272 0.0856702 2.16886 0.18711C2.06893 0.281844 2.01209 0.42816 2.00175 0.567065C1.99083 0.71377 2.02925 0.889583 2.16869 1.02392L5.24446 4.00145L2.15859 6.96199L2.15375 6.96708L2.1529 6.968L2.15046 6.97069L2.14974 6.97152L2.14435 6.97752C2.02121 7.11467 1.98733 7.28614 2.00394 7.43657C2.02017 7.58352 2.08567 7.72728 2.18711 7.83114C2.28184 7.93107 2.42816 7.98791 2.56706 7.99825C2.71377 8.00917 2.88958 7.97075 3.02392 7.83132L6.32595 4.5422V4.5422C6.6246 4.24355 6.6246 3.75935 6.32595 3.46071V3.46071Z"
+            fill={color}
+        />
+    </svg>
+);
 
 const BurgerMenuIcon = ({isOpen}: {isOpen: boolean}) => {
     return (
@@ -44,14 +63,12 @@ const BurgerMenuIcon = ({isOpen}: {isOpen: boolean}) => {
     );
 };
 
-const BURGER_MENU_ANIMATION_DURATION_MS = 300;
-
 type HeaderProps = {
     children: React.ReactNode;
     topFixed?: boolean;
     variant?: Variant;
     withBorder?: boolean;
-    isMenuOpen?: boolean;
+    isBurgerMenuOpen?: boolean;
     dataAttributes?: DataAttributes;
     isBottomRow?: boolean;
 };
@@ -60,7 +77,7 @@ const Header = ({
     children,
     topFixed,
     withBorder,
-    isMenuOpen,
+    isBurgerMenuOpen,
     variant = 'default',
     dataAttributes,
 }: HeaderProps) => {
@@ -69,7 +86,7 @@ const Header = ({
     const getBorderClass = () => {
         const inverse = variant === 'inverse' && !isDarkMode;
         if (inverse || !withBorder) return styles.navbarBorderColorVariants.noBorder;
-        if (isMenuOpen) return styles.navbarBorderColorVariants.menuOpen;
+        if (isBurgerMenuOpen) return styles.navbarBorderColorVariants.menuOpen;
 
         return styles.navbarBorderColorVariants.default;
     };
@@ -98,27 +115,152 @@ type NavigationBarContentContainerProps = {
     right?: React.ReactNode;
     children?: React.ReactNode;
     desktopOnly?: boolean;
+    expandRightContent?: boolean;
 };
 
-const NavigationBarContentContainer = ({
+const NavigationBarContentContainer = React.forwardRef<HTMLDivElement, NavigationBarContentContainerProps>(
+    ({right, children, desktopOnly, expandRightContent}, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={classnames(styles.navigationBarContent, {[styles.desktopOnly]: desktopOnly})}
+            >
+                {children}
+                {right && (
+                    <div
+                        className={
+                            expandRightContent
+                                ? styles.navigationBarContentRightExpanded
+                                : styles.navigationBarContentRight
+                        }
+                    >
+                        {right}
+                    </div>
+                )}
+            </div>
+        );
+    }
+);
+
+interface NavigationBarCommonProps {
+    variant?: Variant;
+    onBack?: () => void;
+    title?: string;
+    titleAs?: HeadingType;
+    right?: React.ReactElement;
+    withBorder?: boolean;
+    children?: undefined;
+}
+
+interface NavigationBarTopFixedProps extends NavigationBarCommonProps {
+    topFixed?: true;
+    paddingX?: undefined;
+}
+
+interface NavigationBarNotFixedProps extends NavigationBarCommonProps {
+    topFixed: false;
+    paddingX?: number;
+}
+
+type NavigationBarProps = NavigationBarTopFixedProps | NavigationBarNotFixedProps;
+
+export const NavigationBar = ({
+    onBack,
+    title,
+    titleAs,
     right,
-    children,
-    desktopOnly,
-}: NavigationBarContentContainerProps) => {
+    variant = 'default',
+    topFixed = true,
+    paddingX = 0,
+    withBorder = true,
+}: NavigationBarProps): JSX.Element => {
+    const {texts, t} = useTheme();
+    const content = (
+        <NavigationBarContentContainer right={right} expandRightContent>
+            <Inline space={24} alignItems="center">
+                {onBack && (
+                    <IconButton
+                        aria-label={texts.backNavigationBar || t(tokens.backNavigationBar)}
+                        onPress={onBack}
+                        Icon={IconChevronLeftRegular}
+                        bleedLeft
+                        bleedRight
+                    />
+                )}
+                <Text3 regular truncate as={titleAs}>
+                    {title}
+                </Text3>
+            </Inline>
+        </NavigationBarContentContainer>
+    );
     return (
-        <div className={classnames(styles.navigationBarContent, {[styles.desktopOnly]: desktopOnly})}>
-            {children}
-            {right && <div className={styles.navigationBarContentRight}>{right}</div>}
-        </div>
+        <ThemeVariant variant={variant}>
+            <Header
+                topFixed={topFixed}
+                withBorder={withBorder}
+                variant={variant}
+                dataAttributes={{'component-name': 'NavigationBar'}}
+            >
+                {topFixed ? (
+                    <ResponsiveLayout>{content}</ResponsiveLayout>
+                ) : (
+                    <div
+                        style={{
+                            padding: `0 ${paddingX}px`,
+                            width: '100%',
+                        }}
+                    >
+                        {content}
+                    </div>
+                )}
+            </Header>
+            {topFixed && <div className={styles.spacer} />}
+        </ThemeVariant>
     );
 };
 
-type MainNavigationBarSection =
-    | {href: string; to?: undefined; onPress?: undefined; title: string}
-    | {to: string; href?: undefined; onPress?: undefined; title: string}
-    | {onPress: () => void; to?: undefined; href?: undefined; title: string};
+type InteractiveProps = ExclusifyUnion<{href: string} | {to: string} | {onPress: () => void}>;
+type MaybeInteractiveProps = ExclusifyUnion<{href?: string} | {to?: string} | {onPress?: () => void}>;
+
+type SectionItem = {title: string} & InteractiveProps;
+
+type SectionColumn = {
+    title: string;
+    items: ReadonlyArray<SectionItem>;
+};
+
+type SectionMenu = ExclusifyUnion<
+    | {columns: ReadonlyArray<SectionColumn>}
+    // Content prop can receive a function as value with the closeMenu callback as parameter.
+    // In this way, custom content can also force the menu to close programmatically.
+    | {content?: React.ReactElement | ((props: {closeMenu: () => void}) => React.ReactElement)}
+>;
 
-type MainNavigationBarPropsBase = {
+const getInteractivePropsWithCloseMenu = (interactiveProps: InteractiveProps, closeMenu: () => void) => {
+    if (
+        interactiveProps.href === undefined &&
+        interactiveProps.onPress === undefined &&
+        interactiveProps.to === undefined
+    ) {
+        return {onPress: closeMenu};
+    }
+
+    return interactiveProps.onPress
+        ? {
+              onPress: () => {
+                  interactiveProps.onPress();
+                  closeMenu();
+              },
+          }
+        : {...interactiveProps, onNavigate: () => closeMenu()};
+};
+
+type MainNavigationBarSection = {
+    title: string;
+    menu?: SectionMenu;
+} & MaybeInteractiveProps;
+
+type MainNavigationBarProps = {
     sections?: ReadonlyArray<MainNavigationBarSection>;
     selectedIndex?: number;
     right?: React.ReactElement;
@@ -129,11 +271,1055 @@ type MainNavigationBarPropsBase = {
     withBorder?: boolean;
     burgerMenuExtra?: React.ReactNode;
     large?: boolean;
+    desktopLargeMenu?: boolean;
+};
+
+type MainNavigationBarMenuStatus = 'opening' | 'opened' | 'closing' | 'closed';
+type MainNavigationBarMenuAction = 'open' | 'finishOpen' | 'close' | 'finishClose';
+
+const mainNavigationBurgerMenuTranstions: Record<
+    MainNavigationBarMenuStatus,
+    Partial<Record<MainNavigationBarMenuAction, MainNavigationBarMenuStatus>>
+> = {
+    opening: {
+        close: 'closing',
+        finishOpen: 'opened',
+    },
+    opened: {
+        close: 'closing',
+    },
+    closing: {
+        open: 'opening',
+        finishClose: 'closed',
+    },
+    closed: {
+        open: 'opening',
+    },
+};
+
+const burgerMenuReducer = (state: MainNavigationBarMenuStatus, action: MainNavigationBarMenuAction) => {
+    return mainNavigationBurgerMenuTranstions[state][action] || state;
+};
+
+const MainNavigationBarBurgerSection = ({
+    section,
+    closeSubMenu,
+    closeMenu,
+}: {
+    section: MainNavigationBarSection;
+    closeSubMenu: () => void;
+    closeMenu: () => void;
+}) => {
+    const {texts, t} = useTheme();
+
+    const {title, menu, ...interactiveProps} = section;
+
+    const columns = menu?.columns || [];
+    const customContent = menu?.content;
+    const hasCustomInteraction =
+        interactiveProps.href !== undefined ||
+        interactiveProps.onPress !== undefined ||
+        interactiveProps.to !== undefined;
+
+    return (
+        <ResponsiveLayout>
+            <Stack space={32}>
+                <Stack space={16}>
+                    <NavigationBar
+                        title={texts.backNavigationBar || t(tokens.backNavigationBar)}
+                        onBack={closeSubMenu}
+                        topFixed={false}
+                        withBorder={false}
+                    />
+                    <Title3
+                        right={
+                            hasCustomInteraction ? (
+                                <ButtonLink
+                                    small
+                                    bleedY
+                                    bleedRight
+                                    withChevron
+                                    // Close the menu when "See all" button is pressed
+                                    {...getInteractivePropsWithCloseMenu(
+                                        interactiveProps as InteractiveProps,
+                                        closeMenu
+                                    )}
+                                >
+                                    {texts.mainNavigationBarSectionSeeAll ||
+                                        t(tokens.mainNavigationBarSectionSeeAll)}
+                                </ButtonLink>
+                            ) : undefined
+                        }
+                    >
+                        {title}
+                    </Title3>
+                </Stack>
+
+                {customContent ? (
+                    <Box paddingBottom={16}>
+                        {typeof customContent === 'function' ? customContent({closeMenu}) : customContent}
+                    </Box>
+                ) : (
+                    columns.map((column, columnIndex) => (
+                        <Stack space={8} key={columnIndex}>
+                            <Title1> {column.title}</Title1>
+                            <NegativeBox>
+                                <RowList>
+                                    {column.items.map(
+                                        ({title: itemTitle, ...itemInteractiveProps}, itemIndex) => (
+                                            <Row
+                                                key={itemIndex}
+                                                title={itemTitle}
+                                                // Close the menu when one of the rows is pressed
+                                                {...getInteractivePropsWithCloseMenu(
+                                                    itemInteractiveProps,
+                                                    closeMenu
+                                                )}
+                                            />
+                                        )
+                                    )}
+                                </RowList>
+                            </NegativeBox>
+                        </Stack>
+                    ))
+                )}
+            </Stack>
+        </ResponsiveLayout>
+    );
+};
+
+const MainNavigationBarBurgerMenu = ({
+    sections,
+    extra,
+    closeMenu,
+    open,
+    id,
+    disableFocusTrap,
+    setDisableFocusTrap,
+}: {
+    sections: ReadonlyArray<MainNavigationBarSection>;
+    extra: React.ReactNode;
+    closeMenu: () => void;
+    open: boolean;
+    id: string;
+    disableFocusTrap: boolean;
+    setDisableFocusTrap: (value: boolean) => void;
+}) => {
+    const {isDarkMode, texts, t} = useTheme();
+    const [openedSection, setOpenedSection] = React.useState(-1);
+    const [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);
+    const [subMenuStatus, dispatch] = React.useReducer(burgerMenuReducer, 'closed');
+    const menuRef = React.useRef<HTMLDivElement>(null);
+
+    const shadowAlpha = isDarkMode ? 1 : 0.2;
+    const menuAnimationDuration = isRunningAcceptanceTest() ? 0 : styles.BURGER_MENU_ANIMATION_DURATION_MS;
+
+    React.useEffect(() => {
+        let id: NodeJS.Timeout;
+
+        // menu starts opening or closing
+        if (isSubMenuOpen) {
+            dispatch('open');
+            id = setTimeout(() => dispatch('finishOpen'), menuAnimationDuration);
+        } else {
+            dispatch('close');
+            id = setTimeout(() => dispatch('finishClose'), menuAnimationDuration);
+        }
+
+        return () => clearTimeout(id);
+    }, [isSubMenuOpen, menuAnimationDuration]);
+
+    const sectionContainerRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        // Make screen reader focus on back button when opening any section's menu
+        if (subMenuStatus === 'opening') {
+            const sectionBackButtonElement = sectionContainerRef.current?.querySelector<HTMLButtonElement>(
+                `button[aria-label="${texts.backNavigationBar || t(tokens.backNavigationBar)}"]`
+            );
+
+            sectionBackButtonElement?.focus();
+        }
+    }, [subMenuStatus, t, texts]);
+
+    return (
+        <Portal>
+            <FocusTrap disabled={disableFocusTrap} group="burger-menu-lock">
+                <CSSTransition
+                    onEntered={() => setDisableFocusTrap(false)}
+                    onExiting={() => setDisableFocusTrap(true)}
+                    onExited={() => {
+                        setIsSubMenuOpen(false);
+                        setOpenedSection(-1);
+                    }}
+                    classNames={styles.burgerMenuTransition}
+                    in={open}
+                    nodeRef={menuRef}
+                    timeout={menuAnimationDuration}
+                    mountOnEnter
+                    unmountOnExit
+                >
+                    <nav
+                        className={styles.burgerMenu}
+                        style={{boxShadow: `6px 0 4px -4px rgba(0, 0, 0, ${shadowAlpha})`}}
+                        id={id}
+                        ref={menuRef}
+                    >
+                        <div className={styles.burgerMenuContainer}>
+                            <div
+                                className={styles.burgerMenuContentContainer}
+                                style={{
+                                    transform: `translate(${isSubMenuOpen ? '-100vw' : '0'})`,
+                                }}
+                            >
+                                {subMenuStatus !== 'opened' && (
+                                    <ResponsiveLayout>
+                                        <ResetResponsiveLayout>
+                                            <RowList>
+                                                {sections.map(({title, menu, ...interactiveProps}, index) => (
+                                                    <Row
+                                                        key={index}
+                                                        title={title}
+                                                        {...(menu
+                                                            ? {
+                                                                  onPress: () => {
+                                                                      setIsSubMenuOpen(true);
+                                                                      setOpenedSection(index);
+                                                                  },
+                                                              }
+                                                            : // Close the menu when one of the rows is pressed
+                                                              getInteractivePropsWithCloseMenu(
+                                                                  interactiveProps as InteractiveProps,
+                                                                  closeMenu
+                                                              ))}
+                                                    />
+                                                ))}
+                                            </RowList>
+                                        </ResetResponsiveLayout>
+                                        {extra && <Box paddingY={16}>{extra}</Box>}
+                                    </ResponsiveLayout>
+                                )}
+                            </div>
+
+                            <div
+                                className={styles.burgerMenuContentContainer}
+                                ref={sectionContainerRef}
+                                style={{
+                                    transform: `translate(${isSubMenuOpen ? '0' : '100vw'})`,
+                                }}
+                            >
+                                {subMenuStatus !== 'closed' && openedSection !== -1 && (
+                                    <MainNavigationBarBurgerSection
+                                        section={sections[openedSection]}
+                                        closeMenu={closeMenu}
+                                        closeSubMenu={() => setIsSubMenuOpen(false)}
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    </nav>
+                </CSSTransition>
+            </FocusTrap>
+        </Portal>
+    );
+};
+
+const mainNavigationDesktopMenuTranstions: Record<
+    MainNavigationBarMenuStatus,
+    Partial<Record<MainNavigationBarMenuAction, MainNavigationBarMenuStatus>>
+> = {
+    opening: {
+        close: 'closing',
+        finishOpen: 'opened',
+    },
+    opened: {
+        close: 'closing',
+    },
+    closing: {
+        // If a section was opened while the menu was closing, the menu should be considered as
+        // already open. This is useful for example to avoid the new content's fade-in animation
+        open: 'opened',
+        finishClose: 'closed',
+    },
+    closed: {
+        open: 'opening',
+    },
+};
+
+const desktopMenuReducer = (state: MainNavigationBarMenuStatus, action: MainNavigationBarMenuAction) => {
+    return mainNavigationDesktopMenuTranstions[state][action] || state;
+};
+
+type MainNavigationBarDesktopMenuState = {
+    isMenuOpen: boolean;
+    openedSection: number;
+    menuHeight: string;
+    menuStatus: MainNavigationBarMenuStatus;
+    openSectionMenu: (index: number) => void;
+    closeMenu: () => void;
+    setMenuHeight: (height: string) => void;
+    setIsMenuHovered: (value: boolean) => void;
+    setFocusedItem: (item?: {column: number; index: number}) => void;
+    debouncedOpenSectionMenu: (index: number) => void;
+    cancelDebouncedOpenSectionMenu: (index: number) => void;
+};
+
+const MainNavigationBarDesktopMenuContext = React.createContext<MainNavigationBarDesktopMenuState>({
+    isMenuOpen: false,
+    openedSection: -1,
+    menuHeight: '0px',
+    menuStatus: 'closed',
+    openSectionMenu: () => {},
+    closeMenu: () => {},
+    setMenuHeight: () => {},
+    setIsMenuHovered: () => {},
+    setFocusedItem: () => {},
+    debouncedOpenSectionMenu: () => {},
+    cancelDebouncedOpenSectionMenu: () => {},
+});
+
+const MainNavigationBarDesktopMenuContextProvider = ({
+    children,
+    sections,
+    isLargeMenu,
+}: {
+    children: React.ReactNode;
+    sections?: ReadonlyArray<MainNavigationBarSection>;
+    isLargeMenu?: boolean;
+}): JSX.Element => {
+    const {isTabletOrSmaller} = useScreenSize();
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    const [menuHeight, setMenuHeight] = React.useState('0px');
+    const [menuStatus, dispatch] = React.useReducer(desktopMenuReducer, 'closed');
+    const [debouncedOpenSectionIndex, setDebouncedOpenSectionIndex] = React.useState(-1);
+
+    // Item that is currently focused inside a section. This state is used to handle pressing
+    // up/down arrows to navigate through the items of a section.
+    const [focusedItem, setFocusedItem] = React.useState<{column: number; index: number} | undefined>();
+
+    // State that indicated whether the menu container has been hovered
+    const [isMenuHovered, setIsMenuHovered] = React.useState(false);
+
+    // State that indicates whether the current rendered section has been hovered or its arrow button is focused
+    const [isSectionHovered, setIsSectionHovered] = React.useState(false);
+
+    // Section that is currently being rendered
+    const [openedSection, setOpenedSection] = React.useState(-1);
+
+    // Callback used when a section has been hovered or it's focused arrow has been pressed while it's closed
+    const openSectionMenu = React.useCallback(
+        (index: number) => {
+            setDebouncedOpenSectionIndex(-1);
+            if (sections?.[index]?.menu) {
+                setIsSectionHovered(true);
+                setOpenedSection(index);
+            } else {
+                // If the section has no menu, close the current opened one
+                setIsMenuHovered(false);
+                setIsSectionHovered(false);
+            }
+        },
+        [sections]
+    );
+
+    const debouncedOpenSectionMenu = React.useMemo(
+        () => debounce(openSectionMenu, MAIN_NAVIGATION_BAR_MENU_DEBOUNCE_TIME),
+        [openSectionMenu]
+    );
+
+    const closeMenu = React.useCallback(() => {
+        setIsMenuHovered(false);
+        setIsSectionHovered(false);
+        debouncedOpenSectionMenu.cancel();
+        setDebouncedOpenSectionIndex(-1);
+    }, [debouncedOpenSectionMenu]);
+
+    // Close menu when viewport is too small
+    React.useEffect(() => {
+        if (isTabletOrSmaller) {
+            closeMenu();
+        }
+    }, [isTabletOrSmaller, closeMenu]);
+
+    React.useEffect(() => {
+        if (!isSectionHovered && !isMenuHovered) {
+            setIsMenuOpen(false);
+            setMenuHeight('0px');
+        } else {
+            setIsMenuOpen(true);
+        }
+    }, [isMenuHovered, isSectionHovered]);
+
+    React.useEffect(() => {
+        const menuAnimationDuration =
+            isRunningAcceptanceTest() || !isLargeMenu ? 0 : styles.DESKTOP_MENU_ANIMATION_DURATION_MS;
+
+        let id: NodeJS.Timeout;
+
+        // menu starts opening or closing
+        if (!isMenuOpen) {
+            dispatch('close');
+            id = setTimeout(() => dispatch('finishClose'), menuAnimationDuration);
+        } else {
+            dispatch('open');
+            id = setTimeout(() => dispatch('finishOpen'), menuAnimationDuration);
+        }
+
+        return () => clearTimeout(id);
+    }, [isMenuOpen, isLargeMenu]);
+
+    React.useEffect(() => {
+        // reset openedSection when the menu has been closed
+        if (menuStatus === 'closed') {
+            setOpenedSection(-1);
+        }
+    }, [menuStatus]);
+
+    const focusItem = React.useCallback(
+        (item: {column: number; index: number} | undefined) => {
+            if (!isEqual(focusedItem, item)) {
+                setFocusedItem(item);
+            }
+        },
+        [focusedItem]
+    );
+
+    React.useEffect(() => {
+        // Find all the items of the section and focus the next (or previous) element
+        const focusNextItem = (reverse?: boolean) => {
+            if (focusedItem) {
+                const itemsContainer = document.querySelector('[data-navigation-bar-menu-items]');
+                const itemsList = Array.from(itemsContainer?.querySelectorAll('a,button') || []);
+
+                const currentIndex = itemsList.findIndex((el) =>
+                    el.hasAttribute(
+                        `data-navigation-bar-menu-item-${focusedItem.column}-${focusedItem.index}`
+                    )
+                );
+
+                const nextIndex = reverse ? currentIndex - 1 : currentIndex + 1;
+                (itemsList[(nextIndex + itemsList.length) % itemsList.length] as HTMLElement).focus();
+            }
+        };
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            switch (e.key) {
+                case DOWN:
+                    if (focusedItem) {
+                        cancelEvent(e);
+                        focusNextItem();
+                    }
+                    break;
+
+                case UP:
+                    if (focusedItem) {
+                        cancelEvent(e);
+                        focusNextItem(true);
+                    }
+                    break;
+
+                case ESC:
+                    closeMenu();
+                    break;
+
+                default:
+                // Do nothing
+            }
+        };
+        // Close menu when ESC key is pressed
+        document.addEventListener('keydown', handleKeyDown, false);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown, false);
+        };
+    }, [closeMenu, focusedItem]);
+
+    React.useEffect(() => {
+        // Restore focusedItem when opened section changes (or when the menu is closed)
+        setFocusedItem(undefined);
+    }, [openedSection]);
+
+    return (
+        <MainNavigationBarDesktopMenuContext.Provider
+            value={{
+                isMenuOpen,
+                openedSection,
+                menuHeight,
+                menuStatus,
+                openSectionMenu,
+                debouncedOpenSectionMenu: (index: number) => {
+                    setDebouncedOpenSectionIndex(index);
+                    debouncedOpenSectionMenu(index);
+                },
+                cancelDebouncedOpenSectionMenu: (index: number) => {
+                    if (index === debouncedOpenSectionIndex) {
+                        debouncedOpenSectionMenu.cancel();
+                        setDebouncedOpenSectionIndex(-1);
+                    }
+                },
+                closeMenu,
+                setMenuHeight,
+                setIsMenuHovered,
+                setFocusedItem: focusItem,
+            }}
+        >
+            {children}
+        </MainNavigationBarDesktopMenuContext.Provider>
+    );
+};
+
+export const useMainNavigationBarDesktopMenuState = (): MainNavigationBarDesktopMenuState =>
+    React.useContext(MainNavigationBarDesktopMenuContext);
+
+const MainNavigationBarDesktopMenuSectionColumn = ({
+    column,
+    columnIndex,
+}: {
+    column: SectionColumn;
+    columnIndex: number;
+}) => {
+    const {setFocusedItem, closeMenu} = useMainNavigationBarDesktopMenuState();
+
+    return (
+        <Stack space={24}>
+            <Text2 medium color={vars.colors.textSecondary} transform="uppercase">
+                {column.title}
+            </Text2>
+
+            <Stack space={16} role="list">
+                {column.items.map(({title, ...touchableProps}, itemIdx) => (
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+                    <div
+                        key={itemIdx}
+                        onFocus={() => setFocusedItem({column: columnIndex, index: itemIdx})}
+                        onBlur={() => setFocusedItem(undefined)}
+                        role="listitem"
+                    >
+                        <TextLink
+                            className={styles.desktopMenuColumnItem}
+                            dataAttributes={{
+                                [`navigation-bar-menu-item-${columnIndex}-${itemIdx}`]: 'true',
+                            }}
+                            // Close the menu when one of the section items is pressed
+                            {...getInteractivePropsWithCloseMenu(touchableProps, closeMenu)}
+                        >
+                            {title}
+                        </TextLink>
+                    </div>
+                ))}
+            </Stack>
+        </Stack>
+    );
+};
+
+const MainNavigationBarDesktopMenuContent = ({
+    section,
+    index,
+    isLargeNavigationBar,
+}: {
+    section: MainNavigationBarSection;
+    index: number;
+    isLargeNavigationBar: boolean;
+}): JSX.Element => {
+    const menuRef = React.useRef<HTMLDivElement>(null);
+    const [isMenuContentScrollable, setIsMenuContentScrollable] = React.useState(false);
+
+    const menuAnimationDuration = isRunningAcceptanceTest() ? 0 : styles.DESKTOP_MENU_ANIMATION_DURATION_MS;
+    const topSpace = isLargeNavigationBar ? NAVBAR_HEIGHT_DESKTOP_LARGE : NAVBAR_HEIGHT_DESKTOP;
+    const bottomSpace = 40;
+
+    const {menuStatus, isMenuOpen, openedSection, closeMenu, setIsMenuHovered, setMenuHeight} =
+        useMainNavigationBarDesktopMenuState();
+
+    React.useEffect(() => {
+        // Scroll to top of the content if the opened section changed
+        if (menuRef.current && isMenuOpen) {
+            menuRef.current.scrollTop = 0;
+        }
+
+        // Disable scroll in menu content until height's animation is finished to avoid
+        // showing the scrollbar while the menu's container is changing it's height
+        setIsMenuContentScrollable(false);
+        if (isMenuOpen) {
+            const id = setTimeout(() => setIsMenuContentScrollable(true), menuAnimationDuration);
+            return () => clearTimeout(id);
+        }
+    }, [isMenuOpen, openedSection, menuAnimationDuration]);
+
+    const [isContentVisible, setIsContentVisible] = React.useState(true);
+
+    React.useEffect(() => {
+        if (openedSection === index) {
+            // If menu is opening, trigger the fade-in effect for current section
+            if (menuStatus === 'opening') {
+                setIsContentVisible(false);
+                const id = requestAnimationFrame(() => setIsContentVisible(true));
+                return () => cancelAnimationFrame(id);
+            } else {
+                setIsContentVisible(true);
+            }
+        }
+    }, [menuStatus, openedSection, index]);
+
+    React.useEffect(() => {
+        // disable scroll when menu is closing to avoid showing the scrollbar
+        if (menuStatus === 'closing') {
+            setIsMenuContentScrollable(false);
+        }
+    }, [menuStatus]);
+
+    const columns = section.menu?.columns || [];
+    const customContent = section?.menu?.content;
+
+    return (
+        <div className={styles.desktopOnly}>
+            <ThemeVariant variant="default">
+                {openedSection === index && (
+                    <ResetResponsiveLayout>
+                        <div
+                            className={styles.desktopMenuContainer}
+                            onMouseEnter={() => setIsMenuHovered(true)}
+                            onMouseLeave={() => setIsMenuHovered(false)}
+                            style={{
+                                // disable pointer events when menu is closing
+                                pointerEvents:
+                                    menuStatus === 'closed' || menuStatus === 'closing' ? 'none' : undefined,
+                                top: topSpace,
+                                maxHeight: `calc(100vh - ${topSpace}px - ${bottomSpace}px)`,
+                                overflowY: isMenuContentScrollable ? 'auto' : 'hidden',
+                            }}
+                        >
+                            <ResponsiveLayout>
+                                <div
+                                    className={classnames(styles.desktopMenu, {
+                                        [styles.desktopMenuContentFadeIn]: isContentVisible,
+                                    })}
+                                    ref={(el) => {
+                                        if (el && isMenuOpen) {
+                                            setMenuHeight(
+                                                `min(${el.scrollHeight}px, calc(100vh - ${topSpace}px - ${bottomSpace}px))`
+                                            );
+                                        }
+                                    }}
+                                >
+                                    {customContent ? (
+                                        typeof customContent === 'function' ? (
+                                            customContent({closeMenu})
+                                        ) : (
+                                            customContent
+                                        )
+                                    ) : (
+                                        <Grid
+                                            rows={1}
+                                            columns={12}
+                                            gap={[24, 40]}
+                                            dataAttributes={{'navigation-bar-menu-items': 'true'}}
+                                        >
+                                            {columns.map((column, columnIdx) => (
+                                                <GridItem key={columnIdx} columnSpan={2}>
+                                                    <MainNavigationBarDesktopMenuSectionColumn
+                                                        column={column}
+                                                        columnIndex={columnIdx}
+                                                    />
+                                                </GridItem>
+                                            ))}
+                                        </Grid>
+                                    )}
+                                </div>
+                            </ResponsiveLayout>
+                        </div>
+                    </ResetResponsiveLayout>
+                )}
+            </ThemeVariant>
+        </div>
+    );
+};
+
+// This is the menu's background panel. The menu content is rendered separately for each tab
+// in order to make the section's content follow the natural focus order of elements
+// when using the keyboard or a screen reader to navigate
+const MainNavigationBarDesktopMenuBackground = ({
+    isLargeNavigationBar,
+}: {
+    isLargeNavigationBar: boolean;
+}): JSX.Element => {
+    const topSpace = isLargeNavigationBar ? NAVBAR_HEIGHT_DESKTOP_LARGE : NAVBAR_HEIGHT_DESKTOP;
+    const {menuHeight} = useMainNavigationBarDesktopMenuState();
+
+    return (
+        <div className={styles.desktopOnly}>
+            <div className={styles.desktopMenuWrapper} style={{top: topSpace}}>
+                <div
+                    className={styles.desktopMenuBackgroundContainer}
+                    style={{
+                        height: menuHeight,
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
+
+const MainNavigationBarDesktopSmallMenu = ({
+    section,
+    isLargeNavigationBar,
+    leftPosition,
+    index,
+}: {
+    section: MainNavigationBarSection;
+    isLargeNavigationBar: boolean;
+    leftPosition: number;
+    index: number;
+}): JSX.Element => {
+    const topSpace = isLargeNavigationBar ? NAVBAR_HEIGHT_DESKTOP_LARGE : NAVBAR_HEIGHT_DESKTOP;
+    const bottomSpace = 40;
+
+    const columns = section.menu?.columns || [];
+    const customContent = section?.menu?.content;
+
+    const {openedSection, menuStatus, setIsMenuHovered, closeMenu} = useMainNavigationBarDesktopMenuState();
+
+    return (
+        <div className={styles.desktopOnly}>
+            {index === openedSection && (
+                <ThemeVariant variant="default">
+                    <div
+                        className={styles.desktopSmallMenuContainer}
+                        onMouseEnter={() => setIsMenuHovered(true)}
+                        onMouseLeave={() => setIsMenuHovered(false)}
+                        style={{
+                            // disable pointer events when menu is closing
+                            pointerEvents:
+                                menuStatus === 'closed' || menuStatus === 'closing' ? 'none' : undefined,
+                            top: topSpace,
+                            left: leftPosition,
+                            maxHeight: `calc(100vh - ${topSpace}px - ${bottomSpace}px)`,
+                        }}
+                    >
+                        {customContent ? (
+                            typeof customContent === 'function' ? (
+                                customContent({closeMenu})
+                            ) : (
+                                customContent
+                            )
+                        ) : (
+                            <Stack space={40} dataAttributes={{'navigation-bar-menu-items': 'true'}}>
+                                {columns.map((column, columnIdx) => (
+                                    <MainNavigationBarDesktopMenuSectionColumn
+                                        key={columnIdx}
+                                        column={column}
+                                        columnIndex={columnIdx}
+                                    />
+                                ))}
+                            </Stack>
+                        )}
+                    </div>
+                </ThemeVariant>
+            )}
+        </div>
+    );
+};
+
+const MainNavigationBarDesktopSection = ({
+    section,
+    index,
+    selectedIndex,
+    isFirstSection,
+    isLastSection,
+    navigationBarRef,
+    variant,
+    isLargeNavigationBar,
+    desktopLargeMenu,
+}: {
+    section: MainNavigationBarSection;
+    index: number;
+    selectedIndex?: number;
+    isFirstSection: boolean;
+    isLastSection: boolean;
+    navigationBarRef: React.RefObject<HTMLDivElement>;
+    variant?: Variant;
+    isLargeNavigationBar: boolean;
+    desktopLargeMenu?: boolean;
+}): JSX.Element => {
+    const {texts, t} = useTheme();
+    const {title, menu, ...touchableProps} = section;
+    const sectionRef = React.useRef<HTMLDivElement>(null);
+    const [smallMenuLeftPosition, setSmallMenuLeftPosition] = React.useState(0);
+    const [isMenuControlFocused, setIsMenuControlFocused] = React.useState(false);
+    const {
+        isMenuOpen,
+        openedSection,
+        openSectionMenu,
+        debouncedOpenSectionMenu,
+        cancelDebouncedOpenSectionMenu,
+        closeMenu,
+    } = useMainNavigationBarDesktopMenuState();
+
+    const hasCustomInteraction =
+        touchableProps.href !== undefined ||
+        touchableProps.onPress !== undefined ||
+        touchableProps.to !== undefined;
+
+    const openCurrentSectionMenu = React.useCallback(
+        (withDebounce?: boolean) => {
+            // Align small menu to left border of the section if it fits. Otherwise, align it to the right border
+            const getSmallMenuLeftPosition = () => {
+                const {left, right} = sectionRef.current?.getBoundingClientRect() || {left: 0, right: 0};
+                const maxLeftOffset =
+                    (navigationBarRef.current?.getBoundingClientRect().right || 0) -
+                    styles.DESKTOP_SMALL_MENU_WIDTH;
+
+                return left <= maxLeftOffset ? left : right - styles.DESKTOP_SMALL_MENU_WIDTH;
+            };
+            if (!desktopLargeMenu) {
+                setSmallMenuLeftPosition(getSmallMenuLeftPosition());
+            }
+
+            if (withDebounce) {
+                debouncedOpenSectionMenu(index);
+            } else {
+                openSectionMenu(index);
+            }
+        },
+        [desktopLargeMenu, index, openSectionMenu, debouncedOpenSectionMenu, navigationBarRef]
+    );
+
+    React.useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            switch (e.key) {
+                // If arrow is focused and DOWN key is pressed, open the menu if it was closed
+                case DOWN:
+                    if (isMenuControlFocused) {
+                        cancelEvent(e);
+                        openCurrentSectionMenu();
+                    }
+                    break;
+
+                // If arrow is focused and UP key is pressed, close the menu if it was opened
+                case UP:
+                    if (isMenuControlFocused) {
+                        cancelEvent(e);
+                        closeMenu();
+                    }
+                    break;
+
+                default:
+                // Do nothing
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown, false);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown, false);
+        };
+    }, [index, isMenuControlFocused, openCurrentSectionMenu, closeMenu, menu, hasCustomInteraction]);
+
+    const isSectionMenuOpen = isMenuOpen && openedSection === index;
+
+    const menuButtonOnPress = React.useCallback(() => {
+        if (isSectionMenuOpen) {
+            closeMenu();
+        } else {
+            openCurrentSectionMenu();
+        }
+    }, [isSectionMenuOpen, openCurrentSectionMenu, closeMenu]);
+
+    const getSectionInteractiveProps = React.useCallback(
+        (touchableProps: InteractiveProps) => {
+            // Open or close the menu when a section without interaction is pressed
+            if (!hasCustomInteraction) {
+                return {
+                    onPress: menuButtonOnPress,
+                };
+            }
+
+            return touchableProps as InteractiveProps;
+        },
+        [hasCustomInteraction, menuButtonOnPress]
+    );
+
+    return (
+        <div className={styles.desktopMenuSectionWithArrowWrapper}>
+            <div
+                ref={sectionRef}
+                className={classnames(styles.desktopMenuSectionContainer, {
+                    [styles.desktopMenuFirstSection]: isFirstSection,
+                    [styles.desktopMenuLastSection]: isLastSection,
+                })}
+                onMouseEnter={() => openCurrentSectionMenu(true)}
+                onMouseLeave={() => cancelDebouncedOpenSectionMenu(index)}
+                onFocus={() => {
+                    if (menu && !hasCustomInteraction) setIsMenuControlFocused(true);
+                }}
+                onBlur={() => {
+                    if (menu && !hasCustomInteraction) setIsMenuControlFocused(false);
+                }}
+            >
+                <BaseTouchable
+                    {...getSectionInteractiveProps(touchableProps as InteractiveProps)}
+                    aria-label={
+                        !hasCustomInteraction
+                            ? `${section.title}, ${texts.mainNavigationBarOpenSectionMenu || t(tokens.mainNavigationBarOpenSectionMenu)}`
+                            : undefined
+                    }
+                    aria-haspopup={!hasCustomInteraction}
+                    aria-expanded={!hasCustomInteraction ? isSectionMenuOpen : undefined}
+                    className={classnames(
+                        styles.section,
+                        {
+                            [styles.selectedSectionVariantes[variant === 'inverse' ? 'inverse' : 'default']]:
+                                index === selectedIndex,
+                        },
+                        styles.textWrapperVariants[variant === 'inverse' ? 'inverse' : 'default']
+                    )}
+                >
+                    <Text3 regular color="inherit">
+                        {title}
+                    </Text3>
+                </BaseTouchable>
+            </div>
+            {menu && (
+                <>
+                    {hasCustomInteraction && (
+                        <div
+                            className={styles.desktopMenuSectionArrowContainer}
+                            onFocus={() => setIsMenuControlFocused(true)}
+                            onBlur={() => setIsMenuControlFocused(false)}
+                        >
+                            <BaseTouchable
+                                className={styles.desktopMenuSectionArrow}
+                                aria-label={`${section.title}, ${texts.mainNavigationBarOpenSectionMenu || t(tokens.mainNavigationBarOpenSectionMenu)}`}
+                                aria-haspopup
+                                aria-expanded={isSectionMenuOpen}
+                                onPress={() => {
+                                    if (isMenuControlFocused) {
+                                        menuButtonOnPress();
+                                    }
+                                }}
+                                style={{
+                                    pointerEvents: isMenuControlFocused ? 'auto' : 'none',
+                                    opacity: isMenuControlFocused ? 1 : 0,
+                                    // We are using the same chevron as in ButtonLink, and that svg has
+                                    // some extra space on the left that we want to ignore in this case
+                                    marginTop: -2,
+                                }}
+                            >
+                                <MenuSectionArrow
+                                    size={8}
+                                    style={{
+                                        transform: `rotate(${isSectionMenuOpen ? -90 : 90}deg)`,
+                                    }}
+                                />
+                            </BaseTouchable>
+                        </div>
+                    )}
+                    {desktopLargeMenu ? (
+                        <MainNavigationBarDesktopMenuContent
+                            section={section}
+                            isLargeNavigationBar={isLargeNavigationBar}
+                            index={index}
+                        />
+                    ) : (
+                        <MainNavigationBarDesktopSmallMenu
+                            section={section}
+                            isLargeNavigationBar={isLargeNavigationBar}
+                            leftPosition={smallMenuLeftPosition}
+                            index={index}
+                        />
+                    )}
+                </>
+            )}
+        </div>
+    );
+};
+
+const MainNavigationBarDesktopSections = ({
+    sections,
+    selectedIndex,
+    navigationBarRef,
+    variant,
+    isLargeNavigationBar,
+    hasRightContent,
+    desktopLargeMenu,
+}: {
+    sections: ReadonlyArray<MainNavigationBarSection>;
+    selectedIndex?: number;
+    navigationBarRef: React.RefObject<HTMLDivElement>;
+    variant: Variant;
+    hasRightContent: boolean;
+    isLargeNavigationBar: boolean;
+    desktopLargeMenu: boolean;
+}): JSX.Element => {
+    const {openSectionMenu, openedSection, closeMenu} = useMainNavigationBarDesktopMenuState();
+
+    return (
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        <nav
+            className={classnames(styles.desktopOnly, styles.mainNavBarSectionsContainer)}
+            style={{
+                paddingLeft: !isLargeNavigationBar ? 48 : 0,
+                paddingRight: !isLargeNavigationBar && hasRightContent ? 136 : 0,
+            }}
+            onMouseEnter={() => {
+                // Mark current opened section as active to avoid closing the menu when moving the pointer
+                // from the menu content to the navigation bar (without hovering the tab itself)
+                if (openedSection !== -1) {
+                    openSectionMenu(openedSection);
+                }
+            }}
+            onMouseLeave={closeMenu}
+        >
+            <Inline space={32}>
+                {sections.map((section, idx) => (
+                    <MainNavigationBarDesktopSection
+                        key={idx}
+                        index={idx}
+                        selectedIndex={selectedIndex}
+                        navigationBarRef={navigationBarRef}
+                        isFirstSection={idx === 0}
+                        isLastSection={idx === sections.length - 1}
+                        variant={variant}
+                        section={section}
+                        isLargeNavigationBar={isLargeNavigationBar}
+                        desktopLargeMenu={desktopLargeMenu}
+                    />
+                ))}
+            </Inline>
+        </nav>
+    );
 };
 
-type MainNavigationBarProps = MainNavigationBarPropsBase;
+// It's not easy to coordinate the animation of the menu content height when switching between opened
+// sections. This is because each section has it's own element where it displays the content. Instead,
+// the contents of the sections are rendered without any animation, and we keep this wrapper around
+// all of them, which "hides" the rendered smoothly by using animated clip-path
+const MainNavigationBarContentWrapper = ({
+    children,
+    isLargeNavigationBar,
+    desktopLargeMenu,
+}: {
+    children: React.ReactNode;
+    isLargeNavigationBar: boolean;
+    desktopLargeMenu: boolean;
+}): JSX.Element => {
+    const {menuHeight} = useMainNavigationBarDesktopMenuState();
+    const topSpace = isLargeNavigationBar ? NAVBAR_HEIGHT_DESKTOP_LARGE : NAVBAR_HEIGHT_DESKTOP;
 
-type MenuTransitionState = 'closed' | 'opening' | 'open' | 'closing';
+    return (
+        <div
+            className={styles.mainNavigationBarContentWrapper}
+            style={
+                desktopLargeMenu
+                    ? {
+                          clipPath: `rect(0 100% calc(${topSpace}px + ${menuHeight}) 0)`,
+                          WebkitClipPath: `rect(0 100% calc(${topSpace}px + ${menuHeight}) 0)`,
+                      }
+                    : undefined
+            }
+        >
+            {children}
+        </div>
+    );
+};
 
 export const MainNavigationBar = ({
     sections = [],
@@ -145,58 +1331,41 @@ export const MainNavigationBar = ({
     burgerMenuExtra,
     logo,
     large = false,
+    desktopLargeMenu = false,
 }: MainNavigationBarProps): JSX.Element => {
-    const {texts, isDarkMode, t} = useTheme();
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    const [menuTransitionState, setMenuTransitionState] = React.useState<MenuTransitionState>('closed');
+    const {texts, t} = useTheme();
     const menuId = React.useId();
-    const shadowAlpha = isDarkMode ? 1 : 0.2;
     const {isTabletOrSmaller} = useScreenSize();
-    const setModalState = useSetModalState();
     const logoElement = logo || <Logo size={{mobile: 40, desktop: 48}} />;
+    const hasBottomSections = large && sections.length > 0;
 
-    const renderDesktopSections = () => {
-        return (
-            <nav className={styles.desktopOnly}>
-                <Inline space={32}>
-                    {sections.map(({title, ...touchableProps}, idx) => (
-                        <BaseTouchable
-                            {...touchableProps}
-                            key={idx}
-                            className={classnames(
-                                styles.section,
-                                {
-                                    [styles.selectedSectionVariantes[
-                                        variant === 'inverse' ? 'inverse' : 'default'
-                                    ]]: idx === selectedIndex,
-                                },
-                                styles.textWrapperVariants[variant === 'inverse' ? 'inverse' : 'default']
-                            )}
-                        >
-                            <Text3 regular color="inherit">
-                                {title}
-                            </Text3>
-                        </BaseTouchable>
-                    ))}
-                </Inline>
-            </nav>
-        );
-    };
+    const [isBurgerMenuOpen, setIsBurgerMenuOpen] = React.useState(false);
+    const [disableFocusTrap, setDisableFocusTrap] = React.useState(true);
+    const navigationBarRef = React.useRef<HTMLDivElement>(null);
+    const setModalState = useSetModalState();
 
-    const hasBottomSections = large && sections.length > 0;
+    const desktopSections = (
+        <MainNavigationBarDesktopSections
+            sections={sections}
+            selectedIndex={selectedIndex}
+            navigationBarRef={navigationBarRef}
+            variant={variant}
+            hasRightContent={!!right}
+            isLargeNavigationBar={hasBottomSections}
+            desktopLargeMenu={desktopLargeMenu}
+        />
+    );
 
     const openMenu = () => {
-        setIsMenuOpen(true);
+        setIsBurgerMenuOpen(true);
         setModalState({isModalOpen: true});
     };
 
     const closeMenu = () => {
-        setIsMenuOpen(false);
+        setIsBurgerMenuOpen(false);
         setModalState({isModalOpen: false});
     };
 
-    const disableFocusTrap = menuTransitionState !== 'open';
-
     const showBurger = sections.length > 1;
 
     const mainNavBar = (
@@ -204,192 +1373,75 @@ export const MainNavigationBar = ({
             <Header
                 topFixed={topFixed}
                 withBorder={withBorder}
-                isMenuOpen={isMenuOpen}
+                isBurgerMenuOpen={isBurgerMenuOpen}
                 variant={variant}
                 dataAttributes={{'component-name': 'MainNavigationBar'}}
             >
-                <ResponsiveLayout>
-                    <NavigationBarContentContainer right={right}>
-                        <div className={styles.mainNavbarContent}>
+                {desktopLargeMenu && (
+                    <MainNavigationBarDesktopMenuBackground isLargeNavigationBar={hasBottomSections} />
+                )}
+                <MainNavigationBarContentWrapper
+                    isLargeNavigationBar={hasBottomSections}
+                    desktopLargeMenu={desktopLargeMenu}
+                >
+                    <ResponsiveLayout>
+                        <NavigationBarContentContainer
+                            ref={navigationBarRef}
+                            right={right}
+                            expandRightContent={hasBottomSections}
+                        >
                             {showBurger && (
                                 <Touchable
                                     className={styles.burgerMenuButton}
                                     aria-live="polite"
                                     aria-label={
-                                        isMenuOpen
+                                        isBurgerMenuOpen
                                             ? texts.closeNavigationMenu || t(tokens.closeNavigationMenu)
                                             : texts.openNavigationMenu || t(tokens.openNavigationMenu)
                                     }
-                                    aria-expanded={isMenuOpen}
+                                    aria-expanded={isBurgerMenuOpen}
                                     aria-controls={menuId}
-                                    onPress={isMenuOpen ? closeMenu : openMenu}
+                                    onPress={isBurgerMenuOpen ? closeMenu : openMenu}
                                 >
-                                    <BurgerMenuIcon isOpen={isMenuOpen} />
+                                    <BurgerMenuIcon isOpen={isBurgerMenuOpen} />
                                 </Touchable>
                             )}
                             <div className={styles.logoContainer}>{logoElement}</div>
-                            {!hasBottomSections && renderDesktopSections()}
-                        </div>
-                    </NavigationBarContentContainer>
-                    {hasBottomSections && (
-                        <NavigationBarContentContainer desktopOnly>
-                            {renderDesktopSections()}
+                            {!hasBottomSections && desktopSections}
                         </NavigationBarContentContainer>
-                    )}
-                </ResponsiveLayout>
+                        {hasBottomSections && (
+                            <NavigationBarContentContainer desktopOnly>
+                                {desktopSections}
+                            </NavigationBarContentContainer>
+                        )}
+                    </ResponsiveLayout>
+                </MainNavigationBarContentWrapper>
             </Header>
             {topFixed && <div className={hasBottomSections ? styles.spacerLarge : styles.spacer} />}
         </ThemeVariant>
     );
 
-    if (!isTabletOrSmaller) {
-        return mainNavBar;
-    }
-
     return (
-        <>
-            <FocusTrap disabled={disableFocusTrap} group="burger-menu-lock">
-                {mainNavBar}
-            </FocusTrap>
-            {showBurger && (
-                <Portal>
+        <MainNavigationBarDesktopMenuContextProvider sections={sections} isLargeMenu={desktopLargeMenu}>
+            {!isTabletOrSmaller ? (
+                mainNavBar
+            ) : (
+                <>
                     <FocusTrap disabled={disableFocusTrap} group="burger-menu-lock">
-                        <Transition
-                            onEntering={() => {
-                                setMenuTransitionState('opening');
-                            }}
-                            onEntered={() => {
-                                setMenuTransitionState('open');
-                            }}
-                            onExiting={() => {
-                                setMenuTransitionState('closing');
-                            }}
-                            onExited={() => {
-                                setMenuTransitionState('closed');
-                            }}
-                            in={isMenuOpen}
-                            timeout={isRunningAcceptanceTest() ? 0 : BURGER_MENU_ANIMATION_DURATION_MS}
-                            unmountOnExit
-                        >
-                            {(burgerMenuState) => (
-                                <>
-                                    {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-                                    <nav
-                                        className={classnames(
-                                            styles.burgerMenu,
-                                            styles.burgerMenuTransition[burgerMenuState]
-                                        )}
-                                        style={{
-                                            boxShadow:
-                                                menuTransitionState !== 'closed'
-                                                    ? `6px 0 4px -4px rgba(0, 0, 0, ${shadowAlpha})`
-                                                    : 'none',
-                                        }}
-                                        id={menuId}
-                                        onClick={() => {
-                                            // Capture bubbling click events to close the burger menu when any row is pressed
-                                            closeMenu();
-                                        }}
-                                    >
-                                        <ResponsiveLayout>
-                                            <Stack space={16}>
-                                                <NegativeBox>
-                                                    <RowList>
-                                                        {sections.map((section, index) => (
-                                                            <Row key={index} {...section} />
-                                                        ))}
-                                                    </RowList>
-                                                </NegativeBox>
-                                                {burgerMenuExtra && (
-                                                    <Box paddingBottom={16}>{burgerMenuExtra}</Box>
-                                                )}
-                                            </Stack>
-                                        </ResponsiveLayout>
-                                    </nav>
-                                </>
-                            )}
-                        </Transition>
+                        {mainNavBar}
                     </FocusTrap>
-                </Portal>
-            )}
-        </>
-    );
-};
-
-interface NavigationBarCommonProps {
-    variant?: Variant;
-    onBack?: () => void;
-    title?: string;
-    titleAs?: HeadingType;
-    right?: React.ReactElement;
-    withBorder?: boolean;
-    children?: undefined;
-}
-
-interface NavigationBarTopFixedProps extends NavigationBarCommonProps {
-    topFixed?: true;
-    paddingX?: undefined;
-}
-
-interface NavigationBarNotFixedProps extends NavigationBarCommonProps {
-    topFixed: false;
-    paddingX?: number;
-}
-
-type NavigationBarProps = NavigationBarTopFixedProps | NavigationBarNotFixedProps;
-
-export const NavigationBar = ({
-    onBack,
-    title,
-    titleAs,
-    right,
-    variant = 'default',
-    topFixed = true,
-    paddingX = 0,
-    withBorder = true,
-}: NavigationBarProps): JSX.Element => {
-    const {texts, t} = useTheme();
-    const content = (
-        <NavigationBarContentContainer right={right}>
-            <Inline space={24} alignItems="center">
-                {onBack && (
-                    <IconButton
-                        aria-label={texts.backNavigationBar || t(tokens.backNavigationBar)}
-                        onPress={onBack}
-                        Icon={IconChevronLeftRegular}
-                        bleedLeft
-                        bleedRight
+                    <MainNavigationBarBurgerMenu
+                        open={isBurgerMenuOpen}
+                        id={menuId}
+                        sections={sections}
+                        extra={burgerMenuExtra}
+                        closeMenu={closeMenu}
+                        disableFocusTrap={disableFocusTrap}
+                        setDisableFocusTrap={setDisableFocusTrap}
                     />
-                )}
-                <Text3 regular truncate as={titleAs}>
-                    {title}
-                </Text3>
-            </Inline>
-        </NavigationBarContentContainer>
-    );
-    return (
-        <ThemeVariant variant={variant}>
-            <Header
-                topFixed={topFixed}
-                withBorder={withBorder}
-                variant={variant}
-                dataAttributes={{'component-name': 'NavigationBar'}}
-            >
-                {topFixed ? (
-                    <ResponsiveLayout>{content}</ResponsiveLayout>
-                ) : (
-                    <div
-                        style={{
-                            padding: `0 ${paddingX}px`,
-                            width: '100%',
-                        }}
-                    >
-                        {content}
-                    </div>
-                )}
-            </Header>
-            {topFixed && <div className={styles.spacer} />}
-        </ThemeVariant>
+                </>
+            )}
+        </MainNavigationBarDesktopMenuContextProvider>
     );
 };
 
@@ -421,7 +1473,9 @@ export const FunnelNavigationBar = ({
             >
                 <ResponsiveLayout>
                     <GridLayout template="10">
-                        <NavigationBarContentContainer right={right}>{logo}</NavigationBarContentContainer>
+                        <NavigationBarContentContainer right={right} expandRightContent>
+                            {logo}
+                        </NavigationBarContentContainer>
                     </GridLayout>
                 </ResponsiveLayout>
             </Header>
diff --git a/src/package-version.tsx b/src/package-version.tsx
index 9e8720d24b..2966d5a70e 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 = '16.4.0' as string;
+export const PACKAGE_VERSION = '16.6.1' as string;
diff --git a/src/sheet-common.css.ts b/src/sheet-common.css.ts
index a73845c1a5..e803eb6ae0 100644
--- a/src/sheet-common.css.ts
+++ b/src/sheet-common.css.ts
@@ -133,7 +133,7 @@ export const children = sprinkles({
     flexDirection: 'column',
 });
 
-export const handleContainer = style([
+export const sheetTopDraggingArea = style([
     sprinkles({
         // Absolute positioned with a bigger size to increase the touchable area for dragging
         position: 'absolute',
@@ -156,10 +156,35 @@ export const handleContainer = style([
     },
 ]);
 
-export const handle = sprinkles({
+export const handleContainer = style([
+    sprinkles({
+        display: 'none',
+    }),
+    {
+        '@media': {
+            // Handle is rendered only in mobile version
+            [mq.tabletOrSmaller]: {
+                position: 'absolute',
+                top: 8,
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+            },
+        },
+    },
+]);
+
+export const handleTouchable = style([
+    sprinkles({
+        width: 24,
+        height: 4,
+    }),
+]);
+
+export const handleBar = sprinkles({
     background: skinVars.colors.control,
-    width: 24,
-    height: 4,
+    width: '100%',
+    height: '100%',
     borderRadius: 2,
 });
 
diff --git a/src/sheet-common.tsx b/src/sheet-common.tsx
index 3f4559ea29..cd5a71853a 100644
--- a/src/sheet-common.tsx
+++ b/src/sheet-common.tsx
@@ -26,6 +26,7 @@ import ButtonLayout from './button-layout';
 import {safeAreaInsetBottom} from './utils/css';
 import {MOBILE_SIDE_MARGIN, SMALL_DESKTOP_SIDE_MARGIN, TABLET_SIDE_MARGIN} from './responsive-layout.css';
 import * as tokens from './text-tokens';
+import Touchable from './touchable';
 
 import type {DataAttributes, RendersNullableElement} from './utils/types';
 import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
@@ -240,9 +241,12 @@ const Sheet = React.forwardRef<HTMLDivElement, SheetProps>(({onClose, children,
                 >
                     <div className={styles.Sheet}>
                         <div className={styles.SheetContent}>
-                            <div className={styles.handleContainer}>
-                                <div className={styles.handle} />
-                            </div>
+                            {/**
+                             * Space rendered on the top part of the sheet on top of
+                             * the content in order to be able to drag the sheet
+                             */}
+                            <div className={styles.sheetTopDraggingArea} />
+
                             <section
                                 role="dialog"
                                 aria-modal="true"
@@ -252,7 +256,6 @@ const Sheet = React.forwardRef<HTMLDivElement, SheetProps>(({onClose, children,
                                 style={{
                                     paddingBottom: safeAreaInsetBottom,
                                 }}
-                                tabIndex={-1}
                             >
                                 {typeof children === 'function'
                                     ? children({closeModal, modalTitleId})
@@ -267,6 +270,19 @@ const Sheet = React.forwardRef<HTMLDivElement, SheetProps>(({onClose, children,
                                         bleedY
                                     />
                                 </div>
+                                {/**
+                                 * We put a button behind the top dragging area so that the sheet can
+                                 * be closed while navigating with the keyboard or with a screen reader.
+                                 */}
+                                <div className={styles.handleContainer}>
+                                    <Touchable
+                                        onPress={closeModal}
+                                        className={styles.handleTouchable}
+                                        aria-label={texts.modalClose || t(tokens.modalClose)}
+                                    >
+                                        <div className={styles.handleBar} />
+                                    </Touchable>
+                                </div>
                             </section>
                         </div>
                     </div>
diff --git a/src/sheet-info.css.ts b/src/sheet-info.css.ts
index 1a78b8229e..54d4bd05fd 100644
--- a/src/sheet-info.css.ts
+++ b/src/sheet-info.css.ts
@@ -5,3 +5,15 @@ export const infoItemIcon = sprinkles({
     alignItems: 'center',
     height: 24,
 });
+
+export const infoItemIconContainer = sprinkles({
+    height: '100%',
+    display: 'flex',
+});
+
+export const itemContainer = sprinkles({
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: 72,
+    paddingY: 16,
+});
diff --git a/src/sheet-info.tsx b/src/sheet-info.tsx
index c5199e8c36..c0e2afba2e 100644
--- a/src/sheet-info.tsx
+++ b/src/sheet-info.tsx
@@ -10,6 +10,8 @@ import {Text3, Text2} from './text';
 import {vars as skinVars} from './skins/skin-contract.css';
 import * as styles from './sheet-info.css';
 import Image from './image';
+import {ButtonPrimary} from './button';
+import Divider from './divider';
 
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {DataAttributes, IconProps} from './utils/types';
@@ -38,10 +40,13 @@ type InfoSheetProps = {
     }>;
     onClose?: () => void;
     dataAttributes?: DataAttributes;
+    button?: {
+        text: string;
+    };
 };
 
 const InfoSheet = React.forwardRef<HTMLDivElement, InfoSheetProps>(
-    ({title, subtitle, description, items, onClose, dataAttributes}, ref) => {
+    ({title, subtitle, description, items, onClose, button, dataAttributes}, ref) => {
         const {isDarkMode} = useTheme();
         return (
             <Sheet
@@ -49,48 +54,68 @@ const InfoSheet = React.forwardRef<HTMLDivElement, InfoSheetProps>(
                 ref={ref}
                 dataAttributes={{'component-name': 'InfoSheet', ...dataAttributes}}
             >
-                {({modalTitleId}) => (
+                {({closeModal, modalTitleId}) => (
                     <SheetBody
                         title={title}
                         subtitle={subtitle}
                         description={description}
                         modalTitleId={modalTitleId}
+                        button={
+                            button ? (
+                                <ButtonPrimary onPress={closeModal}>{button.text}</ButtonPrimary>
+                            ) : undefined
+                        }
                     >
-                        <Box paddingBottom={16}>
-                            <Stack space={16} role="list">
-                                {items.map((item, idx) => (
-                                    <Inline key={item.id || idx} space={8}>
-                                        <div className={styles.infoItemIcon}>
-                                            {item.icon.type === 'bullet' ? (
-                                                <Circle
-                                                    size={8}
-                                                    backgroundColor={skinVars.colors.textPrimary}
-                                                />
-                                            ) : item.icon.Icon ? (
-                                                <item.icon.Icon size={item.icon.type === 'small' ? 16 : 24} />
-                                            ) : (
-                                                <Image
-                                                    src={
-                                                        isDarkMode && item.icon.urlDark
-                                                            ? item.icon.urlDark
-                                                            : item.icon.url
-                                                    }
-                                                    width={item.icon.type === 'small' ? 16 : 24}
-                                                    height={item.icon.type === 'small' ? 16 : 24}
-                                                />
-                                            )}
-                                        </div>
-                                        <Stack space={2}>
-                                            <Text3 regular>{item.title}</Text3>
-                                            {item.description && (
-                                                <Text2 regular color={skinVars.colors.textSecondary}>
-                                                    {item.description}
-                                                </Text2>
-                                            )}
-                                        </Stack>
-                                    </Inline>
-                                ))}
-                            </Stack>
+                        <Box paddingBottom={16} role="list">
+                            {items.map((item, idx) => (
+                                <React.Fragment key={item.id || idx}>
+                                    <div className={styles.itemContainer} role="listitem">
+                                        <Inline space={8}>
+                                            <div
+                                                className={styles.infoItemIconContainer}
+                                                style={{
+                                                    alignItems:
+                                                        item.icon.type !== 'bullet' && !item.description
+                                                            ? 'center'
+                                                            : undefined,
+                                                }}
+                                            >
+                                                <div className={styles.infoItemIcon}>
+                                                    {item.icon.type === 'bullet' ? (
+                                                        <Circle
+                                                            size={8}
+                                                            backgroundColor={skinVars.colors.textPrimary}
+                                                        />
+                                                    ) : item.icon.Icon ? (
+                                                        <item.icon.Icon
+                                                            size={item.icon.type === 'small' ? 16 : 24}
+                                                        />
+                                                    ) : (
+                                                        <Image
+                                                            src={
+                                                                isDarkMode && item.icon.urlDark
+                                                                    ? item.icon.urlDark
+                                                                    : item.icon.url
+                                                            }
+                                                            width={item.icon.type === 'small' ? 16 : 24}
+                                                            height={item.icon.type === 'small' ? 16 : 24}
+                                                        />
+                                                    )}
+                                                </div>
+                                            </div>
+                                            <Stack space={2}>
+                                                <Text3 regular>{item.title}</Text3>
+                                                {item.description && (
+                                                    <Text2 regular color={skinVars.colors.textSecondary}>
+                                                        {item.description}
+                                                    </Text2>
+                                                )}
+                                            </Stack>
+                                        </Inline>
+                                    </div>
+                                    {idx < items.length - 1 && <Divider />}
+                                </React.Fragment>
+                            ))}
                         </Box>
                     </SheetBody>
                 )}
diff --git a/src/sheet-native.tsx b/src/sheet-native.tsx
index d587d903bc..76690db816 100644
--- a/src/sheet-native.tsx
+++ b/src/sheet-native.tsx
@@ -88,25 +88,36 @@ const showActionsListNativeSheet = (
 
 const showInfoNativeSheet = async (
     nativeSheetImplementation: NativeSheetImplementation,
-    {title, subtitle, description, items}: SheetPropsByType['INFO']
+    {title, subtitle, description, items, button}: SheetPropsByType['INFO']
 ): Promise<SheetResultByType['INFO']> => {
-    // nothing to return, this is an informative sheet
-    await (nativeSheetImplementation as NativeSheetImplementation)({
+    const infoSheetContent = {
+        type: 'LIST' as const,
+        id: 'list-0',
+        listType: 'INFORMATIVE' as const,
+        autoSubmit: false,
+        selectedIds: [],
+        items,
+    };
+
+    return await (nativeSheetImplementation as NativeSheetImplementation)({
         title,
         subtitle,
         // TODO: add multiline support to native sheet
         description: normalizeDescriptionForNative(description),
-        content: [
-            {
-                type: 'LIST',
-                id: 'list-0',
-                listType: 'INFORMATIVE',
-                autoSubmit: false,
-                selectedIds: [],
-                items,
-            },
-        ],
-    });
+        content: button
+            ? [
+                  infoSheetContent,
+                  {
+                      type: 'BOTTOM_ACTIONS',
+                      id: 'bottom-actions-0',
+                      button,
+                  },
+              ]
+            : [infoSheetContent],
+    }).then(() => ({
+        // this is an informative sheet, it can only be dismissed
+        action: 'DISMISS',
+    }));
 };
 
 const showActionsNativeSheet = (
diff --git a/src/sheet-types.tsx b/src/sheet-types.tsx
index a03f3c070f..dda2892051 100644
--- a/src/sheet-types.tsx
+++ b/src/sheet-types.tsx
@@ -51,6 +51,9 @@ export type SheetPropsByType = {
             description?: string;
             icon: InfoIcon;
         }>;
+        button?: {
+            text: string;
+        };
     }>;
     ACTIONS: SheetProps<{
         button: {
@@ -71,7 +74,7 @@ export type SheetType = keyof SheetPropsByType;
 export type SheetResultByType = {
     RADIO_LIST: {action: 'SUBMIT'; selectedId: string} | {action: 'DISMISS'};
     ACTIONS_LIST: {action: 'SUBMIT'; selectedId: string} | {action: 'DISMISS'};
-    INFO: void;
+    INFO: {action: 'DISMISS'};
     ACTIONS: {action: 'PRIMARY' | 'SECONDARY' | 'LINK' | 'DISMISS'};
 };
 
diff --git a/src/sheet-web.tsx b/src/sheet-web.tsx
index 2370ffe158..edeacf5646 100644
--- a/src/sheet-web.tsx
+++ b/src/sheet-web.tsx
@@ -55,7 +55,7 @@ const SheetWeb = ({sheetProps, onResolve}: SheetWebProps): JSX.Element => {
         }
         switch (sheetProps.type) {
             case 'INFO':
-                onResolve<'INFO'>(undefined);
+                onResolve<'INFO'>({action: 'DISMISS'});
                 break;
             case 'ACTIONS_LIST':
                 if (selectionRef.current) {
diff --git a/src/skins/blau.tsx b/src/skins/blau.tsx
index 159568f2f7..a9a79687b2 100644
--- a/src/skins/blau.tsx
+++ b/src/skins/blau.tsx
@@ -328,29 +328,29 @@ export const getBlauSkin: GetKnownSkin = () => {
             mediaSmall: '8px',
         },
         textPresets: {
-            cardTitle: {weight: 'regular'},
             button: {weight: 'medium'},
+            cardTitle: {weight: 'regular'},
+            indicator: {weight: 'medium'},
+            link: {weight: 'medium'},
+            navigationBar: {weight: 'medium'},
             tabsLabel: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
                 weight: 'medium',
-                size: {mobile: 16, desktop: 18},
-                lineHeight: {mobile: 24, desktop: 24},
             },
-            link: {weight: 'medium'},
+            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
+            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'},
+            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'light'},
+            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'light'},
+            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'light'},
+            text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'light'},
             title1: {weight: 'medium'},
             title2: {weight: 'light'},
-            title3: {weight: 'light', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            indicator: {weight: 'medium'},
-            navigationBar: {weight: 'medium'},
-            text1: {size: {mobile: 12, desktop: 14}, lineHeight: {mobile: 16, desktop: 20}},
-            text2: {size: {mobile: 14, desktop: 16}, lineHeight: {mobile: 20, desktop: 24}},
-            text3: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
-            text4: {size: {mobile: 18, desktop: 20}, lineHeight: {mobile: 24, desktop: 28}},
-            text5: {weight: 'light', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            text6: {weight: 'light', size: {mobile: 24, desktop: 32}, lineHeight: {mobile: 32, desktop: 40}},
-            text7: {weight: 'light', size: {mobile: 28, desktop: 40}, lineHeight: {mobile: 32, desktop: 48}},
-            text8: {weight: 'light', size: {mobile: 32, desktop: 48}, lineHeight: {mobile: 40, desktop: 56}},
-            text9: {weight: 'light', size: {mobile: 40, desktop: 56}, lineHeight: {mobile: 48, desktop: 64}},
-            text10: {weight: 'light', size: {mobile: 48, desktop: 64}, lineHeight: {mobile: 56, desktop: 72}},
+            title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
         },
     };
     return skin;
diff --git a/src/skins/movistar.tsx b/src/skins/movistar.tsx
index 5571cd4430..ec358e32be 100644
--- a/src/skins/movistar.tsx
+++ b/src/skins/movistar.tsx
@@ -346,29 +346,29 @@ export const getMovistarSkin: GetKnownSkin = () => {
             mediaSmall: '8px',
         },
         textPresets: {
-            cardTitle: {weight: 'bold'},
             button: {weight: 'medium'},
+            cardTitle: {weight: 'bold'},
+            indicator: {weight: 'medium'},
+            link: {weight: 'medium'},
+            navigationBar: {weight: 'medium'},
             tabsLabel: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
                 weight: 'medium',
-                size: {mobile: 16, desktop: 18},
-                lineHeight: {mobile: 24, desktop: 24},
             },
-            link: {weight: 'medium'},
+            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'bold'},
+            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'bold'},
+            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'bold'},
+            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'bold'},
+            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'bold'},
+            text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'bold'},
             title1: {weight: 'medium'},
             title2: {weight: 'bold'},
-            title3: {weight: 'bold', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            indicator: {weight: 'medium'},
-            navigationBar: {weight: 'medium'},
-            text1: {size: {mobile: 12, desktop: 14}, lineHeight: {mobile: 16, desktop: 20}},
-            text2: {size: {mobile: 14, desktop: 16}, lineHeight: {mobile: 20, desktop: 24}},
-            text3: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
-            text4: {size: {mobile: 18, desktop: 20}, lineHeight: {mobile: 24, desktop: 28}},
-            text5: {weight: 'bold', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            text6: {weight: 'bold', size: {mobile: 24, desktop: 32}, lineHeight: {mobile: 32, desktop: 40}},
-            text7: {weight: 'bold', size: {mobile: 28, desktop: 40}, lineHeight: {mobile: 32, desktop: 48}},
-            text8: {weight: 'bold', size: {mobile: 32, desktop: 48}, lineHeight: {mobile: 40, desktop: 56}},
-            text9: {weight: 'bold', size: {mobile: 40, desktop: 56}, lineHeight: {mobile: 48, desktop: 64}},
-            text10: {weight: 'bold', size: {mobile: 48, desktop: 64}, lineHeight: {mobile: 56, desktop: 72}},
+            title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'bold'},
         },
     };
     return skin;
diff --git a/src/skins/o2-new.tsx b/src/skins/o2-new.tsx
index 5a923a50f4..244bdb795a 100644
--- a/src/skins/o2-new.tsx
+++ b/src/skins/o2-new.tsx
@@ -336,29 +336,29 @@ export const getO2NewSkin: GetKnownSkin = () => {
             mediaSmall: '8px',
         },
         textPresets: {
-            cardTitle: {weight: 'medium'},
             button: {weight: 'medium'},
+            cardTitle: {weight: 'medium'},
+            indicator: {weight: 'medium'},
+            link: {weight: 'medium'},
+            navigationBar: {weight: 'medium'},
             tabsLabel: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
                 weight: 'medium',
-                size: {mobile: 16, desktop: 18},
-                lineHeight: {mobile: 24, desktop: 24},
             },
-            link: {weight: 'medium'},
+            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'bold'},
+            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'bold'},
+            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'bold'},
+            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'bold'},
+            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'bold'},
+            text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'bold'},
             title1: {weight: 'medium'},
             title2: {weight: 'bold'},
-            title3: {weight: 'bold', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            indicator: {weight: 'medium'},
-            navigationBar: {weight: 'medium'},
-            text1: {size: {mobile: 12, desktop: 14}, lineHeight: {mobile: 16, desktop: 20}},
-            text2: {size: {mobile: 14, desktop: 16}, lineHeight: {mobile: 20, desktop: 24}},
-            text3: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
-            text4: {size: {mobile: 18, desktop: 20}, lineHeight: {mobile: 24, desktop: 28}},
-            text5: {weight: 'bold', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            text6: {weight: 'bold', size: {mobile: 24, desktop: 32}, lineHeight: {mobile: 32, desktop: 40}},
-            text7: {weight: 'bold', size: {mobile: 28, desktop: 40}, lineHeight: {mobile: 32, desktop: 48}},
-            text8: {weight: 'bold', size: {mobile: 32, desktop: 48}, lineHeight: {mobile: 40, desktop: 56}},
-            text9: {weight: 'bold', size: {mobile: 40, desktop: 56}, lineHeight: {mobile: 48, desktop: 64}},
-            text10: {weight: 'bold', size: {mobile: 48, desktop: 64}, lineHeight: {mobile: 56, desktop: 72}},
+            title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'bold'},
         },
     };
     return skin;
diff --git a/src/skins/o2.tsx b/src/skins/o2.tsx
index a57ee2f4ca..d41635e6c5 100644
--- a/src/skins/o2.tsx
+++ b/src/skins/o2.tsx
@@ -333,29 +333,29 @@ export const getO2Skin: GetKnownSkin = () => {
             mediaSmall: '8px',
         },
         textPresets: {
-            cardTitle: {weight: 'regular'},
             button: {weight: 'medium'},
+            cardTitle: {weight: 'regular'},
+            indicator: {weight: 'medium'},
+            link: {weight: 'medium'},
+            navigationBar: {weight: 'medium'},
             tabsLabel: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
                 weight: 'medium',
-                size: {mobile: 16, desktop: 18},
-                lineHeight: {mobile: 24, desktop: 24},
             },
-            link: {weight: 'medium'},
+            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
+            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'},
+            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'light'},
+            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'light'},
+            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'light'},
+            text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'light'},
             title1: {weight: 'medium'},
             title2: {weight: 'light'},
-            title3: {weight: 'light', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            indicator: {weight: 'medium'},
-            navigationBar: {weight: 'medium'},
-            text1: {size: {mobile: 12, desktop: 14}, lineHeight: {mobile: 16, desktop: 20}},
-            text2: {size: {mobile: 14, desktop: 16}, lineHeight: {mobile: 20, desktop: 24}},
-            text3: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
-            text4: {size: {mobile: 18, desktop: 20}, lineHeight: {mobile: 24, desktop: 28}},
-            text5: {weight: 'light', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            text6: {weight: 'light', size: {mobile: 24, desktop: 32}, lineHeight: {mobile: 32, desktop: 40}},
-            text7: {weight: 'light', size: {mobile: 28, desktop: 40}, lineHeight: {mobile: 32, desktop: 48}},
-            text8: {weight: 'light', size: {mobile: 32, desktop: 48}, lineHeight: {mobile: 40, desktop: 56}},
-            text9: {weight: 'light', size: {mobile: 40, desktop: 56}, lineHeight: {mobile: 48, desktop: 64}},
-            text10: {weight: 'light', size: {mobile: 48, desktop: 64}, lineHeight: {mobile: 56, desktop: 72}},
+            title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
         },
     };
     return skin;
diff --git a/src/skins/telefonica.tsx b/src/skins/telefonica.tsx
index 95886f9e7c..67a6be97f0 100644
--- a/src/skins/telefonica.tsx
+++ b/src/skins/telefonica.tsx
@@ -327,56 +327,56 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             mediaSmall: '0px',
         },
         textPresets: {
-            cardTitle: {weight: 'regular'},
             button: {weight: 'medium'},
+            cardTitle: {weight: 'regular'},
+            indicator: {weight: 'medium'},
+            link: {weight: 'medium'},
+            navigationBar: {weight: 'medium'},
             tabsLabel: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
                 weight: 'medium',
-                size: {mobile: 16, desktop: 18},
-                lineHeight: {mobile: 24, desktop: 24},
-            },
-            link: {weight: 'medium'},
-            title1: {weight: 'medium'},
-            title2: {weight: 'regular'},
-            title3: {
-                weight: 'regular',
-                size: {mobile: 20, desktop: 28},
-                lineHeight: {mobile: 24, desktop: 32},
             },
-            indicator: {weight: 'medium'},
-            navigationBar: {weight: 'medium'},
-            text1: {size: {mobile: 12, desktop: 14}, lineHeight: {mobile: 16, desktop: 20}},
-            text2: {size: {mobile: 14, desktop: 16}, lineHeight: {mobile: 20, desktop: 24}},
-            text3: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
-            text4: {size: {mobile: 18, desktop: 20}, lineHeight: {mobile: 24, desktop: 28}},
+            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
             text5: {
+                lineHeight: {desktop: 32, mobile: 24},
+                size: {desktop: 28, mobile: 20},
                 weight: 'regular',
-                size: {mobile: 20, desktop: 28},
-                lineHeight: {mobile: 24, desktop: 32},
             },
             text6: {
+                lineHeight: {desktop: 40, mobile: 32},
+                size: {desktop: 32, mobile: 24},
                 weight: 'regular',
-                size: {mobile: 24, desktop: 32},
-                lineHeight: {mobile: 32, desktop: 40},
             },
             text7: {
+                lineHeight: {desktop: 48, mobile: 32},
+                size: {desktop: 40, mobile: 28},
                 weight: 'regular',
-                size: {mobile: 28, desktop: 40},
-                lineHeight: {mobile: 32, desktop: 48},
             },
             text8: {
+                lineHeight: {desktop: 56, mobile: 40},
+                size: {desktop: 48, mobile: 32},
                 weight: 'regular',
-                size: {mobile: 32, desktop: 48},
-                lineHeight: {mobile: 40, desktop: 56},
             },
             text9: {
+                lineHeight: {desktop: 64, mobile: 48},
+                size: {desktop: 56, mobile: 40},
                 weight: 'regular',
-                size: {mobile: 40, desktop: 56},
-                lineHeight: {mobile: 48, desktop: 64},
             },
             text10: {
+                lineHeight: {desktop: 72, mobile: 56},
+                size: {desktop: 64, mobile: 48},
+                weight: 'regular',
+            },
+            title1: {weight: 'medium'},
+            title2: {weight: 'regular'},
+            title3: {
+                lineHeight: {desktop: 32, mobile: 24},
+                size: {desktop: 28, mobile: 20},
                 weight: 'regular',
-                size: {mobile: 48, desktop: 64},
-                lineHeight: {mobile: 56, desktop: 72},
             },
         },
     };
diff --git a/src/skins/tu.tsx b/src/skins/tu.tsx
index 8e7f6301f6..eab302e4a0 100644
--- a/src/skins/tu.tsx
+++ b/src/skins/tu.tsx
@@ -331,36 +331,36 @@ export const getTuSkin: GetKnownSkin = () => {
             mediaSmall: '8px',
         },
         textPresets: {
-            cardTitle: {weight: 'medium'},
             button: {weight: 'medium'},
+            cardTitle: {weight: 'medium'},
+            indicator: {weight: 'medium'},
+            link: {weight: 'medium'},
+            navigationBar: {weight: 'medium'},
             tabsLabel: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
+                weight: 'medium',
+            },
+            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'medium'},
+            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'medium'},
+            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'medium'},
+            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'medium'},
+            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'medium'},
+            text10: {
+                lineHeight: {desktop: 72, mobile: 56},
+                size: {desktop: 64, mobile: 48},
                 weight: 'medium',
-                size: {mobile: 16, desktop: 18},
-                lineHeight: {mobile: 24, desktop: 24},
             },
-            link: {weight: 'medium'},
             title1: {weight: 'medium'},
             title2: {weight: 'medium'},
             title3: {
+                lineHeight: {desktop: 32, mobile: 24},
+                size: {desktop: 28, mobile: 20},
                 weight: 'medium',
-                size: {mobile: 20, desktop: 28},
-                lineHeight: {mobile: 24, desktop: 32},
-            },
-            indicator: {weight: 'medium'},
-            navigationBar: {weight: 'medium'},
-            text1: {size: {mobile: 12, desktop: 14}, lineHeight: {mobile: 16, desktop: 20}},
-            text2: {size: {mobile: 14, desktop: 16}, lineHeight: {mobile: 20, desktop: 24}},
-            text3: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
-            text4: {size: {mobile: 18, desktop: 20}, lineHeight: {mobile: 24, desktop: 28}},
-            text5: {weight: 'medium', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            text6: {weight: 'medium', size: {mobile: 24, desktop: 32}, lineHeight: {mobile: 32, desktop: 40}},
-            text7: {weight: 'medium', size: {mobile: 28, desktop: 40}, lineHeight: {mobile: 32, desktop: 48}},
-            text8: {weight: 'medium', size: {mobile: 32, desktop: 48}, lineHeight: {mobile: 40, desktop: 56}},
-            text9: {weight: 'medium', size: {mobile: 40, desktop: 56}, lineHeight: {mobile: 48, desktop: 64}},
-            text10: {
-                weight: 'medium',
-                size: {mobile: 48, desktop: 64},
-                lineHeight: {mobile: 56, desktop: 72},
             },
         },
     };
diff --git a/src/skins/vivo-new.tsx b/src/skins/vivo-new.tsx
index cc848354b7..9c5930c2d7 100644
--- a/src/skins/vivo-new.tsx
+++ b/src/skins/vivo-new.tsx
@@ -326,56 +326,44 @@ export const getVivoNewSkin: GetKnownSkin = () => {
             mediaSmall: '8px',
         },
         textPresets: {
-            cardTitle: {weight: 'regular'},
-            button: {weight: 'regular'},
-            tabsLabel: {
-                weight: 'regular',
-                size: {mobile: 18, desktop: 18},
-                lineHeight: {mobile: 24, desktop: 24},
-            },
-            link: {weight: 'regular'},
-            title1: {weight: 'regular'},
-            title2: {weight: 'regular'},
-            title3: {
-                weight: 'regular',
-                size: {mobile: 18, desktop: 20},
-                lineHeight: {mobile: 24, desktop: 28},
-            },
-            indicator: {weight: 'regular'},
+            button: {weight: 'medium'},
+            cardTitle: {weight: 'medium'},
+            indicator: {weight: 'medium'},
+            link: {weight: 'medium'},
             navigationBar: {weight: 'regular'},
-            text1: {size: {mobile: 12, desktop: 14}, lineHeight: {mobile: 16, desktop: 20}},
-            text2: {size: {mobile: 14, desktop: 16}, lineHeight: {mobile: 20, desktop: 24}},
-            text3: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
-            text4: {size: {mobile: 18, desktop: 20}, lineHeight: {mobile: 24, desktop: 28}},
-            text5: {
-                weight: 'regular',
-                size: {mobile: 20, desktop: 28},
-                lineHeight: {mobile: 24, desktop: 32},
-            },
-            text6: {
-                weight: 'regular',
-                size: {mobile: 24, desktop: 32},
-                lineHeight: {mobile: 32, desktop: 40},
-            },
-            text7: {
-                weight: 'regular',
-                size: {mobile: 28, desktop: 40},
-                lineHeight: {mobile: 32, desktop: 48},
+            tabsLabel: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 18},
+                weight: 'medium',
             },
+            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'medium'},
+            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'medium'},
+            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'medium'},
             text8: {
+                lineHeight: {desktop: 56, mobile: 40},
+                size: {desktop: 48, mobile: 32},
                 weight: 'regular',
-                size: {mobile: 32, desktop: 48},
-                lineHeight: {mobile: 40, desktop: 56},
             },
             text9: {
+                lineHeight: {desktop: 64, mobile: 48},
+                size: {desktop: 56, mobile: 40},
                 weight: 'regular',
-                size: {mobile: 40, desktop: 56},
-                lineHeight: {mobile: 48, desktop: 64},
             },
             text10: {
+                lineHeight: {desktop: 72, mobile: 56},
+                size: {desktop: 64, mobile: 48},
                 weight: 'regular',
-                size: {mobile: 48, desktop: 64},
-                lineHeight: {mobile: 56, desktop: 72},
+            },
+            title1: {weight: 'medium'},
+            title2: {weight: 'medium'},
+            title3: {
+                lineHeight: {desktop: 28, mobile: 24},
+                size: {desktop: 20, mobile: 18},
+                weight: 'medium',
             },
         },
     };
diff --git a/src/skins/vivo.tsx b/src/skins/vivo.tsx
index 1ed353e217..ae64fb465b 100644
--- a/src/skins/vivo.tsx
+++ b/src/skins/vivo.tsx
@@ -326,29 +326,29 @@ export const getVivoSkin: GetKnownSkin = () => {
             mediaSmall: '8px',
         },
         textPresets: {
-            cardTitle: {weight: 'regular'},
             button: {weight: 'medium'},
+            cardTitle: {weight: 'regular'},
+            indicator: {weight: 'medium'},
+            link: {weight: 'medium'},
+            navigationBar: {weight: 'medium'},
             tabsLabel: {
+                lineHeight: {desktop: 24, mobile: 24},
+                size: {desktop: 18, mobile: 16},
                 weight: 'medium',
-                size: {mobile: 16, desktop: 18},
-                lineHeight: {mobile: 24, desktop: 24},
             },
-            link: {weight: 'medium'},
+            text1: {lineHeight: {desktop: 20, mobile: 16}, size: {desktop: 14, mobile: 12}},
+            text2: {lineHeight: {desktop: 24, mobile: 20}, size: {desktop: 16, mobile: 14}},
+            text3: {lineHeight: {desktop: 24, mobile: 24}, size: {desktop: 18, mobile: 16}},
+            text4: {lineHeight: {desktop: 28, mobile: 24}, size: {desktop: 20, mobile: 18}},
+            text5: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
+            text6: {lineHeight: {desktop: 40, mobile: 32}, size: {desktop: 32, mobile: 24}, weight: 'light'},
+            text7: {lineHeight: {desktop: 48, mobile: 32}, size: {desktop: 40, mobile: 28}, weight: 'light'},
+            text8: {lineHeight: {desktop: 56, mobile: 40}, size: {desktop: 48, mobile: 32}, weight: 'light'},
+            text9: {lineHeight: {desktop: 64, mobile: 48}, size: {desktop: 56, mobile: 40}, weight: 'light'},
+            text10: {lineHeight: {desktop: 72, mobile: 56}, size: {desktop: 64, mobile: 48}, weight: 'light'},
             title1: {weight: 'medium'},
             title2: {weight: 'light'},
-            title3: {weight: 'light', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            indicator: {weight: 'medium'},
-            navigationBar: {weight: 'medium'},
-            text1: {size: {mobile: 12, desktop: 14}, lineHeight: {mobile: 16, desktop: 20}},
-            text2: {size: {mobile: 14, desktop: 16}, lineHeight: {mobile: 20, desktop: 24}},
-            text3: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
-            text4: {size: {mobile: 18, desktop: 20}, lineHeight: {mobile: 24, desktop: 28}},
-            text5: {weight: 'light', size: {mobile: 20, desktop: 28}, lineHeight: {mobile: 24, desktop: 32}},
-            text6: {weight: 'light', size: {mobile: 24, desktop: 32}, lineHeight: {mobile: 32, desktop: 40}},
-            text7: {weight: 'light', size: {mobile: 28, desktop: 40}, lineHeight: {mobile: 32, desktop: 48}},
-            text8: {weight: 'light', size: {mobile: 32, desktop: 48}, lineHeight: {mobile: 40, desktop: 56}},
-            text9: {weight: 'light', size: {mobile: 40, desktop: 56}, lineHeight: {mobile: 48, desktop: 64}},
-            text10: {weight: 'light', size: {mobile: 48, desktop: 64}, lineHeight: {mobile: 56, desktop: 72}},
+            title3: {lineHeight: {desktop: 32, mobile: 24}, size: {desktop: 28, mobile: 20}, weight: 'light'},
         },
     };
     return skin;
diff --git a/src/stacking-group.tsx b/src/stacking-group.tsx
index 996dc28401..076bac2dec 100644
--- a/src/stacking-group.tsx
+++ b/src/stacking-group.tsx
@@ -3,10 +3,10 @@ import * as React from 'react';
 import {useIsInverseOrMediaVariant} from './theme-variant-context';
 import {vars} from './skins/skin-contract.css';
 import Inline from './inline';
-import {Text4} from './text';
 import * as styles from './stacking-group.css';
 import * as mediaStyles from './image.css';
 import {applyCssVars} from './utils/css';
+import {renderText} from './avatar';
 
 type Props = {
     stacked?: boolean;
@@ -31,6 +31,7 @@ const StackingGroup = ({
     const size = moreItemsStyle.size;
 
     const borderRadius = moreItemsStyle.type === 'circle' ? '50%' : vars.borderRadii.mediaSmall;
+    const textColor = isInverse ? vars.colors.textPrimaryInverse : vars.colors.textBrand;
 
     return (
         <div
@@ -49,17 +50,13 @@ const StackingGroup = ({
                         style={{
                             width: size,
                             height: size,
+                            color: textColor,
                             borderRadius,
                             backgroundColor: isInverse ? vars.colors.brandHigh : vars.colors.brandLow,
                             border: stacked ? `1px solid ${vars.colors.borderLow}` : 'none',
                         }}
                     >
-                        <Text4
-                            regular
-                            color={isInverse ? vars.colors.textPrimaryInverse : vars.colors.textBrand}
-                        >
-                            {'+' + moreItemsCount}
-                        </Text4>
+                        {renderText(size, `+${moreItemsCount}`)}
                     </div>
                 )}
             </Inline>
diff --git a/src/text-tokens.tsx b/src/text-tokens.tsx
index 1eeae056de..cbaec33f2f 100644
--- a/src/text-tokens.tsx
+++ b/src/text-tokens.tsx
@@ -32,6 +32,8 @@ export type Dictionary = {
     menuLabelSuffix: string;
     openNavigationMenu: string;
     closeNavigationMenu: string;
+    mainNavigationBarOpenSectionMenu: string;
+    mainNavigationBarSectionSeeAll: string;
     backNavigationBar: string;
     clearButton: string;
     carouselNextButton: string;
@@ -291,6 +293,20 @@ export const closeNavigationMenu: TextToken = {
     pt: 'Fechar menu de navegação',
 };
 
+export const mainNavigationBarOpenSectionMenu: TextToken = {
+    es: 'Abrir submenú',
+    en: 'Open submenu',
+    de: 'Untermenü öffnen',
+    pt: 'Abrir submenu',
+};
+
+export const mainNavigationBarSectionSeeAll: TextToken = {
+    es: 'Ver todo',
+    en: 'See all',
+    de: 'Alle anzeigen',
+    pt: 'Ver tudo',
+};
+
 export const backNavigationBar: TextToken = {
     es: 'Atrás',
     en: 'Back',
@@ -556,3 +572,25 @@ export const ratingQuantitativeLabel: TextToken = {
     de: '1$s von 2$s',
     pt: '1$s de 2$s',
 };
+
+/**
+ * 1$s: segments count
+ * 2$s: total percentage value
+ */
+export const meterTotalLabel: TextToken = {
+    es: 'Indicador de progreso con 1$s secciones, total 2$s% de 100%.',
+    en: 'Gauge chart 1$s segments, total 2$s% out of 100%.',
+    de: 'Fortschrittsanzeige mit 1$s Abschnitten, insgesamt 2$s% von 100%.',
+    pt: 'Indicador de progresso com 1$s seções, total 2$s% de 100%.',
+};
+
+/**
+ * 1$s: segment number
+ * 2$s: segment percentage value
+ */
+export const meterSectionLabel: TextToken = {
+    es: 'Sección 1$s: 2$s%',
+    en: 'Segment 1$s: 2$s%',
+    de: 'Abschnitt 1$s: 2$s%',
+    pt: 'Seção 1$s: 2$s%',
+};
diff --git a/src/theme-context-provider.tsx b/src/theme-context-provider.tsx
index cb76786ecd..30bcded897 100644
--- a/src/theme-context-provider.tsx
+++ b/src/theme-context-provider.tsx
@@ -133,8 +133,15 @@ const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Prop
     const language = localeToLanguage(theme.i18n.locale);
 
     const translate = React.useCallback(
-        (token: TextToken): string => {
-            return token[language] || token.en;
+        (token: TextToken, ...params: Array<string | number>): string => {
+            const text = token[language] || token.en;
+            if (!params.length) {
+                return text;
+            }
+            // replace token parameters: 1$s, 2$s, 3$s, etc.
+            return text.replace(/\d+\$s/g, (substr) => {
+                return String(params[parseInt(substr) - 1] ?? substr);
+            });
         },
         [language]
     );
@@ -174,6 +181,7 @@ const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Prop
                 ...sanitizeDimensions(theme.dimensions),
             },
             textPresets,
+            borderRadii: theme.skin.borderRadii ?? defaultBorderRadiiConfig,
             Link: getMisticaLinkComponent(theme.Link),
             isDarkMode: isDarkModeEnabled,
             isIos: getPlatform(platformOverrides) === 'ios',
diff --git a/src/theme.tsx b/src/theme.tsx
index dc6d2e9147..6aa5361da1 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import type {RegionCode} from './utils/region-code';
 import type {Locale} from './utils/locale';
-import type {Colors, Skin, SkinName, TextPresetsConfig} from './skins/types';
+import type {BorderRadiiConfig, Colors, Skin, SkinName, TextPresetsConfig} from './skins/types';
 import type {TrackingEvent} from './utils/types';
 import type {Dictionary, TextToken} from './text-tokens';
 
@@ -162,11 +162,12 @@ export type Theme = {
     // TODO: rename this props to navigationBarHeight (or something similar) in next major
     dimensions: {headerMobileHeight: number; headerDesktopHeight: number};
     colorValues: Colors;
+    borderRadii: BorderRadiiConfig;
     textPresets: TextPresetsConfig;
     Link: LinkComponent;
     isDarkMode: boolean;
     isIos: boolean;
     useHrefDecorator: () => (href: string) => string;
-    t: (token: TextToken) => string;
+    t: (token: TextToken, ...params: Array<string | number>) => string;
     preventCopyInFormFields: boolean;
 };
diff --git a/src/utils/headings.tsx b/src/utils/headings.tsx
new file mode 100644
index 0000000000..9fb25bf1aa
--- /dev/null
+++ b/src/utils/headings.tsx
@@ -0,0 +1,15 @@
+import type {HeadingType} from './types';
+
+export const isBiggerHeading = (heading: HeadingType, otherHeading?: HeadingType): boolean => {
+    // In case headings are equal, we consider that the first one has more priority
+    if (!otherHeading || heading === otherHeading) {
+        return true;
+    }
+
+    if (heading === 'span') {
+        return false;
+    }
+
+    // Both are header tags
+    return heading < otherHeading;
+};
diff --git a/src/utils/types.tsx b/src/utils/types.tsx
index cf5a45dd32..d742c5d0f0 100644
--- a/src/utils/types.tsx
+++ b/src/utils/types.tsx
@@ -2,7 +2,10 @@ export type {RendersElement, RendersNullableElement} from './renders-element';
 
 export type {TrackingEvent} from '@tef-novum/webview-bridge';
 
-export type DataAttributes = {[name: string]: string | number | boolean | undefined};
+export type DataAttributes = {
+    [name: string]: string | number | boolean | undefined;
+    testid?: string;
+};
 
 export type IconProps = {
     color?: string;
diff --git a/yarn.lock b/yarn.lock
index 15fc8821da..fc11ca58f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5543,6 +5543,7 @@ __metadata:
     classnames: ^2.3.1
     cpx: ^1.5.0
     cross-env: ^7.0.3
+    cubic-bezier: ^0.1.2
     detect-port: ^1.3.0
     dpdm: ^3.8.0
     es6-promise-pool: ^2.5.0
@@ -9479,6 +9480,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cubic-bezier@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "cubic-bezier@npm:0.1.2"
+  checksum: db21ebda82ab3662e1209dcff7612a3b265bb94e05892a609be01cf788ed681914ed9df8d277eb936012b4a58e5786846a8318b6e6bd0ec74087d6ad42566cc6
+  languageName: node
+  linkType: hard
+
 "cwd@npm:^0.10.0":
   version: 0.10.0
   resolution: "cwd@npm:0.10.0"