diff --git a/CHANGELOG.md b/CHANGELOG.md
index ed83ec84bd..5f52b78773 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+# [15.18.0](https://github.com/Telefonica/mistica-web/compare/v15.17.0...v15.18.0) (2024-08-20)
+
+
+### Bug Fixes
+
+* **FeedbackScreen:** avoid double responsive margins in buttons when they are not fixed ([#1195](https://github.com/Telefonica/mistica-web/issues/1195)) ([41c10ad](https://github.com/Telefonica/mistica-web/commit/41c10ad0a60fe3bfd7e191eca4583da37f2cf84e))
+* **Inline:** wrap content if required when space equals between/around/evenly ([#1199](https://github.com/Telefonica/mistica-web/issues/1199)) ([b121227](https://github.com/Telefonica/mistica-web/commit/b121227d6de61f2dbc2e6e60a4f0b2b9ecc8a646))
+* **Snackbar:** allow dataAttributes passed to openSnackbar ([#1192](https://github.com/Telefonica/mistica-web/issues/1192)) ([c5c65bd](https://github.com/Telefonica/mistica-web/commit/c5c65bdf486554e466fa325b3dbcef06eaccfecb))
+
+
+### Features
+
+* **Popover, Snackbar, Callout, Chip, Dialog, Cards:** allow customizable close button label ([#1193](https://github.com/Telefonica/mistica-web/issues/1193)) ([63de33a](https://github.com/Telefonica/mistica-web/commit/63de33a8fc9960f32c121db8e81f45e0ba32bdb6))
+
 # [15.17.0](https://github.com/Telefonica/mistica-web/compare/v15.16.4...v15.17.0) (2024-08-01)
 
 
diff --git a/package.json b/package.json
index 89317f2ddb..0b46d28285 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "15.17.0",
+    "version": "15.18.0",
     "license": "MIT",
     "repository": {
         "type": "git",
diff --git a/playroom/components/index.tsx b/playroom/components/index.tsx
index 07a4f2f287..9caf9ecf34 100644
--- a/playroom/components/index.tsx
+++ b/playroom/components/index.tsx
@@ -38,7 +38,7 @@ export * from '../../src/community';
 export {default as Loader} from './loader';
 export {default as ButtonGroup} from '../../src/button-group';
 
-type ValidSkinName = Exclude<KnownSkinName, 'O2-new' | 'Vivo-new'>;
+type ValidSkinName = Exclude<KnownSkinName, 'O2' | 'Vivo'>;
 
 const themesMap: {
     [skinName in ValidSkinName]: {themeConfig: ThemeConfig; text: string; icon: React.ReactNode};
@@ -48,12 +48,12 @@ const themesMap: {
         themeConfig: Movistar,
         icon: <MovistarLogo size={24} />,
     },
-    Vivo: {
+    'Vivo-new': {
         text: 'Vivo',
         themeConfig: Vivo_New,
         icon: <VivoLogo size={24} />,
     },
-    O2: {
+    'O2-new': {
         text: 'O2',
         themeConfig: O2_New,
         icon: <O2NewLogo size={24} />,
diff --git a/playroom/themes.tsx b/playroom/themes.tsx
index ebed1fc4e3..34ea8967be 100644
--- a/playroom/themes.tsx
+++ b/playroom/themes.tsx
@@ -11,18 +11,14 @@ const common: Partial<ThemeConfig> = {
 } as const;
 
 export const Movistar: ThemeConfig = {...themes.Movistar, ...common};
-export const Vivo: ThemeConfig = {...themes.Vivo, ...common};
 export const Vivo_New: ThemeConfig = {...themes.Vivo_New, ...common};
-export const O2: ThemeConfig = {...themes.O2, ...common};
 export const O2_New: ThemeConfig = {...themes.O2_New, ...common};
 export const Telefonica: ThemeConfig = {...themes.Telefonica, ...common};
 export const Blau: ThemeConfig = {...themes.Blau, ...common};
 export const Tu: ThemeConfig = {...themes.Tu, ...common};
 
 export const Movistar_iOS: ThemeConfig = {...Movistar, platformOverrides: {platform: 'ios'}};
-export const Vivo_iOS: ThemeConfig = {...Vivo, platformOverrides: {platform: 'ios'}};
 export const Vivo_New_iOS: ThemeConfig = {...Vivo_New, platformOverrides: {platform: 'ios'}};
-export const O2_iOS: ThemeConfig = {...O2, platformOverrides: {platform: 'ios'}};
 export const O2_New_iOS: ThemeConfig = {...O2_New, platformOverrides: {platform: 'ios'}};
 export const Telefonica_iOS: ThemeConfig = {...Telefonica, platformOverrides: {platform: 'ios'}};
 export const Blau_iOS: ThemeConfig = {...Blau, platformOverrides: {platform: 'ios'}};
diff --git a/src/__private_stories__/carousel-on-different-container-sizes-story.tsx b/src/__private_stories__/carousel-on-different-container-sizes-story.tsx
index b06ffa959e..1f2ad0135a 100644
--- a/src/__private_stories__/carousel-on-different-container-sizes-story.tsx
+++ b/src/__private_stories__/carousel-on-different-container-sizes-story.tsx
@@ -25,23 +25,23 @@ type Args = {
     itemsPerPageDesktopSmall: number;
     itemsPerPageDesktopMedium: number;
     itemsPerPageDesktopLarge: number;
-    withBullets: boolean;
+    bullets: boolean;
 };
 
 const ExampleCarousel = ({
     numItems,
-    withBullets,
+    bullets,
     cardsTitlePrefix,
     itemsPerPage,
 }: {
     numItems: number;
-    withBullets: boolean;
+    bullets: boolean;
     cardsTitlePrefix: number;
     itemsPerPage: {mobile: number; tablet: number; desktop: {small: number; medium: number; large: number}};
 }) => (
     <Carousel
         dataAttributes={{testid: 'carousel-story'}}
-        withBullets={withBullets}
+        withBullets={bullets}
         itemsPerPage={itemsPerPage}
         items={Array.from({length: numItems}, (_, idx) => (
             <MediaCard
@@ -63,7 +63,7 @@ export const Default: StoryComponent<Args> = ({
     itemsPerPageDesktopSmall,
     itemsPerPageDesktopMedium,
     itemsPerPageDesktopLarge,
-    withBullets,
+    bullets,
 }) => {
     const itemsPerPage = {
         mobile: itemsPerPageMobile,
@@ -87,7 +87,7 @@ export const Default: StoryComponent<Args> = ({
                         left={
                             <ExampleCarousel
                                 numItems={numItems}
-                                withBullets={withBullets}
+                                bullets={bullets}
                                 itemsPerPage={itemsPerPage}
                                 cardsTitlePrefix={1}
                             />
@@ -100,7 +100,7 @@ export const Default: StoryComponent<Args> = ({
                         right={
                             <ExampleCarousel
                                 numItems={numItems}
-                                withBullets={withBullets}
+                                bullets={bullets}
                                 itemsPerPage={itemsPerPage}
                                 cardsTitlePrefix={2}
                             />
@@ -108,7 +108,7 @@ export const Default: StoryComponent<Args> = ({
                     ></GridLayout>
                     <ExampleCarousel
                         numItems={numItems}
-                        withBullets={withBullets}
+                        bullets={bullets}
                         itemsPerPage={itemsPerPage}
                         cardsTitlePrefix={3}
                     />
@@ -127,5 +127,5 @@ Default.args = {
     itemsPerPageDesktopSmall: 1,
     itemsPerPageDesktopMedium: 2,
     itemsPerPageDesktopLarge: 3,
-    withBullets: true,
+    bullets: true,
 };
diff --git a/src/__private_stories__/inline-cases-story.tsx b/src/__private_stories__/inline-cases-story.tsx
index 2ea9d87181..016456ff9e 100644
--- a/src/__private_stories__/inline-cases-story.tsx
+++ b/src/__private_stories__/inline-cases-story.tsx
@@ -31,6 +31,16 @@ export const Default: StoryComponent = () => {
                     </Inline>
                 </Stack>
 
+                <Stack space={16}>
+                    <Title1>
+                        In this case (space between + wrap), the short button should drop to a new line
+                    </Title1>
+                    <Inline space="between" wrap>
+                        <ButtonPrimary fake>{longText}</ButtonPrimary>
+                        <ButtonPrimary fake>{shortText}</ButtonPrimary>
+                    </Inline>
+                </Stack>
+
                 <Stack space={16}>
                     <Title1>space-between should be full width</Title1>
                     <Inline space="between">
diff --git a/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx b/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx
index 8b4b2564ad..e900dbf5f6 100644
--- a/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx
+++ b/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx
@@ -23,11 +23,11 @@ export default {
 };
 
 type Args = {
-    showLargeContent: boolean;
-    showInput: boolean;
+    largeContent: boolean;
+    input: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({showLargeContent, showInput}) => {
+export const Default: StoryComponent<Args> = ({largeContent, input}) => {
     const {isDesktopOrBigger} = useScreenSize();
     const [index, setIndex] = React.useState(0);
     const {dimensions} = useTheme();
@@ -71,8 +71,8 @@ export const Default: StoryComponent<Args> = ({showLargeContent, showInput}) =>
                         primaryButton={<ButtonPrimary onPress={() => {}}>Action</ButtonPrimary>}
                         extra={
                             <>
-                                {showInput ? <TextField name="text" label="Text" /> : undefined}
-                                {showLargeContent ? <Placeholder height={1000} /> : undefined}
+                                {input ? <TextField name="text" label="Text" /> : undefined}
+                                {largeContent ? <Placeholder height={1000} /> : undefined}
                             </>
                         }
                     />
@@ -83,8 +83,8 @@ export const Default: StoryComponent<Args> = ({showLargeContent, showInput}) =>
 };
 
 Default.args = {
-    showLargeContent: false,
-    showInput: false,
+    largeContent: false,
+    input: false,
 };
 
 Default.storyName = 'SuccessFeedbackScreen with Navigation Bar';
diff --git a/src/__screenshot_tests__/__image_snapshots__/inline-cases-screenshot-test-tsx-inline-cases-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/inline-cases-screenshot-test-tsx-inline-cases-1-snap.png
index fb739d4594..dc9c5b26e5 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/inline-cases-screenshot-test-tsx-inline-cases-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/inline-cases-screenshot-test-tsx-inline-cases-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-alternative-is-dark-mode-false-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-alternative-is-dark-mode-false-device-desktop-1-snap.png
new file mode 100644
index 0000000000..9b74a35e79
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-alternative-is-dark-mode-false-device-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-alternative-is-dark-mode-false-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-alternative-is-dark-mode-false-device-mobile-ios-1-snap.png
new file mode 100644
index 0000000000..0262d694c1
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-alternative-is-dark-mode-false-device-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-false-is-dark-mode-true-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-alternative-is-dark-mode-true-device-desktop-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-false-is-dark-mode-true-device-desktop-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-alternative-is-dark-mode-true-device-desktop-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-false-is-dark-mode-true-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-alternative-is-dark-mode-true-device-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-false-is-dark-mode-true-device-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-alternative-is-dark-mode-true-device-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-false-is-dark-mode-false-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-default-is-dark-mode-false-device-desktop-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-false-is-dark-mode-false-device-desktop-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-default-is-dark-mode-false-device-desktop-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-false-is-dark-mode-false-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-default-is-dark-mode-false-device-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-false-is-dark-mode-false-device-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-default-is-dark-mode-false-device-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-true-is-dark-mode-true-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-default-is-dark-mode-true-device-desktop-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-true-is-dark-mode-true-device-desktop-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-default-is-dark-mode-true-device-desktop-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-true-is-dark-mode-true-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-default-is-dark-mode-true-device-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-true-is-dark-mode-true-device-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-default-is-dark-mode-true-device-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-true-is-dark-mode-false-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-inverse-is-dark-mode-false-device-desktop-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-true-is-dark-mode-false-device-desktop-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-inverse-is-dark-mode-false-device-desktop-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-true-is-dark-mode-false-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-inverse-is-dark-mode-false-device-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-inverse-true-is-dark-mode-false-device-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-inverse-is-dark-mode-false-device-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-inverse-is-dark-mode-true-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-inverse-is-dark-mode-true-device-desktop-1-snap.png
new file mode 100644
index 0000000000..cb230cea14
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-inverse-is-dark-mode-true-device-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-inverse-is-dark-mode-true-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-inverse-is-dark-mode-true-device-mobile-ios-1-snap.png
new file mode 100644
index 0000000000..30fbf8b1d2
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-funnel-navigation-bar-variant-inverse-is-dark-mode-true-device-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-alternative-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-alternative-is-dark-mode-false-1-snap.png
new file mode 100644
index 0000000000..68982bbb3d
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-alternative-is-dark-mode-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-inverse-false-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-alternative-is-dark-mode-true-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-inverse-false-is-dark-mode-true-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-alternative-is-dark-mode-true-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-inverse-false-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-default-is-dark-mode-false-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-inverse-false-is-dark-mode-false-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-default-is-dark-mode-false-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-default-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-default-is-dark-mode-true-1-snap.png
new file mode 100644
index 0000000000..975f4b5e08
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-default-is-dark-mode-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-inverse-true-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-inverse-is-dark-mode-false-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-inverse-true-is-dark-mode-false-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-inverse-is-dark-mode-false-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-inverse-true-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-inverse-is-dark-mode-true-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-inverse-true-is-dark-mode-true-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-desktop-variant-inverse-is-dark-mode-true-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-alternative-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-alternative-is-dark-mode-false-1-snap.png
new file mode 100644
index 0000000000..ebf5e9a29e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-alternative-is-dark-mode-false-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-alternative-is-dark-mode-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-alternative-is-dark-mode-false-2-snap.png
new file mode 100644
index 0000000000..20657506a9
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-alternative-is-dark-mode-false-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-false-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-alternative-is-dark-mode-true-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-false-is-dark-mode-true-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-alternative-is-dark-mode-true-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-false-is-dark-mode-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-alternative-is-dark-mode-true-2-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-false-is-dark-mode-true-2-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-alternative-is-dark-mode-true-2-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-false-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-default-is-dark-mode-false-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-false-is-dark-mode-false-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-default-is-dark-mode-false-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-false-is-dark-mode-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-default-is-dark-mode-false-2-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-false-is-dark-mode-false-2-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-default-is-dark-mode-false-2-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-true-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-default-is-dark-mode-true-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-true-is-dark-mode-true-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-default-is-dark-mode-true-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-true-is-dark-mode-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-default-is-dark-mode-true-2-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-true-is-dark-mode-true-2-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-default-is-dark-mode-true-2-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-true-is-dark-mode-false-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-inverse-is-dark-mode-false-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-true-is-dark-mode-false-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-inverse-is-dark-mode-false-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-true-is-dark-mode-false-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-inverse-is-dark-mode-false-2-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-inverse-true-is-dark-mode-false-2-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-inverse-is-dark-mode-false-2-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-inverse-is-dark-mode-true-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-inverse-is-dark-mode-true-1-snap.png
new file mode 100644
index 0000000000..f59b3dfc24
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-inverse-is-dark-mode-true-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-inverse-is-dark-mode-true-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-inverse-is-dark-mode-true-2-snap.png
new file mode 100644
index 0000000000..66e1a1d3b6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-main-navigation-bar-mobile-variant-inverse-is-dark-mode-true-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-true-is-dark-mode-false-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-true-is-dark-mode-false-device-desktop-1-snap.png
deleted file mode 100644
index a2d26d13bd..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-true-is-dark-mode-false-device-desktop-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-true-is-dark-mode-false-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-true-is-dark-mode-false-device-mobile-ios-1-snap.png
deleted file mode 100644
index c93d98b0be..0000000000
Binary files a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-true-is-dark-mode-false-device-mobile-ios-1-snap.png and /dev/null differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-alternative-is-dark-mode-false-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-alternative-is-dark-mode-false-device-desktop-1-snap.png
new file mode 100644
index 0000000000..c50245be64
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-alternative-is-dark-mode-false-device-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-alternative-is-dark-mode-false-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-alternative-is-dark-mode-false-device-mobile-ios-1-snap.png
new file mode 100644
index 0000000000..7d58e1cabc
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-alternative-is-dark-mode-false-device-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-false-is-dark-mode-true-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-alternative-is-dark-mode-true-device-desktop-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-false-is-dark-mode-true-device-desktop-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-alternative-is-dark-mode-true-device-desktop-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-false-is-dark-mode-true-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-alternative-is-dark-mode-true-device-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-false-is-dark-mode-true-device-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-alternative-is-dark-mode-true-device-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-false-is-dark-mode-false-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-default-is-dark-mode-false-device-desktop-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-false-is-dark-mode-false-device-desktop-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-default-is-dark-mode-false-device-desktop-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-false-is-dark-mode-false-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-default-is-dark-mode-false-device-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-false-is-dark-mode-false-device-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-default-is-dark-mode-false-device-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-true-is-dark-mode-true-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-default-is-dark-mode-true-device-desktop-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-true-is-dark-mode-true-device-desktop-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-default-is-dark-mode-true-device-desktop-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-true-is-dark-mode-true-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-default-is-dark-mode-true-device-mobile-ios-1-snap.png
similarity index 100%
rename from src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-inverse-true-is-dark-mode-true-device-mobile-ios-1-snap.png
rename to src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-default-is-dark-mode-true-device-mobile-ios-1-snap.png
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-false-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-false-device-desktop-1-snap.png
new file mode 100644
index 0000000000..ff14ede477
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-false-device-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-false-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-false-device-mobile-ios-1-snap.png
new file mode 100644
index 0000000000..2735431b78
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-false-device-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-true-device-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-true-device-desktop-1-snap.png
new file mode 100644
index 0000000000..8255ec4cff
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-true-device-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-true-device-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-true-device-mobile-ios-1-snap.png
new file mode 100644
index 0000000000..f201259050
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/navigation-bar-screenshot-test-tsx-navigation-bar-variant-inverse-is-dark-mode-true-device-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/boxed-screenshot-test.tsx b/src/__screenshot_tests__/boxed-screenshot-test.tsx
index 9055609376..d87c76336a 100644
--- a/src/__screenshot_tests__/boxed-screenshot-test.tsx
+++ b/src/__screenshot_tests__/boxed-screenshot-test.tsx
@@ -1,24 +1,21 @@
 import {openStoryPage, screen} from '../test-utils';
 
 test.each`
-    inverseOutside | inverseInside
-    ${false}       | ${false}
-    ${false}       | ${true}
-    ${true}        | ${false}
-    ${true}        | ${true}
-`(
-    'Boxed inverseOutside($inverseOutside) inverseInside($inverseInside)',
-    async ({inverseOutside, inverseInside}) => {
-        await openStoryPage({
-            id: 'components-primitives-boxed--default',
-            device: 'MOBILE_IOS',
-            args: {
-                inverseInside,
-                inverseOutside,
-            },
-        });
+    overInverse | inverse
+    ${false}    | ${false}
+    ${false}    | ${true}
+    ${true}     | ${false}
+    ${true}     | ${true}
+`('Boxed inverseOutside($overInverse) inverseInside($inverse)', async ({overInverse, inverse}) => {
+    await openStoryPage({
+        id: 'components-primitives-boxed--default',
+        device: 'MOBILE_IOS',
+        args: {
+            overInverse,
+            inverse,
+        },
+    });
 
-        const image = await (await screen.findByTestId('boxed')).screenshot();
-        expect(image).toMatchImageSnapshot();
-    }
-);
+    const image = await (await screen.findByTestId('boxed')).screenshot();
+    expect(image).toMatchImageSnapshot();
+});
diff --git a/src/__screenshot_tests__/button-group-screenshot-test.tsx b/src/__screenshot_tests__/button-group-screenshot-test.tsx
index 3f4722397d..4e03124b56 100644
--- a/src/__screenshot_tests__/button-group-screenshot-test.tsx
+++ b/src/__screenshot_tests__/button-group-screenshot-test.tsx
@@ -18,7 +18,7 @@ test.each(DEVICES)('ButtonGroup - Long text (%s)', async (device) => {
     const page = await openStoryPage({
         id: 'components-buttons-buttongroup--default',
         device,
-        args: {buttonPrimaryText: 'A very long action text in this button', showButtonLink: false},
+        args: {buttonPrimaryText: 'A very long action text in this button', buttonLink: false},
     });
 
     const image = await page.screenshot({fullPage: true});
diff --git a/src/__screenshot_tests__/button-screenshot-test.tsx b/src/__screenshot_tests__/button-screenshot-test.tsx
index abb6c7560e..d423b5c251 100644
--- a/src/__screenshot_tests__/button-screenshot-test.tsx
+++ b/src/__screenshot_tests__/button-screenshot-test.tsx
@@ -98,31 +98,28 @@ const BUTTON_LINK_CHEVRON_OPTIONS = ['default', 'true', 'false'];
 const getLinkWithChevronCases = () => {
     const cases = [];
     for (const action of BUTTON_LINK_ACTIONS) {
-        for (const withChevron of BUTTON_LINK_CHEVRON_OPTIONS) {
-            cases.push([action, withChevron]);
+        for (const chevron of BUTTON_LINK_CHEVRON_OPTIONS) {
+            cases.push([action, chevron]);
         }
     }
     return cases;
 };
 
-test.each(getLinkWithChevronCases())(
-    'Buttons - Link button - %s (chevron = %s)',
-    async (action, withChevron) => {
-        await openStoryPage({
-            id: 'components-buttons--link-button',
-            device: 'MOBILE_IOS',
-            args: {
-                action,
-                withChevron,
-            },
-        });
-
-        const story = await screen.findByTestId('content');
-
-        const image = await story.screenshot();
-        expect(image).toMatchImageSnapshot();
-    }
-);
+test.each(getLinkWithChevronCases())('Buttons - Link button - %s (chevron = %s)', async (action, chevron) => {
+    await openStoryPage({
+        id: 'components-buttons--link-button',
+        device: 'MOBILE_IOS',
+        args: {
+            action,
+            chevron,
+        },
+    });
+
+    const story = await screen.findByTestId('content');
+
+    const image = await story.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
 
 test('Buttons - Link button - with chevron in Vivo', async () => {
     await openStoryPage({
@@ -130,7 +127,7 @@ test('Buttons - Link button - with chevron in Vivo', async () => {
         device: 'MOBILE_IOS',
         skin: 'Vivo-new',
         args: {
-            withChevron: true,
+            chevron: true,
         },
     });
 
@@ -145,7 +142,7 @@ test('Buttons - Link button with chevron and big font size', async () => {
         id: 'components-buttons--link-button',
         device: 'MOBILE_IOS',
         args: {
-            withChevron: true,
+            chevron: true,
         },
     });
 
@@ -163,7 +160,7 @@ test('Buttons - Link button with chevron and big font size in Vivo', async () =>
         device: 'MOBILE_IOS',
         skin: 'Vivo-new',
         args: {
-            withChevron: true,
+            chevron: true,
         },
     });
 
diff --git a/src/__screenshot_tests__/callout-screenshot-test.tsx b/src/__screenshot_tests__/callout-screenshot-test.tsx
index 24fed78eff..7c6c2bc7c4 100644
--- a/src/__screenshot_tests__/callout-screenshot-test.tsx
+++ b/src/__screenshot_tests__/callout-screenshot-test.tsx
@@ -1,18 +1,18 @@
 import {openStoryPage, screen} from '../test-utils';
 
 test.each`
-    actions              | title           | inverse  | isClosable | withIcon | case
-    ${'button and link'} | ${'Some title'} | ${false} | ${true}    | ${true}  | ${''}
-    ${'button and link'} | ${'Some title'} | ${true}  | ${true}    | ${true}  | ${'over inverse'}
-    ${'button and link'} | ${'Some title'} | ${false} | ${false}   | ${true}  | ${'not closable'}
-    ${'link'}            | ${'Some title'} | ${false} | ${true}    | ${true}  | ${'with button link'}
-    ${'none'}            | ${'Some title'} | ${false} | ${true}    | ${true}  | ${'without actions'}
-    ${'none'}            | ${''}           | ${false} | ${false}   | ${false} | ${'only description'}
-    ${'none'}            | ${''}           | ${false} | ${true}    | ${false} | ${'only description and closable'}
-`('Callout $case', async ({actions, title, inverse, isClosable, withIcon}) => {
+    actions              | title           | inverse  | closable | asset    | case
+    ${'button and link'} | ${'Some title'} | ${false} | ${true}  | ${true}  | ${''}
+    ${'button and link'} | ${'Some title'} | ${true}  | ${true}  | ${true}  | ${'over inverse'}
+    ${'button and link'} | ${'Some title'} | ${false} | ${false} | ${true}  | ${'not closable'}
+    ${'link'}            | ${'Some title'} | ${false} | ${true}  | ${true}  | ${'with button link'}
+    ${'none'}            | ${'Some title'} | ${false} | ${true}  | ${true}  | ${'without actions'}
+    ${'none'}            | ${''}           | ${false} | ${false} | ${false} | ${'only description'}
+    ${'none'}            | ${''}           | ${false} | ${true}  | ${false} | ${'only description and closable'}
+`('Callout $case', async ({actions, title, inverse, closable, asset}) => {
     await openStoryPage({
         id: 'components-callout--default',
-        args: {actions, title, inverse, isClosable, withIcon},
+        args: {actions, title, inverse, closable, asset},
     });
 
     const callout = await screen.findByRole('region');
diff --git a/src/__screenshot_tests__/carousel-screenshot-test.tsx b/src/__screenshot_tests__/carousel-screenshot-test.tsx
index bc0e705583..d420799eeb 100644
--- a/src/__screenshot_tests__/carousel-screenshot-test.tsx
+++ b/src/__screenshot_tests__/carousel-screenshot-test.tsx
@@ -22,7 +22,7 @@ test('Carousel mobile without bullets', async () => {
     const page = await openStoryPage({
         id: 'components-carousels-carousel--default',
         device: 'MOBILE_IOS',
-        args: {withBullets: false},
+        args: {bullets: false},
     });
 
     expect(await page.screenshot()).toMatchImageSnapshot();
diff --git a/src/__screenshot_tests__/chip-screenshot-test.tsx b/src/__screenshot_tests__/chip-screenshot-test.tsx
index 10b73d5e82..30c548c1fe 100644
--- a/src/__screenshot_tests__/chip-screenshot-test.tsx
+++ b/src/__screenshot_tests__/chip-screenshot-test.tsx
@@ -15,7 +15,7 @@ test.each(CHIP_OPTIONS)('Chip - %s', async (option) => {
         device: 'DESKTOP',
         args: {
             badge: option.includes('badge') ? '2' : 'undefined',
-            withIcon: option.includes('icon'),
+            icon: option.includes('icon'),
             closable: option.includes('closable'),
         },
     });
@@ -39,7 +39,7 @@ test.each`
     const page = await openStoryPage({
         id: `components-chip--${selection}-selection`,
         device: 'DESKTOP',
-        args: {inverse, withIcon: true, badge},
+        args: {inverse, icon: true, badge},
     });
 
     const story = await screen.findByTestId(`chip-${selection}-selection`);
diff --git a/src/__screenshot_tests__/cover-hero-screenshot-test.tsx b/src/__screenshot_tests__/cover-hero-screenshot-test.tsx
index 504598c014..0754b17f98 100644
--- a/src/__screenshot_tests__/cover-hero-screenshot-test.tsx
+++ b/src/__screenshot_tests__/cover-hero-screenshot-test.tsx
@@ -40,21 +40,21 @@ const cases = [
         'desktop with extra and sideExtra',
         {
             device: 'DESKTOP',
-            args: {withExtra: true, withSideExtra: true},
+            args: {extra: true, sideExtra: true},
         },
     ],
     [
         'mobile with extra and sideExtra',
         {
             device: 'MOBILE_IOS',
-            args: {withExtra: true, withSideExtra: true},
+            args: {extra: true, sideExtra: true},
         },
     ],
     [
         'tablet with extra and sideExtra',
         {
             device: 'TABLET',
-            args: {withExtra: true, withSideExtra: true},
+            args: {extra: true, sideExtra: true},
         },
     ],
     [
@@ -77,8 +77,8 @@ const cases = [
             device: 'DESKTOP',
             args: {
                 centered: true,
-                withExtra: true,
-                withSideExtra: true,
+                extra: true,
+                sideExtra: true,
                 actions: 'button secondaryButton and link',
             },
         },
@@ -89,8 +89,8 @@ const cases = [
             device: 'MOBILE_IOS',
             args: {
                 centered: true,
-                withExtra: true,
-                withSideExtra: true,
+                extra: true,
+                sideExtra: true,
                 actions: 'button secondaryButton and link',
             },
         },
@@ -140,7 +140,7 @@ const cases = [
             args: {
                 title: 'Long title '.repeat(10),
                 description: 'This is a long description with a long text to see how this works'.repeat(10),
-                withSideExtra: true,
+                sideExtra: true,
             },
         },
     ],
diff --git a/src/__screenshot_tests__/data-card-screenshot-test.tsx b/src/__screenshot_tests__/data-card-screenshot-test.tsx
index 3bfac17aa2..b2bbd52cdf 100644
--- a/src/__screenshot_tests__/data-card-screenshot-test.tsx
+++ b/src/__screenshot_tests__/data-card-screenshot-test.tsx
@@ -47,7 +47,7 @@ test('DataCard with extra content', async () => {
     const page = await openStoryPage({
         id: 'components-cards-datacard--default',
         device: 'MOBILE_IOS',
-        args: {withExtra: true},
+        args: {extra: true},
     });
 
     const image = await page.screenshot({fullPage: true});
@@ -71,7 +71,7 @@ test('DataCard with top actions', async () => {
     const page = await openStoryPage({
         id: 'components-cards-datacard--default',
         device: 'MOBILE_IOS',
-        args: {withTopAction: true},
+        args: {topAction: true},
     });
 
     const image = await page.screenshot({fullPage: true});
@@ -84,7 +84,7 @@ test('DataCard without icon, with top actions and too long title', async () => {
         id: 'components-cards-datacard--default',
         device: 'MOBILE_IOS',
         args: {
-            withTopAction: true,
+            topAction: true,
             asset: 'none',
             title: 'Too long title too long title too long titltoo long title too long title',
         },
diff --git a/src/__screenshot_tests__/dialog-screenshot-test.tsx b/src/__screenshot_tests__/dialog-screenshot-test.tsx
index 3ab5e8da45..8708159136 100644
--- a/src/__screenshot_tests__/dialog-screenshot-test.tsx
+++ b/src/__screenshot_tests__/dialog-screenshot-test.tsx
@@ -52,7 +52,7 @@ test('Dialog optional elements are not displayed if not provided', async () => {
             onAccept: false,
             onCancel: false,
             link: false,
-            icon: false,
+            asset: false,
             extra: false,
         },
     });
diff --git a/src/__screenshot_tests__/display-data-card-screenshot-test.tsx b/src/__screenshot_tests__/display-data-card-screenshot-test.tsx
index f38a4a3661..1e04552d69 100644
--- a/src/__screenshot_tests__/display-data-card-screenshot-test.tsx
+++ b/src/__screenshot_tests__/display-data-card-screenshot-test.tsx
@@ -17,7 +17,7 @@ test('DisplayDataCard', async () => {
 test('DisplayDataCard with top actions', async () => {
     await openStoryPage({
         id: 'components-cards-displaydatacard--default',
-        args: {withTopAction: true, closable: true},
+        args: {topAction: true, closable: true},
     });
 
     const displayDataCard = await screen.findByTestId('display-data-card');
@@ -30,7 +30,7 @@ test('DisplayDataCard with top actions', async () => {
 test('DisplayDataCard with top actions without asset', async () => {
     await openStoryPage({
         id: 'components-cards-displaydatacard--default',
-        args: {withTopAction: true, closable: true, asset: 'none'},
+        args: {topAction: true, closable: true, asset: 'none'},
     });
 
     const displayDataCard = await screen.findByTestId('display-data-card');
@@ -43,7 +43,7 @@ test('DisplayDataCard with top actions without asset', async () => {
 test('DisplayDataCard with top actions inverse', async () => {
     await openStoryPage({
         id: 'components-cards-displaydatacard--default',
-        args: {withTopAction: true, closable: true, isInverse: true},
+        args: {topAction: true, closable: true, isInverse: true},
     });
 
     const displayDataCard = await screen.findByTestId('display-data-card');
diff --git a/src/__screenshot_tests__/display-media-card-screenshot-test.tsx b/src/__screenshot_tests__/display-media-card-screenshot-test.tsx
index 418cda1d2f..bd2f7668b6 100644
--- a/src/__screenshot_tests__/display-media-card-screenshot-test.tsx
+++ b/src/__screenshot_tests__/display-media-card-screenshot-test.tsx
@@ -15,7 +15,7 @@ test('DisplayMediaCard', async () => {
 test('DisplayMediaCard with top actions', async () => {
     await openStoryPage({
         id: 'components-cards-displaymediacard--default',
-        args: {withTopAction: true, closable: true},
+        args: {topAction: true, closable: true},
     });
 
     const displayMediaCard = await screen.findByTestId('display-media-card');
@@ -64,7 +64,7 @@ test('DisplayMediaCard with asset', async () => {
 test('DisplayMediaCard with extra content', async () => {
     await openStoryPage({
         id: 'components-cards-displaymediacard--default',
-        args: {withExtra: true},
+        args: {extra: true},
     });
 
     const displayMediaCard = await screen.findByTestId('display-media-card');
@@ -83,7 +83,7 @@ test.each`
 `('DisplayMediaCard with $background, empty source and inverse=$inverse', async ({background, inverse}) => {
     await openStoryPage({
         id: 'components-cards-displaymediacard--default',
-        args: {background, isEmptySource: true, inverse},
+        args: {background, emptySource: true, inverse},
     });
 
     const displayMediaCard = await screen.findByTestId('display-media-card');
diff --git a/src/__screenshot_tests__/feedback-screenshot-test.tsx b/src/__screenshot_tests__/feedback-screenshot-test.tsx
index b0c426353b..3b5f17643d 100644
--- a/src/__screenshot_tests__/feedback-screenshot-test.tsx
+++ b/src/__screenshot_tests__/feedback-screenshot-test.tsx
@@ -81,7 +81,7 @@ test('Info feedback screen with custom icon', async () => {
         id: 'patterns-feedback-infofeedbackscreen--info',
         skin: MOVISTAR_SKIN,
         device: 'MOBILE_IOS',
-        args: {icon: 'custom'},
+        args: {asset: 'custom'},
     });
 
     const image = await page.screenshot();
diff --git a/src/__screenshot_tests__/icon-button-screenshot-test.tsx b/src/__screenshot_tests__/icon-button-screenshot-test.tsx
index bd9fe87a83..a6f1ec32f9 100644
--- a/src/__screenshot_tests__/icon-button-screenshot-test.tsx
+++ b/src/__screenshot_tests__/icon-button-screenshot-test.tsx
@@ -49,7 +49,7 @@ test.each(MOBILE_DEVICES)('IconButton - spinner in %s', async (device) => {
     await openStoryPage({
         id: 'components-buttons--icon-button-story',
         device,
-        args: {backgroundType: 'solid', showSpinner: true},
+        args: {backgroundType: 'solid', spinner: true},
     });
 
     const story = await screen.findByTestId('icon-button');
diff --git a/src/__screenshot_tests__/image-screenshot-test.tsx b/src/__screenshot_tests__/image-screenshot-test.tsx
index 86a9befcbd..5bea8af6f3 100644
--- a/src/__screenshot_tests__/image-screenshot-test.tsx
+++ b/src/__screenshot_tests__/image-screenshot-test.tsx
@@ -49,7 +49,7 @@ test.each(ASPECT_RATIO.slice(0, 4))('Image - error fallback with aspect ratio %s
         args: {
             type: 'width and aspect ratio',
             aspectRatio: aspectRatio.replace(':', ' '),
-            isEmptySource: true,
+            emptySource: true,
         },
     });
 
diff --git a/src/__screenshot_tests__/list-screenshot-test.tsx b/src/__screenshot_tests__/list-screenshot-test.tsx
index f67f7ea475..031618cf6a 100644
--- a/src/__screenshot_tests__/list-screenshot-test.tsx
+++ b/src/__screenshot_tests__/list-screenshot-test.tsx
@@ -25,61 +25,55 @@ const getCases = () => {
     const cases = [];
     for (const device of devices) {
         for (const control of controls) {
-            const extraContent = false;
-            const withBadge = true;
-            cases.push([device, control, extraContent, withBadge]);
+            const extra = false;
+            const badge = true;
+            cases.push([device, control, extra, badge]);
         }
-        for (const extraContent of [true, false]) {
-            const withBadge = false;
-            cases.push([device, 'none', extraContent, withBadge]);
+        for (const extra of [true, false]) {
+            const badge = false;
+            cases.push([device, 'none', extra, badge]);
         }
     }
     return cases;
 };
 
-test.each(getCases())(
-    'Row list - %s %s extra %s badge %s',
-    async (device, control, extraContent, withBadge) => {
-        await openStoryPage({
-            id: 'components-lists--row-list-story',
-            device: device as Device,
-            args: {
-                control,
-                extraContent,
-                withBadge,
-                headline: 'Headline',
-                detail: 'Detail',
-                subtitle: 'Subtitle',
-            },
-        });
-
-        const list = await screen.findByTestId('list');
-        const image = await list.screenshot();
-        expect(image).toMatchImageSnapshot();
-    }
-);
-
-test.each(getCases())(
-    'Boxed row list - %s %s extra %s badge %s',
-    async (device, control, extraContent, withBadge) => {
-        await openStoryPage({
-            id: 'components-lists--boxed-row-list-story',
-            device: device as Device,
-            args: {
-                control,
-                extraContent,
-                withBadge,
-                headline: 'Headline',
-                detail: 'Detail',
-                subtitle: 'Subtitle',
-            },
-        });
-
-        const list = await screen.findByTestId('list');
-        const image = await list.screenshot();
-        expect(image).toMatchImageSnapshot();
-    }
-);
+test.each(getCases())('Row list - %s %s extra %s badge %s', async (device, control, extra, badge) => {
+    await openStoryPage({
+        id: 'components-lists--row-list-story',
+        device: device as Device,
+        args: {
+            control,
+            extra,
+            badge,
+            headline: 'Headline',
+            detail: 'Detail',
+            subtitle: 'Subtitle',
+        },
+    });
+
+    const list = await screen.findByTestId('list');
+    const image = await list.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
+test.each(getCases())('Boxed row list - %s %s extra %s badge %s', async (device, control, extra, badge) => {
+    await openStoryPage({
+        id: 'components-lists--boxed-row-list-story',
+        device: device as Device,
+        args: {
+            control,
+            extra,
+            badge,
+            headline: 'Headline',
+            detail: 'Detail',
+            subtitle: 'Subtitle',
+        },
+    });
+
+    const list = await screen.findByTestId('list');
+    const image = await list.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
 
 test.each(controls)('Row list disabled - %s', async (control) => {
     await openStoryPage({
@@ -88,7 +82,7 @@ test.each(controls)('Row list disabled - %s', async (control) => {
         args: {
             control,
             headline: 'Headline',
-            withBadge: true,
+            badge: true,
             disabled: true,
             detail: 'Detail',
             subtitle: 'Subtitle',
@@ -107,7 +101,7 @@ test.each(controls)('Boxed row list disabled - %s', async (control) => {
         args: {
             control,
             headline: 'Headline',
-            withBadge: true,
+            badge: true,
             disabled: true,
             detail: 'Detail',
             subtitle: 'Subtitle',
@@ -221,7 +215,7 @@ test('BoxedRows inverse', async () => {
         id: 'components-lists--boxed-row-list-story',
         device: 'MOBILE_IOS',
         args: {
-            isInverse: true,
+            inverse: true,
         },
     });
 
@@ -235,7 +229,7 @@ test('BoxedRows inverse over inverse', async () => {
         id: 'components-lists--boxed-row-list-story',
         device: 'MOBILE_IOS',
         args: {
-            isInverse: true,
+            inverse: true,
             overInverse: true,
         },
     });
diff --git a/src/__screenshot_tests__/loading-screen-screenshot-test.tsx b/src/__screenshot_tests__/loading-screen-screenshot-test.tsx
index ec3de0b3c2..14f59f0482 100644
--- a/src/__screenshot_tests__/loading-screen-screenshot-test.tsx
+++ b/src/__screenshot_tests__/loading-screen-screenshot-test.tsx
@@ -14,7 +14,7 @@ test.each(['MOBILE_IOS', 'DESKTOP'] as const)('LoadingScreen inverse in %s', asy
     const page = await openStoryPage({
         id: 'patterns-loading--loading-screen-story',
         device,
-        args: {isInverse: true},
+        args: {inverse: true},
     });
 
     const image = await page.screenshot();
diff --git a/src/__screenshot_tests__/media-card-screenshot-test.tsx b/src/__screenshot_tests__/media-card-screenshot-test.tsx
index 8d6eb564ff..127c18127b 100644
--- a/src/__screenshot_tests__/media-card-screenshot-test.tsx
+++ b/src/__screenshot_tests__/media-card-screenshot-test.tsx
@@ -47,7 +47,7 @@ test('MediaCard with body ', async () => {
         id: 'components-cards-mediacard--default',
         device: 'MOBILE_IOS',
         args: {
-            withExtra: true,
+            extra: true,
             actions: 'button and link',
         },
     });
@@ -62,7 +62,7 @@ test('MediaCard with body closeable', async () => {
         id: 'components-cards-mediacard--default',
         device: 'MOBILE_IOS',
         args: {
-            withExtra: true,
+            extra: true,
             actions: 'button and link',
             closable: true,
         },
@@ -78,9 +78,9 @@ test('MediaCard with top actions', async () => {
         id: 'components-cards-mediacard--default',
         device: 'MOBILE_IOS',
         args: {
-            withExtra: true,
+            extra: true,
             actions: 'button and link',
-            withTopAction: true,
+            topAction: true,
         },
     });
 
diff --git a/src/__screenshot_tests__/naked-card-screenshot-test.tsx b/src/__screenshot_tests__/naked-card-screenshot-test.tsx
index f9cd121e9b..188491b084 100644
--- a/src/__screenshot_tests__/naked-card-screenshot-test.tsx
+++ b/src/__screenshot_tests__/naked-card-screenshot-test.tsx
@@ -45,7 +45,7 @@ test('NakedCard with extra ', async () => {
         id: 'components-cards-nakedcard--default',
         device: 'MOBILE_IOS',
         args: {
-            withExtra: true,
+            extra: true,
             actions: 'button and link',
         },
     });
@@ -93,7 +93,7 @@ test('NakedCard with top actions', async () => {
         device: 'MOBILE_IOS',
         args: {
             actions: 'button and link',
-            withTopAction: true,
+            topAction: true,
         },
     });
 
@@ -149,7 +149,7 @@ test('SmallNakedCard with extra ', async () => {
         id: 'components-cards-nakedcard--small',
         device: 'MOBILE_IOS',
         args: {
-            withExtra: true,
+            extra: true,
             actions: 'button and link',
         },
     });
diff --git a/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx b/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx
index b40d501a65..a79bc5cd75 100644
--- a/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx
+++ b/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx
@@ -3,16 +3,18 @@ import {openStoryPage, screen} from '../test-utils';
 const DEVICES = ['MOBILE_IOS', 'DESKTOP'] as const;
 
 test.each`
-    inverse  | isDarkMode
-    ${false} | ${false}
-    ${false} | ${true}
-    ${true}  | ${false}
-    ${true}  | ${true}
-`('MainNavigationBar desktop. inverse={$inverse} isDarkMode={$isDarkMode}', async ({inverse, isDarkMode}) => {
+    variant          | isDarkMode
+    ${'default'}     | ${false}
+    ${'default'}     | ${true}
+    ${'inverse'}     | ${false}
+    ${'inverse'}     | ${true}
+    ${'alternative'} | ${false}
+    ${'alternative'} | ${true}
+`('MainNavigationBar desktop. variant={$variant} isDarkMode={$isDarkMode}', async ({variant, isDarkMode}) => {
     const page = await openStoryPage({
         id: 'components-navigation-bars-mainnavigationbar--default',
         device: 'DESKTOP',
-        args: {inverse},
+        args: {variant},
         isDarkMode,
     });
 
@@ -22,16 +24,18 @@ test.each`
 });
 
 test.each`
-    inverse  | isDarkMode
-    ${false} | ${false}
-    ${false} | ${true}
-    ${true}  | ${false}
-    ${true}  | ${true}
-`('MainNavigationBar mobile. inverse={$inverse} isDarkMode={$isDarkMode}', async ({inverse, isDarkMode}) => {
+    variant          | isDarkMode
+    ${'default'}     | ${false}
+    ${'default'}     | ${true}
+    ${'inverse'}     | ${false}
+    ${'inverse'}     | ${true}
+    ${'alternative'} | ${false}
+    ${'alternative'} | ${true}
+`('MainNavigationBar mobile. variant={$variant} isDarkMode={$isDarkMode}', async ({variant, isDarkMode}) => {
     const page = await openStoryPage({
         id: 'components-navigation-bars-mainnavigationbar--default',
         device: 'MOBILE_IOS',
-        args: {inverse},
+        args: {variant},
         isDarkMode,
     });
 
@@ -48,7 +52,7 @@ test('MainNavigationBar mobile with burger menu extra', async () => {
     const page = await openStoryPage({
         id: 'components-navigation-bars-mainnavigationbar--default',
         device: 'MOBILE_IOS',
-        args: {withBurgerMenuExtra: true},
+        args: {burgerMenuExtra: true},
     });
 
     await page.click(await screen.findByRole('button', {name: 'Abrir menú de navegación'}));
@@ -70,22 +74,26 @@ test('MainNavigationBar large', async () => {
 });
 
 test.each`
-    inverse  | isDarkMode | device
-    ${false} | ${false}   | ${'DESKTOP'}
-    ${false} | ${true}    | ${'DESKTOP'}
-    ${true}  | ${false}   | ${'DESKTOP'}
-    ${true}  | ${true}    | ${'DESKTOP'}
-    ${false} | ${false}   | ${'MOBILE_IOS'}
-    ${false} | ${true}    | ${'MOBILE_IOS'}
-    ${true}  | ${false}   | ${'MOBILE_IOS'}
-    ${true}  | ${true}    | ${'MOBILE_IOS'}
+    variant          | isDarkMode | device
+    ${'default'}     | ${false}   | ${'DESKTOP'}
+    ${'default'}     | ${true}    | ${'DESKTOP'}
+    ${'inverse'}     | ${false}   | ${'DESKTOP'}
+    ${'inverse'}     | ${true}    | ${'DESKTOP'}
+    ${'alternative'} | ${false}   | ${'DESKTOP'}
+    ${'alternative'} | ${true}    | ${'DESKTOP'}
+    ${'default'}     | ${false}   | ${'MOBILE_IOS'}
+    ${'default'}     | ${true}    | ${'MOBILE_IOS'}
+    ${'inverse'}     | ${false}   | ${'MOBILE_IOS'}
+    ${'inverse'}     | ${true}    | ${'MOBILE_IOS'}
+    ${'alternative'} | ${false}   | ${'MOBILE_IOS'}
+    ${'alternative'} | ${true}    | ${'MOBILE_IOS'}
 `(
-    'NavigationBar. inverse={$inverse} isDarkMode={$isDarkMode} device={$device}',
-    async ({inverse, isDarkMode, device}) => {
+    'NavigationBar. variant={$variant} isDarkMode={$isDarkMode} device={$device}',
+    async ({variant, isDarkMode, device}) => {
         const page = await openStoryPage({
             id: 'components-navigation-bars-navigationbar--default',
             device,
-            args: {inverse},
+            args: {variant},
             isDarkMode,
         });
 
@@ -96,22 +104,26 @@ test.each`
 );
 
 test.each`
-    inverse  | isDarkMode | device
-    ${false} | ${false}   | ${'DESKTOP'}
-    ${false} | ${true}    | ${'DESKTOP'}
-    ${true}  | ${false}   | ${'DESKTOP'}
-    ${true}  | ${true}    | ${'DESKTOP'}
-    ${false} | ${false}   | ${'MOBILE_IOS'}
-    ${false} | ${true}    | ${'MOBILE_IOS'}
-    ${true}  | ${false}   | ${'MOBILE_IOS'}
-    ${true}  | ${true}    | ${'MOBILE_IOS'}
+    variant          | isDarkMode | device
+    ${'default'}     | ${false}   | ${'DESKTOP'}
+    ${'default'}     | ${true}    | ${'DESKTOP'}
+    ${'inverse'}     | ${false}   | ${'DESKTOP'}
+    ${'inverse'}     | ${true}    | ${'DESKTOP'}
+    ${'alternative'} | ${false}   | ${'DESKTOP'}
+    ${'alternative'} | ${true}    | ${'DESKTOP'}
+    ${'default'}     | ${false}   | ${'MOBILE_IOS'}
+    ${'default'}     | ${true}    | ${'MOBILE_IOS'}
+    ${'inverse'}     | ${false}   | ${'MOBILE_IOS'}
+    ${'inverse'}     | ${true}    | ${'MOBILE_IOS'}
+    ${'alternative'} | ${false}   | ${'MOBILE_IOS'}
+    ${'alternative'} | ${true}    | ${'MOBILE_IOS'}
 `(
-    'FunnelNavigationBar. inverse={$inverse} isDarkMode={$isDarkMode} device={$device}',
-    async ({inverse, isDarkMode, device}) => {
+    'FunnelNavigationBar. variant={$variant} isDarkMode={$isDarkMode} device={$device}',
+    async ({variant, isDarkMode, device}) => {
         const page = await openStoryPage({
             id: 'components-navigation-bars-funnelnavigationbar--default',
             device,
-            args: {inverse},
+            args: {variant},
             isDarkMode,
         });
 
@@ -133,7 +145,7 @@ test.each`
     const page = await openStoryPage({
         id: `components-navigation-bars-${type.toLowerCase()}--default`,
         device,
-        args: {withBorder: false},
+        args: {border: false},
     });
 
     const image = await page.screenshot();
@@ -145,7 +157,7 @@ test.each(DEVICES)('MainNavigationBar without sections (%s)', async (device) =>
     const page = await openStoryPage({
         id: 'components-navigation-bars-mainnavigationbar--default',
         device,
-        args: {withSections: false},
+        args: {sections: false},
     });
 
     const image = await page.screenshot();
diff --git a/src/__screenshot_tests__/poster-card-screenshot-test.tsx b/src/__screenshot_tests__/poster-card-screenshot-test.tsx
index 093633ef36..6eaf28d5d1 100644
--- a/src/__screenshot_tests__/poster-card-screenshot-test.tsx
+++ b/src/__screenshot_tests__/poster-card-screenshot-test.tsx
@@ -60,7 +60,7 @@ test('PosterCard with top actions', async () => {
     await openStoryPage({
         id: 'components-cards-postercard--default',
         device: 'MOBILE_IOS',
-        args: {withTopAction: true},
+        args: {topAction: true},
     });
 
     const dataCard = await screen.findByTestId('poster-card');
@@ -75,7 +75,7 @@ test('PosterCard without icon, with top actions and too long title', async () =>
         id: 'components-cards-postercard--default',
         device: 'MOBILE_IOS',
         args: {
-            withTopAction: true,
+            topAction: true,
             asset: 'none',
             title: 'Too long title too long title too long titltoo long title too long title',
         },
@@ -157,7 +157,7 @@ test('PosterCard with custom background color inverse', async () => {
 test('PosterCard with extra content', async () => {
     await openStoryPage({
         id: 'components-cards-postercard--default',
-        args: {withExtra: true},
+        args: {extra: true},
     });
 
     const posterCard = await screen.findByTestId('poster-card');
@@ -176,7 +176,7 @@ test.each`
 `('PosterCard with $background, empty source and inverse=$inverse', async ({background, inverse}) => {
     await openStoryPage({
         id: 'components-cards-postercard--default',
-        args: {background, isEmptySource: true, inverse},
+        args: {background, emptySource: true, inverse},
     });
 
     const posterCard = await screen.findByTestId('poster-card');
diff --git a/src/__screenshot_tests__/snackbar-screenshot-test.tsx b/src/__screenshot_tests__/snackbar-screenshot-test.tsx
index 3a75e27b3c..950c7f8447 100644
--- a/src/__screenshot_tests__/snackbar-screenshot-test.tsx
+++ b/src/__screenshot_tests__/snackbar-screenshot-test.tsx
@@ -76,7 +76,7 @@ test('with dismiss button', async () => {
         id: 'components-snackbar--default',
         device: 'MOBILE_ANDROID',
         args: {
-            withDismiss: true,
+            dismiss: true,
         },
     });
 
@@ -92,7 +92,7 @@ test('with dismiss button and long message', async () => {
         device: 'MOBILE_ANDROID',
         args: {
             message: 'The quick brown fox jumps over the lazy dog - Pack my box with five dozen liquor jugs',
-            withDismiss: true,
+            dismiss: true,
         },
     });
 
@@ -108,7 +108,7 @@ test('with dismiss button and long action', async () => {
         device: 'MOBILE_ANDROID',
         args: {
             buttonText: 'This action is long enough',
-            withDismiss: true,
+            dismiss: true,
         },
     });
 
@@ -125,7 +125,7 @@ test('with dismiss button and long action and message', async () => {
         args: {
             message: 'The quick brown fox jumps over the lazy dog - Pack my box with five dozen liquor jugs',
             buttonText: 'This action is long enough',
-            withDismiss: true,
+            dismiss: true,
         },
     });
 
diff --git a/src/__screenshot_tests__/snap-card-screenshot-test.tsx b/src/__screenshot_tests__/snap-card-screenshot-test.tsx
index 00b870760b..d98236d001 100644
--- a/src/__screenshot_tests__/snap-card-screenshot-test.tsx
+++ b/src/__screenshot_tests__/snap-card-screenshot-test.tsx
@@ -27,7 +27,7 @@ test('SnapCard', async () => {
 
     const snapCardInverse = await renderSnapCard({
         device: 'MOBILE_IOS',
-        args: {isInverse: true, asset: 'icon in circle'},
+        args: {inverse: true, asset: 'icon in circle'},
     });
     expect(await snapCardInverse.screenshot()).toMatchImageSnapshot({
         customSnapshotIdentifier: 'snapcard-screenshot-test-inverse',
@@ -35,7 +35,7 @@ test('SnapCard', async () => {
 
     const snapCardWithExtra = await renderSnapCard({
         device: 'MOBILE_IOS',
-        args: {withExtra: true, asset: 'icon in circle'},
+        args: {extra: true, asset: 'icon in circle'},
     });
     expect(await snapCardWithExtra.screenshot()).toMatchImageSnapshot({
         customSnapshotIdentifier: 'snapcard-screenshot-test-with-extra',
diff --git a/src/__screenshot_tests__/table-screenshot-test.tsx b/src/__screenshot_tests__/table-screenshot-test.tsx
index d67e957644..cd19765c15 100644
--- a/src/__screenshot_tests__/table-screenshot-test.tsx
+++ b/src/__screenshot_tests__/table-screenshot-test.tsx
@@ -85,7 +85,7 @@ const cases = [
         'desktop with actions',
         {
             device: 'DESKTOP',
-            args: {numItems: 6, withActions: true},
+            args: {numItems: 6, actions: true},
             fullPageScreenshot: false,
         },
     ],
@@ -117,7 +117,7 @@ const cases = [
         'desktop collapse-rows with actions',
         {
             device: 'DESKTOP',
-            args: {numItems: 6, responsive: 'collapse-rows', withActions: true},
+            args: {numItems: 6, responsive: 'collapse-rows', actions: true},
             fullPageScreenshot: false,
         },
     ],
@@ -133,7 +133,7 @@ const cases = [
         'desktop boxed with actions',
         {
             device: 'DESKTOP',
-            args: {numItems: 6, boxed: true, withActions: true},
+            args: {numItems: 6, boxed: true, actions: true},
             fullPageScreenshot: false,
         },
     ],
@@ -141,7 +141,7 @@ const cases = [
         'desktop collapse-rows boxed with actions',
         {
             device: 'DESKTOP',
-            args: {numItems: 6, boxed: true, responsive: 'collapse-rows', withActions: true},
+            args: {numItems: 6, boxed: true, responsive: 'collapse-rows', actions: true},
             fullPageScreenshot: false,
         },
     ],
@@ -221,7 +221,7 @@ const cases = [
         'tablet with actions',
         {
             device: 'TABLET',
-            args: {numItems: 6, withActions: true},
+            args: {numItems: 6, actions: true},
             fullPageScreenshot: true,
         },
     ],
@@ -229,7 +229,7 @@ const cases = [
         'tablet collapse-rows with actions',
         {
             device: 'TABLET',
-            args: {numItems: 6, responsive: 'collapse-rows', withActions: true},
+            args: {numItems: 6, responsive: 'collapse-rows', actions: true},
             fullPageScreenshot: true,
         },
     ],
@@ -237,7 +237,7 @@ const cases = [
         'tablet collapse-rows with rowHeaderIndex = 0',
         {
             device: 'TABLET',
-            args: {numItems: 6, responsive: 'collapse-rows', withRowHeader: true, rowHeaderIndex: 0},
+            args: {numItems: 6, responsive: 'collapse-rows', rowHeader: true, rowHeaderIndex: 0},
             fullPageScreenshot: true,
         },
     ],
@@ -245,7 +245,7 @@ const cases = [
         'tablet collapse-rows with rowHeaderIndex = 2',
         {
             device: 'TABLET',
-            args: {numItems: 6, responsive: 'collapse-rows', withRowHeader: true, rowHeaderIndex: 2},
+            args: {numItems: 6, responsive: 'collapse-rows', rowHeader: true, rowHeaderIndex: 2},
             fullPageScreenshot: true,
         },
     ],
@@ -253,7 +253,7 @@ const cases = [
         'tablet boxed with actions',
         {
             device: 'TABLET',
-            args: {numItems: 6, boxed: true, withActions: true},
+            args: {numItems: 6, boxed: true, actions: true},
             fullPageScreenshot: true,
         },
     ],
@@ -261,7 +261,7 @@ const cases = [
         'tablet collapse-rows boxed with actions',
         {
             device: 'TABLET',
-            args: {numItems: 6, boxed: true, responsive: 'collapse-rows', withActions: true},
+            args: {numItems: 6, boxed: true, responsive: 'collapse-rows', actions: true},
             fullPageScreenshot: true,
         },
     ],
@@ -281,7 +281,7 @@ const cases = [
                 numItems: 6,
                 boxed: true,
                 responsive: 'collapse-rows',
-                withRowHeader: true,
+                rowHeader: true,
                 rowHeaderIndex: 0,
             },
             fullPageScreenshot: true,
diff --git a/src/__screenshot_tests__/video-screenshot-test.tsx b/src/__screenshot_tests__/video-screenshot-test.tsx
index e2ae793455..bf367063c3 100644
--- a/src/__screenshot_tests__/video-screenshot-test.tsx
+++ b/src/__screenshot_tests__/video-screenshot-test.tsx
@@ -38,7 +38,7 @@ test.each(ASPECT_RATIO)('Video - full width with aspect ratio %s', async (aspect
 test.each(ASPECT_RATIO.slice(0, 3))('Video - no poster with aspect ratio %s', async (aspectRatio) => {
     await openStoryPage({
         id: 'components-primitives-video--default',
-        args: {type: 'width and aspect ratio', aspectRatio: aspectRatio.replace(':', ' '), withPoster: false},
+        args: {type: 'width and aspect ratio', aspectRatio: aspectRatio.replace(':', ' '), poster: false},
     });
 
     const story = await screen.findByTestId('video');
@@ -52,8 +52,8 @@ test.each(ASPECT_RATIO.slice(0, 3))('Video - error fallback with aspect ratio %s
         args: {
             type: 'width and aspect ratio',
             aspectRatio: aspectRatio.replace(':', ' '),
-            withPoster: false,
-            isEmptySource: true,
+            poster: false,
+            emptySource: true,
         },
     });
 
diff --git a/src/__stories__/boxed-story.tsx b/src/__stories__/boxed-story.tsx
index b06dcc25fb..f76c94e208 100644
--- a/src/__stories__/boxed-story.tsx
+++ b/src/__stories__/boxed-story.tsx
@@ -7,15 +7,15 @@ export default {
 };
 
 type Args = {
-    inverseInside: boolean;
-    inverseOutside: boolean;
+    inverse: boolean;
+    overInverse: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({inverseInside, inverseOutside}) => {
+export const Default: StoryComponent<Args> = ({inverse, overInverse}) => {
     return (
-        <ResponsiveLayout dataAttributes={{testid: 'boxed'}} fullWidth isInverse={inverseOutside}>
+        <ResponsiveLayout dataAttributes={{testid: 'boxed'}} fullWidth isInverse={overInverse}>
             <Box padding={16}>
-                <Boxed isInverse={inverseInside}>
+                <Boxed isInverse={inverse}>
                     <Box padding={16}>
                         <Text8>Text</Text8>
                     </Box>
@@ -27,6 +27,6 @@ export const Default: StoryComponent<Args> = ({inverseInside, inverseOutside}) =
 
 Default.storyName = 'Boxed';
 Default.args = {
-    inverseInside: false,
-    inverseOutside: false,
+    inverse: false,
+    overInverse: false,
 };
diff --git a/src/__stories__/button-group-story.tsx b/src/__stories__/button-group-story.tsx
index ebe39dec95..1ec35ab9a6 100644
--- a/src/__stories__/button-group-story.tsx
+++ b/src/__stories__/button-group-story.tsx
@@ -11,9 +11,9 @@ const handleOnPress = () => window.alert('pressed!');
 
 type Args = {
     small: boolean;
-    showButtonPrimary: boolean;
-    showButtonSecondary: boolean;
-    showButtonLink: boolean;
+    buttonPrimary: boolean;
+    buttonSecondary: boolean;
+    buttonLink: boolean;
     buttonPrimaryText: string;
     buttonSecondaryText: string;
     buttonLinkText: string;
@@ -21,43 +21,43 @@ type Args = {
 
 export const Default: StoryComponent<Args> = ({
     small,
-    showButtonPrimary,
-    showButtonSecondary,
-    showButtonLink,
+    buttonPrimary,
+    buttonSecondary,
+    buttonLink,
     buttonPrimaryText,
     buttonSecondaryText,
     buttonLinkText,
 }) => {
-    const primaryButton = showButtonPrimary ? (
+    const primaryButton = buttonPrimary ? (
         <ButtonPrimary small={small} onPress={handleOnPress}>
             {buttonPrimaryText}
         </ButtonPrimary>
     ) : undefined;
 
-    const secondaryButton = showButtonSecondary ? (
+    const secondaryButton = buttonSecondary ? (
         <ButtonSecondary small={small} onPress={handleOnPress}>
             {buttonSecondaryText}
         </ButtonSecondary>
     ) : undefined;
 
-    const buttonLink = showButtonLink ? (
+    const linkButton = buttonLink ? (
         <ButtonLink onPress={handleOnPress}>{buttonLinkText}</ButtonLink>
     ) : undefined;
 
-    return <ButtonGroup primaryButton={primaryButton} secondaryButton={secondaryButton} link={buttonLink} />;
+    return <ButtonGroup primaryButton={primaryButton} secondaryButton={secondaryButton} link={linkButton} />;
 };
 
 Default.storyName = 'ButtonGroup';
 Default.argTypes = {
-    buttonPrimaryText: {if: {arg: 'showButtonPrimary'}},
-    buttonSecondaryText: {if: {arg: 'showButtonSecondary'}},
-    buttonLinkText: {if: {arg: 'showButtonLink'}},
+    buttonPrimaryText: {if: {arg: 'buttonPrimary'}},
+    buttonSecondaryText: {if: {arg: 'buttonSecondary'}},
+    buttonLinkText: {if: {arg: 'buttonLink'}},
 };
 Default.args = {
     small: false,
-    showButtonPrimary: true,
-    showButtonSecondary: true,
-    showButtonLink: true,
+    buttonPrimary: true,
+    buttonSecondary: true,
+    buttonLink: true,
     buttonPrimaryText: 'Action1',
     buttonSecondaryText: 'Action2',
     buttonLinkText: 'link',
diff --git a/src/__stories__/button-story.tsx b/src/__stories__/button-story.tsx
index 13f1ab5fc4..514af9096c 100644
--- a/src/__stories__/button-story.tsx
+++ b/src/__stories__/button-story.tsx
@@ -127,20 +127,20 @@ export const DangerButton: StoryComponent<Args> = ({inverse, text, icon, action,
     );
 };
 
-export const LinkButton: StoryComponent<Omit<Args, 'small'> & {withChevron: string}> = ({
+export const LinkButton: StoryComponent<Omit<Args, 'small'> & {chevron: string}> = ({
     inverse,
     text,
     icon,
     action,
     newTab,
-    withChevron,
+    chevron,
     ...props
 }) => {
     return (
         <ButtonBackgroundContainer inverse={inverse}>
             <ButtonLink
                 {...props}
-                withChevron={withChevron === 'default' ? undefined : withChevron === 'true'}
+                withChevron={chevron === 'default' ? undefined : chevron === 'true'}
                 {...getButtonActionProps(action, newTab)}
                 StartIcon={icon === 'left' ? IconPhotoCameraRegular : undefined}
                 EndIcon={icon === 'right' ? IconPhotoCameraRegular : undefined}
@@ -202,7 +202,7 @@ SecondaryButton.args = defaultArgs;
 DangerButton.args = defaultArgs;
 LinkButton.args = {
     ...(({small, ...o}) => o)(defaultArgs),
-    withChevron: 'default',
+    chevron: 'default',
 };
 LinkButtonDanger.args = {
     ...(({small, ...o}) => o)(defaultArgs),
@@ -213,7 +213,7 @@ SecondaryButton.argTypes = defaultArgTypes;
 DangerButton.argTypes = defaultArgTypes;
 LinkButton.argTypes = {
     ...defaultArgTypes,
-    withChevron: {
+    chevron: {
         options: ['default', 'true', 'false'],
         control: {type: 'select'},
     },
diff --git a/src/__stories__/callout-story.tsx b/src/__stories__/callout-story.tsx
index 083f21e23d..ef71df4e82 100644
--- a/src/__stories__/callout-story.tsx
+++ b/src/__stories__/callout-story.tsx
@@ -16,19 +16,12 @@ type Args = {
     title: string;
     description: string;
     actions: string;
-    withIcon: boolean;
-    isClosable: boolean;
+    asset: boolean;
+    closable: boolean;
     inverse: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({
-    title,
-    description,
-    withIcon,
-    actions,
-    isClosable,
-    inverse,
-}) => {
+export const Default: StoryComponent<Args> = ({title, description, asset, actions, closable, inverse}) => {
     const button = actions.includes('button') ? (
         <ButtonPrimary small onPress={() => {}}>
             Action
@@ -49,8 +42,8 @@ export const Default: StoryComponent<Args> = ({
         <ResponsiveLayout isInverse={inverse}>
             <Box paddingY={24}>
                 <Callout
-                    icon={withIcon ? <IconBoxLight /> : undefined}
-                    onClose={isClosable ? () => {} : undefined}
+                    icon={asset ? <IconBoxLight /> : undefined}
+                    onClose={closable ? () => {} : undefined}
                     title={title}
                     description={description}
                     button={button}
@@ -69,7 +62,7 @@ Default.args = {
     title: 'Some title',
     description: 'This is a description for the callout',
     actions: 'button and link',
-    withIcon: true,
-    isClosable: true,
+    asset: true,
+    closable: true,
     inverse: false,
 };
diff --git a/src/__stories__/carousel-story.tsx b/src/__stories__/carousel-story.tsx
index 82e9117183..baa615311d 100644
--- a/src/__stories__/carousel-story.tsx
+++ b/src/__stories__/carousel-story.tsx
@@ -30,7 +30,7 @@ type Args = {
     itemsPerPageMobile: number;
     itemsPerPageTablet: number;
     itemsPerPageDesktop: number;
-    withBullets: boolean;
+    bullets: boolean;
     free: boolean;
     itemsToScroll: number;
     mobilePageOffset: (typeof mobilePageOffsetOptions)[number];
@@ -41,7 +41,7 @@ type Args = {
 
 export const Default: StoryComponent<Args> = ({
     numItems,
-    withBullets,
+    bullets,
     itemsPerPageMobile,
     itemsPerPageTablet,
     itemsPerPageDesktop,
@@ -66,7 +66,7 @@ export const Default: StoryComponent<Args> = ({
                     />
                     <Carousel
                         dataAttributes={{testid: 'carousel-story'}}
-                        withBullets={withBullets}
+                        withBullets={bullets}
                         free={free}
                         itemsPerPage={{
                             mobile: itemsPerPageMobile,
@@ -106,7 +106,7 @@ export const Default: StoryComponent<Args> = ({
 Default.storyName = 'Carousel';
 Default.parameters = {fullScreen: true};
 Default.args = {
-    withBullets: true,
+    bullets: true,
     numItems: 6,
     itemsPerPageDesktop: 3,
     itemsPerPageTablet: 2,
diff --git a/src/__stories__/chip-story.tsx b/src/__stories__/chip-story.tsx
index c7a6143d20..e2e1096e18 100644
--- a/src/__stories__/chip-story.tsx
+++ b/src/__stories__/chip-story.tsx
@@ -21,7 +21,7 @@ export default {
 
 type Args = {
     inverse: boolean;
-    withIcon: boolean;
+    icon: boolean;
     closable: boolean;
     badge: string;
 };
@@ -48,9 +48,9 @@ const ChipBackgroundContainer: React.FC<Props> = ({inverse, dataAttributes, chil
     </ResponsiveLayout>
 );
 
-export const Default: StoryComponent<Args> = ({inverse, withIcon, closable, badge}) => {
+export const Default: StoryComponent<Args> = ({inverse, icon, closable, badge}) => {
     const props = {
-        Icon: withIcon ? IconLightningFilled : undefined,
+        Icon: icon ? IconLightningFilled : undefined,
         badge: badge !== 'undefined' ? +badge : undefined,
     };
 
@@ -67,9 +67,9 @@ export const Default: StoryComponent<Args> = ({inverse, withIcon, closable, badg
     );
 };
 
-export const SingleSelection: StoryComponent<Omit<Args, 'closable'>> = ({inverse, badge, withIcon}) => {
+export const SingleSelection: StoryComponent<Omit<Args, 'closable'>> = ({inverse, badge, icon}) => {
     const props = {
-        Icon: withIcon ? IconLightningFilled : undefined,
+        Icon: icon ? IconLightningFilled : undefined,
         badge: badge !== 'undefined' ? +badge : undefined,
     };
 
@@ -107,9 +107,9 @@ export const SingleSelection: StoryComponent<Omit<Args, 'closable'>> = ({inverse
     );
 };
 
-export const MultipleSelection: StoryComponent<Omit<Args, 'closable'>> = ({inverse, badge, withIcon}) => {
+export const MultipleSelection: StoryComponent<Omit<Args, 'closable'>> = ({inverse, badge, icon}) => {
     const props = {
-        Icon: withIcon ? IconLightningFilled : undefined,
+        Icon: icon ? IconLightningFilled : undefined,
         badge: badge !== 'undefined' ? +badge : undefined,
     };
 
@@ -148,7 +148,7 @@ export const MultipleSelection: StoryComponent<Omit<Args, 'closable'>> = ({inver
 const defaultArgs = {
     inverse: false,
     badge: '0',
-    withIcon: false,
+    icon: false,
     closable: false,
 };
 
diff --git a/src/__stories__/cover-hero-story.tsx b/src/__stories__/cover-hero-story.tsx
index 1d3e2b3271..5a70572d78 100644
--- a/src/__stories__/cover-hero-story.tsx
+++ b/src/__stories__/cover-hero-story.tsx
@@ -32,8 +32,8 @@ type Args = {
     pretitle: string;
     title: string;
     description: string;
-    withExtra: boolean;
-    withSideExtra: boolean;
+    extra: boolean;
+    sideExtra: boolean;
     actions:
         | 'none'
         | 'button'
@@ -58,8 +58,8 @@ export const Default: StoryComponent<Args> = ({
     pretitle,
     title,
     description,
-    withExtra,
-    withSideExtra,
+    extra,
+    sideExtra,
     actions,
     minHeight,
     aspectRatio,
@@ -94,8 +94,8 @@ export const Default: StoryComponent<Args> = ({
             pretitle={pretitle}
             title={title}
             description={description}
-            extra={withExtra ? <Placeholder /> : undefined}
-            sideExtra={withSideExtra ? <Placeholder /> : undefined}
+            extra={extra ? <Placeholder /> : undefined}
+            sideExtra={sideExtra ? <Placeholder /> : undefined}
             button={button}
             secondaryButton={secondaryButton}
             buttonLink={buttonLink}
@@ -120,8 +120,8 @@ Default.args = {
     pretitle: 'Pretitle',
     title: 'Title',
     description: 'This is a long description with a long text to see how this works',
-    withExtra: false,
-    withSideExtra: false,
+    extra: false,
+    sideExtra: false,
     actions: 'button and link',
     minHeight: undefined,
     aspectRatio: 'auto',
diff --git a/src/__stories__/data-card-story.tsx b/src/__stories__/data-card-story.tsx
index 48e06f78c5..c72dde78fb 100644
--- a/src/__stories__/data-card-story.tsx
+++ b/src/__stories__/data-card-story.tsx
@@ -33,10 +33,10 @@ type DataCardArgs = {
     subtitle: string;
     description: string;
     ariaLabel: string;
-    withExtra: boolean;
+    extra: boolean;
     actions: 'button' | 'link' | 'button and link' | 'onPress' | 'href' | 'to' | 'none';
     closable: boolean;
-    withTopAction: boolean;
+    topAction: boolean;
     aspectRatio: AspectRatio;
 };
 
@@ -51,10 +51,10 @@ export const Default: StoryComponent<DataCardArgs> = ({
     subtitle,
     description,
     ariaLabel,
-    withExtra,
+    extra,
     actions = 'button',
     closable,
-    withTopAction,
+    topAction,
     aspectRatio,
 }) => {
     let icon;
@@ -98,13 +98,13 @@ export const Default: StoryComponent<DataCardArgs> = ({
             title={title}
             subtitle={subtitle}
             description={description}
-            extra={withExtra ? <Placeholder /> : undefined}
+            extra={extra ? <Placeholder /> : undefined}
             {...interactiveActions}
             aspectRatio={aspectRatioValue as AspectRatio}
             dataAttributes={{testid: 'data-card'}}
             aria-label={ariaLabel}
             actions={
-                withTopAction
+                topAction
                     ? [
                           {
                               Icon: IconMobileDeviceRegular,
@@ -141,11 +141,11 @@ Default.args = {
     title: 'Title',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
-    withExtra: false,
+    extra: false,
     actions: 'button',
     ariaLabel: '',
     closable: false,
-    withTopAction: false,
+    topAction: false,
     aspectRatio: 'auto',
 };
 Default.argTypes = {
diff --git a/src/__stories__/dialog-story.tsx b/src/__stories__/dialog-story.tsx
index aef4bcfaae..6bd6e8df8c 100644
--- a/src/__stories__/dialog-story.tsx
+++ b/src/__stories__/dialog-story.tsx
@@ -76,7 +76,7 @@ type DialogArgs = {
     onAccept: boolean;
     onCancel: boolean;
     link: boolean;
-    icon: boolean;
+    asset: boolean;
     extra: boolean;
 };
 
@@ -84,7 +84,7 @@ export const Dialog: StoryComponent<DialogArgs> = ({
     onAccept,
     onCancel,
     link,
-    icon,
+    asset,
     extra,
     title,
     subtitle,
@@ -120,7 +120,7 @@ export const Dialog: StoryComponent<DialogArgs> = ({
                                 </Stack>
                             ) : undefined,
                             link: link ? <ButtonLink href="https://google.com">Link</ButtonLink> : undefined,
-                            icon: icon ? (
+                            icon: asset ? (
                                 <IconInformationUserLight color={skinVars.colors.brand} />
                             ) : undefined,
                             onAccept: onAccept ? () => console.log('Accepted') : undefined,
@@ -144,6 +144,6 @@ Dialog.args = {
     onAccept: true,
     onCancel: true,
     link: true,
-    icon: true,
+    asset: true,
     extra: true,
 };
diff --git a/src/__stories__/display-data-card-story.tsx b/src/__stories__/display-data-card-story.tsx
index a56a424083..ac8a4b4bab 100644
--- a/src/__stories__/display-data-card-story.tsx
+++ b/src/__stories__/display-data-card-story.tsx
@@ -34,9 +34,9 @@ type DisplayDataCardArgs = {
     pretitle: string;
     title: string;
     description: string;
-    withExtra: boolean;
+    extra: boolean;
     closable: boolean;
-    withTopAction: boolean;
+    topAction: boolean;
     actions:
         | 'button'
         | 'link'
@@ -59,10 +59,10 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
     pretitle,
     title,
     description,
-    withExtra,
+    extra,
     actions = 'button',
     closable,
-    withTopAction,
+    topAction,
     isInverse,
     aspectRatio,
 }) => {
@@ -112,7 +112,7 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
             isInverse={isInverse}
             onClose={closable ? () => {} : undefined}
             actions={
-                withTopAction
+                topAction
                     ? [
                           {
                               Icon: IconLightningRegular,
@@ -140,7 +140,7 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
             title={title}
             description={description}
             aspectRatio={aspectRatioValue as AspectRatio}
-            extra={withExtra ? <Placeholder /> : undefined}
+            extra={extra ? <Placeholder /> : undefined}
             {...interactiveActions}
             dataAttributes={{testid: 'display-data-card'}}
             aria-label="Display data card label"
@@ -156,10 +156,10 @@ Default.args = {
     pretitle: 'Pretitle',
     title: 'Title',
     description: 'This is a description for the card',
-    withExtra: false,
+    extra: false,
     actions: 'button',
     closable: false,
-    withTopAction: false,
+    topAction: false,
     isInverse: false,
     aspectRatio: 'auto',
 };
diff --git a/src/__stories__/display-media-card-story.tsx b/src/__stories__/display-media-card-story.tsx
index f480f26ae7..50a1c439fd 100644
--- a/src/__stories__/display-media-card-story.tsx
+++ b/src/__stories__/display-media-card-story.tsx
@@ -41,9 +41,9 @@ type DisplayMediaCardArgs = {
     pretitle: string;
     title: string;
     description: string;
-    withExtra: boolean;
+    extra: boolean;
     closable: boolean;
-    withTopAction: boolean;
+    topAction: boolean;
     actions:
         | 'button'
         | 'link'
@@ -55,7 +55,7 @@ type DisplayMediaCardArgs = {
         | 'none';
     width: string;
     aspectRatio: '1:1' | '16:9' | '7:10' | '9:10' | 'auto';
-    isEmptySource: boolean;
+    emptySource: boolean;
     inverse: boolean;
 };
 
@@ -67,13 +67,13 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
     pretitle,
     title,
     description,
-    withExtra,
+    extra,
     actions = 'button',
     closable,
-    withTopAction,
+    topAction,
     width,
     aspectRatio,
-    isEmptySource,
+    emptySource,
     inverse,
 }) => {
     let icon;
@@ -113,7 +113,7 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
         background === 'image'
             ? {
                   onClose: closable ? () => {} : undefined,
-                  actions: withTopAction
+                  actions: topAction
                       ? [
                             {
                                 Icon: IconLightningRegular,
@@ -134,11 +134,11 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
                             },
                         ]
                       : undefined,
-                  backgroundImage: isEmptySource ? '' : BACKGROUND_IMAGE_SRC,
+                  backgroundImage: emptySource ? '' : BACKGROUND_IMAGE_SRC,
               }
             : {
-                  backgroundVideo: isEmptySource ? '' : BACKGROUND_VIDEO_SRC,
-                  poster: isEmptySource ? '' : BACKGROUND_VIDEO_POSTER_SRC,
+                  backgroundVideo: emptySource ? '' : BACKGROUND_VIDEO_SRC,
+                  poster: emptySource ? '' : BACKGROUND_VIDEO_POSTER_SRC,
               };
 
     return (
@@ -155,7 +155,7 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
                     aria-label="Display media card label"
                     width={width}
                     aspectRatio={aspectRatio}
-                    extra={withExtra ? <Placeholder /> : undefined}
+                    extra={extra ? <Placeholder /> : undefined}
                     dataAttributes={{testid: 'display-media-card'}}
                 />
             </Box>
@@ -172,13 +172,13 @@ Default.args = {
     pretitle: 'Pretitle',
     title: 'Title',
     description: 'This is a description for the card',
-    withExtra: false,
+    extra: false,
     actions: 'button',
     closable: false,
-    withTopAction: false,
+    topAction: false,
     width: 'auto',
     aspectRatio: 'auto',
-    isEmptySource: false,
+    emptySource: false,
     inverse: false,
 };
 Default.argTypes = {
diff --git a/src/__stories__/feedback-screen-story.tsx b/src/__stories__/feedback-screen-story.tsx
index a21ad285ec..17548a436c 100644
--- a/src/__stories__/feedback-screen-story.tsx
+++ b/src/__stories__/feedback-screen-story.tsx
@@ -69,9 +69,9 @@ type FeedbackScreenArgs = {
     linkText: string;
     description: string;
     animateText: boolean;
-    showIcon: boolean;
-    withNavbar: boolean;
-    isInverse: boolean;
+    icon: boolean;
+    navbar: boolean;
+    inverse: boolean;
     imageUrl: string | null;
     imageFit: 'fit' | 'fill';
     multipleParagraphs: boolean;
@@ -85,25 +85,25 @@ export const FeedbackScreenStory: StoryComponent<FeedbackScreenArgs> = ({
     description,
     multipleParagraphs,
     animateText,
-    showIcon,
-    withNavbar,
-    isInverse,
+    icon,
+    navbar,
+    inverse,
     imageUrl,
     imageFit,
 }) => (
-    <FixedToTop height={withNavbar ? 56 : 0}>
+    <FixedToTop height={navbar ? 56 : 0}>
         {(top) => (
             <>
-                {withNavbar && <Navbar top={top} />}
-                <Box paddingTop={withNavbar ? 56 : 0}>
+                {navbar && <Navbar top={top} />}
+                <Box paddingTop={navbar ? 56 : 0}>
                     <FeedbackScreen
-                        isInverse={isInverse}
+                        isInverse={inverse}
                         title={title}
                         description={
                             multipleParagraphs ? [description, 'paragraph 2', 'paragraph 3'] : description
                         }
                         animateText={animateText}
-                        icon={showIcon ? <IconOrders /> : undefined}
+                        icon={icon ? <IconOrders /> : undefined}
                         imageUrl={imageUrl ?? undefined}
                         imageFit={imageFit}
                         primaryButton={
@@ -144,9 +144,9 @@ FeedbackScreenStory.args = {
     description: 'Description',
     multipleParagraphs: false,
     animateText: true,
-    showIcon: true,
-    withNavbar: true,
-    isInverse: false,
+    icon: true,
+    navbar: true,
+    inverse: false,
     imageUrl: '',
     imageFit: 'fit',
 };
diff --git a/src/__stories__/funnel-navigation-bar-story.tsx b/src/__stories__/funnel-navigation-bar-story.tsx
index 0c398f9849..9d05da39a6 100644
--- a/src/__stories__/funnel-navigation-bar-story.tsx
+++ b/src/__stories__/funnel-navigation-bar-story.tsx
@@ -10,6 +10,8 @@ import {
 } from '..';
 import {vars} from '../skins/skin-contract.css';
 
+import type {Variant} from '../theme-variant-context';
+
 export default {
     title: 'Components/Navigation bars/FunnelNavigationBar',
     component: FunnelNavigationBar,
@@ -18,14 +20,14 @@ export default {
     },
 };
 
-type Args = {inverse: boolean; withBorder: boolean};
+type Args = {variant: Variant; border: boolean};
 
-export const Default: StoryComponent<Args> = ({inverse, withBorder}) => {
+export const Default: StoryComponent<Args> = ({variant, border}) => {
     const {isDesktopOrBigger} = useScreenSize();
     return (
         <FunnelNavigationBar
-            withBorder={withBorder}
-            isInverse={inverse}
+            withBorder={border}
+            variant={variant}
             right={
                 <NavigationBarActionGroup>
                     <NavigationBarAction aria-label="need help?" href="/help">
@@ -49,6 +51,13 @@ export const Default: StoryComponent<Args> = ({inverse, withBorder}) => {
 Default.storyName = 'FunnelNavigationBar';
 
 Default.args = {
-    inverse: false,
-    withBorder: true,
+    variant: 'default',
+    border: true,
+};
+
+Default.argTypes = {
+    variant: {
+        options: ['default', 'inverse', 'alternative'],
+        control: {type: 'select'},
+    },
 };
diff --git a/src/__stories__/header-story.tsx b/src/__stories__/header-story.tsx
index 595df692e4..ea59801fb8 100644
--- a/src/__stories__/header-story.tsx
+++ b/src/__stories__/header-story.tsx
@@ -22,7 +22,7 @@ export default {
 };
 
 type Args = {
-    withHeader: boolean;
+    header: boolean;
     headlineType: TagType;
     headline: string;
     pretitle: string;
@@ -33,19 +33,19 @@ type Args = {
     description: string;
     small: boolean;
     inverse: boolean;
-    withExtraContent: boolean;
+    extra: boolean;
     sideBySideExtraOnDesktop: boolean;
-    withBreadcrumbs: boolean;
+    breadcrumbs: boolean;
     bleed: boolean;
     noPaddingY: boolean;
 };
 
 export const Default: StoryComponent<Args> = ({
-    withHeader,
+    header,
     inverse,
     bleed,
     sideBySideExtraOnDesktop,
-    withBreadcrumbs,
+    breadcrumbs,
     headlineType,
     headline,
     pretitle,
@@ -55,7 +55,7 @@ export const Default: StoryComponent<Args> = ({
     titleAs,
     description,
     small,
-    withExtraContent,
+    extra,
     noPaddingY,
 }) => {
     return (
@@ -67,7 +67,7 @@ export const Default: StoryComponent<Args> = ({
                 sideBySideExtraOnDesktop={sideBySideExtraOnDesktop}
                 noPaddingY={noPaddingY}
                 breadcrumbs={
-                    withBreadcrumbs ? (
+                    breadcrumbs ? (
                         <NavigationBreadcrumbs
                             title="Bills"
                             breadcrumbs={[{title: 'Account', url: '/consumptions'}]}
@@ -75,7 +75,7 @@ export const Default: StoryComponent<Args> = ({
                     ) : undefined
                 }
                 header={
-                    withHeader ? (
+                    header ? (
                         <Header
                             pretitleAs={pretitleAs}
                             headline={<Tag type={headlineType}>{headline}</Tag>}
@@ -87,7 +87,7 @@ export const Default: StoryComponent<Args> = ({
                         />
                     ) : undefined
                 }
-                extra={withExtraContent ? <Placeholder /> : undefined}
+                extra={extra ? <Placeholder /> : undefined}
             />
             <ResponsiveLayout>
                 <Callout
@@ -104,7 +104,7 @@ export const Default: StoryComponent<Args> = ({
 
 Default.storyName = 'Header';
 Default.args = {
-    withHeader: true,
+    header: true,
     headlineType: 'promo',
     headline: 'Priority',
     pretitle: 'Your last bill',
@@ -115,9 +115,9 @@ Default.args = {
     small: false,
     truncatePretitle: false,
     inverse: true,
-    withBreadcrumbs: true,
+    breadcrumbs: true,
     noPaddingY: false,
-    withExtraContent: true,
+    extra: true,
     sideBySideExtraOnDesktop: true,
     bleed: false,
 };
@@ -126,23 +126,23 @@ Default.argTypes = {
     headlineType: {
         options: ['promo', 'active', 'inactive', 'success', 'warning', 'error'],
         control: {type: 'select'},
-        if: {arg: 'withHeader'},
+        if: {arg: 'header'},
     },
-    headline: {if: {arg: 'withHeader'}},
-    pretitle: {if: {arg: 'withHeader'}},
+    headline: {if: {arg: 'header'}},
+    pretitle: {if: {arg: 'header'}},
     pretitleAs: {
-        if: {arg: 'withHeader'},
+        if: {arg: 'header'},
         options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
         control: {type: 'select'},
     },
-    title: {if: {arg: 'withHeader'}},
+    title: {if: {arg: 'header'}},
     titleAs: {
-        if: {arg: 'withHeader'},
+        if: {arg: 'header'},
         options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
         control: {type: 'select'},
     },
-    description: {if: {arg: 'withHeader'}},
-    small: {if: {arg: 'withHeader'}},
-    sideBySideExtraOnDesktop: {if: {arg: 'withExtraContent'}},
-    bleed: {if: {arg: 'withExtraContent'}},
+    description: {if: {arg: 'header'}},
+    small: {if: {arg: 'header'}},
+    sideBySideExtraOnDesktop: {if: {arg: 'extra'}},
+    bleed: {if: {arg: 'extra'}},
 };
diff --git a/src/__stories__/hero-story.tsx b/src/__stories__/hero-story.tsx
index ad8bd75f9b..05b72ecc14 100644
--- a/src/__stories__/hero-story.tsx
+++ b/src/__stories__/hero-story.tsx
@@ -21,7 +21,7 @@ type HeroArgs = {
     pretitle: string;
     title: string;
     description: string;
-    withExtra: boolean;
+    extra: boolean;
     actions: 'button' | 'link' | 'button and link';
     background: 'default' | 'alternative' | 'brand' | 'brand-secondary' | 'none';
     desktopMediaPosition: 'left' | 'right';
@@ -41,7 +41,7 @@ export const Default: StoryComponent<HeroArgs> = ({
     actions,
     desktopMediaPosition,
     height,
-    withExtra,
+    extra,
     aspectRatio,
     noPaddingY,
 }) => {
@@ -67,7 +67,7 @@ export const Default: StoryComponent<HeroArgs> = ({
             pretitle={pretitle}
             title={title}
             description={description}
-            extra={withExtra ? <Placeholder /> : undefined}
+            extra={extra ? <Placeholder /> : undefined}
             button={button}
             buttonLink={buttonLink}
             dataAttributes={{testid: 'hero'}}
@@ -87,7 +87,7 @@ Default.args = {
     pretitle: 'Pretitle',
     title: 'Title',
     description: 'This is a long description with a long text to see how this works',
-    withExtra: false,
+    extra: false,
     actions: 'button and link',
     background: 'default',
     desktopMediaPosition: 'right',
diff --git a/src/__stories__/horizontal-scroll-story.tsx b/src/__stories__/horizontal-scroll-story.tsx
index 509d25aa31..f178823462 100644
--- a/src/__stories__/horizontal-scroll-story.tsx
+++ b/src/__stories__/horizontal-scroll-story.tsx
@@ -8,16 +8,16 @@ export default {
 };
 
 type Args = {
-    showScrollbar: boolean;
+    scrollbar: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({showScrollbar}) => {
+export const Default: StoryComponent<Args> = ({scrollbar}) => {
     return (
         <ResponsiveLayout>
             <Box paddingY={24}>
                 <Stack space={16}>
                     <Placeholder />
-                    <HorizontalScroll noScrollbar={!showScrollbar}>
+                    <HorizontalScroll noScrollbar={!scrollbar}>
                         <Inline space={16}>
                             <Placeholder width={200} height={200} />
                             <Placeholder width={200} height={200} />
@@ -35,5 +35,5 @@ export const Default: StoryComponent<Args> = ({showScrollbar}) => {
 Default.storyName = 'HorizontalScroll';
 
 Default.args = {
-    showScrollbar: true,
+    scrollbar: true,
 };
diff --git a/src/__stories__/icon-button-story.tsx b/src/__stories__/icon-button-story.tsx
index fed106bcf5..26cbdc06b3 100644
--- a/src/__stories__/icon-button-story.tsx
+++ b/src/__stories__/icon-button-story.tsx
@@ -22,7 +22,7 @@ type IconButtonArgs = {
     themeVariant: Variant;
     small: boolean;
     disabled: boolean;
-    showSpinner: boolean;
+    spinner: boolean;
     bleedLeft: boolean;
     bleedRight: boolean;
     bleedY: boolean;
@@ -34,7 +34,7 @@ export const IconButtonStory: StoryComponent<IconButtonArgs> = ({
     themeVariant,
     small,
     disabled,
-    showSpinner,
+    spinner,
     bleedLeft,
     bleedRight,
     bleedY,
@@ -47,7 +47,7 @@ export const IconButtonStory: StoryComponent<IconButtonArgs> = ({
                 Icon={IconCloseRegular}
                 type={type}
                 backgroundType={backgroundType}
-                showSpinner={showSpinner}
+                showSpinner={spinner}
                 small={small}
                 disabled={disabled}
                 bleedLeft={bleedLeft}
@@ -80,7 +80,7 @@ IconButtonStory.args = {
     themeVariant: 'default',
     small: false,
     disabled: false,
-    showSpinner: false,
+    spinner: false,
     bleedLeft: false,
     bleedRight: false,
     bleedY: false,
@@ -94,7 +94,7 @@ type ToggleIconButtonArgs = {
     themeVariant: Variant;
     small: boolean;
     disabled: boolean;
-    showSpinner: boolean;
+    spinner: boolean;
     bleedLeft: boolean;
     bleedRight: boolean;
     bleedY: boolean;
@@ -108,7 +108,7 @@ export const ToggleIconButtonStory: StoryComponent<ToggleIconButtonArgs> = ({
     themeVariant,
     small,
     disabled,
-    showSpinner,
+    spinner,
     bleedLeft,
     bleedRight,
     bleedY,
@@ -117,7 +117,7 @@ export const ToggleIconButtonStory: StoryComponent<ToggleIconButtonArgs> = ({
         <Box padding={16}>
             <ToggleIconButton
                 onChange={(checked) => console.log(checked ? 'checked' : 'unchecked')}
-                showSpinner={showSpinner}
+                showSpinner={spinner}
                 small={small}
                 disabled={disabled}
                 bleedLeft={bleedLeft}
@@ -172,7 +172,7 @@ ToggleIconButtonStory.args = {
     themeVariant: 'default',
     small: false,
     disabled: false,
-    showSpinner: false,
+    spinner: false,
     bleedLeft: false,
     bleedRight: false,
     bleedY: false,
diff --git a/src/__stories__/image-story.tsx b/src/__stories__/image-story.tsx
index 9716dbe06a..9bfdecf82a 100644
--- a/src/__stories__/image-story.tsx
+++ b/src/__stories__/image-story.tsx
@@ -43,7 +43,7 @@ type Args = {
     height: number;
     aspectRatio: string;
     borderRadius: boolean;
-    isEmptySource: boolean;
+    emptySource: boolean;
 };
 
 export const Default: StoryComponent<Args> = ({
@@ -52,7 +52,7 @@ export const Default: StoryComponent<Args> = ({
     height,
     aspectRatio,
     borderRadius,
-    isEmptySource,
+    emptySource,
 }) => {
     const props = {
         width: type !== 'full width' ? width : undefined,
@@ -67,7 +67,7 @@ export const Default: StoryComponent<Args> = ({
         dataAttributes: {testid: 'image'},
     };
 
-    return <Image src={isEmptySource ? '' : usingVrImg} {...props} />;
+    return <Image src={emptySource ? '' : usingVrImg} {...props} />;
 };
 
 Default.storyName = 'Image';
@@ -77,5 +77,5 @@ Default.args = {
     height: 240,
     aspectRatio: '1 1',
     borderRadius: true,
-    isEmptySource: false,
+    emptySource: false,
 };
diff --git a/src/__stories__/info-feedback-screen-story.tsx b/src/__stories__/info-feedback-screen-story.tsx
index 886da5e456..48c91d9c5a 100644
--- a/src/__stories__/info-feedback-screen-story.tsx
+++ b/src/__stories__/info-feedback-screen-story.tsx
@@ -10,7 +10,7 @@ export default {
         fullScreen: true,
     },
     argTypes: {
-        icon: {
+        asset: {
             options: ['default', 'custom'],
             control: {type: 'select'},
         },
@@ -18,22 +18,22 @@ export default {
 };
 
 type Args = {
-    icon: string;
+    asset: string;
     extra: boolean;
 };
 
-export const Info: StoryComponent<Args> = ({icon, extra}) => (
+export const Info: StoryComponent<Args> = ({asset, extra}) => (
     <InfoFeedbackScreen
         title="I'm the title"
         description="I'm the description"
         primaryButton={<ButtonPrimary onPress={() => {}}>Action1</ButtonPrimary>}
-        Icon={icon === 'custom' ? IconError : undefined}
+        Icon={asset === 'custom' ? IconError : undefined}
         extra={extra ? <Placeholder /> : undefined}
     />
 );
 
 Info.storyName = 'InfoFeedbackScreen';
 Info.args = {
-    icon: 'default',
+    asset: 'default',
     extra: false,
 };
diff --git a/src/__stories__/list-story.tsx b/src/__stories__/list-story.tsx
index 2d98138401..a3f180fe1e 100644
--- a/src/__stories__/list-story.tsx
+++ b/src/__stories__/list-story.tsx
@@ -64,17 +64,17 @@ type Args = {
     description: string;
     detail: string;
     control: string;
-    withBadge: boolean;
+    badge: boolean;
     oneLineTitle: boolean;
     oneLineSubtitle: boolean;
     oneLineDescription: boolean;
-    extraContent: boolean;
+    extra: boolean;
     disabled: boolean;
     danger: boolean;
     overInverse: boolean;
 };
 
-const Template: StoryComponent<Args & {boxed?: boolean; isInverse?: boolean}> = ({
+const Template: StoryComponent<Args & {boxed?: boolean; inverse?: boolean}> = ({
     boxed,
     headline,
     title,
@@ -82,17 +82,17 @@ const Template: StoryComponent<Args & {boxed?: boolean; isInverse?: boolean}> =
     description,
     detail,
     control,
-    withBadge,
+    badge,
     oneLineTitle,
     oneLineSubtitle,
     oneLineDescription,
-    extraContent,
+    extra,
     disabled,
     overInverse,
-    isInverse,
+    inverse,
     danger,
 }) => {
-    const extra = extraContent ? <Placeholder height={56} /> : undefined;
+    const extraContent = extra ? <Placeholder height={56} /> : undefined;
 
     const getControlProps = (index: number) => {
         let controlProps: any = {};
@@ -236,14 +236,14 @@ const Template: StoryComponent<Args & {boxed?: boolean; isInverse?: boolean}> =
                 subtitle={subtitle}
                 description={description}
                 detail={detail}
-                badge={withBadge}
+                badge={badge}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
                 descriptionLinesMax={oneLineDescription ? 1 : 2}
-                extra={extra}
+                extra={extraContent}
                 disabled={disabled}
                 danger={danger}
-                isInverse={isInverse}
+                isInverse={inverse}
                 {...getControlProps(row++)}
             />
             <RowComponent
@@ -253,14 +253,14 @@ const Template: StoryComponent<Args & {boxed?: boolean; isInverse?: boolean}> =
                 subtitle={subtitle}
                 description={description}
                 detail={detail}
-                badge={withBadge ? 2 : undefined}
+                badge={badge ? 2 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
                 descriptionLinesMax={oneLineDescription ? 1 : 2}
-                extra={extra}
+                extra={extraContent}
                 disabled={disabled}
                 danger={danger}
-                isInverse={isInverse}
+                isInverse={inverse}
                 {...getControlProps(row++)}
             />
             <RowComponent
@@ -274,14 +274,14 @@ const Template: StoryComponent<Args & {boxed?: boolean; isInverse?: boolean}> =
                 subtitle={subtitle}
                 description={description}
                 detail={detail}
-                badge={withBadge ? 22 : undefined}
+                badge={badge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
                 descriptionLinesMax={oneLineDescription ? 1 : 2}
-                extra={extra}
+                extra={extraContent}
                 disabled={disabled}
                 danger={danger}
-                isInverse={isInverse}
+                isInverse={inverse}
                 {...getControlProps(row++)}
             />
             <RowComponent
@@ -291,14 +291,14 @@ const Template: StoryComponent<Args & {boxed?: boolean; isInverse?: boolean}> =
                 subtitle={subtitle}
                 description={description}
                 detail={detail}
-                badge={withBadge ? 22 : undefined}
+                badge={badge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
                 descriptionLinesMax={oneLineDescription ? 1 : 2}
-                extra={extra}
+                extra={extraContent}
                 disabled={disabled}
                 danger={danger}
-                isInverse={isInverse}
+                isInverse={inverse}
                 {...getControlProps(row++)}
             />
             <RowComponent
@@ -308,14 +308,14 @@ const Template: StoryComponent<Args & {boxed?: boolean; isInverse?: boolean}> =
                 subtitle={subtitle}
                 description={description}
                 detail={detail}
-                badge={withBadge ? 22 : undefined}
+                badge={badge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
                 descriptionLinesMax={oneLineDescription ? 1 : 2}
-                extra={extra}
+                extra={extraContent}
                 disabled={disabled}
                 danger={danger}
-                isInverse={isInverse}
+                isInverse={inverse}
                 {...getControlProps(row++)}
             />
             <RowComponent
@@ -325,14 +325,14 @@ const Template: StoryComponent<Args & {boxed?: boolean; isInverse?: boolean}> =
                 subtitle={subtitle}
                 description={description}
                 detail={detail}
-                badge={withBadge ? 22 : undefined}
+                badge={badge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
                 descriptionLinesMax={oneLineDescription ? 1 : 2}
-                extra={extra}
+                extra={extraContent}
                 disabled={disabled}
                 danger={danger}
-                isInverse={isInverse}
+                isInverse={inverse}
                 {...getControlProps(row++)}
             />
             <RowComponent
@@ -342,14 +342,14 @@ const Template: StoryComponent<Args & {boxed?: boolean; isInverse?: boolean}> =
                 subtitle={subtitle}
                 description={description}
                 detail={detail}
-                badge={withBadge ? 22 : undefined}
+                badge={badge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
                 descriptionLinesMax={oneLineDescription ? 1 : 2}
-                extra={extra}
+                extra={extraContent}
                 disabled={disabled}
                 danger={danger}
-                isInverse={isInverse}
+                isInverse={inverse}
                 {...getControlProps(row++)}
             />
             <RowComponent
@@ -359,14 +359,14 @@ const Template: StoryComponent<Args & {boxed?: boolean; isInverse?: boolean}> =
                 subtitle={subtitle}
                 description={description}
                 detail={detail}
-                badge={withBadge ? 22 : undefined}
+                badge={badge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
                 descriptionLinesMax={oneLineDescription ? 1 : 2}
-                extra={extra}
+                extra={extraContent}
                 disabled={disabled}
                 danger={danger}
-                isInverse={isInverse}
+                isInverse={inverse}
                 {...getControlProps(row++)}
             />
             <RowComponent
@@ -376,14 +376,14 @@ const Template: StoryComponent<Args & {boxed?: boolean; isInverse?: boolean}> =
                 subtitle={subtitle}
                 description={description}
                 detail={detail}
-                badge={withBadge ? 22 : undefined}
+                badge={badge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
                 descriptionLinesMax={oneLineDescription ? 1 : 2}
-                extra={extra}
+                extra={extraContent}
                 disabled={disabled}
                 danger={danger}
-                isInverse={isInverse}
+                isInverse={inverse}
                 {...getControlProps(row++)}
             />
         </ListComponent>
@@ -411,11 +411,11 @@ const defaultArgs = {
     description: 'Description',
     detail: '',
     control: 'chevron',
-    withBadge: false,
+    badge: false,
     oneLineTitle: false,
     oneLineSubtitle: false,
     oneLineDescription: false,
-    extraContent: false,
+    extra: false,
     disabled: false,
     danger: false,
     overInverse: false,
@@ -425,9 +425,9 @@ export const RowListStory: StoryComponent<Args> = (args) => <Template {...args}
 RowListStory.storyName = 'RowList';
 RowListStory.args = defaultArgs;
 
-export const BoxedRowListStory: StoryComponent<Args & {isInverse: boolean}> = (args) => (
+export const BoxedRowListStory: StoryComponent<Args & {inverse: boolean}> = (args) => (
     <Template boxed {...args} />
 );
 BoxedRowListStory.storyName = 'BoxedRowList';
-BoxedRowListStory.args = {...defaultArgs, isInverse: false};
-BoxedRowListStory.argTypes = {danger: {if: {arg: 'isInverse', eq: false}}};
+BoxedRowListStory.args = {...defaultArgs, inverse: false};
+BoxedRowListStory.argTypes = {danger: {if: {arg: 'inverse', eq: false}}};
diff --git a/src/__stories__/loading-screen-story.tsx b/src/__stories__/loading-screen-story.tsx
index cccdbe24fa..ce80b6c991 100644
--- a/src/__stories__/loading-screen-story.tsx
+++ b/src/__stories__/loading-screen-story.tsx
@@ -16,8 +16,8 @@ export default {
 type LoadingSreenArgs = {
     title: string;
     description: string;
-    isInverse: boolean;
-    isLoading: boolean;
+    inverse: boolean;
+    loading: boolean;
     multipleTexts: boolean;
     textDuration: number;
 };
@@ -25,8 +25,8 @@ type LoadingSreenArgs = {
 export const LoadingScreenStory: StoryComponent<LoadingSreenArgs> = ({
     title,
     description,
-    isInverse,
-    isLoading,
+    inverse,
+    loading,
     multipleTexts,
     textDuration,
 }) => {
@@ -66,8 +66,8 @@ export const LoadingScreenStory: StoryComponent<LoadingSreenArgs> = ({
     return (
         <LoadingScreen
             {...textProps}
-            isInverse={isInverse}
-            isLoading={isLoading}
+            isInverse={inverse}
+            isLoading={loading}
             onClose={() => {
                 setShowLoadingScreen(false);
             }}
@@ -78,8 +78,8 @@ LoadingScreenStory.storyName = 'LoadingScreen';
 LoadingScreenStory.args = {
     title: 'Title',
     description: 'Description',
-    isInverse: false,
-    isLoading: true,
+    inverse: false,
+    loading: true,
     multipleTexts: false,
     textDuration: 5000,
 };
@@ -90,7 +90,7 @@ LoadingScreenStory.argTypes = {
 type BrandLoadingSreenArgs = {
     title: string;
     description: string;
-    isLoading: boolean;
+    loading: boolean;
     multipleTexts: boolean;
     textDuration: number;
 };
@@ -100,7 +100,7 @@ export const BrandLoadingScreenStory: StoryComponent<BrandLoadingSreenArgs> = ({
     description,
     multipleTexts,
     textDuration,
-    isLoading,
+    loading,
 }) => {
     const [showLoadingScreen, setShowLoadingScreen] = React.useState(true);
     if (!showLoadingScreen) {
@@ -135,7 +135,7 @@ export const BrandLoadingScreenStory: StoryComponent<BrandLoadingSreenArgs> = ({
     return (
         <BrandLoadingScreen
             {...textProps}
-            isLoading={isLoading}
+            isLoading={loading}
             onClose={() => {
                 setShowLoadingScreen(false);
             }}
@@ -146,7 +146,7 @@ BrandLoadingScreenStory.storyName = 'BrandLoadingScreen';
 BrandLoadingScreenStory.args = {
     title: 'Title',
     description: 'Description',
-    isLoading: true,
+    loading: true,
     multipleTexts: false,
     textDuration: 5000,
 };
diff --git a/src/__stories__/main-navigation-bar-story.tsx b/src/__stories__/main-navigation-bar-story.tsx
index bfaa8ec475..b570b2197c 100644
--- a/src/__stories__/main-navigation-bar-story.tsx
+++ b/src/__stories__/main-navigation-bar-story.tsx
@@ -11,6 +11,8 @@ import {
 } from '..';
 import avatarImg from './images/avatar.jpg';
 
+import type {Variant} from '../theme-variant-context';
+
 export default {
     title: 'Components/Navigation bars/MainNavigationBar',
     component: MainNavigationBar,
@@ -19,34 +21,28 @@ export default {
     },
 };
 
-const sections = ['Start', 'Account', 'Explore', 'Support'];
+const sectionTitles = ['Start', 'Account', 'Explore', 'Support'];
 
 type Args = {
-    inverse: boolean;
-    withBorder: boolean;
-    withBurgerMenuExtra: boolean;
+    variant: Variant;
+    border: boolean;
+    burgerMenuExtra: boolean;
     large: boolean;
-    withSections: boolean;
+    sections: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({
-    inverse,
-    withBorder,
-    withBurgerMenuExtra,
-    large,
-    withSections,
-}) => {
+export const Default: StoryComponent<Args> = ({variant, border, burgerMenuExtra, large, sections}) => {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const {isDesktopOrBigger} = useScreenSize();
     return (
         <MainNavigationBar
-            isInverse={inverse}
+            variant={variant}
             large={large}
-            withBorder={withBorder}
-            burgerMenuExtra={withBurgerMenuExtra ? <Placeholder /> : undefined}
+            withBorder={border}
+            burgerMenuExtra={burgerMenuExtra ? <Placeholder /> : undefined}
             sections={
-                withSections
-                    ? sections.map((title, idx) => ({title, onPress: () => setSelectedIndex(idx)}))
+                sections
+                    ? sectionTitles.map((title, idx) => ({title, onPress: () => setSelectedIndex(idx)}))
                     : undefined
             }
             selectedIndex={selectedIndex}
@@ -70,9 +66,16 @@ export const Default: StoryComponent<Args> = ({
 Default.storyName = 'MainNavigationBar';
 
 Default.args = {
-    inverse: false,
-    withBorder: true,
-    withBurgerMenuExtra: false,
+    variant: 'default',
+    border: true,
+    burgerMenuExtra: false,
     large: false,
-    withSections: true,
+    sections: true,
+};
+
+Default.argTypes = {
+    variant: {
+        options: ['default', 'inverse', 'alternative'],
+        control: {type: 'select'},
+    },
 };
diff --git a/src/__stories__/media-card-story.tsx b/src/__stories__/media-card-story.tsx
index c4f037a555..c5bea2f4de 100644
--- a/src/__stories__/media-card-story.tsx
+++ b/src/__stories__/media-card-story.tsx
@@ -39,11 +39,11 @@ type Args = {
     title: string;
     subtitle: string;
     description: string;
-    withExtra: boolean;
+    extra: boolean;
     actions: 'button' | 'link' | 'button and link' | 'onPress' | 'href' | 'to' | 'none';
     closable: boolean;
-    withTopAction: boolean;
-    isEmptySource: boolean;
+    topAction: boolean;
+    emptySource: boolean;
 };
 
 export const Default: StoryComponent<Args> = ({
@@ -54,12 +54,12 @@ export const Default: StoryComponent<Args> = ({
     subtitle,
     description,
     actions = 'button',
-    withExtra,
+    extra,
     closable,
-    withTopAction,
+    topAction,
     media,
     asset,
-    isEmptySource,
+    emptySource,
 }) => {
     let icon;
     if (asset === 'circle with icon') {
@@ -102,19 +102,19 @@ export const Default: StoryComponent<Args> = ({
             media={
                 media === 'video' ? (
                     <Video
-                        src={isEmptySource ? '' : VIDEO_SRC}
+                        src={emptySource ? '' : VIDEO_SRC}
                         aspectRatio="16:9"
                         dataAttributes={{qsysid: 'video'}}
                     />
                 ) : (
-                    <Image aspectRatio="16:9" src={isEmptySource ? '' : IMAGE_SRC} />
+                    <Image aspectRatio="16:9" src={emptySource ? '' : IMAGE_SRC} />
                 )
             }
             {...interactiveActions}
-            extra={withExtra ? <Placeholder /> : undefined}
+            extra={extra ? <Placeholder /> : undefined}
             onClose={closable ? () => {} : undefined}
             actions={
-                withTopAction
+                topAction
                     ? [
                           {
                               Icon: IconMobileDeviceRegular,
@@ -152,11 +152,11 @@ Default.args = {
     title: 'Title',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
-    withExtra: false,
+    extra: false,
     actions: 'button',
     closable: false,
-    withTopAction: false,
-    isEmptySource: false,
+    topAction: false,
+    emptySource: false,
 };
 Default.argTypes = {
     asset: {
diff --git a/src/__stories__/mosaic-story.tsx b/src/__stories__/mosaic-story.tsx
index 9e1566cfd4..41c49b4919 100644
--- a/src/__stories__/mosaic-story.tsx
+++ b/src/__stories__/mosaic-story.tsx
@@ -45,9 +45,9 @@ VerticalMosaicStory.argTypes = {
     },
 };
 
-type HorizontalMosaicProps = Props & {withBullets: boolean; free: boolean};
+type HorizontalMosaicProps = Props & {bullets: boolean; free: boolean};
 
-export const HorizontalMosaicStory: StoryComponent<HorizontalMosaicProps> = ({items, withBullets, free}) => {
+export const HorizontalMosaicStory: StoryComponent<HorizontalMosaicProps> = ({items, bullets, free}) => {
     return (
         <ResponsiveLayout>
             <Box paddingY={24}>
@@ -58,7 +58,7 @@ export const HorizontalMosaicStory: StoryComponent<HorizontalMosaicProps> = ({it
                     />
                     <HorizontalMosaic
                         items={Array.from({length: items}, (_, index) => renderItem(index + 1))}
-                        withBullets={withBullets}
+                        withBullets={bullets}
                         free={free}
                         dataAttributes={{testid: 'horizontal-mosaic'}}
                     />
@@ -69,7 +69,7 @@ export const HorizontalMosaicStory: StoryComponent<HorizontalMosaicProps> = ({it
 };
 
 HorizontalMosaicStory.storyName = 'HorizontalMosaic';
-HorizontalMosaicStory.args = {items: 3, withBullets: false, free: false};
+HorizontalMosaicStory.args = {items: 3, bullets: false, free: false};
 HorizontalMosaicStory.argTypes = {
     items: {
         control: {type: 'range', min: 1, max: 20, step: 1},
diff --git a/src/__stories__/naked-card-story.tsx b/src/__stories__/naked-card-story.tsx
index 01e69a3b56..09f5e43532 100644
--- a/src/__stories__/naked-card-story.tsx
+++ b/src/__stories__/naked-card-story.tsx
@@ -44,11 +44,11 @@ type Args = {
     title: string;
     subtitle: string;
     description: string;
-    withExtra: boolean;
+    extra: boolean;
     actions: 'button' | 'link' | 'button and link' | 'onPress' | 'href' | 'to' | 'none';
     closable: boolean;
-    withTopAction: boolean;
-    isEmptySource: boolean;
+    topAction: boolean;
+    emptySource: boolean;
 };
 
 export const Default: StoryComponent<Args> = ({
@@ -59,12 +59,12 @@ export const Default: StoryComponent<Args> = ({
     subtitle,
     description,
     actions = 'button',
-    withExtra,
+    extra,
     closable,
-    withTopAction,
+    topAction,
     media,
     asset,
-    isEmptySource,
+    emptySource,
 }) => {
     let icon;
     if (asset === 'circle with icon') {
@@ -107,19 +107,19 @@ export const Default: StoryComponent<Args> = ({
                     description={description}
                     media={
                         media === 'video' ? (
-                            <Video src={isEmptySource ? '' : VIDEO_SRC} aspectRatio="16:9" />
+                            <Video src={emptySource ? '' : VIDEO_SRC} aspectRatio="16:9" />
                         ) : media === 'image' ? (
-                            <Image aspectRatio="16:9" src={isEmptySource ? '' : IMAGE_SRC} />
+                            <Image aspectRatio="16:9" src={emptySource ? '' : IMAGE_SRC} />
                         ) : (
-                            <Image circular src={isEmptySource ? '' : IMAGE_SRC} />
+                            <Image circular src={emptySource ? '' : IMAGE_SRC} />
                         )
                     }
                     icon={icon}
                     {...interactiveActions}
-                    extra={withExtra ? <Placeholder /> : undefined}
+                    extra={extra ? <Placeholder /> : undefined}
                     onClose={closable ? () => {} : undefined}
                     actions={
-                        withTopAction
+                        topAction
                             ? [
                                   {
                                       Icon: IconMobileDeviceRegular,
@@ -159,11 +159,11 @@ Default.args = {
     title: 'Title',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
-    withExtra: false,
+    extra: false,
     actions: 'button',
     closable: false,
-    withTopAction: false,
-    isEmptySource: false,
+    topAction: false,
+    emptySource: false,
 };
 Default.argTypes = {
     asset: {
@@ -189,9 +189,9 @@ type SmallArgs = {
     title: string;
     subtitle: string;
     description: string;
-    withExtra: boolean;
+    extra: boolean;
     touchable: boolean;
-    isEmptySource: boolean;
+    emptySource: boolean;
 };
 
 export const Small: StoryComponent<SmallArgs> = ({
@@ -199,9 +199,9 @@ export const Small: StoryComponent<SmallArgs> = ({
     title,
     subtitle,
     description,
-    withExtra,
+    extra,
     touchable,
-    isEmptySource,
+    emptySource,
 }) => {
     return (
         <ResponsiveLayout>
@@ -210,16 +210,16 @@ export const Small: StoryComponent<SmallArgs> = ({
                     dataAttributes={{testid: 'small-naked-card'}}
                     media={
                         media === 'image' ? (
-                            <Image aspectRatio="16:9" src={isEmptySource ? '' : IMAGE_SRC} />
+                            <Image aspectRatio="16:9" src={emptySource ? '' : IMAGE_SRC} />
                         ) : (
-                            <Image circular src={isEmptySource ? '' : IMAGE_SRC} />
+                            <Image circular src={emptySource ? '' : IMAGE_SRC} />
                         )
                     }
                     title={title}
                     subtitle={subtitle}
                     description={description}
                     onPress={touchable ? () => {} : undefined}
-                    extra={withExtra ? <Placeholder /> : undefined}
+                    extra={extra ? <Placeholder /> : undefined}
                 />
             </Box>
         </ResponsiveLayout>
@@ -232,9 +232,9 @@ Small.args = {
     title: 'Title',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
-    withExtra: false,
+    extra: false,
     touchable: true,
-    isEmptySource: false,
+    emptySource: false,
 };
 Small.argTypes = {
     media: {
diff --git a/src/__stories__/navigation-bar-story.tsx b/src/__stories__/navigation-bar-story.tsx
index b0a5a21679..3c2ecfdef7 100644
--- a/src/__stories__/navigation-bar-story.tsx
+++ b/src/__stories__/navigation-bar-story.tsx
@@ -7,6 +7,8 @@ import {
     IconSearchRegular,
 } from '..';
 
+import type {Variant} from '../theme-variant-context';
+
 export default {
     title: 'Components/Navigation bars/NavigationBar',
     component: NavigationBar,
@@ -15,14 +17,14 @@ export default {
     },
 };
 
-type Args = {isInverse: boolean; withBorder: boolean};
+type Args = {variant: Variant; border: boolean};
 
-export const Default: StoryComponent<Args> = ({isInverse, withBorder}) => {
+export const Default: StoryComponent<Args> = ({variant, border}) => {
     const {isDesktopOrBigger} = useScreenSize();
     return (
         <NavigationBar
-            withBorder={withBorder}
-            isInverse={isInverse}
+            withBorder={border}
+            variant={variant}
             onBack={() => {}}
             title="Settings"
             right={
@@ -40,6 +42,13 @@ export const Default: StoryComponent<Args> = ({isInverse, withBorder}) => {
 Default.storyName = 'NavigationBar';
 
 Default.args = {
-    isInverse: false,
-    withBorder: true,
+    variant: 'default',
+    border: true,
+};
+
+Default.argTypes = {
+    variant: {
+        options: ['default', 'inverse', 'alternative'],
+        control: {type: 'select'},
+    },
 };
diff --git a/src/__stories__/poster-card-story.tsx b/src/__stories__/poster-card-story.tsx
index 7429a31a66..99b52940b5 100644
--- a/src/__stories__/poster-card-story.tsx
+++ b/src/__stories__/poster-card-story.tsx
@@ -42,15 +42,15 @@ type PosterCardArgs = {
     title: string;
     subtitle: string;
     description: string;
-    withExtra: boolean;
+    extra: boolean;
     ariaLabel: string;
     closable: boolean;
     actions: 'onPress' | 'href' | 'to' | 'none';
-    withTopAction: boolean;
+    topAction: boolean;
     width: string;
     height: string;
     aspectRatio: '1:1' | '16:9' | '7:10' | '9:10' | 'auto';
-    isEmptySource: boolean;
+    emptySource: boolean;
     inverse: boolean;
 };
 
@@ -66,15 +66,15 @@ export const Default: StoryComponent<PosterCardArgs> = ({
     title,
     subtitle,
     description,
-    withExtra,
+    extra,
     ariaLabel,
     closable,
     actions,
-    withTopAction,
+    topAction,
     width,
     height,
     aspectRatio,
-    isEmptySource,
+    emptySource,
     inverse,
 }) => {
     let icon;
@@ -90,7 +90,7 @@ export const Default: StoryComponent<PosterCardArgs> = ({
 
     const topActionsProps = {
         onClose: closable ? () => {} : undefined,
-        actions: withTopAction
+        actions: topAction
             ? [
                   {
                       Icon: IconLightningRegular,
@@ -116,12 +116,12 @@ export const Default: StoryComponent<PosterCardArgs> = ({
         background === 'image'
             ? {
                   ...topActionsProps,
-                  backgroundImage: isEmptySource ? '' : BACKGROUND_IMAGE_SRC,
+                  backgroundImage: emptySource ? '' : BACKGROUND_IMAGE_SRC,
               }
             : background === 'video'
               ? {
-                    backgroundVideo: isEmptySource ? '' : BACKGROUND_VIDEO_SRC,
-                    poster: isEmptySource ? '' : BACKGROUND_VIDEO_POSTER_SRC,
+                    backgroundVideo: emptySource ? '' : BACKGROUND_VIDEO_SRC,
+                    poster: emptySource ? '' : BACKGROUND_VIDEO_POSTER_SRC,
                 }
               : {
                     ...topActionsProps,
@@ -147,7 +147,7 @@ export const Default: StoryComponent<PosterCardArgs> = ({
                     title={title}
                     subtitle={subtitle}
                     description={description}
-                    extra={withExtra ? <Placeholder /> : undefined}
+                    extra={extra ? <Placeholder /> : undefined}
                     aria-label={ariaLabel}
                     width={width}
                     height={height}
@@ -172,15 +172,15 @@ Default.args = {
     title: 'Title',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
-    withExtra: false,
+    extra: false,
     ariaLabel: '',
     closable: false,
     actions: 'none',
-    withTopAction: false,
+    topAction: false,
     width: 'auto',
     height: 'auto',
     aspectRatio: 'auto',
-    isEmptySource: false,
+    emptySource: false,
     inverse: false,
 };
 
diff --git a/src/__stories__/responsive-layout-story.tsx b/src/__stories__/responsive-layout-story.tsx
index d17dc9e37d..efbfe7e45b 100644
--- a/src/__stories__/responsive-layout-story.tsx
+++ b/src/__stories__/responsive-layout-story.tsx
@@ -7,22 +7,17 @@ export default {
     parameters: {
         fullScreen: true,
     },
-    argTypes: {
-        withBackgroundColor: {
-            name: 'backgroundColor={colors.backgroundAlternative}',
-        },
-    },
 };
 
 type Args = {
-    isInverse: boolean;
-    withBackgroundColor: boolean;
+    inverse: boolean;
+    backgroundColor: 'undefined' | 'backgroundAlternative';
 };
 
-export const Default: StoryComponent<Args> = ({isInverse, withBackgroundColor}) => (
+export const Default: StoryComponent<Args> = ({inverse, backgroundColor}) => (
     <ResponsiveLayout
-        isInverse={isInverse}
-        backgroundColor={withBackgroundColor ? skinVars.colors.backgroundAlternative : undefined}
+        isInverse={inverse}
+        backgroundColor={backgroundColor === 'undefined' ? undefined : skinVars.colors[backgroundColor]}
     >
         <Placeholder />
     </ResponsiveLayout>
@@ -31,8 +26,15 @@ export const Default: StoryComponent<Args> = ({isInverse, withBackgroundColor})
 Default.storyName = 'Responsive layout';
 
 Default.args = {
-    isInverse: false,
-    withBackgroundColor: false,
+    inverse: false,
+    backgroundColor: 'undefined',
+};
+
+Default.argTypes = {
+    backgroundColor: {
+        options: ['undefined', 'backgroundAlternative'],
+        control: {type: 'select'},
+    },
 };
 
 export const Nested: StoryComponent = () => (
diff --git a/src/__stories__/sheet-story.tsx b/src/__stories__/sheet-story.tsx
index 937f22d4a9..e4518e373c 100644
--- a/src/__stories__/sheet-story.tsx
+++ b/src/__stories__/sheet-story.tsx
@@ -349,7 +349,7 @@ type ActionsSheetArgs = SheetArgs & {
     buttonText: string;
     secondaryButtonText: string;
     buttonLinkText: string;
-    withChevron: boolean;
+    chevron: boolean;
 };
 
 export const Actions: StoryComponent<ActionsSheetArgs> = ({
@@ -360,7 +360,7 @@ export const Actions: StoryComponent<ActionsSheetArgs> = ({
     buttonText,
     secondaryButtonText,
     buttonLinkText,
-    withChevron,
+    chevron,
 }) => {
     const [open, setOpen] = React.useState(false);
     const [pressedButton, setPressedButton] = React.useState<string | null>(null);
@@ -411,7 +411,7 @@ export const Actions: StoryComponent<ActionsSheetArgs> = ({
                         buttonLinkText
                             ? {
                                   text: buttonLinkText,
-                                  withChevron,
+                                  withChevron: chevron,
                               }
                             : undefined
                     }
@@ -430,10 +430,10 @@ Actions.args = {
     buttonText: 'Button',
     secondaryButtonText: 'Secondary button',
     buttonLinkText: 'Link',
-    withChevron: false,
+    chevron: false,
 };
 Actions.argTypes = {
-    withChevron: {
+    chevron: {
         control: {type: 'boolean'},
         if: {arg: 'buttonLinkText'},
     },
diff --git a/src/__stories__/slideshow-story.tsx b/src/__stories__/slideshow-story.tsx
index 0215ca49c6..9c1e9aafc7 100644
--- a/src/__stories__/slideshow-story.tsx
+++ b/src/__stories__/slideshow-story.tsx
@@ -22,9 +22,9 @@ export default {
     title: 'Components/Carousels/Slideshow',
 };
 
-type Args = {numItems: number; autoplay: boolean; loop: boolean; withBullets: boolean};
+type Args = {numItems: number; autoplay: boolean; loop: boolean; bullets: boolean};
 
-export const Default: StoryComponent<Args> = ({numItems, autoplay, loop, withBullets}) => {
+export const Default: StoryComponent<Args> = ({numItems, autoplay, loop, bullets}) => {
     const [currentPage, setCurrentPage] = React.useState<number>(0);
     return (
         <Box paddingY={24}>
@@ -35,7 +35,7 @@ export const Default: StoryComponent<Args> = ({numItems, autoplay, loop, withBul
                         icon={<IconInformationRegular />}
                     />
                     <Slideshow
-                        withBullets={withBullets}
+                        withBullets={bullets}
                         autoplay={autoplay ? {time: 5000, loop} : false}
                         onPageChange={setCurrentPage}
                         items={Array.from({length: numItems}, (_, idx) => (
@@ -58,7 +58,7 @@ Default.args = {
     numItems: 6,
     autoplay: false,
     loop: false,
-    withBullets: true,
+    bullets: true,
 };
 
 type WithCarouselContextArgs = {numItems: number};
diff --git a/src/__stories__/snackbar-story.tsx b/src/__stories__/snackbar-story.tsx
index 32ac196fc1..77a319e5a2 100644
--- a/src/__stories__/snackbar-story.tsx
+++ b/src/__stories__/snackbar-story.tsx
@@ -11,16 +11,16 @@ type Args = {
     message: string;
     duration: string;
     type: React.ComponentProps<typeof Snackbar>['type'];
-    withDismiss: boolean;
+    dismiss: boolean;
 };
 
-export const Default: StoryComponent<Args> = ({buttonText, message, duration, type, withDismiss}) => {
+export const Default: StoryComponent<Args> = ({buttonText, message, duration, type, dismiss}) => {
     const snackbarDuration = duration !== 'Default' ? +duration : undefined;
     const {openSnackbar} = useSnackbar();
     return (
         <ButtonPrimary
             onPress={() => {
-                openSnackbar({message, type, buttonText, duration: snackbarDuration, withDismiss});
+                openSnackbar({message, type, buttonText, duration: snackbarDuration, withDismiss: dismiss});
             }}
         >
             Open Snackbar
@@ -34,7 +34,7 @@ Default.args = {
     type: 'INFORMATIVE',
     message: 'Some message',
     buttonText: 'Action',
-    withDismiss: false,
+    dismiss: false,
     duration: 'Default',
 };
 
diff --git a/src/__stories__/snap-card-story.tsx b/src/__stories__/snap-card-story.tsx
index 3c39d4d700..1126e693a1 100644
--- a/src/__stories__/snap-card-story.tsx
+++ b/src/__stories__/snap-card-story.tsx
@@ -26,8 +26,8 @@ type Args = {
     subtitle: string;
     description: string;
     actions: 'onPress' | 'href' | 'to' | 'none';
-    isInverse: boolean;
-    withExtra: boolean;
+    inverse: boolean;
+    extra: boolean;
     aspectRatio: AspectRatio;
 };
 
@@ -39,8 +39,8 @@ export const Default: StoryComponent<Args> = ({
     subtitle,
     description,
     actions,
-    isInverse,
-    withExtra,
+    inverse,
+    extra,
     aspectRatio,
 }) => {
     const assetToIcon: {
@@ -51,11 +51,9 @@ export const Default: StoryComponent<Args> = ({
         'icon in circle': (
             <Circle
                 size={40}
-                backgroundColor={isInverse ? skinVars.colors.brandHigh : skinVars.colors.brandLow}
+                backgroundColor={inverse ? skinVars.colors.brandHigh : skinVars.colors.brandLow}
             >
-                <IconMobileDeviceRegular
-                    color={isInverse ? skinVars.colors.inverse : skinVars.colors.brand}
-                />
+                <IconMobileDeviceRegular color={inverse ? skinVars.colors.inverse : skinVars.colors.brand} />
             </Circle>
         ),
         none: undefined,
@@ -79,8 +77,8 @@ export const Default: StoryComponent<Args> = ({
             description={description}
             dataAttributes={{testid: 'snap-card'}}
             aria-label="SnapCard card label"
-            isInverse={isInverse}
-            extra={withExtra ? <Placeholder /> : undefined}
+            isInverse={inverse}
+            extra={extra ? <Placeholder /> : undefined}
             aspectRatio={aspectRatioValue as AspectRatio}
             {...interactiveProps}
         />
@@ -94,8 +92,8 @@ Default.args = {
     subtitle: 'Some subtitle',
     description: 'Description',
     actions: 'none',
-    isInverse: false,
-    withExtra: false,
+    inverse: false,
+    extra: false,
     aspectRatio: 'auto',
 };
 Default.argTypes = {
diff --git a/src/__stories__/success-feedback-story.tsx b/src/__stories__/success-feedback-story.tsx
index 7536609270..9c7a10c176 100644
--- a/src/__stories__/success-feedback-story.tsx
+++ b/src/__stories__/success-feedback-story.tsx
@@ -24,7 +24,7 @@ type SuccessArgs = {
     imageUrl: string | null;
     imageFit: 'fit' | 'fill';
     multipleParagraphs: boolean;
-    withButtons: boolean;
+    buttons: boolean;
     extra?: boolean;
 };
 
@@ -39,7 +39,7 @@ export const Success: StoryComponent<SuccessArgs> = ({
     imageUrl,
     imageFit,
     multipleParagraphs,
-    withButtons,
+    buttons,
     extra,
 }) => (
     <SuccessFeedback
@@ -47,8 +47,8 @@ export const Success: StoryComponent<SuccessArgs> = ({
         description={
             multipleParagraphs ? [defaultDescription, 'paragraph 2', 'paragraph 3'] : defaultDescription
         }
-        primaryButton={withButtons ? primaryButton : undefined}
-        secondaryButton={withButtons ? secondaryButton : undefined}
+        primaryButton={buttons ? primaryButton : undefined}
+        secondaryButton={buttons ? secondaryButton : undefined}
         imageUrl={imageUrl ?? undefined}
         imageFit={imageFit}
         extra={extra ? <Placeholder /> : undefined}
@@ -59,7 +59,7 @@ Success.args = {
     imageUrl: emptyStateImg,
     imageFit: 'fit',
     multipleParagraphs: false,
-    withButtons: true,
+    buttons: true,
     extra: false,
 };
 
@@ -67,7 +67,7 @@ export const SuccessAsHeader: StoryComponent<SuccessArgs> = ({
     imageUrl,
     imageFit,
     multipleParagraphs,
-    withButtons,
+    buttons,
     extra,
 }) => {
     const {isTabletOrSmaller} = useScreenSize();
@@ -77,8 +77,8 @@ export const SuccessAsHeader: StoryComponent<SuccessArgs> = ({
             description={
                 multipleParagraphs ? [defaultDescription, 'paragraph 2', 'paragraph 3'] : defaultDescription
             }
-            primaryButton={withButtons ? primaryButton : undefined}
-            secondaryButton={withButtons ? secondaryButton : undefined}
+            primaryButton={buttons ? primaryButton : undefined}
+            secondaryButton={buttons ? secondaryButton : undefined}
             imageUrl={imageUrl ?? undefined}
             imageFit={imageFit}
             extra={extra ? <Placeholder /> : undefined}
@@ -101,6 +101,6 @@ SuccessAsHeader.args = {
     imageUrl: emptyStateImg,
     imageFit: 'fit',
     multipleParagraphs: false,
-    withButtons: true,
+    buttons: true,
     extra: false,
 };
diff --git a/src/__stories__/table-story.tsx b/src/__stories__/table-story.tsx
index 161ae9612a..7afde7329d 100644
--- a/src/__stories__/table-story.tsx
+++ b/src/__stories__/table-story.tsx
@@ -45,9 +45,9 @@ type Args = {
     columnTextAlign: Array<'left' | 'right' | 'center'>;
     rowVerticalAlign: 'top' | 'middle';
     columnWidth: Array<number | string>;
-    withActions: boolean;
+    actions: boolean;
     hideHeaders: 'true' | 'false' | 'mobile' | 'desktop';
-    withRowHeader: boolean;
+    rowHeader: boolean;
     rowHeaderIndex: number;
 };
 
@@ -63,9 +63,9 @@ export const Default: StoryComponent<Args> = ({
     columnTextAlign,
     rowVerticalAlign,
     columnWidth,
-    withActions,
+    actions,
     hideHeaders,
-    withRowHeader,
+    rowHeader,
     rowHeaderIndex,
 }) => {
     return (
@@ -87,9 +87,9 @@ export const Default: StoryComponent<Args> = ({
                     columnTextAlign={columnTextAlign}
                     columnWidth={columnWidth}
                     rowVerticalAlign={rowVerticalAlign}
-                    rowHeaderIndex={withRowHeader ? rowHeaderIndex : undefined}
+                    rowHeaderIndex={rowHeader ? rowHeaderIndex : undefined}
                     content={foodList.slice(0, numItems).map((row, index) => {
-                        const actionsCount = withActions ? (index + 1) % 3 : 0;
+                        const actionsCount = actions ? (index + 1) % 3 : 0;
                         return actionsCount === 0
                             ? row
                             : {
@@ -127,9 +127,9 @@ Default.args = {
     columnTextAlign: ['left', 'right', 'right', 'right', 'center', 'right'],
     rowVerticalAlign: 'middle',
     columnWidth: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
-    withActions: false,
+    actions: false,
     hideHeaders: 'false',
-    withRowHeader: false,
+    rowHeader: false,
     rowHeaderIndex: 0,
 };
 Default.argTypes = {
@@ -151,5 +151,5 @@ Default.argTypes = {
         options: ['false', 'true', 'mobile', 'desktop'],
         control: {type: 'select'},
     },
-    rowHeaderIndex: {if: {arg: 'withRowHeader'}},
+    rowHeaderIndex: {if: {arg: 'rowHeader'}},
 };
diff --git a/src/__stories__/video-story.tsx b/src/__stories__/video-story.tsx
index e8fcd419e7..e36cda61f8 100644
--- a/src/__stories__/video-story.tsx
+++ b/src/__stories__/video-story.tsx
@@ -48,8 +48,8 @@ type Args = {
     height: number;
     aspectRatio: string;
     autoPlay: boolean;
-    withPoster: boolean;
-    isEmptySource: boolean;
+    poster: boolean;
+    emptySource: boolean;
 };
 
 export const Default: StoryComponent<Args> = ({
@@ -58,8 +58,8 @@ export const Default: StoryComponent<Args> = ({
     height,
     aspectRatio,
     autoPlay,
-    withPoster,
-    isEmptySource,
+    poster,
+    emptySource,
 }) => {
     const videoRef = React.useRef<VideoElement>(null);
 
@@ -72,12 +72,12 @@ export const Default: StoryComponent<Args> = ({
                     ? 0
                     : (aspectRatio.replace(' ', ':') as AspectRatio)
                 : undefined,
-        poster: withPoster ? POSTER_SRC : undefined,
+        poster: poster ? POSTER_SRC : undefined,
         autoPlay,
         dataAttributes: {testid: 'video'},
     };
 
-    const video = <Video src={!isEmptySource ? VIDEO_SRC : ''} {...props} ref={videoRef} />;
+    const video = <Video src={!emptySource ? VIDEO_SRC : ''} {...props} ref={videoRef} />;
 
     return (
         <Stack space={32}>
@@ -139,6 +139,6 @@ Default.args = {
     height: 420,
     aspectRatio: '1 1',
     autoPlay: true,
-    withPoster: true,
-    isEmptySource: false,
+    poster: true,
+    emptySource: false,
 };
diff --git a/src/inline.css.ts b/src/inline.css.ts
index cf6d9f3bc6..34876b996c 100644
--- a/src/inline.css.ts
+++ b/src/inline.css.ts
@@ -74,6 +74,12 @@ export const stringSpace = style({
     justifyContent: space,
 });
 
+export const stringSpaceWithWrap = style({
+    // if we use display: grid, the content doesn't wrap
+    display: 'flex',
+    justifyContent: space,
+});
+
 globalStyle(`${marginInline} > div`, {
     marginLeft: space,
     marginTop: space,
diff --git a/src/inline.tsx b/src/inline.tsx
index 8f7ab24aee..f18a808316 100644
--- a/src/inline.tsx
+++ b/src/inline.tsx
@@ -72,7 +72,7 @@ const Inline: React.FC<Props> = ({
                 styles.inline,
                 sprinkles({alignItems}),
                 wrap ? styles.wrap : fullWidth ? styles.fullWidth : styles.noFullWidth,
-                isStringSpace ? styles.stringSpace : styles.marginInline
+                isStringSpace ? (wrap ? styles.stringSpaceWithWrap : styles.stringSpace) : styles.marginInline
             )}
             style={applyCssVars(calcInlineVars(space))}
             role={role}
diff --git a/src/navigation-bar.tsx b/src/navigation-bar.tsx
index 116f870e30..e965cd059c 100644
--- a/src/navigation-bar.tsx
+++ b/src/navigation-bar.tsx
@@ -27,6 +27,7 @@ import Stack from './stack';
 import Box from './box';
 import {isRunningAcceptanceTest} from './utils/platform';
 
+import type {Variant} from './theme-variant-context';
 import type {TouchableProps} from './touchable';
 import type {DataAttributes, HeadingType} from './utils/types';
 
@@ -48,6 +49,8 @@ const BURGER_MENU_ANIMATION_DURATION_MS = 300;
 type HeaderProps = {
     children: React.ReactNode;
     topFixed?: boolean;
+    variant?: Variant;
+    /** @deprecated Use variant instead */
     isInverse?: boolean;
     withBorder?: boolean;
     isMenuOpen?: boolean;
@@ -55,22 +58,38 @@ type HeaderProps = {
     isBottomRow?: boolean;
 };
 
-const Header = ({children, topFixed, withBorder, isMenuOpen, isInverse, dataAttributes}: HeaderProps) => {
+const Header = ({
+    children,
+    topFixed,
+    withBorder,
+    isMenuOpen,
+    variant,
+    isInverse,
+    dataAttributes,
+}: HeaderProps) => {
     const {isDarkMode} = useTheme();
 
+    const headerVariant = variant ?? (isInverse ? 'inverse' : 'default');
+
     const getBorderClass = () => {
-        const inverse = isInverse && !isDarkMode;
+        const inverse = headerVariant === 'inverse' && !isDarkMode;
         if (inverse || !withBorder) return styles.navbarBorderColorVariants.noBorder;
         if (isMenuOpen) return styles.navbarBorderColorVariants.menuOpen;
 
         return styles.navbarBorderColorVariants.default;
     };
 
+    const backgroundColor: {[key in Variant]: string} = {
+        default: vars.colors.background,
+        inverse: vars.colors.navigationBarBackground,
+        alternative: vars.colors.backgroundAlternative,
+    };
+
     return (
         <header
             className={classnames(getBorderClass(), {[styles.topFixed]: topFixed})}
             style={{
-                background: isInverse ? vars.colors.navigationBarBackground : vars.colors.background,
+                background: backgroundColor[headerVariant],
             }}
             {...getPrefixedDataAttributes(dataAttributes)}
         >
@@ -108,6 +127,8 @@ type MainNavigationBarPropsBase = {
     selectedIndex?: number;
     right?: React.ReactElement;
     logo?: React.ReactElement;
+    variant?: Variant;
+    /** @deprecated Use variant instead */
     isInverse?: boolean;
     children?: undefined;
     topFixed?: boolean;
@@ -124,6 +145,7 @@ export const MainNavigationBar: React.FC<MainNavigationBarProps> = ({
     sections = [],
     selectedIndex,
     right,
+    variant,
     isInverse = false,
     topFixed = true,
     withBorder = true,
@@ -152,10 +174,13 @@ export const MainNavigationBar: React.FC<MainNavigationBarProps> = ({
                             className={classnames(
                                 styles.section,
                                 {
-                                    [styles.selectedSectionVariantes[isInverse ? 'inverse' : 'default']]:
-                                        idx === selectedIndex,
+                                    [styles.selectedSectionVariantes[
+                                        variant === 'inverse' || isInverse ? 'inverse' : 'default'
+                                    ]]: idx === selectedIndex,
                                 },
-                                styles.textWrapperVariants[isInverse ? 'inverse' : 'default']
+                                styles.textWrapperVariants[
+                                    variant === 'inverse' || isInverse ? 'inverse' : 'default'
+                                ]
                             )}
                         >
                             <Text3 regular color="inherit">
@@ -185,11 +210,12 @@ export const MainNavigationBar: React.FC<MainNavigationBarProps> = ({
     const showBurger = sections.length > 1;
 
     const mainNavBar = (
-        <ThemeVariant isInverse={isInverse}>
+        <ThemeVariant variant={variant} isInverse={isInverse}>
             <Header
                 topFixed={topFixed}
                 withBorder={withBorder}
                 isMenuOpen={isMenuOpen}
+                variant={variant}
                 isInverse={isInverse}
                 dataAttributes={{'component-name': 'MainNavigationBar'}}
             >
@@ -300,7 +326,9 @@ export const MainNavigationBar: React.FC<MainNavigationBarProps> = ({
 };
 
 interface NavigationBarCommonProps {
+    /** @deprecated Use variant instead */
     isInverse?: boolean;
+    variant?: Variant;
     onBack?: () => void;
     title?: string;
     titleAs?: HeadingType;
@@ -326,6 +354,7 @@ export const NavigationBar: React.FC<NavigationBarProps> = ({
     title,
     titleAs,
     right,
+    variant,
     isInverse = false,
     topFixed = true,
     paddingX = 0,
@@ -351,10 +380,11 @@ export const NavigationBar: React.FC<NavigationBarProps> = ({
         </NavigationBarContentContainer>
     );
     return (
-        <ThemeVariant isInverse={isInverse}>
+        <ThemeVariant variant={variant} isInverse={isInverse}>
             <Header
                 topFixed={topFixed}
                 withBorder={withBorder}
+                variant={variant}
                 isInverse={isInverse}
                 dataAttributes={{'component-name': 'NavigationBar'}}
             >
@@ -379,6 +409,8 @@ export const NavigationBar: React.FC<NavigationBarProps> = ({
 };
 
 type FunnelNavigationBarProps = {
+    variant?: Variant;
+    /** @deprecated Use variant instead */
     isInverse?: boolean;
     logo?: React.ReactElement;
     right?: React.ReactElement;
@@ -390,6 +422,7 @@ type FunnelNavigationBarProps = {
 export const FunnelNavigationBar: React.FC<FunnelNavigationBarProps> = ({
     logo,
     right,
+    variant,
     isInverse = false,
     topFixed = true,
     withBorder = true,
@@ -397,10 +430,11 @@ export const FunnelNavigationBar: React.FC<FunnelNavigationBarProps> = ({
     logo = logo ?? <Logo size={{mobile: 40, desktop: 48}} />;
 
     return (
-        <ThemeVariant isInverse={isInverse}>
+        <ThemeVariant variant={variant} isInverse={isInverse}>
             <Header
                 topFixed={topFixed}
                 withBorder={withBorder}
+                variant={variant}
                 isInverse={isInverse}
                 dataAttributes={{'component-name': 'FunnelNavigationBar'}}
             >
diff --git a/src/package-version.tsx b/src/package-version.tsx
index 22831336d8..75b96d4de7 100644
--- a/src/package-version.tsx
+++ b/src/package-version.tsx
@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '15.17.0' as string;
+export const PACKAGE_VERSION = '15.18.0' as string;
diff --git a/src/text.tsx b/src/text.tsx
index d4c73b089c..5addf4d3a1 100644
--- a/src/text.tsx
+++ b/src/text.tsx
@@ -41,25 +41,51 @@ const vivinhoForScreenReaders = (
     </>
 );
 
-const makeVivinhoCharReadableForScreenReaders = (children: React.ReactNode): React.ReactNode => {
-    return React.Children.map(children, (child) => {
-        if (typeof child !== 'string') {
-            return child;
-        }
-        if (!child.includes(VIVINHO_CHAR)) {
-            return child;
-        }
-        return (
-            <>
-                {child.split(VIVINHO_CHAR).map((segment, idx) => (
-                    <React.Fragment key={idx}>
-                        {idx > 0 && vivinhoForScreenReaders}
-                        {segment}
-                    </React.Fragment>
-                ))}
-            </>
-        );
-    });
+const makeVivinhoCharReadableForScreenReaders = ({
+    children,
+    ariaLabel,
+    as,
+}: {
+    children: React.ReactNode;
+    ariaLabel?: string;
+    as?: React.ComponentType<any> | string;
+}) => {
+    // When the Text is a heading (<hx>), we set an aria-label replacing the vivinho char with "Vivo" for
+    // screen readers and hide the original text.
+    // If we used the generic solution, Safari/iOS VoiceOver would read "Vivo" as a separated heading
+    if (
+        typeof as === 'string' &&
+        ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as) &&
+        typeof children === 'string' &&
+        children.includes(VIVINHO_CHAR)
+    ) {
+        return {
+            ariaLabel: children.replace(new RegExp(VIVINHO_CHAR, 'g'), 'Vivo'),
+            children: <span aria-hidden>{children}</span>,
+        };
+    }
+
+    return {
+        children: React.Children.map(children, (child) => {
+            if (typeof child !== 'string') {
+                return child;
+            }
+            if (!child.includes(VIVINHO_CHAR)) {
+                return child;
+            }
+            return (
+                <>
+                    {child.split(VIVINHO_CHAR).map((segment, idx) => (
+                        <React.Fragment key={idx}>
+                            {idx > 0 && vivinhoForScreenReaders}
+                            {segment}
+                        </React.Fragment>
+                    ))}
+                </>
+            );
+        }),
+        ariaLabel,
+    };
 };
 
 export interface TextPresetProps {
@@ -75,6 +101,7 @@ export interface TextPresetProps {
     as?: React.ComponentType<any> | string;
     role?: string;
     'aria-level'?: number;
+    'aria-label'?: string;
     dataAttributes?: DataAttributes;
     forceMobileSizes?: boolean;
     textShadow?: string;
@@ -121,6 +148,7 @@ export const Text: React.FC<TextProps> = ({
     id,
     role,
     'aria-level': ariaLevel,
+    'aria-label': ariaLabel,
     dataAttributes,
 }) => {
     const {skinName} = useTheme();
@@ -154,6 +182,10 @@ export const Text: React.FC<TextProps> = ({
           })
         : {};
 
+    if (skinName === VIVO_NEW_SKIN) {
+        ({ariaLabel, children} = makeVivinhoCharReadableForScreenReaders({children, ariaLabel, as}));
+    }
+
     return React.createElement(
         as,
         {
@@ -161,6 +193,7 @@ export const Text: React.FC<TextProps> = ({
             id,
             role,
             'aria-level': ariaLevel,
+            'aria-label': ariaLabel,
             ...getPrefixedDataAttributes(dataAttributes, 'Text'),
             style: {
                 ...sizeVars,
@@ -179,7 +212,7 @@ export const Text: React.FC<TextProps> = ({
                 whiteSpace: as === 'pre' ? undefined : 'pre-line',
             },
         },
-        skinName === VIVO_NEW_SKIN ? makeVivinhoCharReadableForScreenReaders(children) : children
+        children
     );
 };