diff --git a/packages/orbit-components/src/Stack/Stack.stories.tsx b/packages/orbit-components/src/Stack/Stack.stories.tsx
index 1181fb3e53..a54be1f985 100644
--- a/packages/orbit-components/src/Stack/Stack.stories.tsx
+++ b/packages/orbit-components/src/Stack/Stack.stories.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import { DIRECTIONS, ALIGNS, SPACINGS, JUSTIFY } from "../utils/layout/consts";
@@ -37,845 +38,355 @@ import ChoiceGroup from "../ChoiceGroup";
 
 import Stack from ".";
 
-export default {
+const meta: Meta<typeof Stack> = {
   title: "Stack",
-};
-
-export const Default = () => (
-  <Stack>
-    <Button type="primary" iconLeft={<Airplane />}>
-      Button
-    </Button>
-    <Button type="secondary">Button</Button>
-  </Stack>
-);
-
-Default.story = {
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-  },
-};
-
-export const MobileProperties = ({
-  inline,
-  direction,
-  wrap,
-  grow,
-  shrink,
-  basis,
-  align,
-  justify,
-  spacing,
-  spaceAfter,
-}) => {
-  return (
-    <Stack
-      inline={inline}
-      direction={direction}
-      wrap={wrap}
-      shrink={shrink}
-      grow={grow}
-      basis={basis}
-      align={align}
-      justify={justify}
-      spacing={spacing}
-      spaceAfter={spaceAfter}
-    >
-      <Button type="primary" iconLeft={<Airplane />}>
-        Button
-      </Button>
-      <Button type="secondary">Button</Button>
-    </Stack>
-  );
-};
-
-MobileProperties.story = {
-  name: "Mobile properties",
-
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+  component: Stack,
+
+  args: {
+    inline: false,
+    direction: undefined,
+    wrap: false,
+    grow: true,
+    shrink: false,
+    basis: "auto",
+    align: ALIGNS.END,
+    justify: undefined,
+    spacing: undefined,
+    spaceAfter: undefined,
   },
-};
-
-MobileProperties.args = {
-  inline: false,
-  direction: DIRECTIONS.ROW,
-  wrap: false,
-  grow: true,
-  shrink: false,
-  basis: "auto",
-  align: ALIGNS.START,
-  justify: JUSTIFY.START,
-  spacing: SPACINGS.NONE,
-  spaceAfter: undefined,
-};
 
-MobileProperties.argTypes = {
-  direction: {
-    options: Object.values(DIRECTIONS),
-    control: {
-      type: "select",
+  argTypes: {
+    direction: {
+      options: Object.values(DIRECTIONS),
+      control: {
+        type: "select",
+      },
     },
-  },
-  align: {
-    options: Object.values(ALIGNS),
-    control: {
-      type: "select",
+    align: {
+      options: Object.values(ALIGNS),
+      control: {
+        type: "select",
+      },
     },
-  },
-  justify: {
-    options: Object.values(JUSTIFY),
-    control: {
-      type: "select",
+    justify: {
+      options: Object.values(JUSTIFY),
+      control: {
+        type: "select",
+      },
     },
-  },
-  spacing: {
-    options: Object.values(SPACINGS),
-    control: {
-      type: "select",
+    spacing: {
+      options: Object.values(SPACINGS),
+      control: {
+        type: "select",
+      },
     },
-  },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
+    spaceAfter: {
+      options: Object.values(SPACINGS_AFTER),
+      control: {
+        type: "select",
+      },
     },
   },
 };
 
-export const MediumMobileProperties = ({
-  inline,
-  direction,
-  wrap,
-  grow,
-  shrink,
-  basis,
-  align,
-  justify,
-  spacing,
-  spaceAfter,
-}) => {
-  const mediumMobile = {
-    inline,
-    direction,
-    wrap,
-    grow,
-    shrink,
-    basis,
-    align,
-    justify,
-    spacing,
-    spaceAfter,
-  };
+export default meta;
+type Story = StoryObj<typeof Stack>;
 
-  return (
-    <Stack mediumMobile={mediumMobile}>
-      <InputField type="password" label="Password" help="You need some help!" />
-      <Button>Sign In</Button>
+export const Default: Story = {
+  render: () => (
+    <Stack>
+      <Button type="primary" iconLeft={<Airplane />}>
+        Button
+      </Button>
+      <Button type="secondary">Button</Button>
     </Stack>
-  );
-};
-
-MediumMobileProperties.story = {
-  name: "MediumMobile properties",
+  ),
 
   parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    info: "This is the default configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.",
+    controls: {
+      disable: true,
+    },
   },
 };
 
-MediumMobileProperties.args = {
-  inline: false,
-  direction: undefined,
-  wrap: false,
-  grow: true,
-  shrink: false,
-  basis: "auto",
-  align: ALIGNS.END,
-  justify: undefined,
-  spacing: undefined,
-  spaceAfter: undefined,
-};
+export const MobileProperties: Story = {
+  render: args => (
+    <Stack {...args}>
+      <Button type="primary" iconLeft={<Airplane />}>
+        Button
+      </Button>
+      <Button type="secondary">Button</Button>
+    </Stack>
+  ),
 
-MediumMobileProperties.argTypes = {
-  direction: {
-    options: Object.values(DIRECTIONS),
-    control: {
-      type: "select",
-    },
-  },
-  align: {
-    options: Object.values(ALIGNS),
-    control: {
-      type: "select",
-    },
-  },
-  justify: {
-    options: Object.values(JUSTIFY),
-    control: {
-      type: "select",
-    },
-  },
-  spacing: {
-    options: Object.values(SPACINGS),
-    control: {
-      type: "select",
-    },
-  },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
-    },
+  args: {
+    direction: DIRECTIONS.ROW,
+    align: ALIGNS.START,
+    justify: JUSTIFY.START,
+    spacing: SPACINGS.NONE,
   },
 };
 
-export const LargeMobileProperties = ({
-  inline,
-  direction,
-  wrap,
-  grow,
-  shrink,
-  basis,
-  align,
-  justify,
-  spacing,
-  spaceAfter,
-}) => {
-  const largeMobile = {
-    inline,
-    direction,
-    wrap,
-    grow,
-    shrink,
-    basis,
-    align,
-    justify,
-    spacing,
-    spaceAfter,
-  };
-
-  return (
-    <Stack largeMobile={largeMobile}>
+export const MediumMobileProperties: Story = {
+  render: args => (
+    <Stack mediumMobile={{ ...args }}>
       <InputField type="password" label="Password" help="You need some help!" />
       <Button>Sign In</Button>
     </Stack>
-  );
-};
-
-LargeMobileProperties.story = {
-  name: "LargeMobile properties",
-
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-  },
-};
-
-LargeMobileProperties.args = {
-  inline: false,
-  direction: undefined,
-  wrap: false,
-  grow: true,
-  shrink: false,
-  basis: "auto",
-  align: ALIGNS.END,
-  justify: undefined,
-  spacing: undefined,
-  spaceAfter: undefined,
-};
+  ),
 
-LargeMobileProperties.argTypes = {
-  direction: {
-    options: Object.values(DIRECTIONS),
-    control: {
-      type: "select",
-    },
-  },
-  align: {
-    options: Object.values(ALIGNS),
-    control: {
-      type: "select",
-    },
-  },
-  justify: {
-    options: Object.values(JUSTIFY),
-    control: {
-      type: "select",
-    },
-  },
-  spacing: {
-    options: Object.values(SPACINGS),
-    control: {
-      type: "select",
-    },
-  },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
-    },
+  args: {
+    direction: DIRECTIONS.COLUMN,
   },
 };
 
-export const TabletProperties = ({
-  inline,
-  direction,
-  spaceAfter,
-  wrap,
-  grow,
-  shrink,
-  basis,
-  align,
-  justify,
-  spacing,
-}) => {
-  const tablet = {
-    inline,
-    direction,
-    spaceAfter,
-    wrap,
-    grow,
-    shrink,
-    basis,
-    align,
-    justify,
-    spacing,
-  };
-
-  return (
-    <Stack tablet={tablet}>
+export const LargeMobileProperties: Story = {
+  render: args => (
+    <Stack largeMobile={{ ...args }}>
       <InputField type="password" label="Password" help="You need some help!" />
       <Button>Sign In</Button>
     </Stack>
-  );
+  ),
 };
 
-TabletProperties.story = {
-  name: "Tablet properties",
-
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-  },
-};
-
-TabletProperties.args = {
-  inline: false,
-  direction: undefined,
-  wrap: false,
-  grow: true,
-  shrink: false,
-  basis: "auto",
-  align: ALIGNS.END,
-  justify: undefined,
-  spacing: undefined,
-  spaceAfter: undefined,
-};
-
-TabletProperties.argTypes = {
-  direction: {
-    options: Object.values(DIRECTIONS),
-    control: {
-      type: "select",
-    },
-  },
-  align: {
-    options: Object.values(ALIGNS),
-    control: {
-      type: "select",
-    },
-  },
-  justify: {
-    options: Object.values(JUSTIFY),
-    control: {
-      type: "select",
-    },
-  },
-  spacing: {
-    options: Object.values(SPACINGS),
-    control: {
-      type: "select",
-    },
-  },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
-    },
-  },
-};
-
-export const DesktopProperties = ({
-  inline,
-  direction,
-  wrap,
-  grow,
-  shrink,
-  basis,
-  align,
-  justify,
-  spacing,
-  spaceAfter,
-}) => {
-  const desktop = {
-    inline,
-    direction,
-    wrap,
-    grow,
-    shrink,
-    basis,
-    align,
-    justify,
-    spacing,
-    spaceAfter,
-  };
-
-  return (
-    <Stack desktop={desktop}>
+export const TabletProperties: Story = {
+  render: args => (
+    <Stack tablet={{ ...args }}>
       <InputField type="password" label="Password" help="You need some help!" />
       <Button>Sign In</Button>
     </Stack>
-  );
-};
-
-DesktopProperties.story = {
-  name: "Desktop properties",
-
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-  },
-};
-
-DesktopProperties.args = {
-  inline: false,
-  direction: undefined,
-  wrap: false,
-  grow: true,
-  shrink: false,
-  basis: "auto",
-  align: ALIGNS.END,
-  justify: undefined,
-  spacing: undefined,
-  spaceAfter: undefined,
-};
+  ),
 
-DesktopProperties.argTypes = {
-  direction: {
-    options: Object.values(DIRECTIONS),
-    control: {
-      type: "select",
-    },
-  },
-  align: {
-    options: Object.values(ALIGNS),
-    control: {
-      type: "select",
-    },
-  },
-  justify: {
-    options: Object.values(JUSTIFY),
-    control: {
-      type: "select",
-    },
-  },
-  spacing: {
-    options: Object.values(SPACINGS),
-    control: {
-      type: "select",
-    },
-  },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
-    },
+  args: {
+    spacing: SPACINGS.TWO_HUNDRED,
   },
 };
 
-export const LargeDesktopProperties = ({
-  inline,
-  direction,
-  wrap,
-  grow,
-  shrink,
-  basis,
-  align,
-  justify,
-  spacing,
-  spaceAfter,
-}) => {
-  const largeDesktop = {
-    inline,
-    direction,
-    wrap,
-    grow,
-    shrink,
-    basis,
-    align,
-    justify,
-    spacing,
-    spaceAfter,
-  };
-
-  return (
-    <Stack largeDesktop={largeDesktop}>
+export const DesktopProperties: Story = {
+  render: args => (
+    <Stack desktop={{ ...args }}>
       <InputField type="password" label="Password" help="You need some help!" />
       <Button>Sign In</Button>
     </Stack>
-  );
-};
+  ),
 
-LargeDesktopProperties.story = {
-  name: "LargeDesktop properties",
-
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+  args: {
+    direction: DIRECTIONS.ROW,
+    align: ALIGNS.START,
+    justify: JUSTIFY.BETWEEN,
   },
 };
 
-LargeDesktopProperties.args = {
-  inline: false,
-  direction: undefined,
-  wrap: false,
-  grow: true,
-  shrink: false,
-  basis: "auto",
-  align: ALIGNS.END,
-  justify: undefined,
-  spacing: undefined,
-  spaceAfter: undefined,
-};
+export const LargeDesktopProperties: Story = {
+  render: args => (
+    <Stack largeDesktop={{ ...args }}>
+      <InputField type="password" label="Password" help="You need some help!" />
+      <Button>Sign In</Button>
+    </Stack>
+  ),
 
-LargeDesktopProperties.argTypes = {
-  direction: {
-    options: Object.values(DIRECTIONS),
-    control: {
-      type: "select",
-    },
-  },
-  align: {
-    options: Object.values(ALIGNS),
-    control: {
-      type: "select",
-    },
-  },
-  justify: {
-    options: Object.values(JUSTIFY),
-    control: {
-      type: "select",
-    },
-  },
-  spacing: {
-    options: Object.values(SPACINGS),
-    control: {
-      type: "select",
-    },
-  },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
-    },
+  args: {
+    spacing: SPACINGS.EIGHT_HUNDRED,
   },
 };
 
-export const NestedExample = () => (
-  <Stack spacing="600" direction="column" align="start">
-    <Stack spacing="200" direction="row" inline>
-      <Text weight="bold">email@gmail.com</Text>
-      <Edit size="small" color="success" />
-    </Stack>
-    <Stack direction="row" spaceAfter="large" align="end">
-      <InputField type="password" label="Password" error="You need some help!" />
-      <Button>Sign In</Button>
+export const NestedExample: Story = {
+  render: () => (
+    <Stack spacing="600" direction="column" align="start">
+      <Stack spacing="200" direction="row" inline>
+        <Text weight="bold">email@gmail.com</Text>
+        <Edit size="small" color="success" />
+      </Stack>
+      <Stack direction="row" spaceAfter="large" align="end">
+        <InputField type="password" label="Password" error="You need some help!" />
+        <Button>Sign In</Button>
+      </Stack>
+      <Text size="small">
+        <TextLink type="secondary">Forgot password?</TextLink>
+      </Text>
     </Stack>
-    <Text size="small">
-      <TextLink type="secondary">Forgot password?</TextLink>
-    </Text>
-  </Stack>
-);
-
-NestedExample.story = {
-  name: "Nested example",
+  ),
 
   parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+    controls: {
+      disable: true,
+    },
   },
 };
 
-export const Playground = ({
-  dataTest,
-  flex,
-  inline,
-  direction,
-  wrap,
-  grow,
-  shrink,
-  basis,
-  align,
-  justify,
-  spacing,
-  spaceAfter,
-  legacy,
-  mediumMobile,
-  largeMobile,
-  tablet,
-  desktop,
-  largeDesktop,
-}) => {
-  return (
-    <Stack
-      dataTest={dataTest}
-      flex={flex}
-      direction={direction}
-      align={align}
-      justify={justify}
-      wrap={wrap}
-      grow={grow}
-      basis={basis}
-      inline={inline}
-      shrink={shrink}
-      spacing={spacing}
-      legacy={legacy}
-      spaceAfter={spaceAfter}
-      mediumMobile={mediumMobile}
-      largeMobile={largeMobile}
-      tablet={tablet}
-      desktop={desktop}
-      largeDesktop={largeDesktop}
-    >
+export const Playground: Story = {
+  render: args => (
+    <Stack {...args}>
       <Button type="secondary">Sign In</Button>
       <Button>Log In</Button>
     </Stack>
-  );
-};
+  ),
 
-Playground.story = {
   parameters: {
     info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
   },
-};
 
-Playground.args = {
-  dataTest: "test",
-  flex: true,
-  inline: false,
-  direction: undefined,
-  wrap: false,
-  grow: true,
-  shrink: false,
-  legacy: false,
-  basis: "",
-  align: ALIGNS.START,
-  justify: JUSTIFY.START,
-  spacing: SPACINGS.NONE,
-  spaceAfter: SPACINGS_AFTER.SMALL,
-  mediumMobile: {
-    direction: DIRECTIONS.COLUMN,
-  },
-  largeMobile: {
-    align: ALIGNS.END,
-  },
-  tablet: {
-    spacing: SPACINGS.TWO_HUNDRED,
-  },
-  desktop: {
-    justify: JUSTIFY.BETWEEN,
-    direction: DIRECTIONS.ROW,
+  args: {
+    flex: true,
+    legacy: false,
+    basis: "",
     align: ALIGNS.START,
-  },
-  largeDesktop: {
-    spacing: SPACINGS.EIGHT_HUNDRED,
+    justify: JUSTIFY.START,
+    spacing: SPACINGS.NONE,
+    spaceAfter: SPACINGS_AFTER.SMALL,
   },
 };
 
-Playground.argTypes = {
-  direction: {
-    options: Object.values(DIRECTIONS),
-    control: {
-      type: "select",
-    },
-  },
-  align: {
-    options: Object.values(ALIGNS),
-    control: {
-      type: "select",
-    },
-  },
-  justify: {
-    options: Object.values(JUSTIFY),
-    control: {
-      type: "select",
-    },
-  },
-  spacing: {
-    options: Object.values(SPACINGS),
-    control: {
-      type: "select",
-    },
-  },
-  spaceAfter: {
-    options: Object.values(SPACINGS_AFTER),
-    control: {
-      type: "select",
-    },
-  },
-};
-
-export const ComponentsPreview = () => (
-  <Stack direction="column">
-    <Stack direction="row" align="center">
-      <Alert title="hola amigo" icon>
-        My message
-      </Alert>
-      <Alert title="hola amigo" icon>
-        My message
-      </Alert>
-      <Button>Hola amigo</Button>
-    </Stack>
-    <Stack direction="row" justify="around">
-      <Button>Hola amigo</Button>
-      <ButtonLink>Hola amigo</ButtonLink>
-    </Stack>
-    <Stack direction="row" justify="between">
-      <Badge>Hola amigo</Badge>
-      <Badge type="dark">Hola amigo</Badge>
-    </Stack>
-    <Stack direction="column" align="center">
-      <ButtonGroup>
-        <Button>Hola amigo</Button>
-        <Button>Hola amigo</Button>
-      </ButtonGroup>
-      <ButtonGroup>
-        <Button type="secondary">Hola amigo</Button>
-        <Button type="secondary">Hola amigo</Button>
-      </ButtonGroup>
-    </Stack>
-    <Stack direction="row" justify="center">
-      <ButtonGroup>
+export const ComponentsPreview: Story = {
+  render: () => (
+    <Stack direction="column">
+      <Stack direction="row" align="center">
+        <Alert title="hola amigo" icon>
+          My message
+        </Alert>
+        <Alert title="hola amigo" icon>
+          My message
+        </Alert>
         <Button>Hola amigo</Button>
+      </Stack>
+      <Stack direction="row" justify="around">
         <Button>Hola amigo</Button>
-      </ButtonGroup>
-      <ButtonGroup>
-        <Button type="secondary">Hola amigo</Button>
-        <Button type="secondary">Hola amigo</Button>
-      </ButtonGroup>
-    </Stack>
-    <Stack direction="row" align="center">
-      <Card title="Hola amigo" />
-      <Card>
-        <CardSection>
-          <Heading type="title3">Insert your title here...</Heading>
-          <Text>subtitle</Text>
-        </CardSection>
-        <CardSection
-          title={<Heading type="title3">Insert your title here...</Heading>}
-          description="subtitle"
-        >
-          Content
-        </CardSection>
-      </Card>
-    </Stack>
-    <Stack direction="column" align="center">
-      <Card title="Hola amigo" />
-      <Card title="Insert your title here..." description="subtitle">
-        <CardSection
-          title={<Heading type="title3">Insert your title here...</Heading>}
-          description="subtitle"
+        <ButtonLink>Hola amigo</ButtonLink>
+      </Stack>
+      <Stack direction="row" justify="between">
+        <Badge>Hola amigo</Badge>
+        <Badge type="dark">Hola amigo</Badge>
+      </Stack>
+      <Stack direction="column" align="center">
+        <ButtonGroup>
+          <Button>Hola amigo</Button>
+          <Button>Hola amigo</Button>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button type="secondary">Hola amigo</Button>
+          <Button type="secondary">Hola amigo</Button>
+        </ButtonGroup>
+      </Stack>
+      <Stack direction="row" justify="center">
+        <ButtonGroup>
+          <Button>Hola amigo</Button>
+          <Button>Hola amigo</Button>
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button type="secondary">Hola amigo</Button>
+          <Button type="secondary">Hola amigo</Button>
+        </ButtonGroup>
+      </Stack>
+      <Stack direction="row" align="center">
+        <Card title="Hola amigo" />
+        <Card>
+          <CardSection>
+            <Heading type="title3">Insert your title here...</Heading>
+            <Text>subtitle</Text>
+          </CardSection>
+          <CardSection
+            title={<Heading type="title3">Insert your title here...</Heading>}
+            description="subtitle"
+          >
+            Content
+          </CardSection>
+        </Card>
+      </Stack>
+      <Stack direction="column" align="center">
+        <Card title="Hola amigo" />
+        <Card title="Insert your title here..." description="subtitle">
+          <CardSection
+            title={<Heading type="title3">Insert your title here...</Heading>}
+            description="subtitle"
+          />
+          <CardSection
+            expandable
+            title={<Heading type="title3">Insert your title here...</Heading>}
+          >
+            Hidden content
+          </CardSection>
+          <CardSection
+            title={<Heading type="title3">Insert your title here...</Heading>}
+            description="subtitle"
+          />
+        </Card>
+      </Stack>
+      <Stack direction="row" justify="between">
+        <CarrierLogo
+          carriers={[
+            { code: "YO", name: "Lorem ipsum", type: "bus" },
+            { code: "LAL", name: "Lorem ipsum", type: "train" },
+            { code: "KEK", name: "Lorem ipsum", type: "airline" },
+          ]}
         />
-        <CardSection expandable title={<Heading type="title3">Insert your title here...</Heading>}>
-          Hidden content
-        </CardSection>
-        <CardSection
-          title={<Heading type="title3">Insert your title here...</Heading>}
-          description="subtitle"
+        <CarrierLogo
+          carriers={[
+            { code: "YO", name: "Lorem ipsum", type: "bus" },
+            { code: "LAL", name: "Lorem ipsum", type: "train" },
+            { code: "KEK", name: "Lorem ipsum", type: "airline" },
+          ]}
         />
-      </Card>
-    </Stack>
-    <Stack direction="row" justify="between">
-      <CarrierLogo
-        carriers={[
-          { code: "YO", name: "Lorem ipsum", type: "bus" },
-          { code: "LAL", name: "Lorem ipsum", type: "train" },
-          { code: "KEK", name: "Lorem ipsum", type: "airline" },
-        ]}
-      />
-      <CarrierLogo
-        carriers={[
-          { code: "YO", name: "Lorem ipsum", type: "bus" },
-          { code: "LAL", name: "Lorem ipsum", type: "train" },
-          { code: "KEK", name: "Lorem ipsum", type: "airline" },
-        ]}
-      />
-    </Stack>
-    <Stack direction="row">
-      <Checkbox label="My Label" info="Some help" />
-      <Radio label="My Label" info="Some help" />
-    </Stack>
-    <Stack direction="column" align="center">
-      <Checkbox label="My Label" info="Some help" />
-      <Radio label="My Label" info="Some help" />
-    </Stack>
-    <Stack direction="row">
-      <ChoiceGroup
-        label="What was the reason for your cancellation?"
-        labelSize="normal"
-        labelAs="h4"
-        onChange={action("onChange")}
-      >
-        <Checkbox label="Reason one" value="one" />
-        <Checkbox label="Reason two" value="two" />
-        <Checkbox label="Reason three" value="three" />
-      </ChoiceGroup>
-      <ChoiceGroup
-        label="What was the reason for your cancellation?"
-        labelSize="normal"
-        labelAs="h4"
-        onChange={action("onChange")}
-      >
-        <Checkbox label="Reason one" value="one" />
-        <Checkbox label="Reason two" value="two" />
-        <Checkbox label="Reason three" value="three" />
-      </ChoiceGroup>
-    </Stack>
-    <Stack direction="row">
-      <CountryFlag code="cz" />
-      <CountryFlag code="us" />
-    </Stack>
-    <Stack direction="column">
-      <CountryFlag code="cz" />
-      <CountryFlag code="us" />
-    </Stack>
-    <Stack direction="column" align="center">
-      <Heading>Hola Amigo</Heading>
-      <Heading type="title2">Hola Amigo</Heading>
-    </Stack>
-    <Stack direction="row" justify="start" align="end">
-      <Heading>Hola Amigo</Heading>
-      <Heading type="title2">Hola Amigo</Heading>
-    </Stack>
-    <Stack direction="row" justify="start" align="center">
-      <Airplane />
-      <Text>Hola Amigo</Text>
-    </Stack>
-    <Stack>
-      <Illustration name="Accommodation" size="extraSmall" />
-      <Text>Hola Amigo</Text>
-    </Stack>
-    <Stack direction="row" align="center">
-      <Illustration name="Accommodation" size="extraSmall" />
-      <Text>Hola Amigo</Text>
-    </Stack>
-    <Stack direction="row">
-      <InputField label="My label" />
-      <Select
-        label="My label"
-        options={[
-          { value: 1, label: "First item" },
-          { value: 2, label: "Second item" },
-          { value: 3, label: "Third item" },
-        ]}
-      />
-      <InputGroup label="My label">
+      </Stack>
+      <Stack direction="row">
+        <Checkbox label="My Label" info="Some help" />
+        <Radio label="My Label" info="Some help" />
+      </Stack>
+      <Stack direction="column" align="center">
+        <Checkbox label="My Label" info="Some help" />
+        <Radio label="My Label" info="Some help" />
+      </Stack>
+      <Stack direction="row">
+        <ChoiceGroup
+          label="What was the reason for your cancellation?"
+          labelSize="normal"
+          labelAs="h4"
+          onChange={action("onChange")}
+        >
+          <Checkbox label="Reason one" value="one" />
+          <Checkbox label="Reason two" value="two" />
+          <Checkbox label="Reason three" value="three" />
+        </ChoiceGroup>
+        <ChoiceGroup
+          label="What was the reason for your cancellation?"
+          labelSize="normal"
+          labelAs="h4"
+          onChange={action("onChange")}
+        >
+          <Checkbox label="Reason one" value="one" />
+          <Checkbox label="Reason two" value="two" />
+          <Checkbox label="Reason three" value="three" />
+        </ChoiceGroup>
+      </Stack>
+      <Stack direction="row">
+        <CountryFlag code="cz" />
+        <CountryFlag code="us" />
+      </Stack>
+      <Stack direction="column">
+        <CountryFlag code="cz" />
+        <CountryFlag code="us" />
+      </Stack>
+      <Stack direction="column" align="center">
+        <Heading>Hola Amigo</Heading>
+        <Heading type="title2">Hola Amigo</Heading>
+      </Stack>
+      <Stack direction="row" justify="start" align="end">
+        <Heading>Hola Amigo</Heading>
+        <Heading type="title2">Hola Amigo</Heading>
+      </Stack>
+      <Stack direction="row" justify="start" align="center">
+        <Airplane />
+        <Text>Hola Amigo</Text>
+      </Stack>
+      <Stack>
+        <Illustration name="Accommodation" size="extraSmall" />
+        <Text>Hola Amigo</Text>
+      </Stack>
+      <Stack direction="row" align="center">
+        <Illustration name="Accommodation" size="extraSmall" />
+        <Text>Hola Amigo</Text>
+      </Stack>
+      <Stack direction="row">
         <InputField label="My label" />
         <Select
           label="My label"
@@ -885,19 +396,19 @@ export const ComponentsPreview = () => (
             { value: 3, label: "Third item" },
           ]}
         />
-      </InputGroup>
-    </Stack>
-    <Stack direction="column">
-      <InputField label="My label" />
-      <Select
-        label="My label"
-        options={[
-          { value: 1, label: "First item" },
-          { value: 2, label: "Second item" },
-          { value: 3, label: "Third item" },
-        ]}
-      />
-      <InputGroup label="My label" flex="1 1 100%">
+        <InputGroup label="My label">
+          <InputField label="My label" />
+          <Select
+            label="My label"
+            options={[
+              { value: 1, label: "First item" },
+              { value: 2, label: "Second item" },
+              { value: 3, label: "Third item" },
+            ]}
+          />
+        </InputGroup>
+      </Stack>
+      <Stack direction="column">
         <InputField label="My label" />
         <Select
           label="My label"
@@ -907,260 +418,270 @@ export const ComponentsPreview = () => (
             { value: 3, label: "Third item" },
           ]}
         />
-      </InputGroup>
-      <Textarea label="My label" />
-    </Stack>
-    <Stack direction="row" align="center">
-      <Heading type="title3">My heading</Heading>
-      <ServiceLogo name="Visa" />
-    </Stack>
-    <Stack>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    </Stack>
-    <Stack direction="row">
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-            <TableCell>Cell</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    </Stack>
-    <Stack direction="row">
-      <Tile
-        href="https://kiwi.com"
-        icon={<Airplane />}
-        title="My title"
-        description="Some description"
-      />
-      <Tile
-        href="https://kiwi.com"
-        icon={<Airplane />}
-        title="My title"
-        description="Some description"
-      />
-    </Stack>
-    <Stack>
-      <Tile icon={<Airplane />} title="My title" description="Some description">
-        Some children
-      </Tile>
-      <Tile icon={<Airplane />} title="My title" description="Some description">
-        Some children
-      </Tile>
-    </Stack>
-    <Stack direction="row" align="center">
-      <Heading>Orbit Design System</Heading>
-    </Stack>
-    <Stack direction="row" align="center">
-      <Text>Prague</Text>
-      <StopoverArrow stops="3" />
-      <Text>Barcelona</Text>
-    </Stack>
-  </Stack>
-);
-
-ComponentsPreview.story = {
-  name: "Components preview",
-
-  parameters: {
-    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
-  },
-};
-
-export const Rtl = () => (
-  <RenderInRtl>
-    <Stack spacing="600" direction="column" align="start">
-      <Stack spacing="200" direction="row" inline>
-        <Text weight="bold">email@gmail.com</Text>
-        <Edit size="small" color="success" />
+        <InputGroup label="My label" flex="1 1 100%">
+          <InputField label="My label" />
+          <Select
+            label="My label"
+            options={[
+              { value: 1, label: "First item" },
+              { value: 2, label: "Second item" },
+              { value: 3, label: "Third item" },
+            ]}
+          />
+        </InputGroup>
+        <Textarea label="My label" />
       </Stack>
-      <Stack direction="row" spaceAfter="large" align="end">
-        <InputField type="password" label="Password" error="You need some help!" />
-        <Button>Sign In</Button>
+      <Stack direction="row" align="center">
+        <Heading type="title3">My heading</Heading>
+        <ServiceLogo name="Visa" />
+      </Stack>
+      <Stack>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </Stack>
+      <Stack direction="row">
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </Stack>
+      <Stack direction="row">
+        <Tile
+          href="https://kiwi.com"
+          icon={<Airplane />}
+          title="My title"
+          description="Some description"
+        />
+        <Tile
+          href="https://kiwi.com"
+          icon={<Airplane />}
+          title="My title"
+          description="Some description"
+        />
+      </Stack>
+      <Stack>
+        <Tile icon={<Airplane />} title="My title" description="Some description">
+          Some children
+        </Tile>
+        <Tile icon={<Airplane />} title="My title" description="Some description">
+          Some children
+        </Tile>
+      </Stack>
+      <Stack direction="row" align="center">
+        <Heading>Orbit Design System</Heading>
+      </Stack>
+      <Stack direction="row" align="center">
+        <Text>Prague</Text>
+        <StopoverArrow stops="3" />
+        <Text>Barcelona</Text>
       </Stack>
-      <Text size="small">
-        <TextLink type="secondary">Forgot password?</TextLink>
-      </Text>
     </Stack>
-  </RenderInRtl>
-);
+  ),
 
-Rtl.story = {
-  name: "RTL",
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+};
+
+export const Rtl: Story = {
+  render: () => (
+    <RenderInRtl>
+      <Stack spacing="600" direction="column" align="start">
+        <Stack spacing="200" direction="row" inline>
+          <Text weight="bold">email@gmail.com</Text>
+          <Edit size="small" color="success" />
+        </Stack>
+        <Stack direction="row" spaceAfter="large" align="end">
+          <InputField type="password" label="Password" error="You need some help!" />
+          <Button>Sign In</Button>
+        </Stack>
+        <Text size="small">
+          <TextLink type="secondary">Forgot password?</TextLink>
+        </Text>
+      </Stack>
+    </RenderInRtl>
+  ),
 
   parameters: {
     info: "This is a preview of this component in RTL setup.",
+    controls: {
+      disable: true,
+    },
   },
 };