From 94c2d1e8aca07af75f553b3924c158b30cc5f446 Mon Sep 17 00:00:00 2001
From: Lukas Blaser <141234680+b1aserlu@users.noreply.github.com>
Date: Tue, 15 Aug 2023 11:27:55 +0200
Subject: [PATCH 01/16] feat(documentation-v7): migrate textarea stories
 (#1783)

---
 .../components/textarea/textarea.docs.mdx     |  76 +++++
 .../components/textarea/textarea.stories.ts   | 266 ++++++++++++++++++
 2 files changed, 342 insertions(+)
 create mode 100644 packages/documentation-v7/src/stories/components/textarea/textarea.docs.mdx
 create mode 100644 packages/documentation-v7/src/stories/components/textarea/textarea.stories.ts

diff --git a/packages/documentation-v7/src/stories/components/textarea/textarea.docs.mdx b/packages/documentation-v7/src/stories/components/textarea/textarea.docs.mdx
new file mode 100644
index 0000000000..93786e4869
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/textarea/textarea.docs.mdx
@@ -0,0 +1,76 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as TextareaStories from './textarea.stories';
+
+<Meta of={TextareaStories} />
+
+# Textarea
+
+<div className="lead">
+  Customize the native <code>&lt;textarea&gt;</code> with CSS that changes the element’s initial
+  appearance.
+</div>
+
+Custom textarea elements need only the class `.form-control` to trigger the custom styles.
+
+<Canvas of={TextareaStories.Default} />
+<div className="hide-col-default">
+  <Controls of={TextareaStories.Default} />
+</div>
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```scss
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```scss
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/forms.scss';
+
+// required if you use floating-labels
+@use '@swisspost/design-system-styles/components/floating-label.scss';
+
+// required if you use validation feedbacks
+@use '@swisspost/design-system-styles/components/form-feedback.scss';
+```
+
+## Concrete Examples of Application
+
+The following examples show the different characteristics of the component. These can differ in the type of visualization, the HTML structure, as well as when, how and why they are displayed.
+
+### Floating Label
+
+Wrap a pair of `<textarea>` and `<label>` elements in a `.form-floating` container to enable floating labels.<br/>
+But note that the `<textarea>` element must come first, so we can ensure the correct styles.
+
+<Canvas of={TextareaStories.FloatingLabel} />
+
+### Sizing
+
+The size can be changed by simply adding one of four classes:
+
+- Small: `.form-control-sm`
+- Regular: `.form-control-rg`
+- Medium: default or `.form-control-md`
+- Large: `.form-control-lg`
+
+<div className="alert alert-info">
+  <h4 className="alert-heading">Do not apply size classes on floating-label elements</h4>
+  <div className="mt-0">
+    It is not intended to apply the size classes to <code>textarea</code> elements that are nested
+    in a <code>.form-floating</code> container.
+  </div>
+</div>
+
+<Canvas of={TextareaStories.Size} />
+
+### Validation
+
+Simply add the classes `.is-valid` or `.is-invalid` to the `<textarea>` element to show it in the expected state.<br/>
+When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `textarea` element to explain what went wrong. This enables the user to correct the mistake.
+
+<Canvas of={TextareaStories.Validation} />
diff --git a/packages/documentation-v7/src/stories/components/textarea/textarea.stories.ts b/packages/documentation-v7/src/stories/components/textarea/textarea.stories.ts
new file mode 100644
index 0000000000..6760d0487c
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/textarea/textarea.stories.ts
@@ -0,0 +1,266 @@
+import type { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import { html, nothing } from 'lit';
+import { BADGE } from '../../../../.storybook/constants';
+import { mapClasses } from '../../../utils';
+
+const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
+  'null': undefined,
+  'is-valid': false,
+  'is-invalid': true,
+};
+
+const meta: Meta = {
+  title: 'Components/Textarea',
+  render: renderTextarea,
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+  args: {
+    label: 'Label',
+    floatingLabel: false,
+    hiddenLabel: false,
+    value: undefined,
+    size: 'null',
+    rows: 4,
+    hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
+    disabled: false,
+    validation: 'null',
+  },
+  argTypes: {
+    label: {
+      name: 'Label',
+      description: 'Describes the content/topic of the component.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    floatingLabel: {
+      name: 'Floating Label',
+      description: 'Defines how the components label is rendered.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    hiddenLabel: {
+      name: 'Hidden Label',
+      description:
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/story/foundations-accessibility--page#labels">label accessibility guide</a>.</span>',
+      if: {
+        arg: 'floatingLabel',
+        truthy: false,
+      },
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    value: {
+      name: 'Value',
+      description: 'The value of the component.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        disable: true,
+      },
+    },
+    size: {
+      name: 'Size',
+      description: "Sets the size of the component's appearance.",
+      if: {
+        arg: 'floatingLabel',
+        truthy: false,
+      },
+      control: {
+        type: 'select',
+        labels: {
+          'form-control-sm': 'Small',
+          'form-control-rg': 'Regular',
+          'null': 'Middle',
+          'form-control-lg': 'Large',
+        },
+      },
+      options: ['form-control-sm', 'form-control-rg', 'null', 'form-control-lg'],
+      table: {
+        category: 'General',
+      },
+    },
+    rows: {
+      name: 'Rows',
+      description:
+        'Attribute to set the initial height, in lines of text, of the `textarea` element.',
+      control: {
+        type: 'number',
+        min: 3,
+        max: 10,
+        step: 1,
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    hint: {
+      name: 'Helper Text',
+      description: 'Text to place in the help text area of the component.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description:
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--page#disabled-state">disabled state accessibility guide</a>.</div>',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'States',
+      },
+    },
+    validation: {
+      name: 'Validation',
+      description: 'Controls the validation state appearance of the component.',
+      control: {
+        type: 'radio',
+        labels: {
+          'null': 'Default',
+          'is-valid': 'Valid',
+          'is-invalid': 'Invalid',
+        },
+      },
+      options: ['null', 'is-valid', 'is-invalid'],
+      table: {
+        category: 'States',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function renderTextarea(args: Args, context: StoryContext) {
+  const id = `${context.viewMode}_${context.story.replace(/\s/g, '-')}_ExampleTextarea`;
+  const classes = mapClasses({
+    'form-control': true,
+    [args.size]: args.size && args.size !== 'null',
+    [args.validation]: args.validation && args.validation !== 'null',
+  });
+  const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
+  const label = !useAriaLabel
+    ? html`
+        <label for=${id} class="form-label">
+          ${html`
+            ${args.label}
+          `}
+        </label>
+      `
+    : null;
+  const contextuals = [
+    args.validation === 'is-valid'
+      ? html`
+          <div class="valid-feedback">Ggranda sukceso!</div>
+        `
+      : null,
+    args.validation === 'is-invalid'
+      ? html`
+          <div class="invalid-feedback">Eraro okazis!</div>
+        `
+      : null,
+    args.hint !== ''
+      ? html`
+          <div class="form-text">
+            ${html`
+              ${args.hint}
+            `}
+          </div>
+        `
+      : null,
+  ];
+  const control = html`
+    <textarea
+      id=${id}
+      class=${classes}
+      defaultValue=${args.value ?? nothing}
+      placeholder=${useAriaLabel ? args.label : ' '}
+      rows=${args.rows}
+      ?disabled=${args.disabled}
+      aria-label=${useAriaLabel ? args.label : nothing}
+      aria-invalid=${VALIDATION_STATE_MAP[args.validation] ?? nothing}
+    ></textarea>
+  `;
+  if (args.floatingLabel) {
+    return html`
+      <div class="form-floating">${[control, label, ...contextuals].filter(el => el !== null)}</div>
+    `;
+  } else
+    return html`
+      ${[label, control, ...contextuals].filter(el => el !== null)}
+    `;
+}
+
+export const Default: Story = {};
+
+export const FloatingLabel: Story = {
+  parameters: {
+    controls: {
+      exclude: ['Hidden Label', 'Size', 'Rows', 'Helper Text', 'Disabled', 'Validation'],
+    },
+  },
+  args: {
+    floatingLabel: true,
+    hint: '',
+  },
+};
+
+export const Size: Story = {
+  parameters: {
+    controls: {
+      exclude: [
+        'Label',
+        'Floating Label',
+        'Hidden Label',
+        'Rows',
+        'Helper Text',
+        'Disabled',
+        'Validation',
+      ],
+    },
+  },
+  args: {
+    size: 'form-control-sm',
+    hint: '',
+  },
+};
+
+export const Validation: Story = {
+  parameters: {
+    controls: {
+      exclude: [
+        'Label',
+        'Floating Label',
+        'Hidden Label',
+        'Size',
+        'Rows',
+        'Helper Text',
+        'Disabled',
+      ],
+    },
+  },
+  args: {
+    validation: 'is-invalid',
+    hint: '',
+  },
+};

From 8121f10d5d9dc51ae443b95fb2e48caa84811803 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Tue, 15 Aug 2023 13:47:15 +0200
Subject: [PATCH 02/16] chore(documentation-v7): update story file extension
 from tsx to ts (#1802)

---
 .../components/badge/{badge.stories.tsx => badge.stories.ts}      | 0
 .../card/{card.snapshot.stories.tsx => card.snapshot.stories.ts}  | 0
 .../stories/components/card/{card.stories.tsx => card.stories.ts} | 0
 .../checkbox/{checkbox.stories.tsx => checkbox.stories.ts}        | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/documentation-v7/src/stories/components/badge/{badge.stories.tsx => badge.stories.ts} (100%)
 rename packages/documentation-v7/src/stories/components/card/{card.snapshot.stories.tsx => card.snapshot.stories.ts} (100%)
 rename packages/documentation-v7/src/stories/components/card/{card.stories.tsx => card.stories.ts} (100%)
 rename packages/documentation-v7/src/stories/components/checkbox/{checkbox.stories.tsx => checkbox.stories.ts} (100%)

diff --git a/packages/documentation-v7/src/stories/components/badge/badge.stories.tsx b/packages/documentation-v7/src/stories/components/badge/badge.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/badge/badge.stories.tsx
rename to packages/documentation-v7/src/stories/components/badge/badge.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/card/card.snapshot.stories.tsx b/packages/documentation-v7/src/stories/components/card/card.snapshot.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/card/card.snapshot.stories.tsx
rename to packages/documentation-v7/src/stories/components/card/card.snapshot.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/card/card.stories.tsx b/packages/documentation-v7/src/stories/components/card/card.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/card/card.stories.tsx
rename to packages/documentation-v7/src/stories/components/card/card.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/checkbox/checkbox.stories.tsx b/packages/documentation-v7/src/stories/components/checkbox/checkbox.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/checkbox/checkbox.stories.tsx
rename to packages/documentation-v7/src/stories/components/checkbox/checkbox.stories.ts

From b4eea666ca12304abe90b5e53b4bbbf03e52309a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Wed, 16 Aug 2023 08:32:38 +0200
Subject: [PATCH 03/16] feat(documentation-v7): add breakpoint docs page
 (#1781)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/quick-parrots-cover.md             |  5 ++
 .../layout/breakpoints/breakpoints.blocks.tsx | 28 ++++++
 .../layout/breakpoints/breakpoints.docs.mdx   | 86 +++++++++++++++++++
 .../breakpoints/breakpoints.module.scss       | 33 +++++++
 .../stories/foundation/layout/layout.docs.mdx | 12 ++-
 .../layout/breakpoints/breakpoints.blocks.tsx | 29 +++++++
 .../breakpoints/breakpoints.module.scss       | 33 +++++++
 .../breakpoints/breakpoints.stories.mdx       | 86 +++++++++++++++++++
 .../foundation/layout/layout.stories.mdx      | 21 +++--
 9 files changed, 315 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/quick-parrots-cover.md
 create mode 100644 packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
 create mode 100644 packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
 create mode 100644 packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
 create mode 100644 packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
 create mode 100644 packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
 create mode 100644 packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.mdx

diff --git a/.changeset/quick-parrots-cover.md b/.changeset/quick-parrots-cover.md
new file mode 100644
index 0000000000..245370e46e
--- /dev/null
+++ b/.changeset/quick-parrots-cover.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added a foundation breakpoints docs page.
diff --git a/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx b/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
new file mode 100644
index 0000000000..fbfe4c6a16
--- /dev/null
+++ b/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
@@ -0,0 +1,28 @@
+import { forEach } from '../../../../utils/react';
+import { parse } from '../../../../utils/sass-export';
+import scss from './breakpoints.module.scss';
+
+export const SCSS_VARIABLES = parse(scss);
+
+export const BreakpointTable = (props: { name: string; value: string }) => (
+  <table className="table table-sm table-striped table-bordered">
+    <thead>
+      <tr>
+        <th>Breakpoint</th>
+        <th>Class infix</th>
+        <th>Dimensions</th>
+      </tr>
+    </thead>
+    <tbody>
+      {forEach(SCSS_VARIABLES.breakpoint, (data: { key: number; value: any }) => {
+        return (
+          <tr>
+            <td>{data.value.name}</td>
+            <td dangerouslySetInnerHTML={{ __html: data.value.infix }}></td>
+            <td>{data.value.dimensions}</td>
+          </tr>
+        );
+      })}
+    </tbody>
+  </table>
+);
diff --git a/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx b/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
new file mode 100644
index 0000000000..80f3f15657
--- /dev/null
+++ b/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
@@ -0,0 +1,86 @@
+import { Meta, Story } from '@storybook/blocks';
+import { BADGE } from '../../../../../.storybook/constants';
+import { BreakpointTable, SCSS_VARIABLES } from './breakpoints.blocks';
+
+<Meta title="Foundations/Layout/Breakpoints" parameters={{ badges: [BADGE.NEEDS_REVISION] }} />
+
+# Breakpoints
+
+<div class="lead">
+  Breakpoints are widths that determine how the responsive layout behaves across device or viewport
+  sizes.
+</div>
+
+## Available breakpoints
+
+The Swiss Post Design System includes {Object.keys(SCSS_VARIABLES.breakpoint).length} breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.
+
+<BreakpointTable />
+
+You’ll find these breakpoints in a Sass map in our styles core.
+
+```scss
+@use '@swisspost/design-system-styles/core' as post;
+
+@each $key, $value in post.$grid-breakpoints {
+  ...
+}
+```
+
+## Mixins
+
+There are several mixins available to use in your own Sass to help with building responsive layouts.
+
+### Min-width
+
+We primarily use the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
+
+```scss
+// No media query necessary for xs breakpoint as it's effectively @media (min-width: 0) { ... }
+.custom-class {
+  display: none;
+}
+
+@include post.media-breakpoint-up(lg) {
+  .custom-class {
+    display: block;
+  }
+}
+```
+
+### Max-width
+
+We occasionally use media queries that go in the other direction.
+
+```scss
+// No media query necessary for xs breakpoint as it's effectively @media (max-width: 0) { ... }
+@include post.media-breakpoint-down(lg) {
+  .custom-class {
+    display: none;
+  }
+}
+```
+
+### Single breakpoint
+
+There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
+
+```scss
+@include post.media-breakpoint-only(xs) {
+  .custom-class {
+    display: block;
+  }
+}
+```
+
+### Between breakpoints
+
+Similarly, media queries may span multiple breakpoint widths.
+
+```scss
+@include post.media-breakpoint-between(sm, lg) {
+  .custom-class {
+    display: block;
+  }
+}
+```
diff --git a/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.module.scss b/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
new file mode 100644
index 0000000000..250760c880
--- /dev/null
+++ b/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
@@ -0,0 +1,33 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '@swisspost/design-system-styles/core' as post;
+
+$breakpointNames: (
+  xs: Extra small,
+  sm: Small,
+  rg: Regular,
+  md: Medium,
+  lg: Large,
+  xl: Extra large,
+  xxl: Extra extra large,
+);
+
+:export {
+  @each $breakpoint, $value in post.$grid-breakpoints {
+    $i: list.index(post.$grid-breakpoints, $breakpoint $value);
+    $name: map.get($breakpointNames, $breakpoint) or $breakpoint;
+
+    breakpoint_#{$breakpoint}_name: $name;
+
+    @if $i == 1 {
+      $keys: map.keys(post.$grid-breakpoints);
+      $nextValue: map.get(post.$grid-breakpoints, list.nth($keys, $i + 1));
+
+      breakpoint_#{$breakpoint}_infix: none;
+      breakpoint_#{$breakpoint}_dimensions: #{'<' + $nextValue};
+    } @else {
+      breakpoint_#{$breakpoint}_infix: #{'<code>' + $breakpoint + '</code>'};
+      breakpoint_#{$breakpoint}_dimensions: #{'≥' + $value};
+    }
+  }
+}
diff --git a/packages/documentation-v7/src/stories/foundation/layout/layout.docs.mdx b/packages/documentation-v7/src/stories/foundation/layout/layout.docs.mdx
index 12e8d31986..14772f6661 100644
--- a/packages/documentation-v7/src/stories/foundation/layout/layout.docs.mdx
+++ b/packages/documentation-v7/src/stories/foundation/layout/layout.docs.mdx
@@ -1,19 +1,17 @@
 import { Meta } from '@storybook/blocks';
 import { BADGE } from '../../../../.storybook/constants';
 
-<Meta
-  title="Foundations/Layout"
-  parameters={{ badges: [BADGE.TODO] }}
-/>
+<Meta title="Foundations/Layout" name="TODOS" parameters={{ badges: [BADGE.TODO] }} />
 
 # Layout
 
 <div className="alert alert-info">
   <h2 className="alert-heading">TODO:</h2>
 
-  Breakpoints, Containers, Grid, Columns
+<span className="text-decoration-line-through">Breakpoints</span>, Containers, Grid, Columns
 
-  Document differences and link over to bootstrap for the rest
+Document differences and link over to bootstrap for the rest
+
+Refer to the Figma Design as well: <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=0%3A1&t=6hjgJzjzxjBbh0AU-1">Figma</a>
 
-  Refer to the Figma Design as well: <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=0%3A1&t=6hjgJzjzxjBbh0AU-1">Figma</a>
 </div>
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
new file mode 100644
index 0000000000..b1ba7e060b
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
@@ -0,0 +1,29 @@
+import { forEach } from '../../../../utils/react';
+import { parse } from '../../../../utils/sass-export';
+import scss from './breakpoints.module.scss';
+
+export const SCSS_VARIABLES = parse(scss);
+export const BreakpointCount = () => <span>{Object.keys(SCSS_VARIABLES.breakpoint).length}</span>;
+
+export const BreakpointTable = (props: { name: string; value: string }) => (
+  <table className="table table-sm table-striped table-bordered">
+    <thead>
+      <tr>
+        <th>Breakpoint</th>
+        <th>Class infix</th>
+        <th>Dimensions</th>
+      </tr>
+    </thead>
+    <tbody>
+      {forEach(SCSS_VARIABLES.breakpoint, (data: { key: number; value: any }) => {
+        return (
+          <tr>
+            <td>{data.value.name}</td>
+            <td dangerouslySetInnerHTML={{ __html: data.value.infix }}></td>
+            <td>{data.value.dimensions}</td>
+          </tr>
+        );
+      })}
+    </tbody>
+  </table>
+);
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
new file mode 100644
index 0000000000..250760c880
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
@@ -0,0 +1,33 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '@swisspost/design-system-styles/core' as post;
+
+$breakpointNames: (
+  xs: Extra small,
+  sm: Small,
+  rg: Regular,
+  md: Medium,
+  lg: Large,
+  xl: Extra large,
+  xxl: Extra extra large,
+);
+
+:export {
+  @each $breakpoint, $value in post.$grid-breakpoints {
+    $i: list.index(post.$grid-breakpoints, $breakpoint $value);
+    $name: map.get($breakpointNames, $breakpoint) or $breakpoint;
+
+    breakpoint_#{$breakpoint}_name: $name;
+
+    @if $i == 1 {
+      $keys: map.keys(post.$grid-breakpoints);
+      $nextValue: map.get(post.$grid-breakpoints, list.nth($keys, $i + 1));
+
+      breakpoint_#{$breakpoint}_infix: none;
+      breakpoint_#{$breakpoint}_dimensions: #{'<' + $nextValue};
+    } @else {
+      breakpoint_#{$breakpoint}_infix: #{'<code>' + $breakpoint + '</code>'};
+      breakpoint_#{$breakpoint}_dimensions: #{'≥' + $value};
+    }
+  }
+}
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.mdx b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.mdx
new file mode 100644
index 0000000000..4527b671d6
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.mdx
@@ -0,0 +1,86 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { BreakpointTable, SCSS_VARIABLES, BreakpointCount } from './breakpoints.blocks';
+
+<Meta title="Foundations/Layout/Breakpoints" parameters={{ badges: [BADGE.NEEDS_REVISION] }} />
+
+# Breakpoints
+
+<div class="lead">
+  Breakpoints are widths that determine how the responsive layout behaves across device or viewport
+  sizes.
+</div>
+
+## Available breakpoints
+
+The SwissPost Design-System includes <BreakpointCount/> breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.
+
+<BreakpointTable />
+
+You’ll find these breakpoints in a Sass map in our styles core.
+
+```css dark
+@use '@swisspost/design-system-styles/core' as post;
+
+@each $key, $value in post.$grid-breakpoints {
+  ...;
+}
+```
+
+## Mixins
+
+There are several mixins available to use in your own Sass to help with building responsive layouts.
+
+### Min-width
+
+We primarily use the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
+
+```css dark
+// No media query necessary for xs breakpoint as it's effectively @media (min-width: 0) { ... }
+.custom-class {
+  display: none;
+}
+
+@include post.media-breakpoint-up(lg) {
+  .custom-class {
+    display: block;
+  }
+}
+```
+
+### Max-width
+
+We occasionally use media queries that go in the other direction.
+
+```css dark
+// No media query necessary for xs breakpoint as it's effectively @media (max-width: 0) { ... }
+@include post.media-breakpoint-down(lg) {
+  .custom-class {
+    display: none;
+  }
+}
+```
+
+### Single breakpoint
+
+There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
+
+```css dark
+@include post.media-breakpoint-only(xs) {
+  .custom-class {
+    display: block;
+  }
+}
+```
+
+### Between breakpoints
+
+Similarly, media queries may span multiple breakpoint widths.
+
+```css dark
+@include post.media-breakpoint-between(sm, lg) {
+  .custom-class {
+    display: block;
+  }
+}
+```
diff --git a/packages/documentation/src/stories/foundation/layout/layout.stories.mdx b/packages/documentation/src/stories/foundation/layout/layout.stories.mdx
index 78548d6ebd..3c7f509250 100644
--- a/packages/documentation/src/stories/foundation/layout/layout.stories.mdx
+++ b/packages/documentation/src/stories/foundation/layout/layout.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 
 <Meta
-  title="Foundations/Layout"
+  title="Foundations/Layout/TODOS"
   parameters={{
     previewTabs: {
       canvas: {
@@ -17,14 +17,13 @@ import { Meta } from '@storybook/addon-docs';
 
 <div className="alert alert-info">
   <h2 className="alert-heading">TODO:</h2>
-  <p>
-    Breakpoints, Containers, Grid, Columns
-    <br />
-    Document differences and link over to bootstrap for the rest
-    <br />
-    Refer to the Figma Design as well:
-    <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=0%3A1&t=6hjgJzjzxjBbh0AU-1">
-      Figma
-    </a>
-  </p>
+
+<p>
+  <span className="text-decoration-line-through">Breakpoints</span>, Containers, Grid, Columns
+</p>
+
+Document differences and link over to bootstrap for the rest
+
+Refer to the Figma Design as well: <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=0%3A1&t=6hjgJzjzxjBbh0AU-1">Figma</a>
+
 </div>

From 3a00ae525e349dfb41926ad357df2a72af96b548 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 16 Aug 2023 14:13:03 +0200
Subject: [PATCH 04/16] fix(documentation,documentation-v7): Self anchor link
 to not be redirected (#1794)

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 .../src/stories/getting-started/components.docs.mdx    |  6 ++++--
 .../src/stories/getting-started/styles.docs.mdx        |  6 ++++--
 .../src/stories/icons/getting-started.docs.mdx         |  8 +++++---
 .../stories/intranet-header/intranet-header.docs.mdx   | 10 ++++++----
 .../src/stories/components/card/card.docs.mdx          |  4 ++--
 .../src/stories/getting-started/components.stories.mdx |  6 ++++--
 .../src/stories/getting-started/styles.stories.mdx     |  6 ++++--
 .../src/stories/icons/getting-started.stories.mdx      | 10 ++++++----
 .../internet-header/getting-started.stories.mdx        | 10 ++++++----
 .../intranet-header/getting-started.stories.mdx        | 10 ++++++----
 10 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/packages/documentation-v7/src/stories/getting-started/components.docs.mdx b/packages/documentation-v7/src/stories/getting-started/components.docs.mdx
index cd421a857c..4656331e49 100644
--- a/packages/documentation-v7/src/stories/getting-started/components.docs.mdx
+++ b/packages/documentation-v7/src/stories/getting-started/components.docs.mdx
@@ -12,8 +12,10 @@ import { BADGE } from '../../../.storybook/constants';
 
 A set of standard web components for easy integration with every framework or no framework at all.
 
-- [Installation](#installation)
-- [Usage](#usage)
+<ul>
+  <li><a href="#installation" target="_self">Installation</a></li>
+  <li><a href="#usage" target="_self">Usage</a></li>
+</ul>
 
 ## Installation
 
diff --git a/packages/documentation-v7/src/stories/getting-started/styles.docs.mdx b/packages/documentation-v7/src/stories/getting-started/styles.docs.mdx
index da88545cd2..a3adcfe2c9 100644
--- a/packages/documentation-v7/src/stories/getting-started/styles.docs.mdx
+++ b/packages/documentation-v7/src/stories/getting-started/styles.docs.mdx
@@ -12,8 +12,10 @@ import { BADGE } from '../../../.storybook/constants';
 
 The styling package, including theming for [Bootstrap](https://getbootstrap.com/) and [ng-bootstrap](https://ng-bootstrap.github.io/#/home) components.
 
-- [Installation](#installation)
-- [Usage](#usage)
+<ul>
+  <li><a href="#installation" target="_self">Installation</a></li>
+  <li><a href="#usage" target="_self">Usage</a></li>
+</ul>
 
 ## Installation
 
diff --git a/packages/documentation-v7/src/stories/icons/getting-started.docs.mdx b/packages/documentation-v7/src/stories/icons/getting-started.docs.mdx
index 47995f3bec..c7edf79130 100644
--- a/packages/documentation-v7/src/stories/icons/getting-started.docs.mdx
+++ b/packages/documentation-v7/src/stories/icons/getting-started.docs.mdx
@@ -10,9 +10,11 @@ import { BADGE } from '../../../.storybook/constants';
 
 The comprehensive collection of Swiss Post icons.
 
-- [Installation](#installation)
-- [Configuration](#configuration)
-- [CDN approach](#cdn-approach)
+<ul>
+  <li><a href="#installation" target="_self">Installation</a></li>
+  <li><a href="#configuration" target="_self">Configuration</a></li>
+  <li><a href="#cdn-approach" target="_self">CDN approach</a></li>
+</ul>
 
 ## Installation
 
diff --git a/packages/documentation-v7/src/stories/intranet-header/intranet-header.docs.mdx b/packages/documentation-v7/src/stories/intranet-header/intranet-header.docs.mdx
index 1c3e7e127c..d327d97471 100644
--- a/packages/documentation-v7/src/stories/intranet-header/intranet-header.docs.mdx
+++ b/packages/documentation-v7/src/stories/intranet-header/intranet-header.docs.mdx
@@ -1,4 +1,4 @@
-import { Meta, ArgTypes } from '@storybook/blocks';
+import { ArgTypes, Meta } from '@storybook/blocks';
 import * as IntranetHeaderStories from './intranet-header.stories';
 
 <Meta of={IntranetHeaderStories} />
@@ -13,9 +13,11 @@ import * as IntranetHeaderStories from './intranet-header.stories';
 
 The Header Angular component for internal usage.
 
-- [Installation](#installation)
-- [Configuration](#configuration)
-- [Examples](#examples)
+<ul>
+  <li><a href="#installation" target="_self">Installation</a></li>
+  <li><a href="#usage" target="_self">Usage</a></li>
+  <li><a href="#examples" target="_self">Examples</a></li>
+</ul>
 
 ## Installation
 
diff --git a/packages/documentation/src/stories/components/card/card.docs.mdx b/packages/documentation/src/stories/components/card/card.docs.mdx
index 67821649d8..f2aff5a867 100644
--- a/packages/documentation/src/stories/components/card/card.docs.mdx
+++ b/packages/documentation/src/stories/components/card/card.docs.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="Components/Card" />
 
@@ -12,7 +12,7 @@ A card is a flexible and extensible content container.<br/>
 Built with flexbox, they offer easy alignment and mix well with other components.
 
 Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.<br/>
-Use our [sizing examples](#sizing) to customize the size of a card.
+Use our <a href="#sizing" target="_self">sizing examples</a> to customize the size of a card.
 
 Last but not least, our card component is based on the <a href="https://getbootstrap.com/docs/5.1/components/card/" target="_blank">bootstrap card</a> component.<br/>
 Please also have a look at their documentation if you want to get more details or see even more examples.
diff --git a/packages/documentation/src/stories/getting-started/components.stories.mdx b/packages/documentation/src/stories/getting-started/components.stories.mdx
index 5737f51c70..ff9d676e18 100644
--- a/packages/documentation/src/stories/getting-started/components.stories.mdx
+++ b/packages/documentation/src/stories/getting-started/components.stories.mdx
@@ -20,8 +20,10 @@ import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
 A set of standard web components for easy integration with every framework or no framework at all.
 
-- [Installation](#installation)
-- [Usage](#usage)
+<ul>
+  <li><a href="#installation" target="_self">Installation</a></li>
+  <li><a href="#usage" target="_self">Usage</a></li>
+</ul>
 
 ## Installation
 
diff --git a/packages/documentation/src/stories/getting-started/styles.stories.mdx b/packages/documentation/src/stories/getting-started/styles.stories.mdx
index 35042c59b4..b5ccb89e4d 100644
--- a/packages/documentation/src/stories/getting-started/styles.stories.mdx
+++ b/packages/documentation/src/stories/getting-started/styles.stories.mdx
@@ -20,8 +20,10 @@ import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
 The styling package, including theming for [Bootstrap](https://getbootstrap.com/) and [ng-bootstrap](https://ng-bootstrap.github.io/#/home) components.
 
-- [Installation](#installation)
-- [Usage](#usage)
+<ul>
+  <li><a href="#installation" target="_self">Installation</a></li>
+  <li><a href="#usage" target="_self">Usage</a></li>
+</ul>
 
 ## Installation
 
diff --git a/packages/documentation/src/stories/icons/getting-started.stories.mdx b/packages/documentation/src/stories/icons/getting-started.stories.mdx
index 519a2800cf..16d94f3e4a 100644
--- a/packages/documentation/src/stories/icons/getting-started.stories.mdx
+++ b/packages/documentation/src/stories/icons/getting-started.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta, Source } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs';
 import LinkTo from '@storybook/addon-links/react';
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
@@ -21,9 +21,11 @@ import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
 The comprehensive collection of Swiss Post icons.
 
-- [Installation](#installation)
-- [Configuration](#configuration)
-- [CDN approach](#cdn-approach)
+<ul>
+  <li><a href="#installation" target="_self">Installation</a></li>
+  <li><a href="#configuration" target="_self">Configuration</a></li>
+  <li><a href="#cdn-approach" target="_self">CDN approach</a></li>
+</ul>
 
 ## Installation
 
diff --git a/packages/documentation/src/stories/internet-header/getting-started.stories.mdx b/packages/documentation/src/stories/internet-header/getting-started.stories.mdx
index 5c12e0c8c1..b63882db93 100644
--- a/packages/documentation/src/stories/internet-header/getting-started.stories.mdx
+++ b/packages/documentation/src/stories/internet-header/getting-started.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs';
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
 <Meta title="Internet Header/Getting started" parameters={{ badges: [BADGE.STABLE] }} />
@@ -9,9 +9,11 @@ import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
 The header for client-facing applications.
 
-- [Installation](#installation)
-- [Configuration](#configuration)
-- [Help](#help)
+<ul>
+  <li><a href="#installation" target="_self">Installation</a></li>
+  <li><a href="#configuration" target="_self">Configuration</a></li>
+  <li><a href="#help" target="_self">Help</a></li>
+</ul>
 
 ## Installation
 
diff --git a/packages/documentation/src/stories/intranet-header/getting-started.stories.mdx b/packages/documentation/src/stories/intranet-header/getting-started.stories.mdx
index 0293d94e6b..fe91b3502a 100644
--- a/packages/documentation/src/stories/intranet-header/getting-started.stories.mdx
+++ b/packages/documentation/src/stories/intranet-header/getting-started.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Meta, ArgsTable } from '@storybook/addon-docs';
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
 <Meta
@@ -162,9 +162,11 @@ import { BADGE } from '@geometricpanda/storybook-addon-badges';
 
 The Header Angular component for internal usage.
 
-- [Installation](#installation)
-- [Configuration](#configuration)
-- [Examples](#examples)
+<ul>
+  <li><a href="#installation" target="_self">Installation</a></li>
+  <li><a href="#usage" target="_self">Usage</a></li>
+  <li><a href="#examples" target="_self">Examples</a></li>
+</ul>
 
 <p className="alert alert-info alert-md">
   The Intranet Header is an <a href="//Angular.io" target="_blank">Angular</a> component and as such only works with Angular projects.

From 0f684606fd1717ae760163f0ed449bab49e381b9 Mon Sep 17 00:00:00 2001
From: Lukas Blaser <141234680+b1aserlu@users.noreply.github.com>
Date: Wed, 16 Aug 2023 16:27:55 +0200
Subject: [PATCH 05/16] feat(documentation-v7): migrate table component stories
 (#1803)

---
 .../stories/components/table/table.docs.mdx   |  39 +++
 .../stories/components/table/table.stories.ts | 224 ++++++++++++++++++
 2 files changed, 263 insertions(+)
 create mode 100644 packages/documentation-v7/src/stories/components/table/table.docs.mdx
 create mode 100644 packages/documentation-v7/src/stories/components/table/table.stories.ts

diff --git a/packages/documentation-v7/src/stories/components/table/table.docs.mdx b/packages/documentation-v7/src/stories/components/table/table.docs.mdx
new file mode 100644
index 0000000000..19b54489d8
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/table/table.docs.mdx
@@ -0,0 +1,39 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as TableStories from './table.stories';
+
+<Meta of={TableStories} />
+
+# Table
+
+<div className="lead">
+  Customize the native <code>&lt;table&gt;</code> element with CSS that changes the element’s
+  initial appearance.
+</div>
+
+<Canvas of={TableStories.Default} />
+<div className="hide-col-default">
+  <Controls of={TableStories.Default} />
+</div>
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```scss
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```scss
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/table.scss';
+```
+
+## Usage examples
+
+### Table with buttons
+
+When buttons are placed in a table, be sure to use `alignment: middle`, respectively `<tbody class="align-middle">` to nicely align the content and the buttons.
+
+<Canvas of={TableStories.TableWithButtons} />
diff --git a/packages/documentation-v7/src/stories/components/table/table.stories.ts b/packages/documentation-v7/src/stories/components/table/table.stories.ts
new file mode 100644
index 0000000000..a27e60447b
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/table/table.stories.ts
@@ -0,0 +1,224 @@
+import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { mapClasses } from '../../../utils';
+
+const meta: Meta = {
+  title: 'Components/Table',
+  render: renderTable,
+  parameters: {},
+  args: {
+    variant: [],
+    borderStyle: 'null',
+    caption: 'List of users',
+    captionPlacement: 'bottom',
+    alignment: 'align-top',
+    content: null,
+  },
+  argTypes: {
+    content: {
+      name: 'Content',
+      description: 'Hidden helper arg for dynamically switching the table body',
+      table: {
+        disable: true,
+      },
+    },
+    caption: {
+      name: 'Caption',
+      description: 'A description of the table, very useful for screen reader users.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Caption',
+      },
+    },
+    captionPlacement: {
+      name: 'Caption Placement',
+      description:
+        'Choose where to place the description of the table. If a visual description is not necessary, it can also be hidden visually and still be of value for screen reader users.',
+      control: {
+        type: 'select',
+        labels: {
+          bottom: 'Bottom (default)',
+          top: 'Top',
+          hidden: 'Visually hidden',
+        },
+      },
+      options: ['bottom', 'top', 'hidden'],
+      table: {
+        category: 'Caption',
+      },
+    },
+    borderStyle: {
+      name: 'Border style',
+      description: 'Border style',
+      control: {
+        type: 'radio',
+        labels: {
+          'null': 'Default (underlined)',
+          'table-bordered': 'Bordered',
+          'table-borderless': 'Borderless',
+        },
+      },
+      options: ['null', 'table-bordered', 'table-borderless'],
+      table: {
+        category: 'General',
+      },
+    },
+    variant: {
+      name: 'Variants',
+      description: 'Stylistic table variants.',
+      control: {
+        type: 'check',
+        labels: {
+          'table-sm': 'Small',
+          'table-striped': 'Striped',
+          'table-hover': 'Hover enabled',
+        },
+      },
+      options: ['table-sm', 'table-striped', 'table-hover'],
+      table: {
+        category: 'General',
+      },
+    },
+    alignment: {
+      name: 'Alignment',
+      description:
+        'Vertical alignment options for cell content. Alignment classes can also be set for individual rows or cells.',
+      control: {
+        type: 'select',
+        labels: {
+          'align-top': 'Top (default)',
+          'align-middle': 'Middle',
+          'align-bottom': 'Bottom',
+        },
+      },
+      options: ['align-top', 'align-middle', 'align-bottom'],
+      table: {
+        category: 'General',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function renderTable(args: Args) {
+  const cationTop = args.captionPlacement === 'top' ? 'caption-top' : 'null';
+  const variants = args.variant.join(' ');
+  return html`
+    <table
+      class=${mapClasses({
+        table: true,
+        [args.borderStyle]: args.borderStyle && args.borderStyle !== 'null',
+        [variants]: variants && variants !== '',
+        [cationTop]: cationTop !== 'null',
+        [args.alignment]: args.alignment && args.alignment !== 'null',
+      })}
+    >
+      <caption class=${args.captionPlacement === 'hidden' ? 'visually-hidden' : ''}>
+        ${args.caption}
+      </caption>
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">First</th>
+          <th scope="col">Last</th>
+          <th scope="col">Handle</th>
+        </tr>
+      </thead>
+
+      <tbody>${args.content}</tbody>
+    </table>
+  `;
+}
+
+export const Default: Story = {
+  args: {
+    content: html`
+      <tr>
+        <th scope="row">1</th>
+        <td>Mark</td>
+        <td>Otto</td>
+        <td>@mdo</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jacob</td>
+        <td>Thornton</td>
+        <td>@fat</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Larry</td>
+        <td>the Bird</td>
+        <td>@twitter</td>
+      </tr>
+      <tr>
+        <th scope="row">4</th>
+        <td>Someone</td>
+        <td>
+          else
+          <br />
+          entirely
+        </td>
+        <td>@twitter</td>
+      </tr>
+    `,
+  },
+};
+
+export const TableWithButtons: Story = {
+  args: {
+    alignment: 'align-middle',
+    content: html`
+      <tr>
+        <th scope="row">1</th>
+        <td>Mark</td>
+        <td>Otto</td>
+        <td>
+          <button class="btn btn-secondary btn-icon btn-md">
+            <span class="visually-hidden">Edit</span>
+            <i class="pi pi-2012"></i>
+          </button>
+          <button class="btn btn-primary btn-icon btn-md ms-2">
+            <span class="visually-hidden">Edit</span>
+            <i class="pi pi-3193"></i>
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jacob</td>
+        <td>Thornton</td>
+        <td>
+          <button class="btn btn-secondary btn-icon btn-md">
+            <span class="visually-hidden">Edit</span>
+            <i class="pi pi-2012"></i>
+          </button>
+          <button class="btn btn-primary btn-icon btn-md ms-2">
+            <span class="visually-hidden">Edit</span>
+            <i class="pi pi-3193"></i>
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Larry</td>
+        <td>the Bird</td>
+        <td>
+          <button class="btn btn-secondary btn-icon btn-md">
+            <span class="visually-hidden">Edit</span>
+            <i class="pi pi-2012"></i>
+          </button>
+          <button class="btn btn-primary btn-icon btn-md ms-2">
+            <span class="visually-hidden">Edit</span>
+            <i class="pi pi-3193"></i>
+          </button>
+        </td>
+      </tr>
+    `,
+  },
+};

From bbc2a678cb796a3b1eff3fb344337dd0056f948c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Thu, 17 Aug 2023 08:35:23 +0200
Subject: [PATCH 06/16] fix(styles): missing calendar icon with named icon
 (#1806)

---
 .changeset/long-pumpkins-repeat.md                           | 5 +++++
 .changeset/serious-toes-speak.md                             | 5 +++++
 .../datepicker-demo-page/datepicker-demo-page.component.html | 5 +++++
 .../datepicker-simple/datepicker-simple-lg.component.html    | 2 +-
 .../datepicker-simple/datepicker-simple.component.html       | 2 +-
 .../datepicker-validation-lg.component.html                  | 2 +-
 .../datepicker-validation.component.html                     | 2 +-
 packages/demo/src/styles.scss                                | 4 ----
 packages/styles/src/components/datepicker.scss               | 5 +++++
 9 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/long-pumpkins-repeat.md
 create mode 100644 .changeset/serious-toes-speak.md

diff --git a/.changeset/long-pumpkins-repeat.md b/.changeset/long-pumpkins-repeat.md
new file mode 100644
index 0000000000..7b6260fae3
--- /dev/null
+++ b/.changeset/long-pumpkins-repeat.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed the `.pi-calendar` class not showing an icon in the datepicker.
diff --git a/.changeset/serious-toes-speak.md b/.changeset/serious-toes-speak.md
new file mode 100644
index 0000000000..dee998ab73
--- /dev/null
+++ b/.changeset/serious-toes-speak.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Deprecated the `.pi-calendar` class in favor of the `.pi-3203` class to display the calendar icon in the datepicker.
diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html
index 781d329906..2fee675f06 100644
--- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html
@@ -3,6 +3,11 @@ <h1 class="bold font-curve-large">Datepicker</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-bigger-big">
+  <p>The <code>.pi-calendar</code> class previously used to display the calendar icon in the datepicker button
+    has been deprecated in favor of the <code>.pi-3203</code> class which shows the same icon.</p>
+</div>
+
 <section>
   <p id="languageSelectorTitle" class="light font-curve-regular">Choose a language:</p>
 
diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-lg.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-lg.component.html
index 4a91f42fe1..97f7cd24b6 100644
--- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-lg.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple-lg.component.html
@@ -10,6 +10,6 @@
          type="text"/>
   <label for="dpSimple" class="form-label">Simple datepicker</label>
   <button class="ngb-dp-open" (click)="dpSimple.toggle()" aria-label="Open calendar">
-    <i class="pi pi-calendar" aria-hidden="true"></i>
+    <i class="pi pi-3203" aria-hidden="true"></i>
   </button>
 </div>
diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple.component.html
index 0b82924c53..1ae82672d8 100644
--- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-simple/datepicker-simple.component.html
@@ -11,6 +11,6 @@
          placeholder="yyyy-mm-dd"
          type="text">
   <button class="ngb-dp-open" (click)="dpSimple.toggle()" aria-label="Open calendar">
-    <i class="pi pi-calendar" aria-hidden="true"></i>
+    <i class="pi pi-3203" aria-hidden="true"></i>
   </button>
 </div>
diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.html
index 28b2274400..0c8d092297 100644
--- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation-lg.component.html
@@ -14,7 +14,7 @@
   <label for="dpValidation" class="form-label">Datepicker with validation</label>
 
   <button class="ngb-dp-open" (click)="dpValidation.toggle()" aria-label="Open calendar">
-    <i class="pi pi-calendar" aria-hidden="true"></i>
+    <i class="pi pi-3203" aria-hidden="true"></i>
   </button>
 
   <p class="valid-feedback">Valid feedback</p>
diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.html
index 0932c5e449..c8fac6c868 100644
--- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-validation/datepicker-validation.component.html
@@ -14,7 +14,7 @@
          type="text">
 
   <button class="ngb-dp-open" (click)="dpValidation.toggle()" aria-label="Open calendar">
-    <i class="pi pi-calendar" aria-hidden="true"></i>
+    <i class="pi pi-3203" aria-hidden="true"></i>
   </button>
 
   <p class="valid-feedback">Valid feedback</p>
diff --git a/packages/demo/src/styles.scss b/packages/demo/src/styles.scss
index 27fd5c606c..ea77d270ed 100644
--- a/packages/demo/src/styles.scss
+++ b/packages/demo/src/styles.scss
@@ -52,10 +52,6 @@ body {
   @include post.pi(2104, 'white');
 }
 
-.pi-calendar {
-  @include post.pi(3203);
-}
-
 .code-sample {
   margin-top: 35px;
   text-align: center;
diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss
index 7d8ffb7c94..55602aba62 100644
--- a/packages/styles/src/components/datepicker.scss
+++ b/packages/styles/src/components/datepicker.scss
@@ -5,6 +5,7 @@
 @use './../variables/components/datepicker';
 @use './../variables/components/forms';
 @use './../variables/commons';
+@use './../mixins/icons' as icons-mx;
 
 ngb-datepicker {
   // Conversion for compatibility
@@ -131,7 +132,9 @@ span.ngb-dp-navigation-chevron {
   width: forms.$input-height-inner;
   background: transparent;
 
+  .pi-3203,
   .pi-calendar {
+    @include icons-mx.pi(3203);
     width: datepicker.$ngb-dp-icon-size;
     height: datepicker.$ngb-dp-icon-size;
     transform: none;
@@ -142,6 +145,7 @@ span.ngb-dp-navigation-chevron {
   height: forms.$input-height-inner-sm;
   width: forms.$input-height-inner-sm;
 
+  .pi-3203,
   .pi-calendar {
     width: datepicker.$ngb-dp-icon-size-sm;
     height: datepicker.$ngb-dp-icon-size-sm;
@@ -158,6 +162,7 @@ span.ngb-dp-navigation-chevron {
   height: forms.$input-height-inner-lg;
   width: forms.$input-height-inner-lg;
 
+  .pi-3203,
   .pi-calendar {
     width: datepicker.$ngb-dp-icon-size-lg;
     height: datepicker.$ngb-dp-icon-size-lg;

From 9a959bc810e8ef28496fe6b254dc67f997a5fa51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Thu, 17 Aug 2023 08:41:04 +0200
Subject: [PATCH 07/16] chore(documentation-v7): add stories for all doc pages
 (#1788)

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 packages/documentation-v7/.storybook/preview.ts   |  2 +-
 .../components/input-group/input-group.docs.mdx   |  9 ++++-----
 .../components/input-group/input-group.stories.ts | 15 +++++++++++++++
 .../accessibility/accessibility.docs.mdx          |  7 ++-----
 .../accessibility/accessibility.stories.ts        | 15 +++++++++++++++
 .../src/stories/foundation/color/color.docs.mdx   |  4 ++--
 .../src/stories/foundation/color/color.stories.ts | 15 +++++++++++++++
 .../layout/breakpoints/breakpoints.docs.mdx       |  6 +++---
 .../layout/breakpoints/breakpoints.stories.ts     | 15 +++++++++++++++
 .../src/stories/foundation/layout/layout.docs.mdx |  4 ++--
 .../stories/foundation/layout/layout.stories.ts   | 15 +++++++++++++++
 .../foundation/typography/typography.docs.mdx     |  7 ++-----
 .../foundation/typography/typography.stories.ts   | 15 +++++++++++++++
 .../{ => components}/components.docs.mdx          |  7 ++-----
 .../components/components.stories.ts              | 15 +++++++++++++++
 .../getting-started/{ => styles}/styles.docs.mdx  |  7 ++-----
 .../getting-started/styles/styles.stories.ts      | 15 +++++++++++++++
 .../src/stories/icons/getting-started.docs.mdx    |  4 ++--
 .../src/stories/icons/getting-started.stories.ts  | 15 +++++++++++++++
 .../misc/{ => changelog}/changelog.docs.mdx       |  4 ++--
 .../migration-guide.docs.mdx                      |  4 ++--
 .../migration-guide/migration-guide.stories.ts    | 15 +++++++++++++++
 .../misc/{ => versions}/versions.blocks.tsx       |  2 +-
 .../stories/misc/{ => versions}/versions.docs.mdx |  4 ++--
 .../src/stories/misc/versions/versions.stories.ts | 15 +++++++++++++++
 .../src/stories/templates/forms/forms.docs.mdx    |  4 ++--
 .../src/stories/templates/forms/forms.stories.ts  | 15 +++++++++++++++
 .../src/stories/utilities/common/common.docs.mdx  |  7 ++-----
 .../stories/utilities/common/common.stories.ts    | 15 +++++++++++++++
 .../src/stories/utilities/sizing/sizing.docs.mdx  |  7 ++-----
 .../stories/utilities/sizing/sizing.stories.ts    | 15 +++++++++++++++
 .../stories/utilities/spacing/spacing.docs.mdx    |  7 ++-----
 .../stories/utilities/spacing/spacing.stories.ts  | 15 +++++++++++++++
 33 files changed, 262 insertions(+), 59 deletions(-)
 create mode 100644 packages/documentation-v7/src/stories/components/input-group/input-group.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/foundation/accessibility/accessibility.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/foundation/color/color.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/foundation/layout/layout.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/foundation/typography/typography.stories.ts
 rename packages/documentation-v7/src/stories/getting-started/{ => components}/components.docs.mdx (88%)
 create mode 100644 packages/documentation-v7/src/stories/getting-started/components/components.stories.ts
 rename packages/documentation-v7/src/stories/getting-started/{ => styles}/styles.docs.mdx (92%)
 create mode 100644 packages/documentation-v7/src/stories/getting-started/styles/styles.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/icons/getting-started.stories.ts
 rename packages/documentation-v7/src/stories/misc/{ => changelog}/changelog.docs.mdx (51%)
 rename packages/documentation-v7/src/stories/misc/{ => migration-guide}/migration-guide.docs.mdx (69%)
 create mode 100644 packages/documentation-v7/src/stories/misc/migration-guide/migration-guide.stories.ts
 rename packages/documentation-v7/src/stories/misc/{ => versions}/versions.blocks.tsx (97%)
 rename packages/documentation-v7/src/stories/misc/{ => versions}/versions.docs.mdx (71%)
 create mode 100644 packages/documentation-v7/src/stories/misc/versions/versions.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/templates/forms/forms.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/utilities/common/common.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/utilities/sizing/sizing.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/utilities/spacing/spacing.stories.ts

diff --git a/packages/documentation-v7/.storybook/preview.ts b/packages/documentation-v7/.storybook/preview.ts
index d42be1d4fd..9eb4868e07 100644
--- a/packages/documentation-v7/.storybook/preview.ts
+++ b/packages/documentation-v7/.storybook/preview.ts
@@ -42,7 +42,7 @@ const preview: Preview = {
           'Templates',
           'Utilities',
           'Misc',
-          ['Migration Guide', 'ChangeLog', 'Versions'],
+          ['Migration Guide', 'Changelog', 'Versions'],
           'Snapshots',
         ],
       },
diff --git a/packages/documentation-v7/src/stories/components/input-group/input-group.docs.mdx b/packages/documentation-v7/src/stories/components/input-group/input-group.docs.mdx
index ebef6a12a4..35b0e92ee3 100644
--- a/packages/documentation-v7/src/stories/components/input-group/input-group.docs.mdx
+++ b/packages/documentation-v7/src/stories/components/input-group/input-group.docs.mdx
@@ -1,10 +1,9 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Meta } from '@storybook/blocks';
+import * as InputGroupStories from './input-group.stories';
 
-import { BADGE } from '../../../../.storybook/constants';
+<Meta of={InputGroupStories} />
 
-<Meta title="Components/Input-Group" parameters={{ badges: [BADGE.TODO] }} />
-
-# Input-Group
+# Input Group
 
 <div className="alert alert-info">
   <h2 className="alert-heading">TODO:</h2>
diff --git a/packages/documentation-v7/src/stories/components/input-group/input-group.stories.ts b/packages/documentation-v7/src/stories/components/input-group/input-group.stories.ts
new file mode 100644
index 0000000000..b7d4b6dea9
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/input-group/input-group.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Components/Input Group',
+  parameters: {
+    badges: [BADGE.TODO],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/foundation/accessibility/accessibility.docs.mdx b/packages/documentation-v7/src/stories/foundation/accessibility/accessibility.docs.mdx
index b16a1af242..2c497d39fa 100644
--- a/packages/documentation-v7/src/stories/foundation/accessibility/accessibility.docs.mdx
+++ b/packages/documentation-v7/src/stories/foundation/accessibility/accessibility.docs.mdx
@@ -1,10 +1,7 @@
 import { Meta } from '@storybook/blocks';
-import { BADGE } from '../../../../.storybook/constants';
+import * as AccessibilityStories from './accessibility.stories';
 
-<Meta
-  title="Foundations/Accessibility"
-  parameters={{ badges: [BADGE] }}
-/>
+<Meta of={AccessibilityStories} />
 
 # Accessibility
 
diff --git a/packages/documentation-v7/src/stories/foundation/accessibility/accessibility.stories.ts b/packages/documentation-v7/src/stories/foundation/accessibility/accessibility.stories.ts
new file mode 100644
index 0000000000..edde30f568
--- /dev/null
+++ b/packages/documentation-v7/src/stories/foundation/accessibility/accessibility.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Foundations/Accessibility',
+  parameters: {
+    badges: [BADGE.TODO],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx b/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx
index 6495c5a0a2..ba779620d9 100644
--- a/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx
+++ b/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx
@@ -1,11 +1,11 @@
 import { Meta } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
-import { BADGE } from '../../../../.storybook/constants';
 import { forEach } from '../../../utils/react';
+import * as ColorStories from './color.stories';
 import { ColorSwatch, SCSS_VARIABLES } from './color.blocks';
 import './color.styles.scss';
 
-<Meta title="Foundations/Color" parameters={{ badges: [BADGE.BETA, BADGE.NEEDS_REVISION] }} />
+<Meta of={ColorStories} />
 
 # Color
 
diff --git a/packages/documentation-v7/src/stories/foundation/color/color.stories.ts b/packages/documentation-v7/src/stories/foundation/color/color.stories.ts
new file mode 100644
index 0000000000..a0a4cb44a6
--- /dev/null
+++ b/packages/documentation-v7/src/stories/foundation/color/color.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Foundations/Color',
+  parameters: {
+    badges: [BADGE.BETA, BADGE.NEEDS_REVISION],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx b/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
index 80f3f15657..305a31f393 100644
--- a/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
+++ b/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
@@ -1,8 +1,8 @@
-import { Meta, Story } from '@storybook/blocks';
-import { BADGE } from '../../../../../.storybook/constants';
+import { Meta } from '@storybook/blocks';
 import { BreakpointTable, SCSS_VARIABLES } from './breakpoints.blocks';
+import * as BreakpointStories from './breakpoints.stories';
 
-<Meta title="Foundations/Layout/Breakpoints" parameters={{ badges: [BADGE.NEEDS_REVISION] }} />
+<Meta of={BreakpointStories} />
 
 # Breakpoints
 
diff --git a/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts b/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
new file mode 100644
index 0000000000..8aa74e4e5d
--- /dev/null
+++ b/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Foundations/Layout/Breakpoints',
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/foundation/layout/layout.docs.mdx b/packages/documentation-v7/src/stories/foundation/layout/layout.docs.mdx
index 14772f6661..9b7fe06fa4 100644
--- a/packages/documentation-v7/src/stories/foundation/layout/layout.docs.mdx
+++ b/packages/documentation-v7/src/stories/foundation/layout/layout.docs.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/blocks';
-import { BADGE } from '../../../../.storybook/constants';
+import * as LayoutStories from './layout.stories';
 
-<Meta title="Foundations/Layout" name="TODOS" parameters={{ badges: [BADGE.TODO] }} />
+<Meta of={LayoutStories} />
 
 # Layout
 
diff --git a/packages/documentation-v7/src/stories/foundation/layout/layout.stories.ts b/packages/documentation-v7/src/stories/foundation/layout/layout.stories.ts
new file mode 100644
index 0000000000..9a2772e835
--- /dev/null
+++ b/packages/documentation-v7/src/stories/foundation/layout/layout.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Foundations/Layout/TODOS',
+  parameters: {
+    badges: [BADGE.TODO],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/foundation/typography/typography.docs.mdx b/packages/documentation-v7/src/stories/foundation/typography/typography.docs.mdx
index 8f5f218e4e..7a1b0ea272 100644
--- a/packages/documentation-v7/src/stories/foundation/typography/typography.docs.mdx
+++ b/packages/documentation-v7/src/stories/foundation/typography/typography.docs.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
-import { BADGE } from '../../../../.storybook/constants';
+import * as TypographyStories from './typography.stories';
 import {
   FontFaceWrapper,
   FontFace,
@@ -14,10 +14,7 @@ import {
 } from './typography.blocks';
 import './typography.styles.scss';
 
-<Meta
-  title="Foundations/Typography"
-  parameters={{ badges: [BADGE.BETA, BADGE.NEEDS_REVISION] }}
-/>
+<Meta of={TypographyStories} />
 
 # Typography
 
diff --git a/packages/documentation-v7/src/stories/foundation/typography/typography.stories.ts b/packages/documentation-v7/src/stories/foundation/typography/typography.stories.ts
new file mode 100644
index 0000000000..9c9c77a13b
--- /dev/null
+++ b/packages/documentation-v7/src/stories/foundation/typography/typography.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Foundations/Typography',
+  parameters: {
+    badges: [BADGE.BETA, BADGE.NEEDS_REVISION],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/getting-started/components.docs.mdx b/packages/documentation-v7/src/stories/getting-started/components/components.docs.mdx
similarity index 88%
rename from packages/documentation-v7/src/stories/getting-started/components.docs.mdx
rename to packages/documentation-v7/src/stories/getting-started/components/components.docs.mdx
index 4656331e49..70ff0f8534 100644
--- a/packages/documentation-v7/src/stories/getting-started/components.docs.mdx
+++ b/packages/documentation-v7/src/stories/getting-started/components/components.docs.mdx
@@ -1,10 +1,7 @@
 import { Meta } from '@storybook/blocks';
-import { BADGE } from '../../../.storybook/constants';
+import * as GettingStartedStories from './components.stories';
 
-<Meta
-  title="Getting Started/Components"
-  parameters={{ badges: [BADGE.NEEDS_REVISION] }}
-/>
+<Meta of={GettingStartedStories} />
 
 # @swisspost/design-system-components
 
diff --git a/packages/documentation-v7/src/stories/getting-started/components/components.stories.ts b/packages/documentation-v7/src/stories/getting-started/components/components.stories.ts
new file mode 100644
index 0000000000..cacee53bdd
--- /dev/null
+++ b/packages/documentation-v7/src/stories/getting-started/components/components.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Getting Started/Components',
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/getting-started/styles.docs.mdx b/packages/documentation-v7/src/stories/getting-started/styles/styles.docs.mdx
similarity index 92%
rename from packages/documentation-v7/src/stories/getting-started/styles.docs.mdx
rename to packages/documentation-v7/src/stories/getting-started/styles/styles.docs.mdx
index a3adcfe2c9..1d1e0c28f5 100644
--- a/packages/documentation-v7/src/stories/getting-started/styles.docs.mdx
+++ b/packages/documentation-v7/src/stories/getting-started/styles/styles.docs.mdx
@@ -1,10 +1,7 @@
 import { Meta } from '@storybook/blocks';
-import { BADGE } from '../../../.storybook/constants';
+import * as GettingStartedStories from './styles.stories';
 
-<Meta
-  title="Getting Started/Styles"
-  parameters={{ badges: [BADGE.NEEDS_REVISION] }}
-/>
+<Meta of={GettingStartedStories} />
 
 # @swisspost/design-system-styles
 
diff --git a/packages/documentation-v7/src/stories/getting-started/styles/styles.stories.ts b/packages/documentation-v7/src/stories/getting-started/styles/styles.stories.ts
new file mode 100644
index 0000000000..27b5d70775
--- /dev/null
+++ b/packages/documentation-v7/src/stories/getting-started/styles/styles.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Getting Started/Styles',
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/icons/getting-started.docs.mdx b/packages/documentation-v7/src/stories/icons/getting-started.docs.mdx
index c7edf79130..c9c1338311 100644
--- a/packages/documentation-v7/src/stories/icons/getting-started.docs.mdx
+++ b/packages/documentation-v7/src/stories/icons/getting-started.docs.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
-import { BADGE } from '../../../.storybook/constants';
+import * as GettingStartedStories from './getting-started.stories';
 
-<Meta title="Icons/Getting started" parameters={{ badges: [BADGE.NEEDS_REVISION] }} />
+<Meta of={GettingStartedStories} />
 
 # @swisspost/design-system-icons
 
diff --git a/packages/documentation-v7/src/stories/icons/getting-started.stories.ts b/packages/documentation-v7/src/stories/icons/getting-started.stories.ts
new file mode 100644
index 0000000000..fae506833f
--- /dev/null
+++ b/packages/documentation-v7/src/stories/icons/getting-started.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Icons/Getting started',
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/misc/changelog.docs.mdx b/packages/documentation-v7/src/stories/misc/changelog/changelog.docs.mdx
similarity index 51%
rename from packages/documentation-v7/src/stories/misc/changelog.docs.mdx
rename to packages/documentation-v7/src/stories/misc/changelog/changelog.docs.mdx
index 1c35b4b1c9..f6a49b5ef8 100644
--- a/packages/documentation-v7/src/stories/misc/changelog.docs.mdx
+++ b/packages/documentation-v7/src/stories/misc/changelog/changelog.docs.mdx
@@ -1,8 +1,8 @@
 import { Markdown, Meta } from '@storybook/blocks';
-import changelog from '../../../../styles/CHANGELOG.md?raw';
+import changelog from '../../../../../styles/CHANGELOG.md?raw';
 
 <Meta
-  title="Misc/ChangeLog"
+  title="Misc/Changelog"
 />
 
 <Markdown>{changelog}</Markdown>
diff --git a/packages/documentation-v7/src/stories/misc/migration-guide.docs.mdx b/packages/documentation-v7/src/stories/misc/migration-guide/migration-guide.docs.mdx
similarity index 69%
rename from packages/documentation-v7/src/stories/misc/migration-guide.docs.mdx
rename to packages/documentation-v7/src/stories/misc/migration-guide/migration-guide.docs.mdx
index 56c956f56c..efc1708f90 100644
--- a/packages/documentation-v7/src/stories/misc/migration-guide.docs.mdx
+++ b/packages/documentation-v7/src/stories/misc/migration-guide/migration-guide.docs.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/blocks';
-import { BADGE } from '../../../.storybook/constants';
+import * as MigrationGuideStories from './migration-guide.stories';
 
-<Meta title="Misc/Migration Guide" parameters={{ badges: [BADGE.TODO] }} />
+<Meta of={MigrationGuideStories} />
 
 <div
   style={{
diff --git a/packages/documentation-v7/src/stories/misc/migration-guide/migration-guide.stories.ts b/packages/documentation-v7/src/stories/misc/migration-guide/migration-guide.stories.ts
new file mode 100644
index 0000000000..e5b9156afd
--- /dev/null
+++ b/packages/documentation-v7/src/stories/misc/migration-guide/migration-guide.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Misc/Migration Guide',
+  parameters: {
+    badges: [BADGE.TODO],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/misc/versions.blocks.tsx b/packages/documentation-v7/src/stories/misc/versions/versions.blocks.tsx
similarity index 97%
rename from packages/documentation-v7/src/stories/misc/versions.blocks.tsx
rename to packages/documentation-v7/src/stories/misc/versions/versions.blocks.tsx
index 87d0bda267..e923c013b0 100644
--- a/packages/documentation-v7/src/stories/misc/versions.blocks.tsx
+++ b/packages/documentation-v7/src/stories/misc/versions/versions.blocks.tsx
@@ -2,7 +2,7 @@ import stylesVersions from '@swisspost/design-system-styles/package.json';
 import componentsVersions from '@swisspost/design-system-components/package.json';
 import internetHeaderVersions from '@swisspost/internet-header/package.json';
 import componentsReactVersions from '@swisspost/design-system-components-react/package.json';
-import documentationVersions from '../../../package.json';
+import documentationVersions from '../../../../package.json';
 
 const dependencies = [
   stylesVersions,
diff --git a/packages/documentation-v7/src/stories/misc/versions.docs.mdx b/packages/documentation-v7/src/stories/misc/versions/versions.docs.mdx
similarity index 71%
rename from packages/documentation-v7/src/stories/misc/versions.docs.mdx
rename to packages/documentation-v7/src/stories/misc/versions/versions.docs.mdx
index 73b62fd3a1..c6e3d56d72 100644
--- a/packages/documentation-v7/src/stories/misc/versions.docs.mdx
+++ b/packages/documentation-v7/src/stories/misc/versions/versions.docs.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
-import { BADGE } from '../../../.storybook/constants';
 import { PackageVersions, PackageDependencies, DocumentationVersion } from './versions.blocks';
+import * as VersionStories from './versions.stories';
 
-<Meta title="Misc/Versions" parameters={{ badges: [BADGE.NEEDS_REVISION] }} />
+<Meta of={VersionStories} />
 
 # Versions
 
diff --git a/packages/documentation-v7/src/stories/misc/versions/versions.stories.ts b/packages/documentation-v7/src/stories/misc/versions/versions.stories.ts
new file mode 100644
index 0000000000..8c363ab619
--- /dev/null
+++ b/packages/documentation-v7/src/stories/misc/versions/versions.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Misc/Versions',
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/templates/forms/forms.docs.mdx b/packages/documentation-v7/src/stories/templates/forms/forms.docs.mdx
index 2b8555ec43..5d132bee99 100644
--- a/packages/documentation-v7/src/stories/templates/forms/forms.docs.mdx
+++ b/packages/documentation-v7/src/stories/templates/forms/forms.docs.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/blocks';
-import { BADGE } from '../../../../.storybook/constants';
+import * as FormTemplateStories from './forms.stories';
 
-<Meta title="Templates/Forms" parameters={{ badges: [BADGE] }} />
+<Meta of={FormTemplateStories} />
 
 # Forms
 
diff --git a/packages/documentation-v7/src/stories/templates/forms/forms.stories.ts b/packages/documentation-v7/src/stories/templates/forms/forms.stories.ts
new file mode 100644
index 0000000000..86b4cff338
--- /dev/null
+++ b/packages/documentation-v7/src/stories/templates/forms/forms.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Templates/Forms',
+  parameters: {
+    badges: [BADGE.TODO],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/utilities/common/common.docs.mdx b/packages/documentation-v7/src/stories/utilities/common/common.docs.mdx
index 9e61e9897e..4e2944fd25 100644
--- a/packages/documentation-v7/src/stories/utilities/common/common.docs.mdx
+++ b/packages/documentation-v7/src/stories/utilities/common/common.docs.mdx
@@ -1,10 +1,7 @@
 import { Meta } from '@storybook/blocks';
-import { BADGE } from '../../../../.storybook/constants';
+import * as CommonStories from './common.stories';
 
-<Meta
-  title="Utilities/Common"
-  parameters={{ badges: [BADGE.TODO] }}
-/>
+<Meta of={CommonStories} />
 
 # Common Utilities & Helper
 
diff --git a/packages/documentation-v7/src/stories/utilities/common/common.stories.ts b/packages/documentation-v7/src/stories/utilities/common/common.stories.ts
new file mode 100644
index 0000000000..921f593fff
--- /dev/null
+++ b/packages/documentation-v7/src/stories/utilities/common/common.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Utilities/Common',
+  parameters: {
+    badges: [BADGE.TODO],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation-v7/src/stories/utilities/sizing/sizing.docs.mdx
index b0521f78c1..e8d8957d2f 100644
--- a/packages/documentation-v7/src/stories/utilities/sizing/sizing.docs.mdx
+++ b/packages/documentation-v7/src/stories/utilities/sizing/sizing.docs.mdx
@@ -1,10 +1,7 @@
 import { Meta } from '@storybook/blocks';
-import { BADGE } from '../../../../.storybook/constants';
+import * as SizingStories from './sizing.stories';
 
-<Meta
-  title="Utilities/Sizing"
-  parameters={{ badges: [BADGE.TODO] }}
-/>
+<Meta of={SizingStories} />
 
 # Sizing
 
diff --git a/packages/documentation-v7/src/stories/utilities/sizing/sizing.stories.ts b/packages/documentation-v7/src/stories/utilities/sizing/sizing.stories.ts
new file mode 100644
index 0000000000..6042d3bb33
--- /dev/null
+++ b/packages/documentation-v7/src/stories/utilities/sizing/sizing.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Utilities/Sizing',
+  parameters: {
+    badges: [BADGE.TODO],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation-v7/src/stories/utilities/spacing/spacing.docs.mdx b/packages/documentation-v7/src/stories/utilities/spacing/spacing.docs.mdx
index 1a954654ec..2a9a436b78 100644
--- a/packages/documentation-v7/src/stories/utilities/spacing/spacing.docs.mdx
+++ b/packages/documentation-v7/src/stories/utilities/spacing/spacing.docs.mdx
@@ -1,10 +1,7 @@
 import { Meta } from '@storybook/blocks';
-import { BADGE } from '../../../../.storybook/constants';
+import * as SpacingStories from './spacing.stories';
 
-<Meta
-  title="Utilities/Spacing"
-  parameters={{ badges: [BADGE.TODO] }}
-/>
+<Meta of={SpacingStories} />
 
 # Spacing
 
diff --git a/packages/documentation-v7/src/stories/utilities/spacing/spacing.stories.ts b/packages/documentation-v7/src/stories/utilities/spacing/spacing.stories.ts
new file mode 100644
index 0000000000..aff9081581
--- /dev/null
+++ b/packages/documentation-v7/src/stories/utilities/spacing/spacing.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Utilities/Spacing',
+  parameters: {
+    badges: [BADGE.TODO],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

From b21d78b778ecfbbdfe49e2f7011169dd9f087f65 Mon Sep 17 00:00:00 2001
From: Lukas Blaser <141234680+b1aserlu@users.noreply.github.com>
Date: Thu, 17 Aug 2023 09:07:04 +0200
Subject: [PATCH 08/16] feat(documentation-v7): migrate button-group component
 (#1813)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>
---
 .../button-group/button-group.docs.mdx        |  51 ++++
 .../button-group/button-group.stories.ts      | 247 ++++++++++++++++++
 2 files changed, 298 insertions(+)
 create mode 100644 packages/documentation-v7/src/stories/components/button-group/button-group.docs.mdx
 create mode 100644 packages/documentation-v7/src/stories/components/button-group/button-group.stories.ts

diff --git a/packages/documentation-v7/src/stories/components/button-group/button-group.docs.mdx b/packages/documentation-v7/src/stories/components/button-group/button-group.docs.mdx
new file mode 100644
index 0000000000..fce158e002
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/button-group/button-group.docs.mdx
@@ -0,0 +1,51 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as ButtonGroupStories from './button-group.stories';
+
+<Meta of={ButtonGroupStories} />
+
+# Button Group
+
+<div className="lead">
+  Group a series of buttons together on a single line.
+</div>
+
+<Canvas of={ButtonGroupStories.Default} />
+<div className="hide-col-default">
+  <Controls of={ButtonGroupStories.Default} />
+</div>
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```scss
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```scss
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/badge.scss';
+```
+
+## Concrete Examples of Application
+
+The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.
+
+### Sizing
+
+You can change the size of buttons belonging to a group using button-sizing classes: `.btn-sm`, `.btn-rg` and `.btn-lg`.
+Just be sure to apply the same class to all buttons contained in the group.
+
+<Canvas of={ButtonGroupStories.Sizing} />
+
+### Checkbox & Radio
+
+Any HTML element that can be styled as a button can potentially be used in a button group.
+It is also possible to use checkable inputs:
+
+- Checkboxes: this allows all buttons in the group to be selected or deselected individually,
+- Radio buttons: in this case all the buttons are linked and only one of them can be selected at a time.
+
+<Canvas of={ButtonGroupStories.Checks} />
diff --git a/packages/documentation-v7/src/stories/components/button-group/button-group.stories.ts b/packages/documentation-v7/src/stories/components/button-group/button-group.stories.ts
new file mode 100644
index 0000000000..6d46cefbcc
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/button-group/button-group.stories.ts
@@ -0,0 +1,247 @@
+import type { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { useArgs } from '@storybook/preview-api';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Components/Button Group',
+  render: renderButtonGroup,
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+  args: {
+    size: 'btn-md',
+    element: 'button',
+    label_1: 'Left',
+    label_2: 'Middle',
+    label_3: 'Right',
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the button group.',
+      control: {
+        type: 'select',
+        labels: {
+          ' btn-sm': 'Small',
+          ' btn-rg': 'Regular',
+          ' btn-md': 'Medium',
+          ' btn-lg': 'Large',
+        },
+      },
+      options: [' btn-sm', ' btn-rg', ' btn-md', ' btn-lg'],
+      table: {
+        category: 'General',
+      },
+    },
+    element: {
+      name: 'Variant',
+      description: 'Defined the semantic elements used as button within the group.',
+      control: {
+        type: 'radio',
+        labels: {
+          button: 'Buttons',
+          link: 'Links',
+          checkbox: 'Checkboxes',
+          radio: 'Radio Buttons',
+        },
+      },
+      options: ['button', 'link', 'checkbox', 'radio'],
+      table: {
+        category: 'General',
+      },
+    },
+    label_1: {
+      name: 'First Label',
+      description: 'Defines the label of the first button.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Content',
+      },
+    },
+    label_2: {
+      name: 'Second Label',
+      description: 'Defines the label of the second button.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Content',
+      },
+    },
+    label_3: {
+      name: 'Third Label',
+      description: 'Defines the label of the third button.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Content',
+      },
+    },
+    checked: {
+      name: 'Checked Button',
+      description: 'Defined which button is checked in a radio button group.',
+      if: {
+        arg: 'element',
+        eq: 'radio',
+      },
+      control: {
+        type: 'inline-radio',
+        labels: {
+          1: 'First',
+          2: 'Second',
+          3: 'Third',
+        },
+      },
+      options: [1, 2, 3],
+      table: {
+        category: 'Value',
+      },
+    },
+    selected: {
+      name: 'Selected Button',
+      description: 'Defined which button is selected in a checkbox group.',
+      if: {
+        arg: 'element',
+        eq: 'checkbox',
+      },
+      control: {
+        type: 'inline-check',
+        labels: {
+          1: 'First',
+          2: 'Second',
+          3: 'Third',
+        },
+      },
+      options: [1, 2, 3],
+      table: {
+        category: 'Value',
+      },
+    },
+  },
+  decorators: [
+    story =>
+      html`
+        <div
+          @click=${(e: Event) => {
+            const target = e.target as HTMLElement;
+            if (target.tagName === 'A' || target.tagName === 'BUTTON') e.preventDefault();
+          }}
+        >
+          ${story()}
+        </div>
+      `,
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function createButtonTemplate(args: Args, context: StoryContext, index: number) {
+  const [_, updateArgs] = useArgs();
+  const position = index + 1;
+  const id = `btngroup${context.name}_${position}`;
+  const label = args[`label_${position}`];
+
+  switch (args.element) {
+    case 'checkbox': {
+      const isSelected = args.selected?.includes(position) ?? false;
+      return html`
+        <input
+          type="checkbox"
+          class="btn-check"
+          id=${id}
+          autocomplete="off"
+          ?checked="${isSelected}"
+          .checked="${isSelected}"
+          @change=${(e: Event) => {
+            let isChecked = [];
+            if ((e.target as HTMLInputElement).checked === true) {
+              if (args.selected) {
+                isChecked = Array.from(new Set(args.selected.concat(position)));
+              } else {
+                isChecked = [position];
+              }
+            } else {
+              isChecked = args.selected.filter((p: number) => p !== position);
+            }
+            updateArgs({ selected: isChecked });
+          }}
+        />
+        <label class=${`btn${args.size} btn-secondary`} for=${id}>${label}</label>
+      `;
+    }
+    case 'radio': {
+      const isChecked = position === args.checked;
+      return html`
+        <input
+          type="radio"
+          class="btn-check"
+          name="btnradio"
+          id=${id}
+          autocomplete="off"
+          ?checked=${isChecked}
+          .checked=${isChecked}
+          @change=${(e: Event) => {
+            updateArgs({ checked: position });
+          }}
+        />
+        <label class=${`btn${args.size} btn-secondary`} for=${id}>${label}</label>
+      `;
+    }
+    case 'link':
+      return html`
+        <a href="#" class=${`btn${args.size} btn-secondary`}>${label}</a>
+      `;
+    case 'button':
+    default:
+      return html`
+        <button type="button" class=${`btn${args.size} btn-secondary`}>${label}</button>
+      `;
+  }
+}
+
+function renderButtonGroup(args: Args, context: StoryContext) {
+  return html`
+    <div class="btn-group" role="group" aria-label="Button group example">
+      ${Array.from({ length: 3 }).map((_, i) => createButtonTemplate(args, context, i))}
+    </div>
+  `;
+}
+
+export const Default: Story = {};
+
+export const Sizing: Story = {
+  parameters: {
+    controls: {
+      exclude: [
+        'Variant',
+        'First Label',
+        'Second Label',
+        'Third Label',
+        'Checked Button',
+        'Selected Button',
+      ],
+    },
+  },
+  args: {
+    size: ' btn-sm',
+  },
+};
+
+export const Checks: Story = {
+  parameters: {
+    controls: {
+      exclude: ['Size', 'First Label', 'Second Label', 'Third Label'],
+    },
+  },
+  args: {
+    element: 'checkbox',
+    selected: [1, 3],
+    checked: 2,
+  },
+};

From 51fea651a4648d5c32fe625c273c5d11664b0fe9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Thu, 17 Aug 2023 11:01:10 +0200
Subject: [PATCH 09/16] fix(documentation-v7): overwrite hcm styles for
 .innerZoomElementWrapper border-color (#1810)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>
---
 packages/documentation-v7/.storybook/styles/preview.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/documentation-v7/.storybook/styles/preview.scss b/packages/documentation-v7/.storybook/styles/preview.scss
index b9833d7170..812bbd111a 100644
--- a/packages/documentation-v7/.storybook/styles/preview.scss
+++ b/packages/documentation-v7/.storybook/styles/preview.scss
@@ -148,4 +148,12 @@
       }
     }
   }
+
+  @include post.high-contrast-mode() {
+    .innerZoomElementWrapper {
+      > * {
+        border-color: Canvas !important;
+      }
+    }
+  }
 }

From eef429a659839850298fc49ebfc121a8d4354703 Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Thu, 17 Aug 2023 11:01:32 +0200
Subject: [PATCH 10/16] feat(documentation-v7): migrate the switch component
 (#1800)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>
Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 .../stories/components/switch/switch.docs.mdx |  55 +++++
 .../components/switch/switch.stories.ts       | 227 ++++++++++++++++++
 2 files changed, 282 insertions(+)
 create mode 100644 packages/documentation-v7/src/stories/components/switch/switch.docs.mdx
 create mode 100644 packages/documentation-v7/src/stories/components/switch/switch.stories.ts

diff --git a/packages/documentation-v7/src/stories/components/switch/switch.docs.mdx b/packages/documentation-v7/src/stories/components/switch/switch.docs.mdx
new file mode 100644
index 0000000000..da53f79512
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/switch/switch.docs.mdx
@@ -0,0 +1,55 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as switchStories from './switch.stories';
+
+<Meta of={switchStories} />
+
+# Switch
+
+<div className="lead">
+  A switch has the markup of a custom <code>&lt;input type="checkbox"/&gt;</code> but uses the{' '}
+  <code>.form-switch</code> class to render a toggle switch.
+</div>
+
+Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular `checkbox` as a fallback. Switches also support the `disabled` attribute.
+
+<Canvas of={switchStories.Default} />
+<div className="hide-col-default">
+  <Controls of={switchStories.Default} />
+</div>
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```scss
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```scss
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/form-check.scss';
+
+// required if you use validation feedbacks
+@use '@swisspost/design-system-styles/components/form-feedback.scss';
+```
+
+## Concrete Examples of Application
+
+The following examples show the different characteristics of the component. These can differ in the type of visualization, the HTML structure, as well as when, how and why they are displayed.
+
+### Multiline Labels
+
+Long labels can be used seamlessly and are automatically wrapped at the end of the line.
+You can also include inline elements into the label, such as `<a>`, `<strong>`, etc.<br/>
+However, make sure to always place multiline labels after the `checkbox`.
+
+<Canvas of={switchStories.MultilineLabels} />
+
+### Validation
+
+Simply add the classes `.is-valid` or `.is-invalid` to the `switch` element to show it in the expected state.<br/>
+When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `switch` element to explain what went wrong. This enables the user to correct the mistake.
+
+<Canvas of={switchStories.Validation} />
diff --git a/packages/documentation-v7/src/stories/components/switch/switch.stories.ts b/packages/documentation-v7/src/stories/components/switch/switch.stories.ts
new file mode 100644
index 0000000000..b5ea58b469
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/switch/switch.stories.ts
@@ -0,0 +1,227 @@
+import { useArgs } from '@storybook/preview-api';
+import type { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import { html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { BADGE } from '../../../../.storybook/constants';
+import { mapClasses } from '../../../utils';
+
+const meta: Meta = {
+  title: 'Components/Switch',
+  render: renderSwitch,
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+  args: {
+    labelPosition: 'both',
+    labelBefore: 'Off',
+    labelAfter: 'On',
+    hiddenLabel: false,
+    checked: false,
+    disabled: false,
+    validation: 'null',
+  },
+  argTypes: {
+    labelPosition: {
+      name: 'Label Position',
+      description: 'The position of the component label.',
+      control: {
+        type: 'radio',
+        label: {
+          both: 'Both',
+          before: 'Before',
+          after: 'After',
+        },
+      },
+      options: ['both', 'before', 'after'],
+      table: {
+        category: 'General',
+      },
+    },
+    labelBefore: {
+      name: 'Label (before)',
+      description: 'Describes the content/topic of the component.',
+      if: {
+        arg: 'labelPosition',
+        neq: 'after',
+      },
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    labelAfter: {
+      name: 'Label (after)',
+      description: 'Describes the content/topic of the component.',
+      if: {
+        arg: 'labelPosition',
+        neq: 'before',
+      },
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    hiddenLabel: {
+      name: 'Hidden Label',
+      description:
+        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/story/foundations-accessibility--page#labels">label accessibility guide</a>.</span>',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    checked: {
+      name: 'Checked',
+      description: 'When set to `true`, places the component in the checked state.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'States',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description:
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--page#disabled-state">disabled state accessibility guide</a>.</span>',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'States',
+      },
+    },
+    validation: {
+      name: 'Validation',
+      description: "Controls the display of the component's validation state.",
+      control: {
+        type: 'radio',
+        labels: {
+          'null': 'Default',
+          'is-valid': 'Valid',
+          'is-invalid': 'Invalid',
+        },
+      },
+      options: ['null', 'is-valid', 'is-invalid'],
+      table: {
+        category: 'States',
+      },
+    },
+  },
+  decorators: [
+    story =>
+      html`
+        <div class="pt-3">${story()}</div>
+      `,
+  ],
+};
+
+export default meta;
+
+const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
+  'null': undefined,
+  'is-valid': false,
+  'is-invalid': true,
+};
+
+function renderSwitch(args: Args, context: StoryContext) {
+  const [_, updateArgs] = useArgs();
+
+  const switchClasses = mapClasses({
+    'form-check-input': true,
+    [args.validation]: args.validation !== 'null',
+  });
+
+  const useAriaLabel = args.hiddenLabel;
+  const ariaLabel = args.checked ? args.labelAfter : args.labelBefore;
+  const useLabelBefore = !useAriaLabel && ['before', 'both'].includes(args.labelPosition);
+  const useLabelAfter = !useAriaLabel && ['after', 'both'].includes(args.labelPosition);
+
+  const labelBefore = useLabelBefore
+    ? html`
+        <label for=${context.id} class="form-check-label order-first">${args.labelBefore}</label>
+      `
+    : null;
+
+  const labelAfter = useLabelAfter
+    ? html`
+        <label for=${context.id} class="form-check-label">${args.labelAfter}</label>
+      `
+    : null;
+
+  const validationText = args.validation === 'is-valid' ? 'Ggranda sukceso!' : 'Eraro okazis!';
+  const validationFeedback =
+    args.validation !== 'null'
+      ? html`
+          <p class=${args.validation.split('-')[1] + '-feedback'}>
+            ${validationText}
+          </p>
+        `
+      : null;
+
+  return html`
+    <div class="form-check form-switch">
+      <input
+        id=${context.id}
+        class=${switchClasses}
+        type="checkbox"
+        role="switch"
+        ?checked=${args.checked}
+        .checked=${args.checked}
+        ?disabled=${args.disabled}
+        aria-label=${useAriaLabel ? ariaLabel : nothing}
+        aria-invalid=${ifDefined(VALIDATION_STATE_MAP[args.validation])}
+        @change=${(e: Event) => updateArgs({ checked: !args.checked })}
+      />
+      ${labelBefore} ${labelAfter} ${args.validation !== 'null' ? validationFeedback : nothing}
+    </div>
+  `;
+}
+
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const MultilineLabels: Story = {
+  parameters: {
+    controls: {
+      exclude: [
+        'Label Position',
+        'Label (before)',
+        'Hidden Label',
+        'Checked',
+        'Disabled',
+        'Validation',
+      ],
+    },
+  },
+  args: {
+    labelPosition: 'after',
+    labelAfter:
+      'Longa etikedo kiu plej versajne ne taugas sur unu linio kaj tial devas esti envolvita. Kaj nur por esti sur la sekura flanko, ni simple aldonu unu plian tre sencelan frazon ci tie. Vi neniam scias...',
+  },
+};
+
+export const Validation: Story = {
+  parameters: {
+    controls: {
+      exclude: [
+        'Label Position',
+        'Label (before)',
+        'Label (after)',
+        'Hidden Label',
+        'Checked',
+        'Disabled',
+      ],
+    },
+  },
+  args: {
+    validation: 'is-invalid',
+  },
+};

From 5218715391d9bb90053fb76907538f224a00b664 Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Thu, 17 Aug 2023 11:01:56 +0200
Subject: [PATCH 11/16] feat(documentation-v7): migrate topic-teaser (#1763)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .../topic-teaser/topic-teaser.docs.mdx        |  33 +++
 .../topic-teaser/topic-teaser.stories.ts      | 189 ++++++++++++++++++
 2 files changed, 222 insertions(+)
 create mode 100644 packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.docs.mdx
 create mode 100644 packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.stories.ts

diff --git a/packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.docs.mdx b/packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.docs.mdx
new file mode 100644
index 0000000000..f9bd1d79cb
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.docs.mdx
@@ -0,0 +1,33 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as TopicTeaserStories from './topic-teaser.stories';
+
+<Meta of={TopicTeaserStories} />
+
+# Topic Teaser
+
+<div className="lead">
+  Topic Teaser provides a flexible and responsive content container with options to align the image,
+  adding topic content and links as well as contextual background colors.
+</div>
+
+If you use multiple topic teasers on one page, each topic teaser must have a different background.
+
+<Canvas of={TopicTeaserStories.Default}/>
+<div className="hide-col-default">
+  <Controls of={TopicTeaserStories.Default} />
+</div>
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```scss
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```scss
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/topic-teaser.scss';
+```
diff --git a/packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.stories.ts
new file mode 100644
index 0000000000..127280968d
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.stories.ts
@@ -0,0 +1,189 @@
+import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import { html, TemplateResult } from 'lit';
+import { BADGE } from '../../../../.storybook/constants';
+import { mapClasses } from '../../../utils';
+
+const meta: Meta = {
+  title: 'Components/Topic Teaser',
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+  args: {
+    title: 'Loremipsum',
+    subtitle: 'Vero siteos et accusam iretea et justo',
+    linkCount: 5,
+    alignment: 'null',
+    backgroundColor: 'bg-nightblue',
+  },
+  argTypes: {
+    title: {
+      name: 'Title',
+      description: 'The text to include in the component title.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    subtitle: {
+      name: 'Subtitle',
+      description: 'The text to include in the component subtitle.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    linkCount: {
+      name: 'Amount of links',
+      description: 'The amount of the renderd links.',
+      control: {
+        type: 'number',
+        min: 1,
+        max: 10,
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    alignment: {
+      name: 'Image alignment',
+      description: 'The alignment of the image.',
+      control: {
+        type: 'radio',
+        labels: {
+          'topic-teaser-reverse': 'Image left',
+          'null': 'Image right',
+        },
+      },
+      options: ['topic-teaser-reverse', 'null'],
+      table: {
+        category: 'General',
+      },
+    },
+    backgroundColor: {
+      name: 'Background Color',
+      description: 'The color the component uses as background.',
+      control: {
+        type: 'select',
+        labels: {
+          'bg-light': 'Light',
+          'bg-dark': 'Dark',
+          'bg-nightblue': 'Nightblue',
+          'bg-nightblue-bright': 'Nightblue (bright)',
+          'bg-petrol': 'Petrol',
+          'bg-petrol-bright': 'Petrol (bright)',
+          'bg-coral': 'Coral',
+          'bg-coral-bright': 'Coral (bright)',
+          'bg-olive': 'Olive',
+          'bg-olive-bright': 'Olive (bright)',
+          'bg-purple': 'Purple',
+          'bg-purple-bright': 'Purple (bright)',
+          'bg-aubergine': 'Aubergine',
+          'bg-aubergine-bright': 'Aubergine (bright)',
+        },
+      },
+      options: [
+        'bg-light',
+        'bg-dark',
+        'bg-nightblue',
+        'bg-nightblue-bright',
+        'bg-petrol',
+        'bg-petrol-bright',
+        'bg-coral',
+        'bg-coral-bright',
+        'bg-olive',
+        'bg-olive-bright',
+        'bg-purple',
+        'bg-purple-bright',
+        'bg-aubergine',
+        'bg-aubergine-bright',
+      ],
+      table: {
+        category: 'General',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const linkTexts: string[] = [
+  'At vero eos et accusam et',
+  'Dolores et ea rebum',
+  'Stet clita kasd gubergren',
+  'Sed diam nonumy eirmod',
+  'Duo dolores et ea rebum',
+  'Magna aliquyam erat',
+  'Consetetur sadipscing elitr',
+  'Justo duo dolores',
+  'Takimata sanctus est',
+  'Nonummy nibh euismod',
+];
+
+export const Default: Story = {
+  render: (args: Args) => {
+    const classes = mapClasses({
+      'topic-teaser': true,
+      'mb-huge-r': true,
+      [args.backgroundColor]: args.backgroundColor !== 'null',
+      [args.alignment]: args.alignment !== 'null',
+    });
+
+    const links: TemplateResult[] = linkTexts.slice(0, args.linkCount).map(
+      text => html`
+        <li class="link-list-item">
+          <a href="#">
+            <span>${text}</span>
+          </a>
+        </li>
+      `,
+    );
+
+    const image = html`
+      <div class="topic-teaser-image-container">
+        <img
+          class="topic-teaser-image"
+          src="https://picsum.photos/id/553/800/800"
+          width="100%"
+          height="100%"
+          alt="Test teaser image"
+        />
+      </div>
+    `;
+
+    const content = html`
+      <div class="topic-teaser-content">
+        <h2 class="topic-teaser-title font-curve-large mb-large">
+          <span class="bold">${args.title}</span>
+          <span class="light">${args.subtitle}</span>
+        </h2>
+        <ul class="link-list mb-large">
+          ${links}
+        </ul>
+      </div>
+    `;
+
+    return html`
+      <div class="${classes}">
+        <div class="container">
+          <div class="topic-teaser-container ${args.backgroundColor}">
+            <div class="row pt-huge-r">
+              ${args.alignment === 'null'
+                ? html`
+                    ${content}${image}
+                  `
+                : html`
+                    ${image}${content}
+                  `}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  },
+};

From c1dee3be0187eee440d6556b07839ef584f5b3db Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Thu, 17 Aug 2023 13:56:15 +0200
Subject: [PATCH 12/16] feat(styles): add the radio/checkbox card component
 (#1607)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>
Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/honest-singers-laugh.md            |   6 +
 packages/components/.eslintrc.json            |  33 +--
 packages/documentation-v7/.storybook/main.ts  |  10 +-
 packages/documentation-v7/package.json        |   1 +
 .../choice-card/checkbox-card.docs.mdx        |  60 +++++
 .../choice-card/checkbox-card.stories.ts      |  20 ++
 .../choice-control.snapshot.stories.ts        |  43 ++++
 .../components/choice-card/choice-control.ts  | 228 ++++++++++++++++++
 .../choice-card/radiobutton-card.docs.mdx     |  60 +++++
 .../choice-card/radiobutton-card.stories.ts   |  20 ++
 packages/documentation/.storybook/preview.js  |   1 +
 .../snapshots/styles/choice-card.snapshot.ts  |   6 +
 .../checkbox-card.docs.mdx                    |  36 +++
 .../checkbox-card.stories.tsx                 |  29 +++
 .../choice-card-snapshot.stories.mdx          |  27 +++
 .../choice-control-card/choice-card.tsx       | 177 ++++++++++++++
 .../radio-button-card.docs.mdx                |  36 +++
 .../radio-button-card.stories.tsx             |  28 +++
 packages/styles/src/components/_index.scss    |   1 +
 .../src/components/choice-control-card.scss   | 146 +++++++++++
 packages/styles/src/variables/_type.scss      |   1 +
 pnpm-lock.yaml                                |   3 +
 22 files changed, 940 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/honest-singers-laugh.md
 create mode 100644 packages/documentation-v7/src/stories/components/choice-card/checkbox-card.docs.mdx
 create mode 100644 packages/documentation-v7/src/stories/components/choice-card/checkbox-card.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/components/choice-card/choice-control.snapshot.stories.ts
 create mode 100644 packages/documentation-v7/src/stories/components/choice-card/choice-control.ts
 create mode 100644 packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.docs.mdx
 create mode 100644 packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.stories.ts
 create mode 100644 packages/documentation/cypress/snapshots/styles/choice-card.snapshot.ts
 create mode 100644 packages/documentation/src/stories/components/choice-control-card/checkbox-card.docs.mdx
 create mode 100644 packages/documentation/src/stories/components/choice-control-card/checkbox-card.stories.tsx
 create mode 100644 packages/documentation/src/stories/components/choice-control-card/choice-card-snapshot.stories.mdx
 create mode 100644 packages/documentation/src/stories/components/choice-control-card/choice-card.tsx
 create mode 100644 packages/documentation/src/stories/components/choice-control-card/radio-button-card.docs.mdx
 create mode 100644 packages/documentation/src/stories/components/choice-control-card/radio-button-card.stories.tsx
 create mode 100644 packages/styles/src/components/choice-control-card.scss

diff --git a/.changeset/honest-singers-laugh.md b/.changeset/honest-singers-laugh.md
new file mode 100644
index 0000000000..0bdb822077
--- /dev/null
+++ b/.changeset/honest-singers-laugh.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added the checkbox and radio-button card pattern. These two components are now available in the styles package
diff --git a/packages/components/.eslintrc.json b/packages/components/.eslintrc.json
index 43e4496ebf..b3d873ca2d 100644
--- a/packages/components/.eslintrc.json
+++ b/packages/components/.eslintrc.json
@@ -8,17 +8,14 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:@stencil-community/recommended"
   ],
-  "overrides": [
-  ],
+  "overrides": [],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module",
     "project": "./tsconfig.eslint.json"
   },
-  "plugins": [
-    "@typescript-eslint"
-  ],
+  "plugins": ["@typescript-eslint"],
   "rules": {
     "indent": [
       "error",
@@ -27,14 +24,8 @@
         "SwitchCase": 1
       }
     ],
-    "quotes": [
-      "error",
-      "single"
-    ],
-    "semi": [
-      "error",
-      "always"
-    ],
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"],
     "@typescript-eslint/no-unused-vars": [
       "error",
       {
@@ -44,21 +35,9 @@
       }
     ],
     "@stencil-community/strict-boolean-conditions": "off",
-    "@stencil-community/required-prefix": [
-      "error",
-      [
-        "post"
-      ]
-    ],
+    "@stencil-community/required-prefix": ["error", ["post"]],
     "@stencil-community/async-methods": "error",
-    "@stencil-community/ban-prefix": [
-      "error",
-      [
-        "stencil",
-        "stnl",
-        "st"
-      ]
-    ],
+    "@stencil-community/ban-prefix": ["error", ["stencil", "stnl", "st"]],
     "@stencil-community/decorators-context": "error",
     "@stencil-community/decorators-style": [
       "error",
diff --git a/packages/documentation-v7/.storybook/main.ts b/packages/documentation-v7/.storybook/main.ts
index 997465a767..170f6eb849 100644
--- a/packages/documentation-v7/.storybook/main.ts
+++ b/packages/documentation-v7/.storybook/main.ts
@@ -11,11 +11,6 @@ const config: StorybookConfig = {
   },
   stories: ['../src/stories/**/*.mdx', '../src/stories/**/*.stories.@(ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-designs',
-    '@storybook/addon-a11y',
-    '@geometricpanda/storybook-addon-badges',
-    '@pxtrn/storybook-addon-docs-stencil',
     {
       name: '@storybook/addon-essentials',
       options: {
@@ -26,6 +21,11 @@ const config: StorybookConfig = {
         toolbars: false,
       },
     },
+    '@storybook/addon-links',
+    '@storybook/addon-designs',
+    '@storybook/addon-a11y',
+    '@geometricpanda/storybook-addon-badges',
+    '@pxtrn/storybook-addon-docs-stencil',
   ],
   staticDirs: [
     {
diff --git a/packages/documentation-v7/package.json b/packages/documentation-v7/package.json
index 91232a5ad9..97a51accf5 100644
--- a/packages/documentation-v7/package.json
+++ b/packages/documentation-v7/package.json
@@ -56,6 +56,7 @@
     "@types/react-syntax-highlighter": "15.5.7",
     "cypress": "12.17.3",
     "lit": "2.8.0",
+    "lit-html": "2.8.0",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/packages/documentation-v7/src/stories/components/choice-card/checkbox-card.docs.mdx b/packages/documentation-v7/src/stories/components/choice-card/checkbox-card.docs.mdx
new file mode 100644
index 0000000000..8ae601f273
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/choice-card/checkbox-card.docs.mdx
@@ -0,0 +1,60 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as CheckboxCardStories from './checkbox-card.stories';
+
+<Meta of={CheckboxCardStories} />
+
+# Checkbox card
+
+<div className="lead">
+  A larger, more consumer oriented, touch friendly variant of the checkbox used for e.g. selecting
+  services.
+</div>
+
+<div className="alert alert-info">
+  <h2 class="h5">Firefox fallback classes</h2>
+  Firefox currently does not support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">
+    the new <abbr title="Cascading Style Sheets">CSS</abbr> :has pseudo-selector
+  </a>. As a fallback, the following states have to be mirrored on the top level element in the form
+  of classes:
+  <ul>
+    <li>
+      <code>checked</code>
+    </li>
+    <li>
+      <code>focused</code>
+    </li>
+    <li>
+      <code>disabled</code>
+    </li>
+    <li>
+      <code>is-invalid</code>
+    </li>
+  </ul>
+  Check <a href="https://caniuse.com/css-has">caniuse :has()</a> to check if you still need the fallback.
+</div>
+
+<Canvas of={CheckboxCardStories.Default} />
+<div className="hide-col-default">
+  <Controls of={CheckboxCardStories.Default} />
+</div>
+
+## Grouping
+
+Checkbox cards can be grouped together. Use a `fieldset`/`legend` combination to label the group. If there is an error, link the legend with the error message through the `aria-describedby` attribute on the `legend`, pointing to the `id` of the error message.
+
+<Canvas of={CheckboxCardStories.Group} />
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```scss
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```scss
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/choice-control-card.scss';
+```
diff --git a/packages/documentation-v7/src/stories/components/choice-card/checkbox-card.stories.ts b/packages/documentation-v7/src/stories/components/choice-card/checkbox-card.stories.ts
new file mode 100644
index 0000000000..5ec1e80157
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/choice-card/checkbox-card.stories.ts
@@ -0,0 +1,20 @@
+import { BADGE } from '../../../../.storybook/constants';
+import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-control';
+
+export default {
+  ...choiceCardMeta,
+  title: 'Components/Checkbox Card',
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+};
+
+export const Default = {
+  render: choiceCardDefault,
+  args: { ...choiceCardMeta.args, type: 'checkbox' },
+};
+
+export const Group = {
+  render: choiceCardGroup,
+  args: { ...choiceCardMeta.args, type: 'checkbox' },
+};
diff --git a/packages/documentation-v7/src/stories/components/choice-card/choice-control.snapshot.stories.ts b/packages/documentation-v7/src/stories/components/choice-card/choice-control.snapshot.stories.ts
new file mode 100644
index 0000000000..672cbff0b6
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/choice-card/choice-control.snapshot.stories.ts
@@ -0,0 +1,43 @@
+import { bombArgs } from '../../../utils/bombArgs';
+import { choiceCardMeta, choiceCardDefault } from './choice-control';
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+export default {
+  ...choiceCardMeta,
+  title: 'Hidden/snapshots/components',
+};
+
+const bombedArgs = bombArgs({
+  type: choiceCardMeta.argTypes!.type!.options,
+  validation: choiceCardMeta.argTypes!.validation!.options,
+  checked: [false, true],
+  disabled: [false, true],
+  label: ['Card check text', 'Really long running choice card text that wraps to two lines'],
+  showDescription: [false, true],
+  description: ['A very long running description that is wrapping to two lines'],
+  showIcon: [false, true],
+})
+  // Filter out disabled and invalid combinations
+  .filter(args => !(args.disabled && args.validation === 'is-invalid'));
+
+export const CheckboxCard: StoryObj = {
+  render: () => {
+    return html`
+      <div class="d-flex gap-3 flex-wrap">
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div class="${bg + ' row g-3'}">
+              ${bombedArgs.map(
+                args =>
+                  html`
+                    <div class="col-sm-6">${choiceCardDefault(args)}</div>
+                  `,
+              )}
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};
diff --git a/packages/documentation-v7/src/stories/components/choice-card/choice-control.ts b/packages/documentation-v7/src/stories/components/choice-card/choice-control.ts
new file mode 100644
index 0000000000..39f8b6ce19
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/choice-card/choice-control.ts
@@ -0,0 +1,228 @@
+import type { Args, Meta } from '@storybook/web-components';
+import { html } from 'lit/static-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { BADGE } from '../../../../.storybook/constants';
+import { nothing } from 'lit';
+import { useArgs } from '@storybook/preview-api';
+
+export const choiceCardMeta: Meta = {
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+    controls: {
+      exclude: ['Type'],
+    },
+  },
+  args: {
+    label: 'Card check text',
+    type: 'radio',
+    checked: false,
+    disabled: false,
+    focused: false,
+    validation: 'null',
+    showDescription: false,
+    description: 'A small description',
+    icon: 1000,
+    showIcon: false,
+  },
+  argTypes: {
+    label: {
+      name: 'Label',
+      type: 'string',
+      description: 'The main label of the input',
+      table: {
+        category: 'General',
+      },
+    },
+    type: {
+      name: 'Type',
+      control: {
+        type: 'radio',
+        labels: {
+          radio: 'Radio button',
+          checkbox: 'Checkbox',
+        },
+      },
+      options: ['radio', 'checkbox'],
+      table: {
+        // Hide it in the controls because there are two pages
+        disable: true,
+      },
+    },
+    checked: {
+      name: 'Checked',
+      type: 'boolean',
+      description: 'When set to `true`, places the component in the checked state.',
+      table: {
+        category: 'States',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description:
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--page#disabled-state">disabled state accessibility guide</a>.</span>',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'States',
+      },
+    },
+    focused: {
+      name: 'Focused',
+      description: 'Render the component in a focused state',
+      control: { type: 'boolean' },
+      table: {
+        category: 'States',
+      },
+    },
+    validation: {
+      name: 'Validation',
+      description: "Controls the display of the component's validation state.",
+      control: {
+        type: 'radio',
+        labels: {
+          'null': 'Default',
+          'is-invalid': 'Invalid',
+        },
+      },
+      options: ['null', 'is-invalid'],
+      table: {
+        category: 'States',
+      },
+    },
+    showDescription: {
+      name: 'Show description',
+      type: 'boolean',
+      description: 'Toggles an additional description',
+      table: {
+        category: 'Description',
+      },
+    },
+    description: {
+      name: 'Description',
+      type: 'string',
+      description: 'A short additional description',
+      table: {
+        category: 'Description',
+      },
+    },
+    showIcon: {
+      name: 'Show icon',
+      type: 'boolean',
+      description: 'Show or hide icon',
+      table: {
+        category: 'Icon',
+      },
+    },
+    icon: {
+      name: 'Icon',
+      control: {
+        type: 'select',
+      },
+      options: [1000, 1001, 2000],
+      table: {
+        category: 'Icon',
+      },
+    },
+  },
+};
+
+let id_ct = 1;
+
+export const choiceCardDefault = (args: Args, name = 'control') => {
+  const [_, updateArgs] = useArgs();
+
+  // Conditional classes
+  const inputClasses = classMap({
+    'form-check-input': true,
+    'is-invalid': args.validation === 'is-invalid',
+  });
+  const cardClassMap = classMap({
+    'checked': args.checked,
+    'disabled': args.disabled,
+    'is-invalid': args.validation === 'is-invalid',
+    'checkbox-button-card': args.type === 'checkbox',
+    'radio-button-card': args.type === 'radio',
+  });
+
+  // Child components
+  const id = `control-${id_ct++}`;
+  const description = html`
+    <br />
+    <span class="font-size-12">${args.description}</span>
+  `;
+  const icon = html`
+    <post-icon name="${args.icon}" aria-hidden="true"></post-icon>
+  `;
+
+  // Firefox fallback for the :has selector
+  const _handleInput = (e: InputEvent) => {
+    const target = e.target as HTMLInputElement;
+    updateArgs({ checked: target.checked });
+
+    // Fix input events not fired on "deselected" radio buttons
+    target
+      .closest('fieldset')
+      ?.querySelectorAll('.radio-button-card')
+      .forEach(e => e?.classList.remove('checked'));
+    target.parentElement?.classList.toggle('checked', target.checked);
+  };
+
+  // Firefox fallback for the :has selector
+  const _handleFocus = (e: InputEvent) => {
+    updateArgs({ focused: true });
+    (e.target as HTMLInputElement).parentElement?.classList.add('focused');
+  };
+
+  // Firefox fallback for the :has selector
+  const _handleBlur = (e: InputEvent) => {
+    updateArgs({ focused: false });
+    (e.target as HTMLInputElement).parentElement?.classList.remove('focused');
+  };
+
+  return html`
+    <div class=${cardClassMap}>
+      <input
+        id=${id}
+        name="${args.type}-button-card-${name}"
+        class=${inputClasses}
+        type=${args.type}
+        ?disabled=${args.disabled}
+        .checked=${args.checked}
+        ?checked=${args.checked}
+        @input=${_handleInput}
+        @focus=${_handleFocus}
+        @blur=${_handleBlur}
+      />
+      <label id="label-${id}" class="form-check-label" for="${id}">
+        <span>${args.label}</span>
+        ${args.showDescription ? description : nothing}
+      </label>
+      ${args.showIcon ? icon : nothing}
+    </div>
+  `;
+};
+
+export const choiceCardGroup = (args: Args) => {
+  const loop = ['One', 'Two', 'Three', 'Four', 'Five', 'Six'];
+
+  const col = (label: string) => html`
+    <div class="col-sm-6">
+      ${choiceCardDefault({ ...args, label, checked: false, focused: false }, 'group')}
+    </div>
+  `;
+
+  const error = html`
+    <p id="invalid-checkbox" class="mt-3 invalid-feedback d-block">Invalid choice</p>
+  `;
+
+  return html`
+    <fieldset class="container-fluid">
+      <legend aria-describedby="${args.validation === 'is-invalid' ? 'invalid-checkbox' : nothing}">
+        Legend
+      </legend>
+      <div class="row g-3">${loop.map(n => col(n))}</div>
+      ${args.validation === 'is-invalid' ? error : null}
+    </fieldset>
+  `;
+};
diff --git a/packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.docs.mdx b/packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.docs.mdx
new file mode 100644
index 0000000000..4e31c53cd3
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.docs.mdx
@@ -0,0 +1,60 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as RadiobuttonCardStories from './radiobutton-card.stories';
+
+<Meta of={RadiobuttonCardStories} />
+
+# Radio button card
+
+<div className="lead">
+  A larger, more consumer oriented, touch friendly variant of the radio-button used for e.g. selecting
+  services.
+</div>
+
+<div className="alert alert-info">
+  <h2 class="h5">Firefox fallback classes</h2>
+  Firefox currently does not support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">
+    the new <abbr title="Cascading Style Sheets">CSS</abbr> :has pseudo-selector
+  </a>. As a fallback, the following states have to be mirrored on the top level element in the form
+  of classes:
+  <ul>
+    <li>
+      <code>checked</code>
+    </li>
+    <li>
+      <code>focused</code>
+    </li>
+    <li>
+      <code>disabled</code>
+    </li>
+    <li>
+      <code>is-invalid</code>
+    </li>
+  </ul>
+  Check <a href="https://caniuse.com/css-has">caniuse :has()</a> to check if you still need the fallback.
+</div>
+
+<Canvas of={RadiobuttonCardStories.Default} />
+<div className="hide-col-default">
+  <Controls of={RadiobuttonCardStories.Default} />
+</div>
+
+## Grouping
+
+Radiobutton cards can be grouped together. Use a `fieldset`/`legend` combination to label the group. If there is an error, link the legend with the error message through the `aria-describedby` attribute on the `legend`, pointing to the `id` of the error message.
+
+<Canvas of={RadiobuttonCardStories.Group} />
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```scss
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```scss
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/choice-control-card.scss';
+```
diff --git a/packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.stories.ts b/packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.stories.ts
new file mode 100644
index 0000000000..392ddf353c
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.stories.ts
@@ -0,0 +1,20 @@
+import { BADGE } from '../../../../.storybook/constants';
+import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-control';
+
+export default {
+  ...choiceCardMeta,
+  title: 'Components/Radio Button Card',
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+};
+
+export const Default = {
+  render: choiceCardDefault,
+  args: { ...choiceCardMeta.args, type: 'radio' },
+};
+
+export const Group = {
+  render: choiceCardGroup,
+  args: { ...choiceCardMeta.args, type: 'radio' },
+};
diff --git a/packages/documentation/.storybook/preview.js b/packages/documentation/.storybook/preview.js
index e273f272b3..bf5fa8787a 100644
--- a/packages/documentation/.storybook/preview.js
+++ b/packages/documentation/.storybook/preview.js
@@ -106,6 +106,7 @@ export const parameters = {
       dt: null,
       dd: null,
       a: null,
+      div: null,
     },
     source: {
       excludeDecorators: true,
diff --git a/packages/documentation/cypress/snapshots/styles/choice-card.snapshot.ts b/packages/documentation/cypress/snapshots/styles/choice-card.snapshot.ts
new file mode 100644
index 0000000000..929b4874f1
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/styles/choice-card.snapshot.ts
@@ -0,0 +1,6 @@
+describe('Choice cards', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=hidden-choice-card-snapshot-test--page');
+    cy.percySnapshot('Choice card', { widths: [320, 1024] });
+  });
+});
diff --git a/packages/documentation/src/stories/components/choice-control-card/checkbox-card.docs.mdx b/packages/documentation/src/stories/components/choice-control-card/checkbox-card.docs.mdx
new file mode 100644
index 0000000000..37533f54b8
--- /dev/null
+++ b/packages/documentation/src/stories/components/choice-control-card/checkbox-card.docs.mdx
@@ -0,0 +1,36 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Checkbox card" />
+
+# Checkbox Card
+
+<Canvas>
+  <Story id="components-checkbox-card--default" />
+</Canvas>
+<div className="hide-col-default">
+  <ArgsTable story="^" />
+</div>
+
+## Grouping checkboxes
+
+Checkbox cards can be grouped together by wrapping them in a `fieldset/legend` structure.
+
+<Canvas>
+  <Story id="components-checkbox-card--group" />
+</Canvas>
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```css dark
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```css dark
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/choice-control-button.scss';
+```
diff --git a/packages/documentation/src/stories/components/choice-control-card/checkbox-card.stories.tsx b/packages/documentation/src/stories/components/choice-control-card/checkbox-card.stories.tsx
new file mode 100644
index 0000000000..67ae22324c
--- /dev/null
+++ b/packages/documentation/src/stories/components/choice-control-card/checkbox-card.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, Story } from '@storybook/react';
+import { choiceCardGroup, choiceCardMeta, ChoiceCardReactiveTemplate } from './choice-card';
+import docsPage from './checkbox-card.docs.mdx';
+
+export default Object.assign({}, choiceCardMeta, {
+  title: 'Components/Checkbox card',
+  parameters: { ...choiceCardMeta.parameters, docs: { page: docsPage } },
+  args: { ...choiceCardMeta.args, type: 'checkbox' },
+}) as Meta;
+
+export const Default: Story = ChoiceCardReactiveTemplate.bind({});
+Default.args = {
+  type: 'checkbox',
+};
+Default.parameters = {
+  controls: {
+    exclude: ['Type'],
+  },
+};
+
+export const Group: Story = choiceCardGroup.bind({});
+Group.args = {
+  type: 'checkbox',
+};
+Group.parameters = {
+  controls: {
+    exclude: ['Checked', 'Disabled', 'Type', 'Label'],
+  },
+};
diff --git a/packages/documentation/src/stories/components/choice-control-card/choice-card-snapshot.stories.mdx b/packages/documentation/src/stories/components/choice-control-card/choice-card-snapshot.stories.mdx
new file mode 100644
index 0000000000..eee9f6ad0d
--- /dev/null
+++ b/packages/documentation/src/stories/components/choice-control-card/choice-card-snapshot.stories.mdx
@@ -0,0 +1,27 @@
+import { Meta, Args, Story, Canvas } from '@storybook/addon-docs';
+import { bombArgs } from '../../utilities/bombArgs';
+import { choiceCardMeta, ChoiceCardTemplate } from './choice-card.tsx';
+
+<Meta title="Hidden/Choice control snapshot test" />
+
+<div className="d-flex gap-3 flex-wrap">
+  {['bg-white', 'bg-dark'].map(bg => (
+    <div key={bg} className={bg + ' row g-3'}>
+      {bombArgs({
+        type: choiceCardMeta.argTypes.type.options,
+        validation: choiceCardMeta.argTypes.validation.options,
+        checked: [false, true],
+        disabled: [false, true],
+        label: ['Card check text', 'Really long running choice card text that wraps to two lines'],
+        showDescription: [false, true],
+        description: ['A very long running description that is wrapping to two lines'],
+        showIcon: [false, true],
+      })
+        // Filter out disabled and invalid combinations
+        .filter(args => !(args.disabled && args.validation === 'is-invalid'))
+        .map(args => (
+          <div class="col-sm-6">{ChoiceCardTemplate({ ...args, icon: 1000 })}</div>
+        ))}
+    </div>
+  ))}
+</div>
diff --git a/packages/documentation/src/stories/components/choice-control-card/choice-card.tsx b/packages/documentation/src/stories/components/choice-control-card/choice-card.tsx
new file mode 100644
index 0000000000..6af1294d8d
--- /dev/null
+++ b/packages/documentation/src/stories/components/choice-control-card/choice-card.tsx
@@ -0,0 +1,177 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { Args, Meta } from '@storybook/react';
+
+import { useArgs } from '@storybook/client-api';
+
+export const choiceCardMeta = {
+  parameters: {
+    badges: [BADGE.NEEDS_REVISION],
+  },
+  args: {
+    label: 'Card check text',
+    type: 'radio',
+    checked: false,
+    disabled: false,
+    validation: 'null',
+    showDescription: false,
+    description: 'A small description',
+    icon: 1000,
+    showIcon: false,
+  },
+  argTypes: {
+    label: {
+      name: 'Label',
+      type: 'string',
+      description: 'The main label of the input',
+      table: {
+        category: 'General',
+      },
+    },
+    type: {
+      name: 'Type',
+      control: {
+        type: 'radio',
+        labels: {
+          radio: 'Radio button',
+          checkbox: 'Checkbox',
+        },
+      },
+      options: ['radio', 'checkbox'],
+      table: {
+        category: 'General',
+      },
+    },
+    checked: {
+      name: 'Checked',
+      type: 'boolean',
+      description: 'When set to `true`, places the component in the checked state.',
+      table: {
+        category: 'States',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description:
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/foundations-accessibility--page#disabled-state">disabled state accessibility guide</a>.</span>',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'States',
+      },
+    },
+    validation: {
+      name: 'Validation',
+      description: "Controls the display of the component's validation state.",
+      control: {
+        type: 'radio',
+        labels: {
+          'null': 'Default',
+          'is-invalid': 'Invalid',
+        },
+      },
+      options: ['null', 'is-invalid'],
+      table: {
+        category: 'States',
+      },
+    },
+    showDescription: {
+      name: 'Show description',
+      type: 'boolean',
+      description: 'Toggles an additional description',
+      table: {
+        category: 'Description',
+      },
+    },
+    description: {
+      name: 'Description',
+      type: 'string',
+      description: 'A short additional description',
+      table: {
+        category: 'Description',
+      },
+    },
+    showIcon: {
+      name: 'Show icon',
+      type: 'boolean',
+      description: 'Show or hide icon',
+      table: {
+        category: 'Icon',
+      },
+    },
+    icon: {
+      name: 'Icon',
+      control: {
+        type: 'select',
+      },
+      options: [1000, 1001, 2000],
+      table: {
+        category: 'Icon',
+      },
+    },
+  },
+} as Meta;
+
+export const ChoiceCardTemplate = (args: Args, onChange?: () => void, id = 'choice-card') => {
+  const inputClasses = ['form-check-input', args.validation].filter(c => c !== 'null').join(' ');
+  return (
+    <div className="radio-button-card">
+      {typeof onChange === 'function' ? (
+        <input
+          id={id}
+          className={inputClasses}
+          type={args.type}
+          name="radio-button-card"
+          disabled={args.disabled}
+          checked={args.checked}
+          onChange={onChange}
+        />
+      ) : (
+        <input
+          id={id}
+          className={inputClasses}
+          type={args.type}
+          name="radio-button-card"
+          disabled={args.disabled}
+        />
+      )}
+      <label id={`label-${id}`} htmlFor={id} className="form-check-label">
+        <span>{args.label}</span>
+        {args.showDescription && [
+          <br key="br" />,
+          <span key="span" className="font-size-12">
+            {args.description}
+          </span>,
+        ]}
+      </label>
+      {args.showIcon && <post-icon name={args.icon} aria-hidden="true"></post-icon>}
+    </div>
+  );
+};
+
+export const ChoiceCardReactiveTemplate = (args: Args) => {
+  const [_, updateArgs] = useArgs();
+  return ChoiceCardTemplate(args, () => updateArgs({ checked: !args.checked }));
+};
+
+export const choiceCardGroup = (args: Args) => {
+  const loop = ['One', 'Two', 'Three', 'Four', 'Five', 'Six'];
+  return (
+    <fieldset className="container-fluid">
+      <legend>Legend</legend>
+      <div className="row g-3">
+        {loop.map(n => (
+          <div className="col-sm-6" key={n}>
+            {ChoiceCardTemplate({ ...args, label: n }, undefined, `choice-card-${n}`)}
+          </div>
+        ))}
+      </div>
+
+      {args.validation === 'is-invalid' && (
+        <p id="invalid-checkbox" className="mt-3 invalid-feedback d-block">
+          Invalid choice
+        </p>
+      )}
+    </fieldset>
+  );
+};
diff --git a/packages/documentation/src/stories/components/choice-control-card/radio-button-card.docs.mdx b/packages/documentation/src/stories/components/choice-control-card/radio-button-card.docs.mdx
new file mode 100644
index 0000000000..45eab00c3c
--- /dev/null
+++ b/packages/documentation/src/stories/components/choice-control-card/radio-button-card.docs.mdx
@@ -0,0 +1,36 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Radio button card" />
+
+# Radio button card
+
+<Canvas>
+  <Story id="components-radio-button-card--default" />
+</Canvas>
+<div className="hide-col-default">
+  <ArgsTable story="^" />
+</div>
+
+## Grouping radio buttons
+
+Radio button cards can be grouped by wrapping them in a `fieldset/legend` construct.
+
+<Canvas>
+  <Story id="components-radio-button-card--group" />
+</Canvas>
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```css dark
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```css dark
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/choice-control-button.scss';
+```
diff --git a/packages/documentation/src/stories/components/choice-control-card/radio-button-card.stories.tsx b/packages/documentation/src/stories/components/choice-control-card/radio-button-card.stories.tsx
new file mode 100644
index 0000000000..5d32168074
--- /dev/null
+++ b/packages/documentation/src/stories/components/choice-control-card/radio-button-card.stories.tsx
@@ -0,0 +1,28 @@
+import { Story } from '@storybook/react';
+import { choiceCardGroup, choiceCardMeta, ChoiceCardReactiveTemplate } from './choice-card';
+import docsPage from './radio-button-card.docs.mdx';
+
+export default Object.assign({}, choiceCardMeta, {
+  title: 'Components/Radio Button Card',
+  parameters: { ...choiceCardMeta.parameters, docs: { page: docsPage } },
+});
+
+export const Default: Story = ChoiceCardReactiveTemplate.bind({});
+Default.args = {
+  type: 'radio',
+};
+Default.parameters = {
+  controls: {
+    exclude: ['Type'],
+  },
+};
+
+export const Group: Story = choiceCardGroup.bind({});
+Group.args = {
+  type: 'radio',
+};
+Group.parameters = {
+  controls: {
+    exclude: ['Checked', 'Disabled', 'Type', 'Label'],
+  },
+};
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index 623c73b462..cebd4c6353 100644
--- a/packages/styles/src/components/_index.scss
+++ b/packages/styles/src/components/_index.scss
@@ -9,6 +9,7 @@
 @use 'button';
 @use 'button-group';
 @use 'card';
+@use 'choice-control-card';
 @use 'carousel';
 @use 'close';
 @use 'elevation';
diff --git a/packages/styles/src/components/choice-control-card.scss b/packages/styles/src/components/choice-control-card.scss
new file mode 100644
index 0000000000..3b1ad7e518
--- /dev/null
+++ b/packages/styles/src/components/choice-control-card.scss
@@ -0,0 +1,146 @@
+@use '../variables/color';
+@use '../variables/commons';
+@use '../variables/spacing';
+@use '../mixins/utilities';
+
+.radio-button-card,
+.checkbox-button-card {
+  --post-card-select--hover-bg: #{color.$gray-10};
+
+  position: relative;
+  display: flex;
+  gap: 0 spacing.$size-mini;
+
+  width: 100%;
+
+  color: color.$gray-80;
+  background-color: color.$white;
+  border: 2px solid color.$gray-60;
+  border-radius: commons.$border-radius;
+  padding: spacing.$size-regular;
+  transition: color 100ms ease-in-out, background-color 100ms ease-in-out,
+    border-color 100ms ease-in-out;
+
+  // Checked
+  &:where(:has(input:checked), .checked) {
+    --post-card-select--hover-bg: #{color.$yellow};
+    background-color: color.$yellow;
+    border-color: color.$gray-60;
+
+    input {
+      background-color: color.$white !important;
+    }
+  }
+
+  // Focus
+  &:where(:has(input:focus-visible), .focused) {
+    background-color: var(--post-card-select--hover-bg);
+    outline: 2px solid color.$black;
+    outline-offset: 2px;
+    border-color: color.$black;
+
+    input {
+      border-color: color.$black;
+    }
+  }
+
+  // Hover
+  &:where(:hover:not(:has(input:disabled)), :hover:not(.disabled)) {
+    border-color: color.$black;
+    color: color.$black;
+    background-color: var(--post-card-select--hover-bg);
+
+    input {
+      border-color: color.$black;
+    }
+
+    @include utilities.high-contrast-mode() {
+      border-color: Highlight;
+      transition: none;
+    }
+  }
+
+  // Disabled
+  &:has(input:disabled),
+  &.disabled {
+    border-color: color.$gray-20;
+    color: color.$gray-40 !important;
+
+    > * {
+      cursor: default;
+    }
+  }
+
+  &:has(input:disabled:checked),
+  &.disabled.checked {
+    background-color: color.$gray-10;
+  }
+
+  // Error
+  &:has(input[aria-invalid]),
+  &:has(input.is-invalid),
+  &.is-invalid {
+    color: color.$error;
+    border-color: color.$error;
+
+    ~ .invalid-feedback {
+      display: block;
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  > * {
+    cursor: pointer;
+  }
+
+  post-icon {
+    width: 2em;
+    height: 2em;
+    margin-left: spacing.$size-mini;
+    pointer-events: none;
+  }
+
+  input {
+    border-color: color.$gray-80;
+    background-color: color.$white;
+    transition: border-color 100ms ease-in-out;
+    grid-column: 1 / 2;
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+
+  .form-check-label {
+    padding-left: 0;
+
+    &::before {
+      // This spans up the click area of the label to the whole
+      // card in order to make it clickable natively.
+      content: '';
+      position: absolute;
+      inset: -2px;
+    }
+
+    span {
+      // Lift spans above the before element to make them selectable
+      position: relative;
+    }
+  }
+
+  input,
+  .form-check-label {
+    margin-block: 0.25rem;
+  }
+
+  // Align input and label if there is an icon
+  &:has(post-icon) {
+    input,
+    .form-check-label {
+      margin-top: 0.25rem;
+    }
+  }
+}
diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss
index 69842b1254..c7dd2c2015 100644
--- a/packages/styles/src/variables/_type.scss
+++ b/packages/styles/src/variables/_type.scss
@@ -77,6 +77,7 @@ $font-sizes: (
 );
 
 $font-size-map: (
+  12: $font-size-12,
   14: $font-size-14,
   16: $font-size-16,
   18: $font-size-18,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f887fa648..c43d824215 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -687,6 +687,9 @@ importers:
       lit:
         specifier: 2.8.0
         version: 2.8.0
+      lit-html:
+        specifier: 2.8.0
+        version: 2.8.0
       prettier:
         specifier: 2.8.8
         version: 2.8.8

From ee91d416e8a611ef19bf96d45878f9bba8738ccb Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Thu, 17 Aug 2023 13:58:21 +0200
Subject: [PATCH 13/16] feat(documentation-v7): migrate snapshot test for
 collapsible  (#1823)

---
 .../components/collapsible.snapshot.ts        |  7 ++++
 .../collapsible.snapshot.stories.tsx          | 41 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts
 create mode 100644 packages/documentation-v7/src/stories/components/collapsible/collapsible.snapshot.stories.tsx

diff --git a/packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts b/packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts
new file mode 100644
index 0000000000..d72ea712f2
--- /dev/null
+++ b/packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Collapsible', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--collapsible');
+    cy.get('post-collapsible.hydrated').should('be.visible');
+    cy.percySnapshot('Collapsible');
+  });
+});
diff --git a/packages/documentation-v7/src/stories/components/collapsible/collapsible.snapshot.stories.tsx b/packages/documentation-v7/src/stories/components/collapsible/collapsible.snapshot.stories.tsx
new file mode 100644
index 0000000000..0a912aec93
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/collapsible/collapsible.snapshot.stories.tsx
@@ -0,0 +1,41 @@
+import { html } from 'lit';
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import { bombArgs } from '../../../utils/bombArgs';
+
+import meta, { Default } from './collapsible.stories';
+
+export default {
+  ...meta,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj<HTMLPostCollapsibleElement>;
+
+export const collapsible: Story = {
+  render: (_args: Args, context: StoryContext<HTMLPostCollapsibleElement>) => {
+    const templateVariants = bombArgs({
+      innerHTML: [
+        `<span slot="header">Titulum</span><p>Contentus momentus vero siteos et accusam iretea et justo.</p>`,
+        `<p>Contentus momentus vero siteos et accusam iretea et justo.</p>`,
+      ],
+      collapsed: [false, true],
+      headingLevel: [1, 2, 3, 4, 5, 6],
+    }).map((args: Args) => {
+      return html`
+        <div class="col-6 p-3">
+          ${meta.render?.({ ...context.args, ...Default.args, ...args }, context)}
+        </div>
+      `;
+    });
+
+    return html`
+      <div>
+        ${['white', 'dark'].map(
+          bg => html`
+            <div class=${'row bg-' + bg}>${templateVariants}</div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};

From e2f335797be3be8bbf78970c5d9ea101c84ce5ff Mon Sep 17 00:00:00 2001
From: Lukas Blaser <141234680+b1aserlu@users.noreply.github.com>
Date: Thu, 17 Aug 2023 16:02:22 +0200
Subject: [PATCH 14/16] feat(documentation-v7): add select snapshot test
 (#1817)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .../snapshots/components/select.snapshot.ts   |   6 +
 .../select/select.snapshot.stories.ts         | 116 ++++++++++++++++++
 2 files changed, 122 insertions(+)
 create mode 100644 packages/documentation-v7/cypress/snapshots/components/select.snapshot.ts
 create mode 100644 packages/documentation-v7/src/stories/components/select/select.snapshot.stories.ts

diff --git a/packages/documentation-v7/cypress/snapshots/components/select.snapshot.ts b/packages/documentation-v7/cypress/snapshots/components/select.snapshot.ts
new file mode 100644
index 0000000000..51939323b1
--- /dev/null
+++ b/packages/documentation-v7/cypress/snapshots/components/select.snapshot.ts
@@ -0,0 +1,6 @@
+describe('Select', () => {
+  it('default', () => {
+    cy.visit('./iframe.html?id=snapshots--select');
+    cy.percySnapshot('Selects', { widths: [400] });
+  });
+});
diff --git a/packages/documentation-v7/src/stories/components/select/select.snapshot.stories.ts b/packages/documentation-v7/src/stories/components/select/select.snapshot.stories.ts
new file mode 100644
index 0000000000..ba4d60022e
--- /dev/null
+++ b/packages/documentation-v7/src/stories/components/select/select.snapshot.stories.ts
@@ -0,0 +1,116 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta, { Default, FloatingLabel } from './select.stories';
+import { html } from 'lit';
+import { bombArgs } from '../../../utils/bombArgs';
+
+export default {
+  ...meta,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Select: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    //Arguments for Default Version
+    const bombArgsGeneratedDefault = [
+      ...bombArgs({
+        label: [
+          context.args.label,
+          'Label - Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor',
+        ],
+        hint: [''],
+      }),
+      ...bombArgs({
+        hiddenLabel: [true],
+        hint: ['Hintus textus', context.args.hint],
+      }),
+      ...bombArgs({
+        size: context.argTypes.size.options,
+        disabled: [false, true],
+        validation: context.argTypes.validation.options,
+      }),
+    ]
+      // remove disabled & validated examples
+      .filter((args: Args) => !(args.disabled && args.validation !== 'null'));
+
+    //Arguments for Multiple Version
+    const bombArgsGeneratedMultiple = [
+      ...bombArgs({
+        multiple: [true],
+        label: [
+          context.args.label,
+          'Label - Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor',
+        ],
+        hint: [''],
+      }),
+      ...bombArgs({
+        multiple: [true],
+        hiddenLabel: [true],
+        hint: ['', 'Hintus textus', context.args.hint],
+      }),
+      ...bombArgs({
+        multiple: [true],
+        size: context.argTypes.size.options,
+        disabled: [false, true],
+        validation: context.argTypes.validation.options,
+      }),
+    ]
+      // remove disabled & validated examples
+      .filter((args: Args) => !(args.disabled && args.validation !== 'null'));
+
+    return html`
+      <div class="d-flex gap-3 flex-column">
+        ${['bg-white', 'bg-dark'].map(
+          bg =>
+            html`
+              <div class="${bg} d-flex gap-3 flex-column p-3">
+                <h2>Default</h2>
+                ${bombArgsGeneratedDefault.map(
+                  (args: Args) =>
+                    html`
+                      <div>
+                        ${Default.render?.({ ...context.args, ...Default.args, ...args }, context)}
+                      </div>
+                    `,
+                )}
+                <h2>Floating Label</h2>
+                ${bombArgsGeneratedDefault.map(
+                  (args: Args) =>
+                    html`
+                      <div>
+                        ${FloatingLabel.render?.(
+                          { ...context.args, ...FloatingLabel.args, ...args },
+                          context,
+                        )}
+                      </div>
+                    `,
+                )}
+                <h2>Multiple - Default</h2>
+                ${bombArgsGeneratedMultiple.map(
+                  (args: Args) =>
+                    html`
+                      <div>
+                        ${Default.render?.({ ...context.args, ...Default.args, ...args }, context)}
+                      </div>
+                    `,
+                )}
+                <h2>Multiple - Floating Label</h2>
+                ${bombArgsGeneratedMultiple.map(
+                  (args: Args) =>
+                    html`
+                      <div>
+                        ${FloatingLabel.render?.(
+                          { ...context.args, ...FloatingLabel.args, ...args },
+                          context,
+                        )}
+                      </div>
+                    `,
+                )}
+              </div>
+            `,
+        )}
+      </div>
+    `;
+  },
+};

From 442218663dea5523e32435757c4f8bbb6da89880 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Thu, 17 Aug 2023 16:25:50 +0200
Subject: [PATCH 15/16] chore(documentation-v7): migrate the internet header
 component stories (#1822)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Co-authored-by: Loïc Fürhoff <12294151+imagoiq@users.noreply.github.com>
---
 .../helpers/register-web-components.ts        |  30 ++-
 .../documentation-v7/.storybook/preview.ts    |  14 +-
 .../components/internet-header.docs.mdx       |  54 ++++
 .../components/internet-header.stories.tsx    | 241 ++++++++++++++++++
 .../components/internet-header.styles.scss    |  32 +++
 .../internet-header/getting-started.docs.mdx  | 113 ++++++++
 .../internet-header/migration-guide.docs.mdx  | 195 ++++++++++++++
 .../post-klp-login-widget.tsx                 |   2 +-
 packages/internet-header/stencil.config.ts    |   7 +
 pnpm-lock.yaml                                |   2 +-
 10 files changed, 665 insertions(+), 25 deletions(-)
 create mode 100644 packages/documentation-v7/src/stories/internet-header/components/internet-header.docs.mdx
 create mode 100644 packages/documentation-v7/src/stories/internet-header/components/internet-header.stories.tsx
 create mode 100644 packages/documentation-v7/src/stories/internet-header/components/internet-header.styles.scss
 create mode 100644 packages/documentation-v7/src/stories/internet-header/getting-started.docs.mdx
 create mode 100644 packages/documentation-v7/src/stories/internet-header/migration-guide.docs.mdx

diff --git a/packages/documentation-v7/.storybook/helpers/register-web-components.ts b/packages/documentation-v7/.storybook/helpers/register-web-components.ts
index a09a50def5..c5963a748c 100644
--- a/packages/documentation-v7/.storybook/helpers/register-web-components.ts
+++ b/packages/documentation-v7/.storybook/helpers/register-web-components.ts
@@ -1,14 +1,22 @@
-import { defineCustomElements, JSX as LocalJSX } from '@swisspost/design-system-components/loader';
-import { HTMLAttributes } from 'react';
+import { defineCustomElements as defineInternetHeader } from '@swisspost/internet-header/loader';
+import { defineCustomElements as definePostComponent } from '@swisspost/design-system-components/loader';
+import { setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil';
+import { StencilJsonDocs, StencilJsonDocsComponent } from '@pxtrn/storybook-addon-docs-stencil/dist/types';
+import postComponentsDocJson from '@swisspost/design-system-components/dist/docs.json';
+import internetHeaderDocJson from '@swisspost/internet-header/dist/docs.json';
 
-type StencilToReact<T> = {
-  [P in keyof T]?: T[P] & Omit<HTMLAttributes<Element>, 'className'> & { class?: string };
-};
+defineInternetHeader(window);
+definePostComponent(window);
 
-declare global {
-  export namespace JSX {
-    interface IntrinsicElements extends StencilToReact<LocalJSX.IntrinsicElements> {}
-  }
-}
+if (postComponentsDocJson && internetHeaderDocJson) {
+  const jsonDocs: StencilJsonDocs = {
+    timestamp: postComponentsDocJson.timestamp,
+    compiler: postComponentsDocJson.compiler,
+    components: [
+      ...postComponentsDocJson.components,
+      ...internetHeaderDocJson.components
+    ] as StencilJsonDocsComponent[],
+  };
 
-defineCustomElements(window);
+  setStencilDocJson(jsonDocs);
+}
diff --git a/packages/documentation-v7/.storybook/preview.ts b/packages/documentation-v7/.storybook/preview.ts
index 9eb4868e07..8d05d53869 100644
--- a/packages/documentation-v7/.storybook/preview.ts
+++ b/packages/documentation-v7/.storybook/preview.ts
@@ -1,11 +1,6 @@
 import type { Preview } from '@storybook/web-components';
 
-import {
-  extractArgTypes,
-  extractComponentDescription,
-  setStencilDocJson,
-} from '@pxtrn/storybook-addon-docs-stencil';
-import { StencilJsonDocs } from '@pxtrn/storybook-addon-docs-stencil/dist/types';
+import { extractArgTypes, extractComponentDescription } from '@pxtrn/storybook-addon-docs-stencil';
 import { format } from 'prettier';
 import DocsLayout from './blocks/layout';
 import { badgesConfig, prettierOptions, resetComponents } from './helpers';
@@ -18,10 +13,6 @@ import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 
 SyntaxHighlighter.registerLanguage('scss', scss);
 
-import docJson from '@swisspost/design-system-components/dist/docs.json';
-
-if (docJson) setStencilDocJson(docJson as StencilJsonDocs);
-
 const preview: Preview = {
   parameters: {
     options: {
@@ -34,7 +25,7 @@ const preview: Preview = {
           ['Typography', 'Color', 'Layout', 'Elevation', 'Accessibility'],
           'Components',
           'Internet Header',
-          ['Getting started', 'Migration Guide', 'Components', ['Header', 'Breadcrumbs', 'Footer']],
+          ['Getting started', 'Migration Guide', 'Header Component', 'Breadcrumbs Component', 'Footer Component'],
           'Intranet Header',
           ['Getting started'],
           'Icons',
@@ -55,7 +46,6 @@ const preview: Preview = {
       },
       components: resetComponents,
       extractArgTypes,
-      extractComponentDescription,
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
diff --git a/packages/documentation-v7/src/stories/internet-header/components/internet-header.docs.mdx b/packages/documentation-v7/src/stories/internet-header/components/internet-header.docs.mdx
new file mode 100644
index 0000000000..4be69ee0f9
--- /dev/null
+++ b/packages/documentation-v7/src/stories/internet-header/components/internet-header.docs.mdx
@@ -0,0 +1,54 @@
+import { Canvas, ArgTypes, Meta } from '@storybook/blocks';
+import * as InternetHeaderStories from './internet-header.stories';
+
+<Meta of={InternetHeaderStories} />
+
+# Header
+
+<div className="lead">
+  Customizable navigation header tailored for Swiss Post customer-facing applications,
+  ensuring complete accessibility and responsiveness.
+</div>
+
+The `<swisspost-internet-header>` element needs
+to be nested directly inside the `<body>` for the sticky scrolling to work.
+
+If you want to render the header element with Angular,
+have a look at [portals](https://medium.com/angular-in-depth/how-do-cdk-portals-work-7c097c14a494).
+
+<a
+  className="btn btn-primary btn-animated"
+  href="/iframe.html?viewMode=story&id=internet-header-header-component--default"
+  target="_blank"
+>
+  <span>Open Header in New Tab</span>
+</a>
+
+<Canvas of={InternetHeaderStories.Default} />
+
+<div className="hide-col-default">
+  <ArgTypes of={InternetHeaderStories.Default} />
+</div>
+
+## Examples
+
+### Custom Navigation Item
+
+<Canvas of={InternetHeaderStories.CustomNavigation} />
+
+### Custom Online Service Flyout
+
+<Canvas of={InternetHeaderStories.CustomOnlineServiceFlyout} />
+
+### Full Width
+
+By default, on viewports with a width greater than 1440px, header content is padded right and left.
+To make the header span the full width of the viewport, set the `full-width` property to `true`.
+
+<a
+  className="btn btn-secondary btn-animated"
+  href="/iframe.html?viewMode=story&id=internet-header-header-component--full-width"
+  target="_blank"
+>
+  <span>See Fullwidth Header</span>
+</a>
diff --git a/packages/documentation-v7/src/stories/internet-header/components/internet-header.stories.tsx b/packages/documentation-v7/src/stories/internet-header/components/internet-header.stories.tsx
new file mode 100644
index 0000000000..d2b80ec41b
--- /dev/null
+++ b/packages/documentation-v7/src/stories/internet-header/components/internet-header.stories.tsx
@@ -0,0 +1,241 @@
+import { Args, Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { spread } from '@open-wc/lit-helpers';
+import { BADGE } from '../../../../.storybook/constants';
+import './internet-header.styles.scss';
+
+const meta: Meta<HTMLSwisspostInternetHeaderElement> = {
+  title: 'Internet Header/Header Component',
+  component: 'swisspost-internet-header',
+  render: renderInternetHeader,
+  parameters: {
+    layout: 'fullscreen',
+    actions: {
+      handles: ['headerLoaded', 'languageChanged'],
+    },
+    badges: [BADGE.STABLE],
+    controls: {
+      exclude: ['config-proxy']
+    },
+  },
+  args: {
+    'project': 'test'
+  },
+  argTypes: {
+    activeRoute: {
+      name: 'active-route',
+      control: 'text',
+    },
+    customConfig: {
+      name: 'custom-config',
+      control: 'object',
+    },
+    language: {
+      control: 'select',
+      options: ['de', 'fr', 'it', 'en'],
+    },
+    languageCookieKey: {
+      name: 'language-cookie-key',
+      control: 'text',
+    },
+    languageLocalStorageKey: {
+      name: 'language-local-storage-key',
+      control: 'text',
+    },
+    languageSwitchOverrides: {
+      name: 'language-switch-overrides',
+      control: 'object',
+    },
+    osFlyoutOverrides: {
+      name: 'os-flyout-overrides',
+      control: 'object',
+    },
+    stickyness: {
+      control: 'select',
+    },
+  },
+};
+
+export default meta;
+
+// DECORATORS
+function mockPage(story: any) {
+  return html`
+    <div class="page-wrapper">
+      ${story()}
+      <main class="container mt-huge-r">
+        <swisspost-internet-breadcrumbs/>
+        <h1 class="mt-huge-r mb-big-r bold">Swiss Post Internet Header</h1>
+        <p class="fake-content my-big"></p>
+        <p class="fake-content my-big"></p>
+      </main>
+      <swisspost-internet-footer/>
+    </div>
+  `;
+}
+
+// RENDERER
+function renderInternetHeader(args: HTMLSwisspostInternetHeaderElement) {
+  const attributes = getAttributes(args, arg => arg !== null && arg !== undefined);
+  return html`
+    <swisspost-internet-header ${spread(attributes)}></swisspost-internet-header>
+  `;
+}
+
+// STORIES
+type Story = StoryObj<HTMLSwisspostInternetHeaderElement>;
+
+export const Default: Story = {
+  decorators: [ mockPage ],
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        height: '40em',
+      },
+    },
+  },
+};
+
+export const FullWidth: Story = {
+  decorators: [ mockPage ],
+  args: {
+    fullWidth: true,
+  },
+};
+
+export const CustomNavigation: Story = {
+  args: {
+    customConfig: {
+      de: {
+        header: {
+          navMain: [
+            {
+              title: 'Meine Links (custom config)',
+              text: 'Meine Links',
+              url: '#',
+              flyout: [
+                {
+                  title: 'Google',
+                  linkList: [
+                    { url: 'https://maps.google.com', title: 'Google Maps', target: '_blank' },
+                    { url: 'https://translate.google.com', title: 'Google Translate' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      },
+      fr: {
+        header: {
+          navMain: [
+            {
+              title: 'Meine Links (custom config)',
+              text: 'Meine Links',
+              url: '#',
+              flyout: [
+                {
+                  title: 'Google',
+                  linkList: [
+                    { url: 'https://maps.google.com', title: 'Google Maps', target: '_blank' },
+                    { url: 'https://translate.google.com', title: 'Google Translate' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      },
+      it: {
+        header: {
+          navMain: [
+            {
+              title: 'Meine Links (custom config)',
+              text: 'Meine Links',
+              url: '#',
+              flyout: [
+                {
+                  title: 'Google',
+                  linkList: [
+                    { url: 'https://maps.google.com', title: 'Google Maps', target: '_blank' },
+                    { url: 'https://translate.google.com', title: 'Google Translate' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      },
+      en: {
+        header: {
+          navMain: [
+            {
+              title: 'Meine Links (custom config)',
+              text: 'Meine Links',
+              url: '#',
+              flyout: [
+                {
+                  title: 'Google',
+                  linkList: [
+                    { url: 'https://maps.google.com', title: 'Google Maps', target: '_blank' },
+                    { url: 'https://translate.google.com', title: 'Google Translate' },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const CustomOnlineServiceFlyout: Story = {
+  args: {
+    osFlyoutOverrides: {
+      title: 'Custom OS Flyout',
+      text: 'Custom OS Flyout',
+      url: '#',
+      flyout: [
+        {
+          title: 'A title',
+          linkList: [
+            {
+              url: '#bla',
+              title: 'Another link',
+            },
+          ],
+        },
+        {
+          title: 'Another column',
+          linkList: [
+            {
+              url: '#foo',
+              title: 'Foo',
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+// TODO: move to utils
+const getAttributes = (args: Args, condition?: (arg: any) => boolean): Args => {
+  const attrs: { [key: string]: any } = {};
+
+  for (const key in args) {
+    if (args.hasOwnProperty(key) && condition && condition(args[key])) {
+      const attrKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+
+      // Cast boolean false to string so it's displayed in the docs code block. False values are otherwise omitted
+      attrs[attrKey] = args[key] === false ? 'false' : args[key];
+      if (typeof args[key] === 'object') {
+        attrs[attrKey] = JSON.stringify(args[key]);
+      }
+    }
+  }
+
+  return attrs;
+};
diff --git a/packages/documentation-v7/src/stories/internet-header/components/internet-header.styles.scss b/packages/documentation-v7/src/stories/internet-header/components/internet-header.styles.scss
new file mode 100644
index 0000000000..9b64d999be
--- /dev/null
+++ b/packages/documentation-v7/src/stories/internet-header/components/internet-header.styles.scss
@@ -0,0 +1,32 @@
+.docs-story {
+  > div:first-child {
+    overflow: hidden;
+  }
+
+  > div:nth-child(2) {
+    z-index: 1000;
+  }
+}
+
+// Used for internet header stories
+.fake-content {
+  position: relative;
+  min-height: calc(1.6rem * 8);
+  background: repeating-linear-gradient(
+      rgb(230, 230, 230),
+      rgb(230, 230, 230) 1rem,
+      transparent 1rem,
+      transparent 1.6rem
+  );
+
+  &::after {
+    content: '';
+    background: white;
+    width: 33%;
+    height: 1.7rem;
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
diff --git a/packages/documentation-v7/src/stories/internet-header/getting-started.docs.mdx b/packages/documentation-v7/src/stories/internet-header/getting-started.docs.mdx
new file mode 100644
index 0000000000..5da7c225be
--- /dev/null
+++ b/packages/documentation-v7/src/stories/internet-header/getting-started.docs.mdx
@@ -0,0 +1,113 @@
+import { Meta } from '@storybook/blocks';
+import { BADGE } from '../../../.storybook/constants';
+
+<Meta
+  title="Internet Header/Getting started"
+  parameters={{ badges: [BADGE.STABLE] }}
+/>
+
+# @swisspost/internet-header
+
+[![npm version](https://badge.fury.io/js/@swisspost%2Finternet-header.svg)](https://badge.fury.io/js/@swisspost%2Finternet-header)
+
+The header for client-facing applications.
+
+- [Installation](#installation)
+- [Configuration](#configuration)
+- [Help](#help)
+
+## Installation
+
+### Angular, Vue JS, React (or any other bundler setup)
+
+All the popular frameworks come with some form of bundler.
+This makes it easy to use npm packages like the Internet Header as you can import,
+bundle and deliver the header with your own code.
+
+When working with Angular or any other framework, the easiest installation method is via npm.
+
+```shell
+npm install @swisspost/internet-header
+```
+
+```typescript
+// main.ts / index.js / ...
+import { defineCustomElements } from '@swisspost/internet-header';
+
+defineCustomElements();
+```
+
+```html
+<!-- index.html -->
+<body>
+  <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
+  ...
+</body>
+```
+
+### Include from a CDN
+
+If you are not using any loader or don't want to install from npm,
+you can load the `internet-header` from your favourite
+[CDN](https://en.wikipedia.org/wiki/Content_delivery_network).<br/>
+There are two options available.
+Make sure to replace `{version}` with the version you want to use.
+
+- [jsDelivr](https://www.jsdelivr.com/)
+- [unpkg](https://unpkg.com/)
+
+#### jsDelivr
+
+```html
+<!-- index.html -->
+<head>
+  <script
+    async
+    type="module"
+    src="https://cdn.jsdelivr.net/npm/@swisspost/internet-header@{version}/dist/swisspost-internet-header/swisspost-internet-header.esm.js"
+  ></script>
+</head>
+<body>
+  <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
+</body>
+```
+
+```javascript
+// main.js | main.ts
+import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@swisspost/internet-header@{version}/loader/index.min.js';
+
+defineCustomElements();
+```
+
+#### unpkg
+
+```javascript
+// main.js | main.ts
+import { defineCustomElements } from 'https://unpkg.com/@swisspost/internet-header@{version}/loader/index.min.js';
+
+defineCustomElements();
+```
+
+## Configuration
+
+The Internet Header is built to support the already existing Portal Configuration used for the old Internet Header.
+
+If you're working on a new project, you probably need a new configuration. Please click the button below.
+
+<a
+  className="mb-small-r btn-primary btn"
+  href="mailto:digitalconsulting@post.ch"
+  target="_blank"
+  rel="noopener"
+>Contact Post Portal Team <post-icon name="1001" className="fs-large"/></a>
+
+Not every Online Service has configurations for all environments.
+For example, "TOPOS" only has `int02` configured and cannot use `int01` as value for environment.
+If you are not sure what's configured for your project, please reach out to the post-portal team as well.
+
+For settings on the header itself, see the examples provided in the left menu bar.
+
+## Help
+
+If you noticed a bug or need assistance with migrating to the new Internet Header,
+please post your enquiry at the [Design System GitHub Discussions](https://github.com/swisspost/design-system/discussions/categories/q-a).
diff --git a/packages/documentation-v7/src/stories/internet-header/migration-guide.docs.mdx b/packages/documentation-v7/src/stories/internet-header/migration-guide.docs.mdx
new file mode 100644
index 0000000000..59819e4702
--- /dev/null
+++ b/packages/documentation-v7/src/stories/internet-header/migration-guide.docs.mdx
@@ -0,0 +1,195 @@
+import { Meta } from '@storybook/blocks';
+import { BADGE } from '../../../.storybook/constants';
+
+<Meta
+  title="Internet Header/Migration Guide"
+  parameters={{ badges: [ BADGE.STABLE ] }}
+/>
+
+# Migration from the old header
+
+This guide aims to give a broad overview of how a migration can be performed.
+Different projects have different levels of integration with the header,
+and therefore require more steps to migrate.
+
+## Architecture
+
+The "new"
+Internet Header Web Component aims
+to encapsulate as much as possible whereas the old header had a big influence on the page —
+limiting design decisions and flexibility of the markup structure.
+The Web Component Header consists of one script and three standard Web Components that can be freely placed on the page.
+It's even possible to render those elements with Angular
+(or any other framework) to easier pass settings into the component.
+
+The new header is built
+to work with the existing Sitecore configuration
+already existing for your project to make the migration as smooth as possible.
+
+## Support
+
+If you need support during your migration,
+don't hesitate
+to contact the [Design System Team](https://github.com/swisspost/design-system/discussions/categories/general) on GitHub.
+
+## 1. Remove the old header
+
+In your index.html, you should find three scripts associated with the old header.
+One to load static assets, one to configure it and one to load it.
+
+- You can remove the configuration and the loader scripts, but remember your `serviceid`.
+- Try to remove the `staticassets` script to check if you still need it
+
+```html
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
+    />
+    <link
+      rel="stylesheet"
+      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
+    />
+
+    <!-- Custom CSS -->
+
+    <!-- static assets -->
+    <script
+      src="https://www.post.ch/api/staticasset?serviceId=webstamp&file=head.js&environment=prod"
+      type="text/javascript"
+    ></script>
+  </head>
+
+  <body>
+    <div id="os_content">
+      <!-- Content from the current page of the online service -->
+    </div>
+
+    <!-- configuration -->
+    <script id="os_config" type="application/json">
+      {
+        "os_config": {
+          "currentLang": "de",
+          "currentUrl": "https://service.post.ch/onlinedienst/deep-url"
+        }
+      }
+    </script>
+
+    <!-- loader -->
+    <script
+      src="https://www.post.ch/api/headerjs?serviceid=webstamp&includejquery=true&environment=prod"
+      type="text/javascript"
+    ></script>
+  </body>
+</html>
+```
+
+## 2. Fix your app styles
+
+The old header was responsible for wrapping your main code (here `#os_content`) with custom `<div>`s.
+The new header does not provide those wrappers.
+Instead, every page has control over the main markup structure.
+A possible replacement of the above code could be:
+
+```html
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
+    />
+    <link
+      rel="stylesheet"
+      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
+    />
+
+    <!-- Custom CSS -->
+  </head>
+
+  <body>
+    <main id="os_content" class="container">
+      <!-- Content from the current page of the online service -->
+    </main>
+  </body>
+</html>
+```
+
+- Likely you'll need the class `container` around your main content to align it properly in the center.
+- For bonus points on semantic markup, use the [`<main>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) around the main page content
+- Check if you need the `staticasset` stylesheets linked in the header
+
+If you need to do any other changes,
+please make a post to the [Design System Teams Channel](https://teams.microsoft.com/l/channel/19%3ae7fa68fb13eb40b4bf4604edea5f4b3e%40thread.tacv2/%25F0%259F%259A%2591%2520Support?groupId=123c7c9e-052a-40e6-98d3-6cc6d46bad0a&tenantId=3ae7c479-0cf1-47f4-8f84-929f364eff67)
+in order to inform the devs to update this guide and provide useful information for other developers.
+
+## 3. jQuery
+
+The new Header does not ship jQuery anymore.
+While jQuery v3.6 is an internal dependency for the Login Widget,
+every project is now responsible for loading and updating jQuery individually.
+If you are depending on an older (&lt;3.5) version of jQuery, please update.
+There is a long list of [known jQuery vulnerabilities](https://security.snyk.io/package/npm/jquery).
+
+## 4. Install the new header
+
+Please refer to the [Internet Header installation instructions](/story/getting-started--page) for an installation guide.
+
+After installation, you're ready to add the new tags to your markup:
+
+```html
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
+    />
+    <link
+      rel="stylesheet"
+      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
+    />
+
+    <!-- Eigene CSS Verknüpfungen -->
+  </head>
+
+  <body>
+    <!-- The header needs to be directly in the body tag for stickiness functionality to work -->
+    <swisspost-internet-header project="your-service-id"></swisspost-internet-header>
+
+    <aside class="my-huge-r container">
+      <swisspost-internet-breadcrumbs></swisspost-internet-breadcrumbs>
+    </aside>
+
+    <main id="os_content" class="container">
+      <!-- Content from the current page of the online service  -->
+    </main>
+
+    <swisspost-internet-footer></swisspost-internet-footer>
+  </body>
+</html>
+```
+
+Place the new elements as described (and needed) as shown above.
+The breadcrumbs need a `container` wrapper to align themselves with the content of your page,
+the header and the footer already provide a container.
+If you don't have breadcrumbs, you can just delete the `<aside>` and the `<swisspost-internet-breadcrumbs>`.
+
+## 5. Working with the new header
+
+If you need to change settings during runtime, you can get a reference to the header by querying:
+
+```ts
+const header = document.querySelector<HTMLSwisspostInternetHeaderElement>(
+  'swisspost-internet-header',
+);
+
+// Toggle search
+header.search = false;
+
+// Set new custom config
+header.customConfig = {
+  /* ... */
+};
+```
+
+At the [Internet Header configuration page](/story/header-usage--page) you can find a list of possible options.
diff --git a/packages/internet-header/src/components/post-klp-login-widget/post-klp-login-widget.tsx b/packages/internet-header/src/components/post-klp-login-widget/post-klp-login-widget.tsx
index 4101e2e8ad..16a11d6cea 100644
--- a/packages/internet-header/src/components/post-klp-login-widget/post-klp-login-widget.tsx
+++ b/packages/internet-header/src/components/post-klp-login-widget/post-klp-login-widget.tsx
@@ -19,7 +19,7 @@ export class PostKlpLoginWidget implements IsFocusable {
       !state.localizedConfig?.header?.loginWidgetOptions
     )
       return;
-    const { initializeKLPLoginWidget } = await import('./klp-widget.controller');
+    const { initializeKLPLoginWidget } = await import('./klp-widget.controller.js');
     initializeKLPLoginWidget('post-klp-login-widget', {
       ...state.localizedConfig.header.loginWidgetOptions,
       environment: state.environment,
diff --git a/packages/internet-header/stencil.config.ts b/packages/internet-header/stencil.config.ts
index 27afc52250..580578252d 100644
--- a/packages/internet-header/stencil.config.ts
+++ b/packages/internet-header/stencil.config.ts
@@ -33,6 +33,10 @@ export const config: Config = {
       type: 'www',
       serviceWorker: null, // disable service workers,
     },
+    {
+      type: 'docs-json',
+      file: 'dist/docs.json',
+    },
   ],
   plugins: [
     sass({
@@ -46,4 +50,7 @@ export const config: Config = {
       }),
     ],
   },
+  extras: {
+    enableImportInjection: true,
+  }
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c43d824215..bbe9a8c334 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
 
 settings:
   autoInstallPeers: true

From b39c0520405bcc046cb6c88bd2611d80f4cf9cbe Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Mon, 21 Aug 2023 08:12:05 +0200
Subject: [PATCH 16/16] docs: replace documentation package with documentation
 v7 (#1831)

---
 ...on-v7.yaml => build-documentation-v6.yaml} |  18 +-
 ...n-v7.yaml => deploy-documentation-v6.yaml} |   8 +-
 package.json                                  |  14 +-
 packages/documentation-v6/.gitignore          |   2 +
 .../.percy.yml                                |   0
 .../.storybook/components/docs/footer.tsx     |   0
 .../.storybook/components/docs}/header.tsx    |   0
 .../.storybook/components/docs/layout.scss    |   0
 .../.storybook/components/docs/layout.tsx     |   0
 .../.storybook/main.js                        |   4 +-
 .../.storybook/manager-head.html              |  50 +-
 .../.storybook/manager.js                     |   0
 .../.storybook/manager.scss                   |   0
 .../.storybook/post-themes.js                 |   0
 .../.storybook/preview-head.html              |  11 +
 .../.storybook/preview.js                     |   0
 .../.storybook/preview.scss                   |   0
 .../CHANGELOG.md                              |  27 +-
 .../CONTRIBUTING.md                           |   2 +-
 .../LICENSE                                   |   0
 .../README.md                                 |   7 +-
 .../cypress.config.js                         |   0
 .../cypress.snapshot.config.js                |   0
 .../components/collapsible.snapshot.ts        |   2 +-
 .../internet-header/breadcrumbs.snapshot.ts   |   0
 .../internet-header/footer.snapshot.ts        |   0
 .../internet-header/header.snapshot.ts        |   0
 .../snapshots/styles/alert.snapshot.ts        |   0
 .../snapshots/styles/blockquote.snapshot.ts   |   0
 .../snapshots/styles/button.snapshot.ts       |   0
 .../cypress/snapshots/styles/card.snapshot.ts |   0
 .../snapshots/styles/choice-card.snapshot.ts  |   0
 .../snapshots/styles/headings.snapshot.ts     |   0
 .../cypress/support/commands.ts               |   0
 .../cypress/support/e2e.ts                    |   2 +
 .../cypress/support/index.d.ts                |   0
 .../documentation-v6/cypress/tsconfig.json    |  15 +
 packages/documentation-v6/package.json        |  67 ++
 .../public/android-chrome-192x192.png         | Bin
 .../public/android-chrome-512x512.png         | Bin
 .../public/apple-touch-icon.png               | Bin
 .../assets/config/test-configuration.json     |   8 +-
 .../public/favicon.ico                        | Bin
 .../public/favicon.svg                        |   0
 .../public/images/header.png                  | Bin
 .../public/images/logo-swisspost.svg          |   0
 .../public/images/packages/components.svg     |   0
 .../public/images/packages/icons.svg          |   0
 .../images/packages/internet-header.svg       |   0
 .../images/packages/intranet-header.svg       |   0
 .../public/images/packages/styles.svg         |   0
 .../images/technologies/logo-angular.svg      |   0
 .../images/technologies/logo-bootstrap.svg    |   0
 .../images/technologies/logo-changesets.png   | Bin
 .../images/technologies/logo-cypress.svg      |   0
 .../public/images/technologies/logo-figma.svg |   0
 .../images/technologies/logo-github.svg       |   0
 .../public/images/technologies/logo-gulp.svg  |   0
 .../public/images/technologies/logo-jest.svg  |   0
 .../public/images/technologies/logo-percy.svg |   0
 .../public/images/technologies/logo-pnpm.svg  |   0
 .../public/images/technologies/logo-react.svg |   0
 .../public/images/technologies/logo-sass.svg  |   0
 .../images/technologies/logo-stencil.png      | Bin
 .../images/technologies/logo-storybook.svg    |   0
 .../public/images/technologies/logo-svgo.svg  |   0
 .../public/images/technologies/logo-vue.svg   |   0
 .../images/technologies/logo-webpack.svg      |   0
 .../public/netlify.toml                       |   0
 .../public/site.webmanifest                   |   0
 .../stories/Templates/forms/forms.stories.mdx |   0
 .../alert/alert-snapshot.stories.mdx          |   0
 .../stories/components/alert/alert.docs.mdx   |  49 +-
 .../components/alert/alert.stories.tsx        |   0
 .../components/alert/getAlertClasses.tsx      |   0
 .../stories/components/badge/badge.docs.mdx   |  52 +
 .../components/badge/badge.stories.tsx        |   0
 .../components/blockquote/blockquote.docs.mdx |  30 +-
 .../blockquote.snapshot.stories.mdx           |   0
 .../blockquote/blockquote.stories.tsx         |   0
 .../button-group/button-group.docs.mdx        |  31 +-
 .../button-group/button-group.stories.tsx     |   0
 .../button/button-snapshot.stories.mdx        |   0
 .../stories/components/button/button.docs.mdx |  35 +-
 .../components/button/button.stories.tsx      |   2 +-
 .../src/stories/components/card/card.docs.mdx |  85 ++
 .../components/card/card.snapshot.stories.mdx |   0
 .../stories/components/card/card.stories.tsx  |   0
 .../components/checkbox/checkbox.docs.mdx     |  82 ++
 .../components/checkbox/checkbox.stories.tsx  |   0
 .../checkbox-card.docs.mdx                    |   0
 .../checkbox-card.stories.tsx                 |   0
 .../choice-card-snapshot.stories.mdx          |   0
 .../choice-control-card/choice-card.tsx       |   0
 .../radio-button-card.docs.mdx                |   0
 .../radio-button-card.stories.tsx             |   0
 .../collapsible/collapsible.docs.mdx          |  31 +-
 .../collapsible/collapsible.stories.tsx       |   0
 .../components/heading/heading.docs.mdx       |  35 +
 .../heading/heading.snapshot.stories.mdx      |   0
 .../components/heading/heading.stories.tsx    |   0
 .../input-group/input-group.docs.mdx          |   8 +
 .../input-group/input-group.stories.tsx       |   0
 .../stories/components/input/input.docs.mdx   |  37 +-
 .../components/input/input.stories.tsx        |   0
 .../stories/components/radio/radio.docs.mdx   |  31 +-
 .../components/radio/radio.stories.tsx        |   0
 .../stories/components/range/range.docs.mdx   |  30 +-
 .../components/range/range.stories.tsx        |   0
 .../stories/components/select/select.docs.mdx |  31 +-
 .../components/select/select.stories.tsx      |   0
 .../stories/components/switch/switch.docs.mdx |  29 +-
 .../components/switch/switch.stories.tsx      |   0
 .../stories/components/table/table.docs.mdx   |  23 +-
 .../components/table/table.stories.tsx        |   0
 .../components/textarea/textarea.docs.mdx     |  35 +-
 .../components/textarea/textarea.stories.tsx  |   0
 .../stories/components/toast/toast.docs.mdx   |  30 +-
 .../components/toast/toast.stories.tsx        |   0
 .../topic-teaser/topic-teaser.docs.mdx        |  19 +-
 .../topic-teaser/topic-teaser.stories.tsx     |   0
 .../foundation/accessibility.stories.mdx      |   0
 .../stories/foundation/color/color-swatch.tsx |   0
 .../foundation/color/color.stories.mdx        |   0
 .../foundation/color/color.styles.scss        |  32 +
 .../foundation/elevation/elevation-tile.tsx   |   0
 .../elevation/elevation.stories.mdx           |   0
 .../elevation/elevation.styles.scss           |   1 -
 .../layout/breakpoints/breakpoints.blocks.tsx |   1 +
 .../breakpoints/breakpoints.module.scss       |   0
 .../breakpoints/breakpoints.stories.mdx       |   0
 .../foundation/layout/layout.stories.mdx      |   0
 .../typography/typography.components.scss     |   0
 .../typography/typography.components.tsx      |   0
 .../typography/typography.stories.mdx         |   0
 .../getting-started/components.stories.mdx    |   0
 .../getting-started/styles.stories.mdx        |   0
 .../src/stories/home.components.tsx           |   0
 .../src/stories/home.stories.mdx              |   0
 .../src/stories/home.styles.scss              |   0
 .../stories/icons/components/icon.docs.mdx    |  84 ++
 .../stories/icons/components/icon.stories.tsx |   0
 .../stories/icons/getting-started.stories.mdx |   0
 .../search-icons/search-icons.components.tsx  |   0
 .../search-icons/search-icons.stories.mdx     |   0
 .../search-icons/search-icons.styles.scss     |   0
 .../breadcrumbs/internet-breadcrumbs.docs.mdx |   0
 .../post-internet-breadcrumbs.stories.tsx     |   0
 .../footer/internet-footer.docs.mdx           |   0
 .../footer/post-internet-footer.stories.tsx   |   0
 .../header/internet-header.docs.mdx           |   0
 .../header/internet-header.styles.scss        |   0
 .../header/post-internet-header.stories.tsx   |   0
 .../getting-started.stories.mdx               |   0
 .../migration-guide.stories.mdx               |   0
 .../getting-started.stories.mdx               |   0
 .../src/stories/misc/changelog.stories.mdx    |   0
 .../stories/misc/migration-guide.stories.mdx  |   0
 .../src/stories/misc/versions.components.tsx  |   0
 .../src/stories/misc/versions.stories.mdx     |   0
 .../background/background.components.scss     |   0
 .../background/background.components.tsx      |   0
 .../background/background.stories.mdx         |   0
 .../src/stories/utilities}/bombArgs.ts        |   0
 .../utilities/common/common.stories.mdx       |   0
 .../src/stories/utilities/filterArgs.ts       |   0
 .../src/stories/utilities/heading.stories.mdx |   0
 .../stories/utilities/list/list.stories.mdx   |   0
 .../utilities/sizing/sizing.stories.mdx       |   0
 .../utilities/spacing/spacing.stories.mdx     |   0
 .../utilities/text/text.components.tsx        |   0
 .../stories/utilities/text/text.export.scss   |   0
 .../stories/utilities/text/text.stories.mdx   |   0
 .../src/types/component.d.ts                  |   0
 .../src/types/mdx.d.ts                        |   0
 .../src/utils/component-properties.ts         |   0
 .../src/utils/index.ts                        |   1 -
 .../src/utils/react.ts                        |   0
 .../src/utils/sass-export.ts                  |   0
 .../utils/tests/component-properties.spec.ts  |   0
 .../src/utils/units.ts                        |   0
 .../src/utils/version.ts                      |   0
 .../tsconfig.json                             |  13 +-
 packages/documentation-v7/.gitignore          |   5 -
 .../.storybook/preview-head.html              |  16 -
 .../documentation-v7/cypress/e2e/home.cy.ts   |   9 -
 .../documentation-v7/cypress/tsconfig.json    |   9 -
 packages/documentation-v7/package.json        |  69 --
 .../stories/components/badge/badge.docs.mdx   |  47 -
 .../src/stories/components/card/card.docs.mdx |  66 --
 .../components/checkbox/checkbox.docs.mdx     |  82 --
 .../components/heading/heading.docs.mdx       |  35 -
 .../input-group/input-group.docs.mdx          |  11 -
 .../stories/icons/components/icon.docs.mdx    |  76 --
 packages/documentation/.gitignore             |   5 +-
 .../.storybook/blocks/footer.tsx              |   0
 .../{components/docs => blocks}/header.tsx    |   0
 .../.storybook/blocks/layout.tsx              |   0
 .../.storybook/constants.ts                   |   0
 .../.storybook/helpers/bages-config.ts        |   0
 .../.storybook/helpers/index.ts               |   0
 .../.storybook/helpers/prettier-options.ts    |   0
 .../helpers/register-web-components.ts        |   0
 .../helpers/reset-sb-styled-components.ts     |   0
 .../.storybook/main.ts                        |   0
 .../.storybook/manager-head.html              |  50 +-
 .../.storybook/manager.ts                     |   0
 .../.storybook/preview-head.html              |   9 +-
 .../.storybook/preview.ts                     |   0
 .../.storybook/styles/layout.scss             |   0
 .../.storybook/styles/manager.scss            |   0
 .../.storybook/styles/preview.scss            |   0
 .../.storybook/styles/themes.ts               |   0
 packages/documentation/CHANGELOG.md           |  27 +-
 packages/documentation/CONTRIBUTING.md        |   2 +-
 packages/documentation/README.md              |   7 +-
 packages/documentation/cypress/e2e/home.cy.ts |   5 +-
 .../snapshots/components/alert.snapshot.ts    |   0
 .../components/blockquote.snapshot.ts         |   0
 .../snapshots/components/button.snapshot.ts   |   0
 .../snapshots/components/card.snapshot.ts     |   0
 .../components/collapsible.snapshot.ts        |   2 +-
 .../snapshots/components/headings.snapshot.ts |   0
 .../snapshots/components/select.snapshot.ts   |   0
 packages/documentation/cypress/support/e2e.ts |   2 -
 packages/documentation/cypress/tsconfig.json  |   8 +-
 packages/documentation/package.json           |  63 +-
 .../assets/config/test-configuration.json     |   8 +-
 .../stories/components/alert/alert.docs.mdx   |  49 +-
 .../alert/alert.snapshot.stories.ts           |   0
 .../stories/components/alert/alert.stories.ts |   0
 .../components/alert/getAlertClasses.ts       |   0
 .../stories/components/badge/badge.docs.mdx   |  39 +-
 .../stories/components/badge/badge.stories.ts |   0
 .../components/blockquote/blockquote.docs.mdx |  30 +-
 .../blockquote/blockquote.snapshot.stories.ts |   0
 .../blockquote/blockquote.stories.ts          |   0
 .../button-group/button-group.docs.mdx        |  31 +-
 .../button-group/button-group.stories.ts      |   0
 .../stories/components/button/button.docs.mdx |  35 +-
 .../button/button.snapshot.stories.ts         |   0
 .../components/button/button.stories.ts       |   2 +-
 .../src/stories/components/card/card.docs.mdx |  75 +-
 .../components/card/card.snapshot.stories.ts  |   0
 .../stories/components/card/card.stories.ts   |   0
 .../components/checkbox/checkbox.docs.mdx     |  74 +-
 .../components/checkbox/checkbox.stories.ts   |   0
 .../choice-card/checkbox-card.docs.mdx        |   0
 .../choice-card/checkbox-card.stories.ts      |   0
 .../choice-control.snapshot.stories.ts        |   0
 .../components/choice-card/choice-control.ts  |   0
 .../choice-card/radiobutton-card.docs.mdx     |   0
 .../choice-card/radiobutton-card.stories.ts   |   0
 .../collapsible/collapsible.docs.mdx          |  31 +-
 .../collapsible.snapshot.stories.tsx          |   0
 .../collapsible/collapsible.stories.ts        |   0
 .../components/heading/heading.docs.mdx       |  24 +-
 .../heading/heading.snapshot.stories.ts       |   0
 .../components/heading/heading.stories.ts     |   0
 .../input-group/input-group.docs.mdx          |   7 +-
 .../input-group/input-group.stories.ts        |   0
 .../stories/components/input/input.docs.mdx   |  37 +-
 .../stories/components/input/input.stories.ts |   0
 .../stories/components/radio/radio.docs.mdx   |  31 +-
 .../stories/components/radio/radio.stories.ts |   0
 .../stories/components/range/range.docs.mdx   |  30 +-
 .../stories/components/range/range.stories.ts |   0
 .../stories/components/select/select.docs.mdx |  31 +-
 .../select/select.snapshot.stories.ts         |   0
 .../components/select/select.stories.ts       |   0
 .../stories/components/switch/switch.docs.mdx |  29 +-
 .../components/switch/switch.stories.ts       |   0
 .../stories/components/table/table.docs.mdx   |  23 +-
 .../stories/components/table/table.stories.ts |   0
 .../components/textarea/textarea.docs.mdx     |  35 +-
 .../components/textarea/textarea.stories.ts   |   0
 .../stories/components/toast/toast.docs.mdx   |  30 +-
 .../stories/components/toast/toast.stories.ts |   0
 .../topic-teaser/topic-teaser.docs.mdx        |  19 +-
 .../topic-teaser/topic-teaser.stories.ts      |   0
 .../accessibility/accessibility.docs.mdx      |   0
 .../accessibility/accessibility.stories.ts    |   0
 .../stories/foundation/color/color.blocks.tsx |   0
 .../stories/foundation/color/color.docs.mdx   |   0
 .../foundation/color/color.module.scss        |   0
 .../stories/foundation/color/color.stories.ts |   0
 .../foundation/color/color.styles.scss        |  32 -
 .../foundation/elevation/elevation.blocks.tsx |   0
 .../foundation/elevation/elevation.docs.mdx   |   0
 .../elevation/elevation.module.scss           |   0
 .../foundation/elevation/elevation.stories.ts |   0
 .../elevation/elevation.styles.scss           |   1 +
 .../layout/breakpoints/breakpoints.blocks.tsx |   1 -
 .../layout/breakpoints/breakpoints.docs.mdx   |   0
 .../layout/breakpoints/breakpoints.stories.ts |   0
 .../stories/foundation/layout/layout.docs.mdx |   0
 .../foundation/layout/layout.stories.ts       |   0
 .../typography/typography.blocks.tsx          |   0
 .../foundation/typography/typography.docs.mdx |   0
 .../typography/typography.module.scss         |   0
 .../typography/typography.stories.ts          |   0
 .../typography/typography.styles.scss         |   0
 .../components/components.docs.mdx            |   0
 .../components/components.stories.ts          |   0
 .../getting-started/styles/styles.docs.mdx    |   0
 .../getting-started/styles/styles.stories.ts  |   0
 .../src/stories/home.blocks.tsx               |   0
 .../src/stories/home.docs.mdx                 |   0
 .../stories/icons/components/icon.docs.mdx    |  56 +-
 .../stories/icons/components/icon.stories.ts  |   0
 .../stories/icons/getting-started.docs.mdx    |   0
 .../stories/icons/getting-started.stories.ts  |   0
 .../search-icons/search-icons.blocks.tsx      |   0
 .../icons/search-icons/search-icons.docs.mdx  |   0
 .../components/internet-header.docs.mdx       |   0
 .../components/internet-header.stories.tsx    |   0
 .../components/internet-header.styles.scss    |   0
 .../internet-header/getting-started.docs.mdx  |   0
 .../internet-header/migration-guide.docs.mdx  |   0
 .../intranet-header/intranet-header.docs.mdx  |   0
 .../intranet-header.stories.ts                |   0
 .../stories/misc/changelog/changelog.docs.mdx |   0
 .../migration-guide/migration-guide.docs.mdx  |   0
 .../migration-guide.stories.ts                |   0
 .../stories/misc/versions/versions.blocks.tsx |   0
 .../stories/misc/versions/versions.docs.mdx   |   0
 .../stories/misc/versions/versions.stories.ts |   0
 .../stories/templates/forms/forms.docs.mdx    |   0
 .../stories/templates/forms/forms.stories.ts  |   0
 .../background/background.blocks.tsx          |   0
 .../utilities/background/background.docs.mdx  |   0
 .../background/background.module.scss         |   0
 .../background/background.stories.ts          |   0
 .../background/background.styles.scss         |   0
 .../src/stories/utilities/bombArgs.ts         |  38 +-
 .../stories/utilities/common/common.docs.mdx  |   0
 .../utilities/common/common.stories.ts        |   0
 .../utilities/heading/heading.docs.mdx        |   0
 .../utilities/heading/heading.stories.ts      |   0
 .../src/stories/utilities/list/list.docs.mdx  |   0
 .../stories/utilities/list/list.stories.ts    |   0
 .../stories/utilities/sizing/sizing.docs.mdx  |   0
 .../utilities/sizing/sizing.stories.ts        |   0
 .../utilities/spacing/spacing.docs.mdx        |   0
 .../utilities/spacing/spacing.stories.ts      |   0
 .../stories/utilities/text/text.blocks.tsx    |   2 +-
 .../src/stories/utilities/text/text.docs.mdx  |   0
 .../stories/utilities/text/text.module.scss   |   0
 .../stories/utilities/text/text.stories.ts    |   0
 .../src/utils}/bombArgs.ts                    |  38 +-
 packages/documentation/src/utils/index.ts     |   1 +
 .../src/utils/map-classes.ts                  |   0
 packages/documentation/src/utils/version.ts   |  25 +-
 packages/documentation/tsconfig.json          |  13 +-
 .../vite.config.js                            |   0
 pnpm-lock.yaml                                | 975 +++++-------------
 356 files changed, 1513 insertions(+), 2018 deletions(-)
 rename .github/workflows/{build-documentation-v7.yaml => build-documentation-v6.yaml} (63%)
 rename .github/workflows/{deploy-documentation-v7.yaml => deploy-documentation-v6.yaml} (86%)
 create mode 100644 packages/documentation-v6/.gitignore
 rename packages/{documentation => documentation-v6}/.percy.yml (100%)
 rename packages/{documentation => documentation-v6}/.storybook/components/docs/footer.tsx (100%)
 rename packages/{documentation-v7/.storybook/blocks => documentation-v6/.storybook/components/docs}/header.tsx (100%)
 rename packages/{documentation => documentation-v6}/.storybook/components/docs/layout.scss (100%)
 rename packages/{documentation => documentation-v6}/.storybook/components/docs/layout.tsx (100%)
 rename packages/{documentation => documentation-v6}/.storybook/main.js (95%)
 rename packages/{documentation-v7 => documentation-v6}/.storybook/manager-head.html (69%)
 rename packages/{documentation => documentation-v6}/.storybook/manager.js (100%)
 rename packages/{documentation => documentation-v6}/.storybook/manager.scss (100%)
 rename packages/{documentation => documentation-v6}/.storybook/post-themes.js (100%)
 create mode 100644 packages/documentation-v6/.storybook/preview-head.html
 rename packages/{documentation => documentation-v6}/.storybook/preview.js (100%)
 rename packages/{documentation => documentation-v6}/.storybook/preview.scss (100%)
 rename packages/{documentation-v7 => documentation-v6}/CHANGELOG.md (96%)
 rename packages/{documentation-v7 => documentation-v6}/CONTRIBUTING.md (97%)
 rename packages/{documentation-v7 => documentation-v6}/LICENSE (100%)
 rename packages/{documentation-v7 => documentation-v6}/README.md (79%)
 rename packages/{documentation-v7 => documentation-v6}/cypress.config.js (100%)
 rename packages/{documentation-v7 => documentation-v6}/cypress.snapshot.config.js (100%)
 rename packages/{documentation-v7 => documentation-v6}/cypress/snapshots/components/collapsible.snapshot.ts (71%)
 rename packages/{documentation => documentation-v6}/cypress/snapshots/internet-header/breadcrumbs.snapshot.ts (100%)
 rename packages/{documentation => documentation-v6}/cypress/snapshots/internet-header/footer.snapshot.ts (100%)
 rename packages/{documentation => documentation-v6}/cypress/snapshots/internet-header/header.snapshot.ts (100%)
 rename packages/{documentation => documentation-v6}/cypress/snapshots/styles/alert.snapshot.ts (100%)
 rename packages/{documentation => documentation-v6}/cypress/snapshots/styles/blockquote.snapshot.ts (100%)
 rename packages/{documentation => documentation-v6}/cypress/snapshots/styles/button.snapshot.ts (100%)
 rename packages/{documentation => documentation-v6}/cypress/snapshots/styles/card.snapshot.ts (100%)
 rename packages/{documentation => documentation-v6}/cypress/snapshots/styles/choice-card.snapshot.ts (100%)
 rename packages/{documentation => documentation-v6}/cypress/snapshots/styles/headings.snapshot.ts (100%)
 rename packages/{documentation-v7 => documentation-v6}/cypress/support/commands.ts (100%)
 rename packages/{documentation-v7 => documentation-v6}/cypress/support/e2e.ts (94%)
 rename packages/{documentation-v7 => documentation-v6}/cypress/support/index.d.ts (100%)
 create mode 100644 packages/documentation-v6/cypress/tsconfig.json
 create mode 100644 packages/documentation-v6/package.json
 rename packages/{documentation-v7 => documentation-v6}/public/android-chrome-192x192.png (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/android-chrome-512x512.png (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/apple-touch-icon.png (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/assets/config/test-configuration.json (99%)
 rename packages/{documentation-v7 => documentation-v6}/public/favicon.ico (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/favicon.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/header.png (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/logo-swisspost.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/packages/components.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/packages/icons.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/packages/internet-header.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/packages/intranet-header.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/packages/styles.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-angular.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-bootstrap.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-changesets.png (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-cypress.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-figma.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-github.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-gulp.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-jest.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-percy.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-pnpm.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-react.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-sass.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-stencil.png (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-storybook.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-svgo.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-vue.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/images/technologies/logo-webpack.svg (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/netlify.toml (100%)
 rename packages/{documentation-v7 => documentation-v6}/public/site.webmanifest (100%)
 rename packages/{documentation => documentation-v6}/src/stories/Templates/forms/forms.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/alert/alert-snapshot.stories.mdx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/alert/alert.docs.mdx (74%)
 rename packages/{documentation => documentation-v6}/src/stories/components/alert/alert.stories.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/alert/getAlertClasses.tsx (100%)
 create mode 100644 packages/documentation-v6/src/stories/components/badge/badge.docs.mdx
 rename packages/{documentation => documentation-v6}/src/stories/components/badge/badge.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/blockquote/blockquote.docs.mdx (65%)
 rename packages/{documentation => documentation-v6}/src/stories/components/blockquote/blockquote.snapshot.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/blockquote/blockquote.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/button-group/button-group.docs.mdx (70%)
 rename packages/{documentation => documentation-v6}/src/stories/components/button-group/button-group.stories.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/button/button-snapshot.stories.mdx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/button/button.docs.mdx (64%)
 rename packages/{documentation => documentation-v6}/src/stories/components/button/button.stories.tsx (99%)
 create mode 100644 packages/documentation-v6/src/stories/components/card/card.docs.mdx
 rename packages/{documentation => documentation-v6}/src/stories/components/card/card.snapshot.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/card/card.stories.tsx (100%)
 create mode 100644 packages/documentation-v6/src/stories/components/checkbox/checkbox.docs.mdx
 rename packages/{documentation => documentation-v6}/src/stories/components/checkbox/checkbox.stories.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/choice-control-card/checkbox-card.docs.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/choice-control-card/checkbox-card.stories.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/choice-control-card/choice-card-snapshot.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/choice-control-card/choice-card.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/choice-control-card/radio-button-card.docs.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/choice-control-card/radio-button-card.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/collapsible/collapsible.docs.mdx (78%)
 rename packages/{documentation => documentation-v6}/src/stories/components/collapsible/collapsible.stories.tsx (100%)
 create mode 100644 packages/documentation-v6/src/stories/components/heading/heading.docs.mdx
 rename packages/{documentation => documentation-v6}/src/stories/components/heading/heading.snapshot.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/components/heading/heading.stories.tsx (100%)
 create mode 100644 packages/documentation-v6/src/stories/components/input-group/input-group.docs.mdx
 rename packages/{documentation => documentation-v6}/src/stories/components/input-group/input-group.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/input/input.docs.mdx (74%)
 rename packages/{documentation => documentation-v6}/src/stories/components/input/input.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/radio/radio.docs.mdx (76%)
 rename packages/{documentation => documentation-v6}/src/stories/components/radio/radio.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/range/range.docs.mdx (71%)
 rename packages/{documentation => documentation-v6}/src/stories/components/range/range.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/select/select.docs.mdx (83%)
 rename packages/{documentation => documentation-v6}/src/stories/components/select/select.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/switch/switch.docs.mdx (80%)
 rename packages/{documentation => documentation-v6}/src/stories/components/switch/switch.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/table/table.docs.mdx (69%)
 rename packages/{documentation => documentation-v6}/src/stories/components/table/table.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/textarea/textarea.docs.mdx (81%)
 rename packages/{documentation => documentation-v6}/src/stories/components/textarea/textarea.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/toast/toast.docs.mdx (86%)
 rename packages/{documentation => documentation-v6}/src/stories/components/toast/toast.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/components/topic-teaser/topic-teaser.docs.mdx (69%)
 rename packages/{documentation => documentation-v6}/src/stories/components/topic-teaser/topic-teaser.stories.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/foundation/accessibility.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/foundation/color/color-swatch.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/foundation/color/color.stories.mdx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/foundation/color/color.styles.scss (56%)
 rename packages/{documentation => documentation-v6}/src/stories/foundation/elevation/elevation-tile.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/foundation/elevation/elevation.stories.mdx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/foundation/elevation/elevation.styles.scss (90%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx (89%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/foundation/layout/breakpoints/breakpoints.module.scss (100%)
 rename packages/{documentation => documentation-v6}/src/stories/foundation/layout/breakpoints/breakpoints.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/foundation/layout/layout.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/foundation/typography/typography.components.scss (100%)
 rename packages/{documentation => documentation-v6}/src/stories/foundation/typography/typography.components.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/foundation/typography/typography.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/getting-started/components.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/getting-started/styles.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/home.components.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/home.stories.mdx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/home.styles.scss (100%)
 create mode 100644 packages/documentation-v6/src/stories/icons/components/icon.docs.mdx
 rename packages/{documentation => documentation-v6}/src/stories/icons/components/icon.stories.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/icons/getting-started.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/icons/search-icons/search-icons.components.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/icons/search-icons/search-icons.stories.mdx (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/stories/icons/search-icons/search-icons.styles.scss (100%)
 rename packages/{documentation => documentation-v6}/src/stories/internet-header/components/breadcrumbs/internet-breadcrumbs.docs.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/internet-header/components/breadcrumbs/post-internet-breadcrumbs.stories.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/internet-header/components/footer/internet-footer.docs.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/internet-header/components/footer/post-internet-footer.stories.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/internet-header/components/header/internet-header.docs.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/internet-header/components/header/internet-header.styles.scss (100%)
 rename packages/{documentation => documentation-v6}/src/stories/internet-header/components/header/post-internet-header.stories.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/internet-header/getting-started.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/internet-header/migration-guide.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/intranet-header/getting-started.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/misc/changelog.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/misc/migration-guide.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/misc/versions.components.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/misc/versions.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/background/background.components.scss (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/background/background.components.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/background/background.stories.mdx (100%)
 rename packages/{documentation-v7/src/utils => documentation-v6/src/stories/utilities}/bombArgs.ts (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/common/common.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/filterArgs.ts (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/heading.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/list/list.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/sizing/sizing.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/spacing/spacing.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/text/text.components.tsx (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/text/text.export.scss (100%)
 rename packages/{documentation => documentation-v6}/src/stories/utilities/text/text.stories.mdx (100%)
 rename packages/{documentation => documentation-v6}/src/types/component.d.ts (100%)
 rename packages/{documentation => documentation-v6}/src/types/mdx.d.ts (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/utils/component-properties.ts (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/utils/index.ts (56%)
 rename packages/{documentation-v7 => documentation-v6}/src/utils/react.ts (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/utils/sass-export.ts (100%)
 rename packages/{documentation => documentation-v6}/src/utils/tests/component-properties.spec.ts (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/utils/units.ts (100%)
 rename packages/{documentation-v7 => documentation-v6}/src/utils/version.ts (100%)
 rename packages/{documentation-v7 => documentation-v6}/tsconfig.json (72%)
 delete mode 100644 packages/documentation-v7/.gitignore
 delete mode 100644 packages/documentation-v7/.storybook/preview-head.html
 delete mode 100644 packages/documentation-v7/cypress/e2e/home.cy.ts
 delete mode 100644 packages/documentation-v7/cypress/tsconfig.json
 delete mode 100644 packages/documentation-v7/package.json
 delete mode 100644 packages/documentation-v7/src/stories/components/badge/badge.docs.mdx
 delete mode 100644 packages/documentation-v7/src/stories/components/card/card.docs.mdx
 delete mode 100644 packages/documentation-v7/src/stories/components/checkbox/checkbox.docs.mdx
 delete mode 100644 packages/documentation-v7/src/stories/components/heading/heading.docs.mdx
 delete mode 100644 packages/documentation-v7/src/stories/components/input-group/input-group.docs.mdx
 delete mode 100644 packages/documentation-v7/src/stories/icons/components/icon.docs.mdx
 rename packages/{documentation-v7 => documentation}/.storybook/blocks/footer.tsx (100%)
 rename packages/documentation/.storybook/{components/docs => blocks}/header.tsx (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/blocks/layout.tsx (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/constants.ts (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/helpers/bages-config.ts (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/helpers/index.ts (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/helpers/prettier-options.ts (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/helpers/register-web-components.ts (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/helpers/reset-sb-styled-components.ts (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/main.ts (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/manager.ts (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/preview.ts (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/styles/layout.scss (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/styles/manager.scss (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/styles/preview.scss (100%)
 rename packages/{documentation-v7 => documentation}/.storybook/styles/themes.ts (100%)
 rename packages/{documentation-v7 => documentation}/cypress/snapshots/components/alert.snapshot.ts (100%)
 rename packages/{documentation-v7 => documentation}/cypress/snapshots/components/blockquote.snapshot.ts (100%)
 rename packages/{documentation-v7 => documentation}/cypress/snapshots/components/button.snapshot.ts (100%)
 rename packages/{documentation-v7 => documentation}/cypress/snapshots/components/card.snapshot.ts (100%)
 rename packages/{documentation-v7 => documentation}/cypress/snapshots/components/headings.snapshot.ts (100%)
 rename packages/{documentation-v7 => documentation}/cypress/snapshots/components/select.snapshot.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/alert/alert.snapshot.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/alert/alert.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/alert/getAlertClasses.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/badge/badge.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/blockquote/blockquote.snapshot.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/blockquote/blockquote.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/button-group/button-group.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/button/button.snapshot.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/button/button.stories.ts (99%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/card/card.snapshot.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/card/card.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/checkbox/checkbox.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/choice-card/checkbox-card.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/choice-card/checkbox-card.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/choice-card/choice-control.snapshot.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/choice-card/choice-control.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/choice-card/radiobutton-card.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/choice-card/radiobutton-card.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/collapsible/collapsible.snapshot.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/collapsible/collapsible.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/heading/heading.snapshot.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/heading/heading.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/input-group/input-group.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/input/input.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/radio/radio.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/range/range.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/select/select.snapshot.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/select/select.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/switch/switch.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/table/table.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/textarea/textarea.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/toast/toast.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/components/topic-teaser/topic-teaser.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/accessibility/accessibility.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/accessibility/accessibility.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/color/color.blocks.tsx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/color/color.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/color/color.module.scss (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/color/color.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/elevation/elevation.blocks.tsx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/elevation/elevation.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/elevation/elevation.module.scss (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/elevation/elevation.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/layout/layout.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/layout/layout.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/typography/typography.blocks.tsx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/typography/typography.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/typography/typography.module.scss (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/typography/typography.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/foundation/typography/typography.styles.scss (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/getting-started/components/components.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/getting-started/components/components.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/getting-started/styles/styles.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/getting-started/styles/styles.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/home.blocks.tsx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/home.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/icons/components/icon.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/icons/getting-started.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/icons/getting-started.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/icons/search-icons/search-icons.blocks.tsx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/icons/search-icons/search-icons.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/internet-header/components/internet-header.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/internet-header/components/internet-header.stories.tsx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/internet-header/components/internet-header.styles.scss (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/internet-header/getting-started.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/internet-header/migration-guide.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/intranet-header/intranet-header.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/intranet-header/intranet-header.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/misc/changelog/changelog.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/misc/migration-guide/migration-guide.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/misc/migration-guide/migration-guide.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/misc/versions/versions.blocks.tsx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/misc/versions/versions.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/misc/versions/versions.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/templates/forms/forms.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/templates/forms/forms.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/background/background.blocks.tsx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/background/background.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/background/background.module.scss (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/background/background.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/background/background.styles.scss (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/common/common.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/common/common.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/heading/heading.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/heading/heading.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/list/list.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/list/list.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/sizing/sizing.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/sizing/sizing.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/spacing/spacing.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/spacing/spacing.stories.ts (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/text/text.blocks.tsx (93%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/text/text.docs.mdx (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/text/text.module.scss (100%)
 rename packages/{documentation-v7 => documentation}/src/stories/utilities/text/text.stories.ts (100%)
 rename packages/{documentation-v7/src/stories/utilities => documentation/src/utils}/bombArgs.ts (97%)
 rename packages/{documentation-v7 => documentation}/src/utils/map-classes.ts (100%)
 rename packages/{documentation-v7 => documentation}/vite.config.js (100%)

diff --git a/.github/workflows/build-documentation-v7.yaml b/.github/workflows/build-documentation-v6.yaml
similarity index 63%
rename from .github/workflows/build-documentation-v7.yaml
rename to .github/workflows/build-documentation-v6.yaml
index 19eb7ae90a..297341a574 100644
--- a/.github/workflows/build-documentation-v7.yaml
+++ b/.github/workflows/build-documentation-v6.yaml
@@ -10,11 +10,11 @@
 #
 ###
 
-name: Build Documentation V7
+name: Build Documentation V6
 on:
   pull_request:
     paths:
-      - 'packages/documentation-v7/**'
+      - 'packages/documentation-v6/**'
       - 'packages/styles/**'
       - 'packages/components/**'
       - 'packages/internet-header/**'
@@ -31,14 +31,14 @@ jobs:
       - name: Setup
         uses: swisspost/design-system/.github/actions/setup-pnpm@main
 
-      - name: Install documentation-v7 & dependencies
-        run: pnpm --filter design-system-documentation-v7... install
+      - name: Install documentation-v6 & dependencies
+        run: pnpm --filter design-system-documentation-v6... install
 
-      - name: Build documentation-v7 & dependencies
-        run: pnpm --filter design-system-documentation-v7... build
+      - name: Build documentation-v6 & dependencies
+        run: pnpm --filter design-system-documentation-v6... build
 
-      - name: Upload documentation-v7
+      - name: Upload documentation-v6
         uses: swisspost/design-system/.github/actions/artifact-upload@main
         with:
-          name: design-system-documentation-v7
-          folder: packages/documentation-v7/storybook-static
+          name: design-system-documentation-v6
+          folder: packages/documentation-v6/storybook-static
diff --git a/.github/workflows/deploy-documentation-v7.yaml b/.github/workflows/deploy-documentation-v6.yaml
similarity index 86%
rename from .github/workflows/deploy-documentation-v7.yaml
rename to .github/workflows/deploy-documentation-v6.yaml
index fb964f4ca4..57d500222e 100644
--- a/.github/workflows/deploy-documentation-v7.yaml
+++ b/.github/workflows/deploy-documentation-v6.yaml
@@ -6,10 +6,10 @@
 #
 ###
 
-name: Deploy Documentation V7 Preview to Netlify
+name: Deploy Documentation V6 Preview to Netlify
 on:
   workflow_run:
-    workflows: ['Build Documentation V7']
+    workflows: ['Build Documentation V6']
     types: [completed]
 
 jobs:
@@ -28,10 +28,10 @@ jobs:
         uses: swisspost/design-system/.github/actions/artifact-download@main
         id: build
         with:
-          name: design-system-documentation-v7
+          name: design-system-documentation-v6
           folder: build-output
 
-      - name: Deploy documentation v7 to netlify
+      - name: Deploy documentation v6 to netlify
         uses: swisspost/design-system/.github/actions/deploy-to-netlify@main
         id: deploy
         with:
diff --git a/package.json b/package.json
index 8c2d2a97d5..bb992606d7 100644
--- a/package.json
+++ b/package.json
@@ -25,13 +25,13 @@
     "docs:test": "pnpm --filter design-system-documentation test",
     "docs:e2e": "start-server-and-test docs:headless 9300 'pnpm --filter design-system-documentation e2e'",
     "docs:e2e:watch": "start-server-and-test docs:headless 9300 'pnpm --filter design-system-documentation e2e:watch'",
-    "docsv7": "pnpm --filter design-system-documentation-v7 start",
-    "docsv7:start": "pnpm --filter design-system-documentation-v7... --parallel --stream start",
-    "docsv7:build": "pnpm --filter design-system-documentation-v7 build",
-    "docsv7:headless": "pnpm --filter design-system-documentation-v7 start:headless",
-    "docsv7:e2e": "start-server-and-test docsv7:headless 9300 'pnpm --filter design-system-documentation-v7 e2e'",
-    "docsv7:e2e:watch": "start-server-and-test docsv7:headless 9300 'pnpm --filter design-system-documentation-v7 e2e:watch'",
-    "docsv7:snapshots": "start-server-and-test 'pnpm docsv7:headless' 9300 'pnpm --filter design-system-documentation-v7 snapshots'",
+    "docsv6": "pnpm --filter design-system-documentation-v6 start",
+    "docsv6:start": "pnpm --filter design-system-documentation-v6... --parallel --stream start",
+    "docsv6:build": "pnpm --filter design-system-documentation-v6 build",
+    "docsv6:headless": "pnpm --filter design-system-documentation-v6 start:headless",
+    "docsv6:e2e": "start-server-and-test docsv6:headless 9300 'pnpm --filter design-system-documentation-v6 e2e'",
+    "docsv6:e2e:watch": "start-server-and-test docsv6:headless 9300 'pnpm --filter design-system-documentation-v6 e2e:watch'",
+    "docsv6:snapshots": "start-server-and-test 'pnpm docsv6:headless' 9300 'pnpm --filter design-system-documentation-v6 snapshots'",
     "styles:start": "pnpm --filter design-system-styles start",
     "styles:build": "pnpm --filter design-system-styles build",
     "styles:test": "pnpm --filter design-system-styles test",
diff --git a/packages/documentation-v6/.gitignore b/packages/documentation-v6/.gitignore
new file mode 100644
index 0000000000..1170adc2ad
--- /dev/null
+++ b/packages/documentation-v6/.gitignore
@@ -0,0 +1,2 @@
+# Storybook specific
+storybook-static
\ No newline at end of file
diff --git a/packages/documentation/.percy.yml b/packages/documentation-v6/.percy.yml
similarity index 100%
rename from packages/documentation/.percy.yml
rename to packages/documentation-v6/.percy.yml
diff --git a/packages/documentation/.storybook/components/docs/footer.tsx b/packages/documentation-v6/.storybook/components/docs/footer.tsx
similarity index 100%
rename from packages/documentation/.storybook/components/docs/footer.tsx
rename to packages/documentation-v6/.storybook/components/docs/footer.tsx
diff --git a/packages/documentation-v7/.storybook/blocks/header.tsx b/packages/documentation-v6/.storybook/components/docs/header.tsx
similarity index 100%
rename from packages/documentation-v7/.storybook/blocks/header.tsx
rename to packages/documentation-v6/.storybook/components/docs/header.tsx
diff --git a/packages/documentation/.storybook/components/docs/layout.scss b/packages/documentation-v6/.storybook/components/docs/layout.scss
similarity index 100%
rename from packages/documentation/.storybook/components/docs/layout.scss
rename to packages/documentation-v6/.storybook/components/docs/layout.scss
diff --git a/packages/documentation/.storybook/components/docs/layout.tsx b/packages/documentation-v6/.storybook/components/docs/layout.tsx
similarity index 100%
rename from packages/documentation/.storybook/components/docs/layout.tsx
rename to packages/documentation-v6/.storybook/components/docs/layout.tsx
diff --git a/packages/documentation/.storybook/main.js b/packages/documentation-v6/.storybook/main.js
similarity index 95%
rename from packages/documentation/.storybook/main.js
rename to packages/documentation-v6/.storybook/main.js
index d6f1c5fbca..fcd7f0dc39 100644
--- a/packages/documentation/.storybook/main.js
+++ b/packages/documentation-v6/.storybook/main.js
@@ -4,10 +4,10 @@ module.exports = {
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-controls',
-    '@storybook/addon-links',
+    // '@storybook/addon-links',
     '@storybook/addon-measure',
     '@storybook/addon-viewport',
-    '@storybook/addon-a11y',
+    // '@storybook/addon-a11y',
     '@pxtrn/storybook-addon-docs-stencil',
     'storybook-dark-mode',
     '@geometricpanda/storybook-addon-badges',
diff --git a/packages/documentation-v7/.storybook/manager-head.html b/packages/documentation-v6/.storybook/manager-head.html
similarity index 69%
rename from packages/documentation-v7/.storybook/manager-head.html
rename to packages/documentation-v6/.storybook/manager-head.html
index 4039470a3c..e32ede4869 100644
--- a/packages/documentation-v7/.storybook/manager-head.html
+++ b/packages/documentation-v6/.storybook/manager-head.html
@@ -9,26 +9,48 @@
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 <link rel="manifest" href="/site.webmanifest" />
 
-<!-- customize the manager ui -->
-<link rel="stylesheet" href="/manager/ui.css" />
-
 <!-- customize the sidebar icons -->
-<svg xmlns="http://www.w3.org/2000/svg" data-chromatic="ignore" style="position: absolute; width: 0px; height: 0px">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  data-chromatic="ignore"
+  style="position: absolute; width: 0px; height: 0px"
+>
   <symbol id="icon--folder" viewBox="0 0 32 32">
-    <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M28.667 8H14.934c-.533 0-.933-.133-1.2-.4l-2.933-2.8c-.533-.533-1.333-.8-2.133-.8H3.335c-1.067 0-2 .933-2 2v22h29.333V10c0-1.067-.933-2-2-2zm.666 18.667H2.666V6c0-.4.267-.667.667-.667h5.333c.533 0 .933.133 1.2.4l2.8 2.8c.667.533 1.467.8 2.267.8h13.733c.4 0 .667.267.667.667v16.667z" />
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="1"
+      d="M28.667 8H14.934c-.533 0-.933-.133-1.2-.4l-2.933-2.8c-.533-.533-1.333-.8-2.133-.8H3.335c-1.067 0-2 .933-2 2v22h29.333V10c0-1.067-.933-2-2-2zm.666 18.667H2.666V6c0-.4.267-.667.667-.667h5.333c.533 0 .933.133 1.2.4l2.8 2.8c.667.533 1.467.8 2.267.8h13.733c.4 0 .667.267.667.667v16.667z"
+    />
   </symbol>
   <symbol id="icon--component" viewBox="0 0 32 32">
-    <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M28 9.333V4.266c0-.8-.8-1.6-1.6-1.6h-5.067c-.667 0-1.2.267-1.733.667l-1.733 1.733c-.133.133-.4.267-.8.267H5.6c-.8 0-1.6.8-1.6 1.6v2.4H0v20h32v-20h-4zm-22.667-2.4c0-.133.133-.267.267-.267h11.467c.667 0 1.2-.267 1.733-.667l1.733-1.733c.267-.133.533-.267.8-.267h4.933c.267 0 .4.133.4.267v5.067H5.333v-2.4zM30.667 28H1.334V10.667h29.333V28z" />
-    <path fill="currentColor" stroke="currentColor" stroke-width="1" d="M10.667 14.667h10.667V16H10.667v-1.333z" />
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="1"
+      d="M28 9.333V4.266c0-.8-.8-1.6-1.6-1.6h-5.067c-.667 0-1.2.267-1.733.667l-1.733 1.733c-.133.133-.4.267-.8.267H5.6c-.8 0-1.6.8-1.6 1.6v2.4H0v20h32v-20h-4zm-22.667-2.4c0-.133.133-.267.267-.267h11.467c.667 0 1.2-.267 1.733-.667l1.733-1.733c.267-.133.533-.267.8-.267h4.933c.267 0 .4.133.4.267v5.067H5.333v-2.4zM30.667 28H1.334V10.667h29.333V28z"
+    />
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="1"
+      d="M10.667 14.667h10.667V16H10.667v-1.333z"
+    />
   </symbol>
   <symbol id="icon--document" viewBox="0 0 32 32">
-    <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M5.333 2.667v26.666H20l6.667-6.666v-20H5.333zM20.667 26.78v-3.554h3.554l-3.554 3.554zm4.666-4.888h-6V28H6.667V4h18.666v17.893zM22.667 8.667H9.333V7.333h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334z" />
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="1"
+      d="M5.333 2.667v26.666H20l6.667-6.666v-20H5.333zM20.667 26.78v-3.554h3.554l-3.554 3.554zm4.666-4.888h-6V28H6.667V4h18.666v17.893zM22.667 8.667H9.333V7.333h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334z"
+    />
   </symbol>
   <symbol id="icon--bookmarkhollow" viewBox="0 0 32 32">
-    <path fill="currentColor" stroke="currentColor" stroke-width="1"
-      d="M20.9 1.3H4.6c-1.1 0-2 .9-2 2v16l4.098-3.21v.338H6.7V30.6H28V8.4l-7.1-7.1zm.4 6.6V3.6l2.2 2.2L25.7 8h-4.4v-.1zM4.6 2.7h8.1c.3 0 .6.3.6.6v13.3l-3.8-3-.8-.6-.8.6-3.8 3V3.3c-.1-.3.2-.6.5-.6zm22.1 26.7H8V15.2l-.001.001v-.13L8.6 14.6l6 4.7v-16c0-.2 0-.4-.1-.6H20v6.6h6.7v20.1z" />
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="1"
+      d="M20.9 1.3H4.6c-1.1 0-2 .9-2 2v16l4.098-3.21v.338H6.7V30.6H28V8.4l-7.1-7.1zm.4 6.6V3.6l2.2 2.2L25.7 8h-4.4v-.1zM4.6 2.7h8.1c.3 0 .6.3.6.6v13.3l-3.8-3-.8-.6-.8.6-3.8 3V3.3c-.1-.3.2-.6.5-.6zm22.1 26.7H8V15.2l-.001.001v-.13L8.6 14.6l6 4.7v-16c0-.2 0-.4-.1-.6H20v6.6h6.7v20.1z"
+    />
   </symbol>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/documentation/.storybook/manager.js b/packages/documentation-v6/.storybook/manager.js
similarity index 100%
rename from packages/documentation/.storybook/manager.js
rename to packages/documentation-v6/.storybook/manager.js
diff --git a/packages/documentation/.storybook/manager.scss b/packages/documentation-v6/.storybook/manager.scss
similarity index 100%
rename from packages/documentation/.storybook/manager.scss
rename to packages/documentation-v6/.storybook/manager.scss
diff --git a/packages/documentation/.storybook/post-themes.js b/packages/documentation-v6/.storybook/post-themes.js
similarity index 100%
rename from packages/documentation/.storybook/post-themes.js
rename to packages/documentation-v6/.storybook/post-themes.js
diff --git a/packages/documentation-v6/.storybook/preview-head.html b/packages/documentation-v6/.storybook/preview-head.html
new file mode 100644
index 0000000000..14cad7d838
--- /dev/null
+++ b/packages/documentation-v6/.storybook/preview-head.html
@@ -0,0 +1,11 @@
+<!--
+  Do whatever you can do in an normal html header.
+  Storybook will inject these tags into the preview iframe where your components render, not the Storybook application UI.
+-->
+
+<link rel="icon" type="image/x-icon" href="favicon.ico" />
+<meta name="design-system-settings" data-post-icon-base="/post-icons" />
+
+<script>
+  window.global = window;
+</script>
diff --git a/packages/documentation/.storybook/preview.js b/packages/documentation-v6/.storybook/preview.js
similarity index 100%
rename from packages/documentation/.storybook/preview.js
rename to packages/documentation-v6/.storybook/preview.js
diff --git a/packages/documentation/.storybook/preview.scss b/packages/documentation-v6/.storybook/preview.scss
similarity index 100%
rename from packages/documentation/.storybook/preview.scss
rename to packages/documentation-v6/.storybook/preview.scss
diff --git a/packages/documentation-v7/CHANGELOG.md b/packages/documentation-v6/CHANGELOG.md
similarity index 96%
rename from packages/documentation-v7/CHANGELOG.md
rename to packages/documentation-v6/CHANGELOG.md
index 75eb2ee7e5..4cb442fb83 100644
--- a/packages/documentation-v7/CHANGELOG.md
+++ b/packages/documentation-v6/CHANGELOG.md
@@ -1,6 +1,10 @@
-# @swisspost/design-system-documentation-v7
+# @swisspost/design-system-documentation
 
-## 1.1.2
+## 1.12.0
+
+### Minor Changes
+
+- Added a gray notification variant for cookie banners. (by [@alizedebray](https://github.com/alizedebray) with [#1350](https://github.com/swisspost/design-system/pull/1350))
 
 ### Patch Changes
 
@@ -11,18 +15,14 @@
   - @swisspost/design-system-components@1.3.10
   - @swisspost/design-system-components-react@1.0.16
 
-## 1.1.1
+## 1.11.3
 
 ### Patch Changes
 
 - Updated dependencies:
   - @swisspost/internet-header@1.8.3
 
-## 1.1.0
-
-### Minor Changes
-
-- Created a storybook v7 package, set up with vite and lit. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#1613](https://github.com/swisspost/design-system/pull/1613))
+## 1.11.2
 
 ### Patch Changes
 
@@ -33,6 +33,17 @@
   - @swisspost/design-system-components@1.3.9
   - @swisspost/design-system-components-react@1.0.15
 
+## 1.11.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-icons@1.0.8
+  - @swisspost/design-system-styles@6.2.5
+  - @swisspost/design-system-components@1.3.8
+  - @swisspost/internet-header@1.8.1
+  - @swisspost/design-system-components-react@1.0.14
+
 ## 1.11.0
 
 ### Minor Changes
diff --git a/packages/documentation-v7/CONTRIBUTING.md b/packages/documentation-v6/CONTRIBUTING.md
similarity index 97%
rename from packages/documentation-v7/CONTRIBUTING.md
rename to packages/documentation-v6/CONTRIBUTING.md
index 1942a3d4a0..0b8db9a6ae 100644
--- a/packages/documentation-v7/CONTRIBUTING.md
+++ b/packages/documentation-v6/CONTRIBUTING.md
@@ -1,4 +1,4 @@
-# Contributing to Design System Documentation-V7
+# Contributing to Design System Documentation
 
 These contribution guidelines extend the [general contribution guidelines](../../CONTRIBUTING.md), where you can find instructions on how to set up the repository for contributing.
 
diff --git a/packages/documentation-v7/LICENSE b/packages/documentation-v6/LICENSE
similarity index 100%
rename from packages/documentation-v7/LICENSE
rename to packages/documentation-v6/LICENSE
diff --git a/packages/documentation-v7/README.md b/packages/documentation-v6/README.md
similarity index 79%
rename from packages/documentation-v7/README.md
rename to packages/documentation-v6/README.md
index 8629e89522..5cb3dd8ea0 100644
--- a/packages/documentation-v7/README.md
+++ b/packages/documentation-v6/README.md
@@ -1,14 +1,13 @@
-# Swiss Post Design System Documentation-V7
+# Swiss Post Design System Documentation
 
-![Swiss Post Design System splash screen](https://user-images.githubusercontent.com/1659006/187683368-d3aa2534-84be-4580-846e-2cad3796b573.png)
+![Swiss Post Design System splash screen](https://github.com/swisspost/design-system/assets/1659006/e84f1fea-e666-4853-8c85-726a6bf22e6c)
 
 A Storybook Documentation for the Swiss Post Design System.
 
 Includes stories for the following packages:
+
 - [@swisspost/design-system-styles](https://www.npmjs.com/package/@swisspost/design-system-styles)
-- [@swisspost/internet-header](https://www.npmjs.com/package/@swisspost/internet-header)
 - [@swisspost/design-system-components](https://www.npmjs.com/package/@swisspost/design-system-components)
-- [@swisspost/design-system-icons](https://www.npmjs.com/package/@swisspost/design-system-icons)
 
 ## Documentation
 
diff --git a/packages/documentation-v7/cypress.config.js b/packages/documentation-v6/cypress.config.js
similarity index 100%
rename from packages/documentation-v7/cypress.config.js
rename to packages/documentation-v6/cypress.config.js
diff --git a/packages/documentation-v7/cypress.snapshot.config.js b/packages/documentation-v6/cypress.snapshot.config.js
similarity index 100%
rename from packages/documentation-v7/cypress.snapshot.config.js
rename to packages/documentation-v6/cypress.snapshot.config.js
diff --git a/packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts b/packages/documentation-v6/cypress/snapshots/components/collapsible.snapshot.ts
similarity index 71%
rename from packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts
rename to packages/documentation-v6/cypress/snapshots/components/collapsible.snapshot.ts
index d72ea712f2..2e70ecdfba 100644
--- a/packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts
+++ b/packages/documentation-v6/cypress/snapshots/components/collapsible.snapshot.ts
@@ -1,6 +1,6 @@
 describe('Collapsible', () => {
   it('default', () => {
-    cy.visit('/iframe.html?id=snapshots--collapsible');
+    cy.visit('/iframe.html?id=components-collapsible--default');
     cy.get('post-collapsible.hydrated').should('be.visible');
     cy.percySnapshot('Collapsible');
   });
diff --git a/packages/documentation/cypress/snapshots/internet-header/breadcrumbs.snapshot.ts b/packages/documentation-v6/cypress/snapshots/internet-header/breadcrumbs.snapshot.ts
similarity index 100%
rename from packages/documentation/cypress/snapshots/internet-header/breadcrumbs.snapshot.ts
rename to packages/documentation-v6/cypress/snapshots/internet-header/breadcrumbs.snapshot.ts
diff --git a/packages/documentation/cypress/snapshots/internet-header/footer.snapshot.ts b/packages/documentation-v6/cypress/snapshots/internet-header/footer.snapshot.ts
similarity index 100%
rename from packages/documentation/cypress/snapshots/internet-header/footer.snapshot.ts
rename to packages/documentation-v6/cypress/snapshots/internet-header/footer.snapshot.ts
diff --git a/packages/documentation/cypress/snapshots/internet-header/header.snapshot.ts b/packages/documentation-v6/cypress/snapshots/internet-header/header.snapshot.ts
similarity index 100%
rename from packages/documentation/cypress/snapshots/internet-header/header.snapshot.ts
rename to packages/documentation-v6/cypress/snapshots/internet-header/header.snapshot.ts
diff --git a/packages/documentation/cypress/snapshots/styles/alert.snapshot.ts b/packages/documentation-v6/cypress/snapshots/styles/alert.snapshot.ts
similarity index 100%
rename from packages/documentation/cypress/snapshots/styles/alert.snapshot.ts
rename to packages/documentation-v6/cypress/snapshots/styles/alert.snapshot.ts
diff --git a/packages/documentation/cypress/snapshots/styles/blockquote.snapshot.ts b/packages/documentation-v6/cypress/snapshots/styles/blockquote.snapshot.ts
similarity index 100%
rename from packages/documentation/cypress/snapshots/styles/blockquote.snapshot.ts
rename to packages/documentation-v6/cypress/snapshots/styles/blockquote.snapshot.ts
diff --git a/packages/documentation/cypress/snapshots/styles/button.snapshot.ts b/packages/documentation-v6/cypress/snapshots/styles/button.snapshot.ts
similarity index 100%
rename from packages/documentation/cypress/snapshots/styles/button.snapshot.ts
rename to packages/documentation-v6/cypress/snapshots/styles/button.snapshot.ts
diff --git a/packages/documentation/cypress/snapshots/styles/card.snapshot.ts b/packages/documentation-v6/cypress/snapshots/styles/card.snapshot.ts
similarity index 100%
rename from packages/documentation/cypress/snapshots/styles/card.snapshot.ts
rename to packages/documentation-v6/cypress/snapshots/styles/card.snapshot.ts
diff --git a/packages/documentation/cypress/snapshots/styles/choice-card.snapshot.ts b/packages/documentation-v6/cypress/snapshots/styles/choice-card.snapshot.ts
similarity index 100%
rename from packages/documentation/cypress/snapshots/styles/choice-card.snapshot.ts
rename to packages/documentation-v6/cypress/snapshots/styles/choice-card.snapshot.ts
diff --git a/packages/documentation/cypress/snapshots/styles/headings.snapshot.ts b/packages/documentation-v6/cypress/snapshots/styles/headings.snapshot.ts
similarity index 100%
rename from packages/documentation/cypress/snapshots/styles/headings.snapshot.ts
rename to packages/documentation-v6/cypress/snapshots/styles/headings.snapshot.ts
diff --git a/packages/documentation-v7/cypress/support/commands.ts b/packages/documentation-v6/cypress/support/commands.ts
similarity index 100%
rename from packages/documentation-v7/cypress/support/commands.ts
rename to packages/documentation-v6/cypress/support/commands.ts
diff --git a/packages/documentation-v7/cypress/support/e2e.ts b/packages/documentation-v6/cypress/support/e2e.ts
similarity index 94%
rename from packages/documentation-v7/cypress/support/e2e.ts
rename to packages/documentation-v6/cypress/support/e2e.ts
index 0d0cd18178..c2b4b1647f 100644
--- a/packages/documentation-v7/cypress/support/e2e.ts
+++ b/packages/documentation-v6/cypress/support/e2e.ts
@@ -15,6 +15,8 @@
 
 // Import commands.js using ES2015 syntax:
 import '@percy/cypress';
+import 'cypress-storybook/cypress';
+import 'cypress-each';
 import './commands';
 
 // https://docs.cypress.io/api/events/catalog-of-events#Uncaught-Exceptions
diff --git a/packages/documentation-v7/cypress/support/index.d.ts b/packages/documentation-v6/cypress/support/index.d.ts
similarity index 100%
rename from packages/documentation-v7/cypress/support/index.d.ts
rename to packages/documentation-v6/cypress/support/index.d.ts
diff --git a/packages/documentation-v6/cypress/tsconfig.json b/packages/documentation-v6/cypress/tsconfig.json
new file mode 100644
index 0000000000..322238f7e6
--- /dev/null
+++ b/packages/documentation-v6/cypress/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "types": [
+      "cypress",
+      "cypress-each",
+      "@percy/cypress",
+      "@swisspost/internet-header",
+      "cypress-storybook/cypress"
+    ]
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"],
+  "exclude": []
+}
diff --git a/packages/documentation-v6/package.json b/packages/documentation-v6/package.json
new file mode 100644
index 0000000000..2aa6eb35a4
--- /dev/null
+++ b/packages/documentation-v6/package.json
@@ -0,0 +1,67 @@
+{
+  "name": "@swisspost/design-system-documentation-v6",
+  "version": "1.12.0",
+  "description": "Swiss Post Design System Documentation.",
+  "author": "Swiss Post <oss@post.ch>",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/swisspost/design-system.git"
+  },
+  "homepage": "https://swisspost-web-frontend.netlify.app",
+  "bugs": {
+    "url": "https://github.com/swisspost/design-system/issues"
+  },
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "start": "start-storybook -p 9200 --quiet",
+    "start:headless": "start-storybook -p 9300 --quiet --no-open",
+    "build": "build-storybook --quiet"
+  },
+  "dependencies": {
+    "@swisspost/design-system-components": "workspace:1.3.10",
+    "@swisspost/design-system-components-react": "workspace:1.0.16",
+    "@swisspost/design-system-icons": "workspace:1.0.10",
+    "@swisspost/design-system-styles": "workspace:6.3.0",
+    "@swisspost/internet-header": "workspace:1.9.0",
+    "html-react-parser": "4.2.1",
+    "prettier": "2.8.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-jsx-parser": "1.29.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.22.10",
+    "@geometricpanda/storybook-addon-badges": "1.1.1",
+    "@percy/cli": "1.26.3",
+    "@percy/cypress": "3.1.2",
+    "@pxtrn/storybook-addon-docs-stencil": "6.4.1",
+    "@storybook/addon-a11y": "6.5.16",
+    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addon-links": "6.5.16",
+    "@storybook/addons": "6.5.16",
+    "@storybook/client-api": "6.5.16",
+    "@storybook/preset-scss": "1.0.3",
+    "@storybook/react": "6.5.16",
+    "@storybook/testing-library": "0.2.0",
+    "@storybook/theming": "6.5.16",
+    "@types/mdx": "2.0.6",
+    "@types/react": "18.2.20",
+    "@types/react-dom": "18.2.7",
+    "babel-loader": "9.1.3",
+    "css-loader": "5.2.7",
+    "cypress": "12.17.3",
+    "cypress-each": "1.13.3",
+    "cypress-storybook": "0.5.1",
+    "react-markdown": "8.0.7",
+    "rehype-raw": "6.1.1",
+    "sass": "1.65.1",
+    "sass-loader": "10.4.1",
+    "start-server-and-test": "2.0.0",
+    "storybook-dark-mode": "3.0.1",
+    "style-loader": "2.0.0",
+    "typescript": "4.9.5"
+  }
+}
diff --git a/packages/documentation-v7/public/android-chrome-192x192.png b/packages/documentation-v6/public/android-chrome-192x192.png
similarity index 100%
rename from packages/documentation-v7/public/android-chrome-192x192.png
rename to packages/documentation-v6/public/android-chrome-192x192.png
diff --git a/packages/documentation-v7/public/android-chrome-512x512.png b/packages/documentation-v6/public/android-chrome-512x512.png
similarity index 100%
rename from packages/documentation-v7/public/android-chrome-512x512.png
rename to packages/documentation-v6/public/android-chrome-512x512.png
diff --git a/packages/documentation-v7/public/apple-touch-icon.png b/packages/documentation-v6/public/apple-touch-icon.png
similarity index 100%
rename from packages/documentation-v7/public/apple-touch-icon.png
rename to packages/documentation-v6/public/apple-touch-icon.png
diff --git a/packages/documentation-v7/public/assets/config/test-configuration.json b/packages/documentation-v6/public/assets/config/test-configuration.json
similarity index 99%
rename from packages/documentation-v7/public/assets/config/test-configuration.json
rename to packages/documentation-v6/public/assets/config/test-configuration.json
index fc32740863..3074106b97 100644
--- a/packages/documentation-v7/public/assets/config/test-configuration.json
+++ b/packages/documentation-v6/public/assets/config/test-configuration.json
@@ -1286,7 +1286,7 @@
                   "additionalAttributes": []
                 },
                 {
-                  "url": "http://www.youtube.com/swisspost",
+                  "url": "https://www.youtube.com/swisspost",
                   "icon": "8002_youtube",
                   "name": "Folgen Sie uns auf Youtube",
                   "target": "_blank",
@@ -1889,7 +1889,7 @@
                   "additionalAttributes": []
                 },
                 {
-                  "url": "http://www.youtube.com/swisspost",
+                  "url": "https://www.youtube.com/swisspost",
                   "icon": "8002_youtube",
                   "name": "Suivez-nous sur Youtube",
                   "target": "_blank",
@@ -2492,7 +2492,7 @@
                   "additionalAttributes": []
                 },
                 {
-                  "url": "http://www.youtube.com/swisspost",
+                  "url": "https://www.youtube.com/swisspost",
                   "icon": "8002_youtube",
                   "name": "Seguici su Youtube",
                   "target": "_blank",
@@ -3095,7 +3095,7 @@
                   "additionalAttributes": []
                 },
                 {
-                  "url": "http://www.youtube.com/swisspost",
+                  "url": "https://www.youtube.com/swisspost",
                   "icon": "8002_youtube",
                   "name": "Follow us on Youtube",
                   "target": "_blank",
diff --git a/packages/documentation-v7/public/favicon.ico b/packages/documentation-v6/public/favicon.ico
similarity index 100%
rename from packages/documentation-v7/public/favicon.ico
rename to packages/documentation-v6/public/favicon.ico
diff --git a/packages/documentation-v7/public/favicon.svg b/packages/documentation-v6/public/favicon.svg
similarity index 100%
rename from packages/documentation-v7/public/favicon.svg
rename to packages/documentation-v6/public/favicon.svg
diff --git a/packages/documentation-v7/public/images/header.png b/packages/documentation-v6/public/images/header.png
similarity index 100%
rename from packages/documentation-v7/public/images/header.png
rename to packages/documentation-v6/public/images/header.png
diff --git a/packages/documentation-v7/public/images/logo-swisspost.svg b/packages/documentation-v6/public/images/logo-swisspost.svg
similarity index 100%
rename from packages/documentation-v7/public/images/logo-swisspost.svg
rename to packages/documentation-v6/public/images/logo-swisspost.svg
diff --git a/packages/documentation-v7/public/images/packages/components.svg b/packages/documentation-v6/public/images/packages/components.svg
similarity index 100%
rename from packages/documentation-v7/public/images/packages/components.svg
rename to packages/documentation-v6/public/images/packages/components.svg
diff --git a/packages/documentation-v7/public/images/packages/icons.svg b/packages/documentation-v6/public/images/packages/icons.svg
similarity index 100%
rename from packages/documentation-v7/public/images/packages/icons.svg
rename to packages/documentation-v6/public/images/packages/icons.svg
diff --git a/packages/documentation-v7/public/images/packages/internet-header.svg b/packages/documentation-v6/public/images/packages/internet-header.svg
similarity index 100%
rename from packages/documentation-v7/public/images/packages/internet-header.svg
rename to packages/documentation-v6/public/images/packages/internet-header.svg
diff --git a/packages/documentation-v7/public/images/packages/intranet-header.svg b/packages/documentation-v6/public/images/packages/intranet-header.svg
similarity index 100%
rename from packages/documentation-v7/public/images/packages/intranet-header.svg
rename to packages/documentation-v6/public/images/packages/intranet-header.svg
diff --git a/packages/documentation-v7/public/images/packages/styles.svg b/packages/documentation-v6/public/images/packages/styles.svg
similarity index 100%
rename from packages/documentation-v7/public/images/packages/styles.svg
rename to packages/documentation-v6/public/images/packages/styles.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-angular.svg b/packages/documentation-v6/public/images/technologies/logo-angular.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-angular.svg
rename to packages/documentation-v6/public/images/technologies/logo-angular.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-bootstrap.svg b/packages/documentation-v6/public/images/technologies/logo-bootstrap.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-bootstrap.svg
rename to packages/documentation-v6/public/images/technologies/logo-bootstrap.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-changesets.png b/packages/documentation-v6/public/images/technologies/logo-changesets.png
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-changesets.png
rename to packages/documentation-v6/public/images/technologies/logo-changesets.png
diff --git a/packages/documentation-v7/public/images/technologies/logo-cypress.svg b/packages/documentation-v6/public/images/technologies/logo-cypress.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-cypress.svg
rename to packages/documentation-v6/public/images/technologies/logo-cypress.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-figma.svg b/packages/documentation-v6/public/images/technologies/logo-figma.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-figma.svg
rename to packages/documentation-v6/public/images/technologies/logo-figma.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-github.svg b/packages/documentation-v6/public/images/technologies/logo-github.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-github.svg
rename to packages/documentation-v6/public/images/technologies/logo-github.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-gulp.svg b/packages/documentation-v6/public/images/technologies/logo-gulp.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-gulp.svg
rename to packages/documentation-v6/public/images/technologies/logo-gulp.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-jest.svg b/packages/documentation-v6/public/images/technologies/logo-jest.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-jest.svg
rename to packages/documentation-v6/public/images/technologies/logo-jest.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-percy.svg b/packages/documentation-v6/public/images/technologies/logo-percy.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-percy.svg
rename to packages/documentation-v6/public/images/technologies/logo-percy.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-pnpm.svg b/packages/documentation-v6/public/images/technologies/logo-pnpm.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-pnpm.svg
rename to packages/documentation-v6/public/images/technologies/logo-pnpm.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-react.svg b/packages/documentation-v6/public/images/technologies/logo-react.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-react.svg
rename to packages/documentation-v6/public/images/technologies/logo-react.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-sass.svg b/packages/documentation-v6/public/images/technologies/logo-sass.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-sass.svg
rename to packages/documentation-v6/public/images/technologies/logo-sass.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-stencil.png b/packages/documentation-v6/public/images/technologies/logo-stencil.png
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-stencil.png
rename to packages/documentation-v6/public/images/technologies/logo-stencil.png
diff --git a/packages/documentation-v7/public/images/technologies/logo-storybook.svg b/packages/documentation-v6/public/images/technologies/logo-storybook.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-storybook.svg
rename to packages/documentation-v6/public/images/technologies/logo-storybook.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-svgo.svg b/packages/documentation-v6/public/images/technologies/logo-svgo.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-svgo.svg
rename to packages/documentation-v6/public/images/technologies/logo-svgo.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-vue.svg b/packages/documentation-v6/public/images/technologies/logo-vue.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-vue.svg
rename to packages/documentation-v6/public/images/technologies/logo-vue.svg
diff --git a/packages/documentation-v7/public/images/technologies/logo-webpack.svg b/packages/documentation-v6/public/images/technologies/logo-webpack.svg
similarity index 100%
rename from packages/documentation-v7/public/images/technologies/logo-webpack.svg
rename to packages/documentation-v6/public/images/technologies/logo-webpack.svg
diff --git a/packages/documentation-v7/public/netlify.toml b/packages/documentation-v6/public/netlify.toml
similarity index 100%
rename from packages/documentation-v7/public/netlify.toml
rename to packages/documentation-v6/public/netlify.toml
diff --git a/packages/documentation-v7/public/site.webmanifest b/packages/documentation-v6/public/site.webmanifest
similarity index 100%
rename from packages/documentation-v7/public/site.webmanifest
rename to packages/documentation-v6/public/site.webmanifest
diff --git a/packages/documentation/src/stories/Templates/forms/forms.stories.mdx b/packages/documentation-v6/src/stories/Templates/forms/forms.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/Templates/forms/forms.stories.mdx
rename to packages/documentation-v6/src/stories/Templates/forms/forms.stories.mdx
diff --git a/packages/documentation/src/stories/components/alert/alert-snapshot.stories.mdx b/packages/documentation-v6/src/stories/components/alert/alert-snapshot.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/alert/alert-snapshot.stories.mdx
rename to packages/documentation-v6/src/stories/components/alert/alert-snapshot.stories.mdx
diff --git a/packages/documentation-v7/src/stories/components/alert/alert.docs.mdx b/packages/documentation-v6/src/stories/components/alert/alert.docs.mdx
similarity index 74%
rename from packages/documentation-v7/src/stories/components/alert/alert.docs.mdx
rename to packages/documentation-v6/src/stories/components/alert/alert.docs.mdx
index e037c041aa..2cc50ba047 100644
--- a/packages/documentation-v7/src/stories/components/alert/alert.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/alert/alert.docs.mdx
@@ -1,32 +1,31 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as AlertStories from './alert.stories';
+import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
 
-<Meta of={AlertStories} />
+<Meta title="Components/Alert" />
 
 # Alert
 
-<div className="lead">
-  Provide contextual feedback messages for typical user actions with the handful of available and flexible alert
-  messages.
-</div>
-
+Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.<br/>
 Alerts are available for any length of text, as well as an optional close button.
 By default, alerts are rendered with a contextually appropriate icon.
 
-<Canvas of={AlertStories.Default} />
-<Controls of={AlertStories.Default} />
+<Canvas>
+  <Story id="components-alert--default" />
+</Canvas>
+<div className="hide-col-default">
+  <ArgsTable story="^" />
+</div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/alert.scss';
 ```
@@ -39,7 +38,9 @@ The following examples show some of the different characteristics of the compone
 
 Alerts can also contain additional HTML elements like headings, paragraphs, lists, dividers, and more.
 
-<Canvas of={AlertStories.AdditionalContent} />
+<Canvas>
+  <Story id="components-alert--additional-content" />
+</Canvas>
 
 ### Dismissible
 
@@ -49,13 +50,9 @@ In the end, it's just a button with an `onClick()` event. As this is a CSS-only
 
 Dismiss buttons without text should always provide a `dismiss-label` prop, which defines the hidden text associated with the button.
 
-<Canvas of={AlertStories.Dismissible} />
-
-### Action Buttons
-
-To render an action alert with buttons, the alert element requires an additional class as well as additional HTML content. Thus, everything will be rendered as it should be.
-
-<Canvas of={AlertStories.ActionButtons} />
+<Canvas withSource>
+  <Story id="components-alert--dismissible" />
+</Canvas>
 
 ### Fixed
 
@@ -63,4 +60,14 @@ A fixed alert (at the bottom of the viewport) is obtained by adding the class `.
 As this is a CSS-only component, you have to define the logic to show/hide/toggle the alert yourself.
 Such an alert is normally also dismissible, so please notice the information for a dismissible alert as well.
 
-<Canvas of={AlertStories.Fixed} />
+<Canvas>
+  <Story id="components-alert--fixed" />
+</Canvas>
+
+### Action Buttons
+
+To render an action alert with buttons, the alert element requires an additional class as well as additional HTML content. Thus, everything will be rendered as it should be.
+
+<Canvas>
+  <Story id="components-alert--action-buttons" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/alert/alert.stories.tsx b/packages/documentation-v6/src/stories/components/alert/alert.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/alert/alert.stories.tsx
rename to packages/documentation-v6/src/stories/components/alert/alert.stories.tsx
diff --git a/packages/documentation/src/stories/components/alert/getAlertClasses.tsx b/packages/documentation-v6/src/stories/components/alert/getAlertClasses.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/alert/getAlertClasses.tsx
rename to packages/documentation-v6/src/stories/components/alert/getAlertClasses.tsx
diff --git a/packages/documentation-v6/src/stories/components/badge/badge.docs.mdx b/packages/documentation-v6/src/stories/components/badge/badge.docs.mdx
new file mode 100644
index 0000000000..64412788de
--- /dev/null
+++ b/packages/documentation-v6/src/stories/components/badge/badge.docs.mdx
@@ -0,0 +1,52 @@
+import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+
+<Meta title="Components/Badge" />
+
+# Badge
+
+<p className="lead">
+  Documentation and examples for badges, our small count and labeling component.
+</p>
+
+<Canvas>
+  <Story id="components-badge--default" />
+</Canvas>
+<div className="hide-col-default">
+  <ArgsTable story="^" />
+</div>
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```css dark
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```css dark
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/badge.scss';
+```
+
+## Concrete Examples of Application
+
+The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.
+
+### Checkable
+
+A checkable `.badge` is nothing else than a custom-checkbox. Therefore you can manipulate it like every default `checkbox` element.
+
+<Canvas>
+  <Story id="components-badge--checkable" />
+</Canvas>
+
+### Dismissible
+
+A dismissible `.badge` can be removed from the UI by the user, by clicking on the close button.
+Close buttons without text should always provide a `dismiss-label` prop, which defines the hidden text associated with the button.
+
+<Canvas>
+  <Story id="components-badge--dismissible" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/badge/badge.stories.tsx b/packages/documentation-v6/src/stories/components/badge/badge.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/badge/badge.stories.tsx
rename to packages/documentation-v6/src/stories/components/badge/badge.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/blockquote/blockquote.docs.mdx b/packages/documentation-v6/src/stories/components/blockquote/blockquote.docs.mdx
similarity index 65%
rename from packages/documentation-v7/src/stories/components/blockquote/blockquote.docs.mdx
rename to packages/documentation-v6/src/stories/components/blockquote/blockquote.docs.mdx
index 7a32ef7d88..f0c165d1a6 100644
--- a/packages/documentation-v7/src/stories/components/blockquote/blockquote.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/blockquote/blockquote.docs.mdx
@@ -1,32 +1,32 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as BlockquoteStories from './blockquote.stories.ts';
+import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
 
-<Meta of={BlockquoteStories} />
+<Meta title="Components/Blockquote" />
 
-# Blockquote
+# Badge
 
-<div className="lead">
-  For quoting blocks of content from another source within your document. Wrap `<blockquote
-  class="blockquote">` around any HTML as the quote.
-</div>
-
-<Canvas of={BlockquoteStories.Default} />
+<p className="lead">
+  For quoting blocks of content from another source within your document. Wrap &lt;blockquote
+  class="blockquote"&gt; around any HTML as the quote.
+</p>
 
+<Canvas>
+  <Story id="components-blockquote--default" />
+</Canvas>
 <div className="hide-col-default">
-  <Controls of={BlockquoteStories.Default} />
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/blockquote.scss';
 ```
@@ -39,4 +39,6 @@ The following examples show the different characteristics of the component. Thes
 
 To add simple quote characters around any nested text within your blockquote, you can wrap it with a <code>&lt;q&gt;</code> tag.
 
-<Canvas of={BlockquoteStories.Nested} />
+<Canvas>
+  <Story id="components-blockquote--nested" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.mdx b/packages/documentation-v6/src/stories/components/blockquote/blockquote.snapshot.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.mdx
rename to packages/documentation-v6/src/stories/components/blockquote/blockquote.snapshot.stories.mdx
diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.stories.tsx b/packages/documentation-v6/src/stories/components/blockquote/blockquote.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/blockquote/blockquote.stories.tsx
rename to packages/documentation-v6/src/stories/components/blockquote/blockquote.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/button-group/button-group.docs.mdx b/packages/documentation-v6/src/stories/components/button-group/button-group.docs.mdx
similarity index 70%
rename from packages/documentation-v7/src/stories/components/button-group/button-group.docs.mdx
rename to packages/documentation-v6/src/stories/components/button-group/button-group.docs.mdx
index fce158e002..c430b0fc2b 100644
--- a/packages/documentation-v7/src/stories/components/button-group/button-group.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/button-group/button-group.docs.mdx
@@ -1,30 +1,31 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as ButtonGroupStories from './button-group.stories';
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 
-<Meta of={ButtonGroupStories} />
+<Meta title="Components/Button Group" />
 
 # Button Group
 
-<div className="lead">
-  Group a series of buttons together on a single line.
-</div>
+<p className="lead">
+  Group a series of buttons together on a single line or stack them in a vertical column.
+</p>
 
-<Canvas of={ButtonGroupStories.Default} />
+<Canvas>
+  <Story id="components-button-group--default" />
+</Canvas>
 <div className="hide-col-default">
-  <Controls of={ButtonGroupStories.Default} />
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/badge.scss';
 ```
@@ -38,14 +39,16 @@ The following examples show the different characteristics of the component. Thes
 You can change the size of buttons belonging to a group using button-sizing classes: `.btn-sm`, `.btn-rg` and `.btn-lg`.
 Just be sure to apply the same class to all buttons contained in the group.
 
-<Canvas of={ButtonGroupStories.Sizing} />
+<Canvas>
+  <Story id="components-button-group--size" />
+</Canvas>
 
 ### Checkbox & Radio
-
 Any HTML element that can be styled as a button can potentially be used in a button group.
 It is also possible to use checkable inputs:
-
 - Checkboxes: this allows all buttons in the group to be selected or deselected individually,
 - Radio buttons: in this case all the buttons are linked and only one of them can be selected at a time.
 
-<Canvas of={ButtonGroupStories.Checks} />
+<Canvas>
+  <Story id="components-button-group--checks" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.tsx b/packages/documentation-v6/src/stories/components/button-group/button-group.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/button-group/button-group.stories.tsx
rename to packages/documentation-v6/src/stories/components/button-group/button-group.stories.tsx
diff --git a/packages/documentation/src/stories/components/button/button-snapshot.stories.mdx b/packages/documentation-v6/src/stories/components/button/button-snapshot.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/button/button-snapshot.stories.mdx
rename to packages/documentation-v6/src/stories/components/button/button-snapshot.stories.mdx
diff --git a/packages/documentation-v7/src/stories/components/button/button.docs.mdx b/packages/documentation-v6/src/stories/components/button/button.docs.mdx
similarity index 64%
rename from packages/documentation-v7/src/stories/components/button/button.docs.mdx
rename to packages/documentation-v6/src/stories/components/button/button.docs.mdx
index 613d91d1ee..f32c4827c5 100644
--- a/packages/documentation-v7/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/button/button.docs.mdx
@@ -1,32 +1,33 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import LinkTo from '@storybook/addon-links/react';
-import * as ButtonStories from './button.stories';
 
-<Meta of={ButtonStories} />
+<Meta title="Components/Button" />
 
 # Button
 
-<div className="lead">
+<p className="lead">
   Use our custom button styles for actions in forms, dialogs, and more with support for multiple
   sizes, states, and more.
-</div>
+</p>
 
-<Canvas of={ButtonStories.Default} />
+<Canvas>
+  <Story id="components-button--default" />
+</Canvas>
 <div className="hide-col-default">
-  <Controls of={ButtonStories.Default} />
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/button.scss';
 
@@ -40,20 +41,26 @@ The following examples show the different characteristics of the component. Thes
 
 ### Inverted
 
-Inverted buttons don't need special classes anymore, just use any of the <LinkTo kind="utilities-background" story="docs">background classes</LinkTo> to set the background and you're done for the day.
+Inverted buttons don't need special classes anymore, just use any of the <LinkTo kind="foundations-color">background classes</LinkTo> to set the background and you're done for the day.
 
-<Canvas of={ButtonStories.Inverted} />
+<Canvas>
+  <Story id="components-button--inverted" />
+</Canvas>
 
 ### Accent colors
 
 There are a number of accent colors that you can apply to buttons instead of the usual colors.
 
-<Canvas of={ButtonStories.AccentColors} />
+<Canvas>
+  <Story id="components-button--accent-colors" />
+</Canvas>
 
 ### Contextual colors
 
 Besides the usual and the accent button variations, there are also contextual button colors.
 
-<p className="alert alert-warning">These are only allowed for intranet applications!</p>
+<p className="alert alert-danger">These are only allowed for intranet applications!</p>
 
-<Canvas of={ButtonStories.ContextualColors} />
+<Canvas>
+  <Story id="components-button--contextual-colors" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/button/button.stories.tsx b/packages/documentation-v6/src/stories/components/button/button.stories.tsx
similarity index 99%
rename from packages/documentation/src/stories/components/button/button.stories.tsx
rename to packages/documentation-v6/src/stories/components/button/button.stories.tsx
index 8201f9747b..1630fd1ffb 100644
--- a/packages/documentation/src/stories/components/button/button.stories.tsx
+++ b/packages/documentation-v6/src/stories/components/button/button.stories.tsx
@@ -202,7 +202,7 @@ export default {
 const Template = (args: Args) => {
   const props = {
     key: args.key,
-    href: args.tag === 'a' ? 'javascript:void' : undefined,
+    href: args.tag === 'a' ? '#' : undefined,
     type: args.tag === 'input' ? args.type : undefined,
     value: args.tag === 'input' ? args.text : undefined,
   };
diff --git a/packages/documentation-v6/src/stories/components/card/card.docs.mdx b/packages/documentation-v6/src/stories/components/card/card.docs.mdx
new file mode 100644
index 0000000000..f2aff5a867
--- /dev/null
+++ b/packages/documentation-v6/src/stories/components/card/card.docs.mdx
@@ -0,0 +1,85 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="Components/Card" />
+
+# Card
+
+<p className="lead">
+  Cards provide a flexible and extensible content container with multiple variants and options.
+</p>
+
+A card is a flexible and extensible content container.<br/>
+Built with flexbox, they offer easy alignment and mix well with other components.
+
+Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.<br/>
+Use our <a href="#sizing" target="_self">sizing examples</a> to customize the size of a card.
+
+Last but not least, our card component is based on the <a href="https://getbootstrap.com/docs/5.1/components/card/" target="_blank">bootstrap card</a> component.<br/>
+Please also have a look at their documentation if you want to get more details or see even more examples.
+
+<Canvas>
+  <Story id="components-card--default" />
+</Canvas>
+<div className="hide-col-default">
+  <ArgsTable story="^" />
+</div>
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```css dark
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```css dark
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/card.scss';
+```
+
+## Concrete Examples of Application
+
+The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.
+
+### List Groups
+
+Create lists of content in a card with a flush list group.<br/>
+Simply replace or complement the `.card-body` with a `.list-group` element.
+
+<Canvas>
+  <Story id="components-card--list-groups" />
+</Canvas>
+
+### Custom Content
+
+Expect from the available space, there are no restrictions on what can be integrated into the `.card-header`, `.card-body`, `.list-group` and `.card-footer` elements.
+
+<Canvas>
+  <Story id="components-card--custom-content" />
+</Canvas>
+
+### Groups
+
+With the wrapper element `.card-group` you can group cards and adjust their height automatically line by line.
+
+<Canvas>
+  <Story id="components-card--groups" />
+</Canvas>
+
+### Image overlay
+
+<div className="mb-3">
+  <Story id="components-card--image-overlay" />
+</div>
+
+<div className="alert alert-danger mb-3">
+  <h4 className="h5">Bad Example</h4>
+  <p>
+    Don't do this at any time.
+    <br />
+    It's very difficult for content editors to always ensure that text is legible on an image for
+    every browser size and all different languages.
+  </p>
+</div>
diff --git a/packages/documentation/src/stories/components/card/card.snapshot.stories.mdx b/packages/documentation-v6/src/stories/components/card/card.snapshot.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/card/card.snapshot.stories.mdx
rename to packages/documentation-v6/src/stories/components/card/card.snapshot.stories.mdx
diff --git a/packages/documentation/src/stories/components/card/card.stories.tsx b/packages/documentation-v6/src/stories/components/card/card.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/card/card.stories.tsx
rename to packages/documentation-v6/src/stories/components/card/card.stories.tsx
diff --git a/packages/documentation-v6/src/stories/components/checkbox/checkbox.docs.mdx b/packages/documentation-v6/src/stories/components/checkbox/checkbox.docs.mdx
new file mode 100644
index 0000000000..41bf4edd8a
--- /dev/null
+++ b/packages/documentation-v6/src/stories/components/checkbox/checkbox.docs.mdx
@@ -0,0 +1,82 @@
+import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Checkbox" />
+
+# Checkbox
+
+<p className="lead">
+  Customize the native <code>&lt;input type="checkbox"&gt;</code> with CSS that changes the
+  element’s initial appearance. Consistent, cross-browser and cross-device.
+</p>
+
+Our checks use custom icons to indicate checked or indeterminate states.
+
+<Canvas>
+  <Story id="components-checkbox--default" />
+</Canvas>
+<div className="hide-col-default">
+  <ArgsTable story="^" />
+</div>
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```css dark
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```css dark
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/form-check.scss';
+
+// required if you use validation feedbacks
+@use '@swisspost/design-system-styles/components/form-feedback.scss';
+```
+
+## Concrete Examples of Application
+
+The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.
+
+### Indeterminate
+
+Normally a checkbox input can only have two states: `checked` or `unchecked`. They can have any value, but they either submit that value (checked) or don't (unchecked) with a form submission.
+
+Visually, there are three states a checkbox can be in: `checked`, `unchecked`, or `indeterminate`.<br/>
+The `indeterminate` state is visual only. The checkbox is still either **checked** or **unchecked** as a value. That means the visual `indeterminate` state masks the real value of the checkbox. A possible use case for this state could be a list of checkboxes with one to toggle them all as in a folder/subfolder tree and only a part of the subfolders are selected. For an example visit [Accessible Web Designs indeterminate checkbox](http://www.barrierefreies-webdesign.de/knowhow/checkbox/indeterminate.html).
+
+A native `<input type="checkbox"/>` supports this `indeterminate` visual state which can only be set through JavaScript. It is then styled using the `:indeterminate` pseudo-class.
+
+```javascript dark
+document.querySelector('input[type="checkbox"]').indeterminate = true;
+```
+
+### Inline
+
+To render a checkbox inline, simply add the class `.form-check-inline` to the `.form-check` wrapper element.
+
+<div className="alert alert-info alert-md">
+  Remember to wrap your checkbox group with a <code>&lt;fieldset&gt;</code> including a{' '}
+  <code>&lt;legend&gt;</code> tag. This is the group label.
+  <br />
+  You can read more about that topic at our{' '}
+  <LinkTo kind="foundations-accessibility--page#grouping">grouping accessibility guide</LinkTo>.
+</div>
+
+To visually hide the `<legend>` element, use the `.visually-hidden` class.
+
+<Canvas>
+  <Story id="components-checkbox--inline" />
+</Canvas>
+
+### Validation
+
+Simply add the classes `.is-valid` or `.is-invalid` to the `checkbox` element to show it in the expected state.<br/>
+When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the checkbox element to explain what went wrong. This enables the user to correct the mistake.
+
+<Canvas>
+  <Story id="components-checkbox--validation" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.stories.tsx b/packages/documentation-v6/src/stories/components/checkbox/checkbox.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/checkbox/checkbox.stories.tsx
rename to packages/documentation-v6/src/stories/components/checkbox/checkbox.stories.tsx
diff --git a/packages/documentation/src/stories/components/choice-control-card/checkbox-card.docs.mdx b/packages/documentation-v6/src/stories/components/choice-control-card/checkbox-card.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/choice-control-card/checkbox-card.docs.mdx
rename to packages/documentation-v6/src/stories/components/choice-control-card/checkbox-card.docs.mdx
diff --git a/packages/documentation/src/stories/components/choice-control-card/checkbox-card.stories.tsx b/packages/documentation-v6/src/stories/components/choice-control-card/checkbox-card.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/choice-control-card/checkbox-card.stories.tsx
rename to packages/documentation-v6/src/stories/components/choice-control-card/checkbox-card.stories.tsx
diff --git a/packages/documentation/src/stories/components/choice-control-card/choice-card-snapshot.stories.mdx b/packages/documentation-v6/src/stories/components/choice-control-card/choice-card-snapshot.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/choice-control-card/choice-card-snapshot.stories.mdx
rename to packages/documentation-v6/src/stories/components/choice-control-card/choice-card-snapshot.stories.mdx
diff --git a/packages/documentation/src/stories/components/choice-control-card/choice-card.tsx b/packages/documentation-v6/src/stories/components/choice-control-card/choice-card.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/choice-control-card/choice-card.tsx
rename to packages/documentation-v6/src/stories/components/choice-control-card/choice-card.tsx
diff --git a/packages/documentation/src/stories/components/choice-control-card/radio-button-card.docs.mdx b/packages/documentation-v6/src/stories/components/choice-control-card/radio-button-card.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/choice-control-card/radio-button-card.docs.mdx
rename to packages/documentation-v6/src/stories/components/choice-control-card/radio-button-card.docs.mdx
diff --git a/packages/documentation/src/stories/components/choice-control-card/radio-button-card.stories.tsx b/packages/documentation-v6/src/stories/components/choice-control-card/radio-button-card.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/choice-control-card/radio-button-card.stories.tsx
rename to packages/documentation-v6/src/stories/components/choice-control-card/radio-button-card.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/collapsible/collapsible.docs.mdx b/packages/documentation-v6/src/stories/components/collapsible/collapsible.docs.mdx
similarity index 78%
rename from packages/documentation-v7/src/stories/components/collapsible/collapsible.docs.mdx
rename to packages/documentation-v6/src/stories/components/collapsible/collapsible.docs.mdx
index ee036ee7cb..6129004ef7 100644
--- a/packages/documentation-v7/src/stories/components/collapsible/collapsible.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/collapsible/collapsible.docs.mdx
@@ -1,7 +1,6 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as CollapsibleStories from './collapsible.stories';
+import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
 
-<Meta of={CollapsibleStories} />
+<Meta title="Components/Collapsible" />
 
 # Collapsible
 
@@ -10,8 +9,11 @@ import * as CollapsibleStories from './collapsible.stories';
 The `<post-collapsible>` component is used to show and hide content.
 Collapsing an element will animate the height from its current value to 0.
 
-<Canvas of={CollapsibleStories.Default} />
-<Controls of={CollapsibleStories.Default} />
+<Canvas>
+  <Story id="components-collapsible--default" />
+</Canvas>
+
+<ArgsTable story="^" />
 
 ## Examples
 
@@ -21,13 +23,17 @@ The following examples show different use cases for the `<post-collapsible>` com
 
 To make the collapsible content hidden by default, just use the `collapsible="true"` property.
 
-<Canvas of={CollapsibleStories.InitiallyCollapsed} />
+<Canvas>
+  <Story id="components-collapsible--initially-collapsed" />
+</Canvas>
 
 ### Heading Level
 
 Use the `heading-level` property to define the hierarchical level of the collapsible header within the structure of a document.
 
-<Canvas of={CollapsibleStories.HeadingLevel} />
+<Canvas>
+  <Story id="components-collapsible--heading-level" />
+</Canvas>
 
 ### Intricate Content
 
@@ -36,7 +42,10 @@ to allow any HTML content to be used as part of its header and body.<br/>
 By default, all children are appended to the component's body.
 For a specific child to be displayed in the header, a `slot="header"` attribute must be added.
 
-<Canvas of={CollapsibleStories.IntricateContent} />
+
+<Canvas withSource>
+  <Story id="components-collapsible--intricate-content" />
+</Canvas>
 
 ### Custom Trigger
 
@@ -44,7 +53,7 @@ The `<post-collapsible>` component exposes a `.toggle()` method that allows to t
 This method is asynchronous and returns a promise that resolves with the current open state.
 It optionally takes a boolean parameter that forces open when `true` or close when `false`.
 
-```typescript
+```typescript dark
 const collapsible = document.querySelector('#collapsibleId') as HTMLPostCollapsibleElement;
 collapsible.toggle(/* open: boolean */).then((/* isOpen: boolean */) => {});
 ```
@@ -57,4 +66,6 @@ Also make sure to add an `aria-expanded` attribute to the control element:
 if the collapsible element is closed, the attribute on the control element must have a value of `aria-expanded="false"`
 and `aria-expanded="true"` otherwise.
 
-<Canvas of={CollapsibleStories.CustomTrigger} />
+<Canvas>
+  <Story id="components-collapsible--custom-trigger" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.stories.tsx b/packages/documentation-v6/src/stories/components/collapsible/collapsible.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/collapsible/collapsible.stories.tsx
rename to packages/documentation-v6/src/stories/components/collapsible/collapsible.stories.tsx
diff --git a/packages/documentation-v6/src/stories/components/heading/heading.docs.mdx b/packages/documentation-v6/src/stories/components/heading/heading.docs.mdx
new file mode 100644
index 0000000000..8cfa665fa1
--- /dev/null
+++ b/packages/documentation-v6/src/stories/components/heading/heading.docs.mdx
@@ -0,0 +1,35 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Heading" />
+
+# Button
+
+<p className="lead">
+  Use our custom heading styles to create to display semantically correct and appealing headings.
+</p>
+
+All HTML headings, `h1` through `h6`, are available.<br/>
+If you only want to make content appear like headings without using a semantic element, you should pay attention to our <LinkTo kind="utilities-heading">heading utilities</LinkTo>.
+
+<Canvas>
+  <Story id="components-heading--default" />
+</Canvas>
+<div className="hide-col-default">
+  <ArgsTable story="^" />
+</div>
+
+## SCSS Imports
+
+To import all styles from the design-system-styles package:
+
+```css dark
+@use '@swisspost/design-system-styles/index.scss';
+```
+
+To import only the styles required for this component:
+
+```css dark
+@use '@swisspost/design-system-styles/basics.scss';
+@use '@swisspost/design-system-styles/components/type.scss';
+```
diff --git a/packages/documentation/src/stories/components/heading/heading.snapshot.stories.mdx b/packages/documentation-v6/src/stories/components/heading/heading.snapshot.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/heading/heading.snapshot.stories.mdx
rename to packages/documentation-v6/src/stories/components/heading/heading.snapshot.stories.mdx
diff --git a/packages/documentation/src/stories/components/heading/heading.stories.tsx b/packages/documentation-v6/src/stories/components/heading/heading.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/heading/heading.stories.tsx
rename to packages/documentation-v6/src/stories/components/heading/heading.stories.tsx
diff --git a/packages/documentation-v6/src/stories/components/input-group/input-group.docs.mdx b/packages/documentation-v6/src/stories/components/input-group/input-group.docs.mdx
new file mode 100644
index 0000000000..c2f74f5481
--- /dev/null
+++ b/packages/documentation-v6/src/stories/components/input-group/input-group.docs.mdx
@@ -0,0 +1,8 @@
+import { Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+
+# Input-Group
+
+<div className="alert alert-info">
+  <h2 className="alert-heading">TODO:</h2>
+  <p>Make them work in styles and document it afterwards</p>
+</div>
diff --git a/packages/documentation/src/stories/components/input-group/input-group.stories.tsx b/packages/documentation-v6/src/stories/components/input-group/input-group.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/input-group/input-group.stories.tsx
rename to packages/documentation-v6/src/stories/components/input-group/input-group.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/input/input.docs.mdx b/packages/documentation-v6/src/stories/components/input/input.docs.mdx
similarity index 74%
rename from packages/documentation-v7/src/stories/components/input/input.docs.mdx
rename to packages/documentation-v6/src/stories/components/input/input.docs.mdx
index f16f22f279..48fb9a505a 100644
--- a/packages/documentation-v7/src/stories/components/input/input.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/input/input.docs.mdx
@@ -1,33 +1,32 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as InputStories from './input.stories';
-
-<Meta of={InputStories} />
+import { Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
 
 # Text input
 
-<div className="lead">
+<p className="lead">
   Customize the native <code>&lt;input&gt;</code> with CSS that changes the element’s initial
   appearance.
-</div>
+</p>
 
 Custom input elements need only the class `.form-control` to trigger the custom styles.
 
-<Canvas of={InputStories.Default} />
+<Canvas>
+  <Story id="components-text-input--default" />
+</Canvas>
 <div className="hide-col-default">
-  <Controls of={InputStories.Default} />
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/forms.scss';
 
@@ -47,7 +46,9 @@ The following examples show the different characteristics of the component. Thes
 Wrap a pair of `<input>` and `<label>` elements in a `.form-floating` container to enable floating labels.<br/>
 But note that the `<input>` element must come first, so we can ensure the correct styles.
 
-<Canvas of={InputStories.FloatingLabel} />
+<Canvas>
+  <Story id="components-text-input--floating-label" />
+</Canvas>
 
 ### Sizing
 
@@ -60,17 +61,21 @@ The size can be changed by simply adding one of four classes:
 
 <div className="alert alert-info">
   <h4 className="alert-heading">Do not apply size classes on floating-label elements</h4>
-  <div className="mt-0">
+  <p className="mt-0">
     It is not intended to apply the size classes to <code>input</code> elements that are nested in a{' '}
     <code>.form-floating</code> container.
-  </div>
+  </p>
 </div>
 
-<Canvas of={InputStories.Size} />
+<Canvas>
+  <Story id="components-text-input--size" />
+</Canvas>
 
 ### Validation
 
 Simply add the classes `.is-valid` or `.is-invalid` to the `<input>` element to show it in the expected state.<br/>
-When the component has been validated, don't forget to add a `<p class="valid-feedback">...</p>` or `<p class="invalid-feedback">...</p>` element after the `input` element to explain what went wrong. This enables the user to correct the mistake.
+When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `input` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas of={InputStories.Validation} />
+<Canvas>
+  <Story id="components-text-input--validation" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/input/input.stories.tsx b/packages/documentation-v6/src/stories/components/input/input.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/input/input.stories.tsx
rename to packages/documentation-v6/src/stories/components/input/input.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/radio/radio.docs.mdx b/packages/documentation-v6/src/stories/components/radio/radio.docs.mdx
similarity index 76%
rename from packages/documentation-v7/src/stories/components/radio/radio.docs.mdx
rename to packages/documentation-v6/src/stories/components/radio/radio.docs.mdx
index 4bf20341dc..8e1028d853 100644
--- a/packages/documentation-v7/src/stories/components/radio/radio.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/radio/radio.docs.mdx
@@ -1,34 +1,35 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
 
-import * as RadioStories from './radio.stories';
-
-<Meta of={RadioStories} />
+<Meta title="Components/Radio" />
 
 # Radio
 
-<div className="lead">
+<p className="lead">
   Customize the native <code>&lt;input type="radio"&gt;</code> with CSS that changes the element’s
   initial appearance. Consistent, cross-browser and cross-device.
-</div>
+</p>
 
 Our radios use custom icons to indicate checked states.
 
-<Canvas of={RadioStories.Default} />
+<Canvas>
+  <Story id="components-radio-button--default" />
+</Canvas>
 <div className="hide-col-default">
-  <Controls of={RadioStories.Default} />
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/form-check.scss';
 
@@ -49,16 +50,20 @@ To render a radio inline, simply add the class `.form-check-inline` to the `.for
   <code>&lt;legend&gt;</code> tag. This provides a label for your radio group.
   <br />
   For more information, read our{' '}
-  <a href="/?path=/docs/foundations-accessibility--docs#grouping">grouping accessibility guide</a>.
+  <LinkTo kind="foundations-accessibility--page#grouping">grouping accessibility guide</LinkTo>.
 </div>
 
 To visually hide the `<legend>` element, use the `.visually-hidden` class.
 
-<Canvas of={RadioStories.Inline} />
+<Canvas>
+  <Story id="components-radio-button--inline" />
+</Canvas>
 
 ### Validation
 
 Simply add the classes `.is-valid` or `.is-invalid` to the `radio` element to show it in the expected state.<br/>
 When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `radio` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas of={RadioStories.Validation} />
+<Canvas>
+  <Story id="components-radio-button--validation" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/radio/radio.stories.tsx b/packages/documentation-v6/src/stories/components/radio/radio.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/radio/radio.stories.tsx
rename to packages/documentation-v6/src/stories/components/radio/radio.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/range/range.docs.mdx b/packages/documentation-v6/src/stories/components/range/range.docs.mdx
similarity index 71%
rename from packages/documentation-v7/src/stories/components/range/range.docs.mdx
rename to packages/documentation-v6/src/stories/components/range/range.docs.mdx
index 29ed32c1dd..ef571fd9d0 100644
--- a/packages/documentation-v7/src/stories/components/range/range.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/range/range.docs.mdx
@@ -1,34 +1,34 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 
-import * as RangeStories from './range.stories';
-
-<Meta of={RangeStories} />
+<Meta title="Components/Range" />
 
 # Range
 
-<div className="lead">
+<p className="lead">
   Use our custom <code>&lt;input type="range" /&gt;</code> for consistent cross-browser styling and
   built-in customization.
-</div>
+</p>
 
 Create custom `range` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers.
 
-<Canvas of={RangeStories.Default} />
+<Canvas>
+  <Story id="components-range--default" />
+</Canvas>
 <div className="hide-col-default">
-  <Controls of={RangeStories.Default} />
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/form-range.scss';
 
@@ -45,11 +45,15 @@ The following examples show the different characteristics of the component. Thes
 Range inputs have implicit values for `min` and `max` (0 and 100 respectively), and snap to integer values by default.
 You may specify new values for those using the `min`, `max` and `step` attributes.
 
-<Canvas of={RangeStories.Boundaries} />
+<Canvas>
+  <Story id="components-range--boundaries" />
+</Canvas>
 
 ### Validation
 
 Simply add the classes `.is-valid` or `.is-invalid` to the `range` element to show it in the expected state.<br/>
-When the component has been validated, don't forget to add a `<p class="valid-feedback">...</p>` or `<p class="invalid-feedback">...</p>` element after the `range` element to explain what went wrong. This enables the user to correct the mistake.
+When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `range` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas of={RangeStories.Validation} />
+<Canvas>
+  <Story id="components-range--validation" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/range/range.stories.tsx b/packages/documentation-v6/src/stories/components/range/range.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/range/range.stories.tsx
rename to packages/documentation-v6/src/stories/components/range/range.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/select/select.docs.mdx b/packages/documentation-v6/src/stories/components/select/select.docs.mdx
similarity index 83%
rename from packages/documentation-v7/src/stories/components/select/select.docs.mdx
rename to packages/documentation-v6/src/stories/components/select/select.docs.mdx
index ee4602e1e2..d7ff11ae85 100644
--- a/packages/documentation-v7/src/stories/components/select/select.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/select/select.docs.mdx
@@ -1,33 +1,34 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as SelectStories from './select.stories';
+import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
 
-<Meta of={SelectStories} />
+<Meta title="Components/Select" />
 
 # Select
 
-<div className="lead">
+<p className="lead">
   Customize the native <code>&lt;select&gt;</code> with CSS that changes the element’s initial
   appearance.
-</div>
+</p>
 
 Custom `<select>` menus need only the class `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`’s initial appearance and cannot modify the `<option>` elements due to browser limitations.
 
-<Canvas of={SelectStories.Default} />
+<Canvas>
+  <Story id="components-select--default" />
+</Canvas>
 <div className="hide-col-default">
-  <Controls of={SelectStories.Default} />
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/forms.scss';
 @use '@swisspost/design-system-styles/components/form-select.scss';
@@ -48,7 +49,9 @@ The following examples show the different characteristics of the component. Thes
 Wrap a pair of `<select>` and `<label>` elements in a `.form-floating` container to enable floating labels.<br/>
 But note that the `<select>` must come first, so we can ensure the correct styles.
 
-<Canvas of={SelectStories.FloatingLabel} />
+<Canvas>
+  <Story id="components-select--floating-label" />
+</Canvas>
 
 ### Sizing
 
@@ -64,11 +67,15 @@ The size can be adjusted, by simply adding one of the following four classes:
   <code>.form-floating</code> container.
 </div>
 
-<Canvas of={SelectStories.Size} />
+<Canvas>
+  <Story id="components-select--size" />
+</Canvas>
 
 ### Validation
 
 Simply add the classes `is-valid` or `is-invalid` to the `<select>` element to show it in the expected state.<br/>
 When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `select` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas of={SelectStories.Validation} />
+<Canvas>
+  <Story id="components-select--validation" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/select/select.stories.tsx b/packages/documentation-v6/src/stories/components/select/select.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/select/select.stories.tsx
rename to packages/documentation-v6/src/stories/components/select/select.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/switch/switch.docs.mdx b/packages/documentation-v6/src/stories/components/switch/switch.docs.mdx
similarity index 80%
rename from packages/documentation-v7/src/stories/components/switch/switch.docs.mdx
rename to packages/documentation-v6/src/stories/components/switch/switch.docs.mdx
index da53f79512..40b19e0989 100644
--- a/packages/documentation-v7/src/stories/components/switch/switch.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/switch/switch.docs.mdx
@@ -1,33 +1,34 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as switchStories from './switch.stories';
+import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
 
-<Meta of={switchStories} />
+<Meta title="Components/Switch" />
 
 # Switch
 
-<div className="lead">
+<p className="lead">
   A switch has the markup of a custom <code>&lt;input type="checkbox"/&gt;</code> but uses the{' '}
   <code>.form-switch</code> class to render a toggle switch.
-</div>
+</p>
 
 Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular `checkbox` as a fallback. Switches also support the `disabled` attribute.
 
-<Canvas of={switchStories.Default} />
-<div className="hide-col-default">
-  <Controls of={switchStories.Default} />
+<Canvas>
+  <Story id="components-switch--default" />
+</Canvas>
+<div class="hide-col-default">
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/form-check.scss';
 
@@ -45,11 +46,15 @@ Long labels can be used seamlessly and are automatically wrapped at the end of t
 You can also include inline elements into the label, such as `<a>`, `<strong>`, etc.<br/>
 However, make sure to always place multiline labels after the `checkbox`.
 
-<Canvas of={switchStories.MultilineLabels} />
+<Canvas>
+  <Story id="components-switch--multiline-labels" />
+</Canvas>
 
 ### Validation
 
 Simply add the classes `.is-valid` or `.is-invalid` to the `switch` element to show it in the expected state.<br/>
 When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `switch` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas of={switchStories.Validation} />
+<Canvas>
+  <Story id="components-switch--validation" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/switch/switch.stories.tsx b/packages/documentation-v6/src/stories/components/switch/switch.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/switch/switch.stories.tsx
rename to packages/documentation-v6/src/stories/components/switch/switch.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/table/table.docs.mdx b/packages/documentation-v6/src/stories/components/table/table.docs.mdx
similarity index 69%
rename from packages/documentation-v7/src/stories/components/table/table.docs.mdx
rename to packages/documentation-v6/src/stories/components/table/table.docs.mdx
index 19b54489d8..be1dbd16b0 100644
--- a/packages/documentation-v7/src/stories/components/table/table.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/table/table.docs.mdx
@@ -1,31 +1,30 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as TableStories from './table.stories';
-
-<Meta of={TableStories} />
+import { Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 
 # Table
 
-<div className="lead">
+<p className="lead">
   Customize the native <code>&lt;table&gt;</code> element with CSS that changes the element’s
   initial appearance.
-</div>
+</p>
 
-<Canvas of={TableStories.Default} />
+<Canvas>
+  <Story id="components-table--default" />
+</Canvas>
 <div className="hide-col-default">
-  <Controls of={TableStories.Default} />
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/table.scss';
 ```
@@ -36,4 +35,6 @@ To import only the styles required for this component:
 
 When buttons are placed in a table, be sure to use `alignment: middle`, respectively `<tbody class="align-middle">` to nicely align the content and the buttons.
 
-<Canvas of={TableStories.TableWithButtons} />
+<Canvas>
+  <Story id="components-table--table-with-buttons" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/table/table.stories.tsx b/packages/documentation-v6/src/stories/components/table/table.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/table/table.stories.tsx
rename to packages/documentation-v6/src/stories/components/table/table.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/textarea/textarea.docs.mdx b/packages/documentation-v6/src/stories/components/textarea/textarea.docs.mdx
similarity index 81%
rename from packages/documentation-v7/src/stories/components/textarea/textarea.docs.mdx
rename to packages/documentation-v6/src/stories/components/textarea/textarea.docs.mdx
index 93786e4869..710b3eb837 100644
--- a/packages/documentation-v7/src/stories/components/textarea/textarea.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/textarea/textarea.docs.mdx
@@ -1,33 +1,34 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as TextareaStories from './textarea.stories';
+import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
 
-<Meta of={TextareaStories} />
+<Meta title="Components/Textarea" />
 
 # Textarea
 
-<div className="lead">
+<p className="lead">
   Customize the native <code>&lt;textarea&gt;</code> with CSS that changes the element’s initial
   appearance.
-</div>
+</p>
 
 Custom textarea elements need only the class `.form-control` to trigger the custom styles.
 
-<Canvas of={TextareaStories.Default} />
+<Canvas>
+  <Story id="components-textarea--default" />
+</Canvas>
 <div className="hide-col-default">
-  <Controls of={TextareaStories.Default} />
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/forms.scss';
 
@@ -47,7 +48,9 @@ The following examples show the different characteristics of the component. Thes
 Wrap a pair of `<textarea>` and `<label>` elements in a `.form-floating` container to enable floating labels.<br/>
 But note that the `<textarea>` element must come first, so we can ensure the correct styles.
 
-<Canvas of={TextareaStories.FloatingLabel} />
+<Canvas>
+  <Story id="components-textarea--floating-label" />
+</Canvas>
 
 ### Sizing
 
@@ -60,17 +63,21 @@ The size can be changed by simply adding one of four classes:
 
 <div className="alert alert-info">
   <h4 className="alert-heading">Do not apply size classes on floating-label elements</h4>
-  <div className="mt-0">
+  <p className="mt-0">
     It is not intended to apply the size classes to <code>textarea</code> elements that are nested
     in a <code>.form-floating</code> container.
-  </div>
+  </p>
 </div>
 
-<Canvas of={TextareaStories.Size} />
+<Canvas>
+  <Story id="components-textarea--size" />
+</Canvas>
 
 ### Validation
 
 Simply add the classes `.is-valid` or `.is-invalid` to the `<textarea>` element to show it in the expected state.<br/>
 When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `textarea` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas of={TextareaStories.Validation} />
+<Canvas>
+  <Story id="components-textarea--validation" />
+</Canvas>
diff --git a/packages/documentation/src/stories/components/textarea/textarea.stories.tsx b/packages/documentation-v6/src/stories/components/textarea/textarea.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/textarea/textarea.stories.tsx
rename to packages/documentation-v6/src/stories/components/textarea/textarea.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/toast/toast.docs.mdx b/packages/documentation-v6/src/stories/components/toast/toast.docs.mdx
similarity index 86%
rename from packages/documentation-v7/src/stories/components/toast/toast.docs.mdx
rename to packages/documentation-v6/src/stories/components/toast/toast.docs.mdx
index b30f665c22..820596f02c 100644
--- a/packages/documentation-v7/src/stories/components/toast/toast.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/toast/toast.docs.mdx
@@ -1,35 +1,36 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
 import LinkTo from '@storybook/addon-links/react';
-import * as ToastStories from './toast.stories';
 
-<Meta of={ToastStories} />
+<Meta title="Components/Toast" />
 
 # Toast
 
-<div className="lead">
+<p className="lead">
   Push notifications to your visitors with a <code>.toast</code> element, a lightweight and easily
   customizable alert message.
-</div>
+</p>
 
 Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
 They are intended to be small interruptions to your visitors or users, and therefore should contain minimal, to-the-point, non-interactive content.
 
-<Canvas of={ToastStories.Default} />
+<Canvas>
+  <Story id="components-toast--default" />
+</Canvas>
 <div className="hide-col-default">
-  <Controls of={ToastStories.Default} />
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/toast.scss';
 ```
@@ -40,7 +41,9 @@ The following examples show the different characteristics of the component. Thes
 
 ### Auto Close
 
-<Canvas of={ToastStories.AutoClose} />
+<Canvas>
+  <Story id="components-toast--auto-close" />
+</Canvas>
 
 Toasts should be closed automatically after a while, because they usually overlay the regular content.
 Each change on the screen should remain for at least 3-6 seconds for the user to perceive it.
@@ -53,12 +56,13 @@ Last but not least, if the user moves the mouse or the focus to the `.toast` ele
 
 You can stack toasts by wrapping them in a `.toast-container`, which will vertically add some spacing.
 
-<Canvas of={ToastStories.Stacked} />
+<Canvas>
+  <Story id="components-toast--stacked" />
+</Canvas>
 
 ## Accessibility
 
-Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an `aria-live` region. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without the need to move the user’s focus or interrupt in any way. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what changed (which could lead to problems if you only update part of the toast’s content, or if you show the same toast content later in time). If the information is important in the process, e.g. for a list of errors in a form, then use the
-<LinkTo kind="components-alert" story="docs">alert component</LinkTo> instead of the toast.
+Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an `aria-live` region. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without the need to move the user’s focus or interrupt in any way. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what changed (which could lead to problems if you only update part of the toast’s content, or if you show the same toast content later in time). If the information is important in the process, e.g. for a list of errors in a form, then use the <LinkTo kind="components-alert-">alert component</LinkTo> instead of the toast.
 
 Note that the live region needs to be present in the markup before the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
 
diff --git a/packages/documentation/src/stories/components/toast/toast.stories.tsx b/packages/documentation-v6/src/stories/components/toast/toast.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/toast/toast.stories.tsx
rename to packages/documentation-v6/src/stories/components/toast/toast.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.docs.mdx b/packages/documentation-v6/src/stories/components/topic-teaser/topic-teaser.docs.mdx
similarity index 69%
rename from packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.docs.mdx
rename to packages/documentation-v6/src/stories/components/topic-teaser/topic-teaser.docs.mdx
index f9bd1d79cb..1365f8f22a 100644
--- a/packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.docs.mdx
+++ b/packages/documentation-v6/src/stories/components/topic-teaser/topic-teaser.docs.mdx
@@ -1,33 +1,34 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as TopicTeaserStories from './topic-teaser.stories';
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 
-<Meta of={TopicTeaserStories} />
+<Meta title="Components/Topic Teaser" />
 
 # Topic Teaser
 
-<div className="lead">
+<p className="lead">
   Topic Teaser provides a flexible and responsive content container with options to align the image,
   adding topic content and links as well as contextual background colors.
-</div>
+</p>
 
 If you use multiple topic teasers on one page, each topic teaser must have a different background.
 
-<Canvas of={TopicTeaserStories.Default}/>
+<Canvas>
+  <Story id="components-topic-teaser--default" />
+</Canvas>
 <div className="hide-col-default">
-  <Controls of={TopicTeaserStories.Default} />
+  <ArgsTable story="^" />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```scss
+```css dark
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/topic-teaser.scss';
 ```
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.tsx b/packages/documentation-v6/src/stories/components/topic-teaser/topic-teaser.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.tsx
rename to packages/documentation-v6/src/stories/components/topic-teaser/topic-teaser.stories.tsx
diff --git a/packages/documentation/src/stories/foundation/accessibility.stories.mdx b/packages/documentation-v6/src/stories/foundation/accessibility.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/foundation/accessibility.stories.mdx
rename to packages/documentation-v6/src/stories/foundation/accessibility.stories.mdx
diff --git a/packages/documentation/src/stories/foundation/color/color-swatch.tsx b/packages/documentation-v6/src/stories/foundation/color/color-swatch.tsx
similarity index 100%
rename from packages/documentation/src/stories/foundation/color/color-swatch.tsx
rename to packages/documentation-v6/src/stories/foundation/color/color-swatch.tsx
diff --git a/packages/documentation/src/stories/foundation/color/color.stories.mdx b/packages/documentation-v6/src/stories/foundation/color/color.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/foundation/color/color.stories.mdx
rename to packages/documentation-v6/src/stories/foundation/color/color.stories.mdx
diff --git a/packages/documentation-v7/src/stories/foundation/color/color.styles.scss b/packages/documentation-v6/src/stories/foundation/color/color.styles.scss
similarity index 56%
rename from packages/documentation-v7/src/stories/foundation/color/color.styles.scss
rename to packages/documentation-v6/src/stories/foundation/color/color.styles.scss
index c7c247477b..7c08e4f47d 100644
--- a/packages/documentation-v7/src/stories/foundation/color/color.styles.scss
+++ b/packages/documentation-v6/src/stories/foundation/color/color.styles.scss
@@ -1,5 +1,37 @@
 @use '@swisspost/design-system-styles/core' as post;
 
+:export {
+  brand_yellow: post.$yellow;
+  brand_white: post.$white;
+  brand_black: post.$black;
+
+  @each $color, $value in post.$post-grays {
+    gray_#{$color}: $value;
+  }
+
+  gray_light: post.$light;
+  gray_dark: post.$dark;
+
+  pagebackgrounds_gray-background-light: post.$gray-background-light;
+  pagebackgrounds_gray-background: post.$gray-background;
+
+  @each $color, $value in post.$contextual-colors {
+    contextual_#{$color}: $value;
+  }
+
+  @each $colorName, $value in post.$accent-colors {
+    @if (str-index($colorName, '-bright') == null) {
+      accent_dark_#{$colorName}: $value;
+    }
+  }
+
+  @each $colorName, $value in post.$accent-colors {
+    @if (str-index($colorName, '-bright')) {
+      accent_bright_#{$colorName}: $value;
+    }
+  }
+}
+
 .color-swatch__section {
   display: grid;
   grid-template-columns: minmax(max-content, 25%) 20% auto;
diff --git a/packages/documentation/src/stories/foundation/elevation/elevation-tile.tsx b/packages/documentation-v6/src/stories/foundation/elevation/elevation-tile.tsx
similarity index 100%
rename from packages/documentation/src/stories/foundation/elevation/elevation-tile.tsx
rename to packages/documentation-v6/src/stories/foundation/elevation/elevation-tile.tsx
diff --git a/packages/documentation/src/stories/foundation/elevation/elevation.stories.mdx b/packages/documentation-v6/src/stories/foundation/elevation/elevation.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/foundation/elevation/elevation.stories.mdx
rename to packages/documentation-v6/src/stories/foundation/elevation/elevation.stories.mdx
diff --git a/packages/documentation-v7/src/stories/foundation/elevation/elevation.styles.scss b/packages/documentation-v6/src/stories/foundation/elevation/elevation.styles.scss
similarity index 90%
rename from packages/documentation-v7/src/stories/foundation/elevation/elevation.styles.scss
rename to packages/documentation-v6/src/stories/foundation/elevation/elevation.styles.scss
index a825894c0b..c1e7e861fc 100644
--- a/packages/documentation-v7/src/stories/foundation/elevation/elevation.styles.scss
+++ b/packages/documentation-v6/src/stories/foundation/elevation/elevation.styles.scss
@@ -4,7 +4,6 @@
   display: flex;
   flex-wrap: wrap;
   gap: post.$size-big;
-  margin-block: post.$size-large post.$size-bigger-big;
 }
 
 .elevation-tile {
diff --git a/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx b/packages/documentation-v6/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
similarity index 89%
rename from packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
rename to packages/documentation-v6/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
index fbfe4c6a16..b1ba7e060b 100644
--- a/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
+++ b/packages/documentation-v6/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
@@ -3,6 +3,7 @@ import { parse } from '../../../../utils/sass-export';
 import scss from './breakpoints.module.scss';
 
 export const SCSS_VARIABLES = parse(scss);
+export const BreakpointCount = () => <span>{Object.keys(SCSS_VARIABLES.breakpoint).length}</span>;
 
 export const BreakpointTable = (props: { name: string; value: string }) => (
   <table className="table table-sm table-striped table-bordered">
diff --git a/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.module.scss b/packages/documentation-v6/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
rename to packages/documentation-v6/src/stories/foundation/layout/breakpoints/breakpoints.module.scss
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.mdx b/packages/documentation-v6/src/stories/foundation/layout/breakpoints/breakpoints.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.mdx
rename to packages/documentation-v6/src/stories/foundation/layout/breakpoints/breakpoints.stories.mdx
diff --git a/packages/documentation/src/stories/foundation/layout/layout.stories.mdx b/packages/documentation-v6/src/stories/foundation/layout/layout.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/foundation/layout/layout.stories.mdx
rename to packages/documentation-v6/src/stories/foundation/layout/layout.stories.mdx
diff --git a/packages/documentation/src/stories/foundation/typography/typography.components.scss b/packages/documentation-v6/src/stories/foundation/typography/typography.components.scss
similarity index 100%
rename from packages/documentation/src/stories/foundation/typography/typography.components.scss
rename to packages/documentation-v6/src/stories/foundation/typography/typography.components.scss
diff --git a/packages/documentation/src/stories/foundation/typography/typography.components.tsx b/packages/documentation-v6/src/stories/foundation/typography/typography.components.tsx
similarity index 100%
rename from packages/documentation/src/stories/foundation/typography/typography.components.tsx
rename to packages/documentation-v6/src/stories/foundation/typography/typography.components.tsx
diff --git a/packages/documentation/src/stories/foundation/typography/typography.stories.mdx b/packages/documentation-v6/src/stories/foundation/typography/typography.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/foundation/typography/typography.stories.mdx
rename to packages/documentation-v6/src/stories/foundation/typography/typography.stories.mdx
diff --git a/packages/documentation/src/stories/getting-started/components.stories.mdx b/packages/documentation-v6/src/stories/getting-started/components.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/getting-started/components.stories.mdx
rename to packages/documentation-v6/src/stories/getting-started/components.stories.mdx
diff --git a/packages/documentation/src/stories/getting-started/styles.stories.mdx b/packages/documentation-v6/src/stories/getting-started/styles.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/getting-started/styles.stories.mdx
rename to packages/documentation-v6/src/stories/getting-started/styles.stories.mdx
diff --git a/packages/documentation/src/stories/home.components.tsx b/packages/documentation-v6/src/stories/home.components.tsx
similarity index 100%
rename from packages/documentation/src/stories/home.components.tsx
rename to packages/documentation-v6/src/stories/home.components.tsx
diff --git a/packages/documentation/src/stories/home.stories.mdx b/packages/documentation-v6/src/stories/home.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/home.stories.mdx
rename to packages/documentation-v6/src/stories/home.stories.mdx
diff --git a/packages/documentation-v7/src/stories/home.styles.scss b/packages/documentation-v6/src/stories/home.styles.scss
similarity index 100%
rename from packages/documentation-v7/src/stories/home.styles.scss
rename to packages/documentation-v6/src/stories/home.styles.scss
diff --git a/packages/documentation-v6/src/stories/icons/components/icon.docs.mdx b/packages/documentation-v6/src/stories/icons/components/icon.docs.mdx
new file mode 100644
index 0000000000..5efb6ee409
--- /dev/null
+++ b/packages/documentation-v6/src/stories/icons/components/icon.docs.mdx
@@ -0,0 +1,84 @@
+import LinkTo from '@storybook/addon-links/react';
+import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+
+<Meta title="Icons/Components/Icon" />
+
+# Icon
+
+<p className="lead">
+  Our <code>&lt;post-icon&gt;</code> component renders SVGs, so it scales quickly and easily and can
+  be styled with CSS.
+</p>
+
+<Canvas dark>
+  <Story id="icons-components-icon--default" />
+</Canvas>
+<ArgsTable story="^" />
+
+### Color
+
+By default, icons inherit the current text color of their parent element.<br/>
+You can therefore colorize an icon using our <LinkTo kind="utilities-text" story="color">text color utilities</LinkTo> or by setting the CSS directly through a style attribute or self-defined classes.
+
+<Canvas dark withSource="open">
+  <Story id="icons-components-icon--color" />
+</Canvas>
+
+### Size
+
+Icons have a default `width` of `1em`, which means they will scale with the size of the current `font-size`. Therefore, you can manage the size of an icon using our <LinkTo kind="utilities-text" story="font-size">font-size utilities</LinkTo> or by setting the CSS directly through a style attribute or self-defined classes.
+
+<Canvas dark withSource="open">
+  <Story id="icons-components-icon--size" />
+</Canvas>
+
+### Style
+
+With the use of our [border](#TODO), [background](/?path=/docs/utilities-background--background-containers) and [padding](#TODO) utilities, you can create various styling effects.
+
+<Canvas dark withSource="open">
+  <Story id="icons-components-icon--style" />
+</Canvas>
+
+### Transformations
+
+#### Flipping
+
+Flip the icon horizontally and/or vertically with the `flip-h` and `flip-v` props.
+
+<Canvas dark withSource="open">
+  <Story id="icons-components-icon--flip" />
+</Canvas>
+
+#### Scaling
+
+Scale the icon by any positive factor via the `scale` prop. Note this changes the icon's visual size but not its physical font size. To illustrate this we have added a background color to the icons.
+
+<Canvas dark withSource="open">
+  <Story id="icons-components-icon--scale" />
+</Canvas>
+
+#### Rotating
+
+Rotate the icon by a number of degrees with the `rotate` prop. Positive values will rotate the icon clockwise, while negative values will rotate the icon counterclockwise.
+
+<Canvas dark withSource="open">
+  <Story id="icons-components-icon--rotate" />
+</Canvas>
+
+#### Animating
+
+The `post-icon` includes the following built-in animations for icons:
+
+- `cylon` slides the icon left and right
+- `cylon-vertical` slides the icon up and down
+- `spin` smoothly spins the icon clockwise
+- `spin-reverse` smoothly spins the icon counter-clockwise
+- `fade` fades the icon in and out
+- `throb` scales the icon in and out
+
+To use them, set the `animation` prop to one of the animation names above.
+
+<Canvas dark withSource="open">
+  <Story id="icons-components-icon--animate" />
+</Canvas>
diff --git a/packages/documentation/src/stories/icons/components/icon.stories.tsx b/packages/documentation-v6/src/stories/icons/components/icon.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/icons/components/icon.stories.tsx
rename to packages/documentation-v6/src/stories/icons/components/icon.stories.tsx
diff --git a/packages/documentation/src/stories/icons/getting-started.stories.mdx b/packages/documentation-v6/src/stories/icons/getting-started.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/icons/getting-started.stories.mdx
rename to packages/documentation-v6/src/stories/icons/getting-started.stories.mdx
diff --git a/packages/documentation/src/stories/icons/search-icons/search-icons.components.tsx b/packages/documentation-v6/src/stories/icons/search-icons/search-icons.components.tsx
similarity index 100%
rename from packages/documentation/src/stories/icons/search-icons/search-icons.components.tsx
rename to packages/documentation-v6/src/stories/icons/search-icons/search-icons.components.tsx
diff --git a/packages/documentation/src/stories/icons/search-icons/search-icons.stories.mdx b/packages/documentation-v6/src/stories/icons/search-icons/search-icons.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/icons/search-icons/search-icons.stories.mdx
rename to packages/documentation-v6/src/stories/icons/search-icons/search-icons.stories.mdx
diff --git a/packages/documentation-v7/src/stories/icons/search-icons/search-icons.styles.scss b/packages/documentation-v6/src/stories/icons/search-icons/search-icons.styles.scss
similarity index 100%
rename from packages/documentation-v7/src/stories/icons/search-icons/search-icons.styles.scss
rename to packages/documentation-v6/src/stories/icons/search-icons/search-icons.styles.scss
diff --git a/packages/documentation/src/stories/internet-header/components/breadcrumbs/internet-breadcrumbs.docs.mdx b/packages/documentation-v6/src/stories/internet-header/components/breadcrumbs/internet-breadcrumbs.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/internet-header/components/breadcrumbs/internet-breadcrumbs.docs.mdx
rename to packages/documentation-v6/src/stories/internet-header/components/breadcrumbs/internet-breadcrumbs.docs.mdx
diff --git a/packages/documentation/src/stories/internet-header/components/breadcrumbs/post-internet-breadcrumbs.stories.tsx b/packages/documentation-v6/src/stories/internet-header/components/breadcrumbs/post-internet-breadcrumbs.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/internet-header/components/breadcrumbs/post-internet-breadcrumbs.stories.tsx
rename to packages/documentation-v6/src/stories/internet-header/components/breadcrumbs/post-internet-breadcrumbs.stories.tsx
diff --git a/packages/documentation/src/stories/internet-header/components/footer/internet-footer.docs.mdx b/packages/documentation-v6/src/stories/internet-header/components/footer/internet-footer.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/internet-header/components/footer/internet-footer.docs.mdx
rename to packages/documentation-v6/src/stories/internet-header/components/footer/internet-footer.docs.mdx
diff --git a/packages/documentation/src/stories/internet-header/components/footer/post-internet-footer.stories.tsx b/packages/documentation-v6/src/stories/internet-header/components/footer/post-internet-footer.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/internet-header/components/footer/post-internet-footer.stories.tsx
rename to packages/documentation-v6/src/stories/internet-header/components/footer/post-internet-footer.stories.tsx
diff --git a/packages/documentation/src/stories/internet-header/components/header/internet-header.docs.mdx b/packages/documentation-v6/src/stories/internet-header/components/header/internet-header.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/internet-header/components/header/internet-header.docs.mdx
rename to packages/documentation-v6/src/stories/internet-header/components/header/internet-header.docs.mdx
diff --git a/packages/documentation/src/stories/internet-header/components/header/internet-header.styles.scss b/packages/documentation-v6/src/stories/internet-header/components/header/internet-header.styles.scss
similarity index 100%
rename from packages/documentation/src/stories/internet-header/components/header/internet-header.styles.scss
rename to packages/documentation-v6/src/stories/internet-header/components/header/internet-header.styles.scss
diff --git a/packages/documentation/src/stories/internet-header/components/header/post-internet-header.stories.tsx b/packages/documentation-v6/src/stories/internet-header/components/header/post-internet-header.stories.tsx
similarity index 100%
rename from packages/documentation/src/stories/internet-header/components/header/post-internet-header.stories.tsx
rename to packages/documentation-v6/src/stories/internet-header/components/header/post-internet-header.stories.tsx
diff --git a/packages/documentation/src/stories/internet-header/getting-started.stories.mdx b/packages/documentation-v6/src/stories/internet-header/getting-started.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/internet-header/getting-started.stories.mdx
rename to packages/documentation-v6/src/stories/internet-header/getting-started.stories.mdx
diff --git a/packages/documentation/src/stories/internet-header/migration-guide.stories.mdx b/packages/documentation-v6/src/stories/internet-header/migration-guide.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/internet-header/migration-guide.stories.mdx
rename to packages/documentation-v6/src/stories/internet-header/migration-guide.stories.mdx
diff --git a/packages/documentation/src/stories/intranet-header/getting-started.stories.mdx b/packages/documentation-v6/src/stories/intranet-header/getting-started.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/intranet-header/getting-started.stories.mdx
rename to packages/documentation-v6/src/stories/intranet-header/getting-started.stories.mdx
diff --git a/packages/documentation/src/stories/misc/changelog.stories.mdx b/packages/documentation-v6/src/stories/misc/changelog.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/misc/changelog.stories.mdx
rename to packages/documentation-v6/src/stories/misc/changelog.stories.mdx
diff --git a/packages/documentation/src/stories/misc/migration-guide.stories.mdx b/packages/documentation-v6/src/stories/misc/migration-guide.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/misc/migration-guide.stories.mdx
rename to packages/documentation-v6/src/stories/misc/migration-guide.stories.mdx
diff --git a/packages/documentation/src/stories/misc/versions.components.tsx b/packages/documentation-v6/src/stories/misc/versions.components.tsx
similarity index 100%
rename from packages/documentation/src/stories/misc/versions.components.tsx
rename to packages/documentation-v6/src/stories/misc/versions.components.tsx
diff --git a/packages/documentation/src/stories/misc/versions.stories.mdx b/packages/documentation-v6/src/stories/misc/versions.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/misc/versions.stories.mdx
rename to packages/documentation-v6/src/stories/misc/versions.stories.mdx
diff --git a/packages/documentation/src/stories/utilities/background/background.components.scss b/packages/documentation-v6/src/stories/utilities/background/background.components.scss
similarity index 100%
rename from packages/documentation/src/stories/utilities/background/background.components.scss
rename to packages/documentation-v6/src/stories/utilities/background/background.components.scss
diff --git a/packages/documentation/src/stories/utilities/background/background.components.tsx b/packages/documentation-v6/src/stories/utilities/background/background.components.tsx
similarity index 100%
rename from packages/documentation/src/stories/utilities/background/background.components.tsx
rename to packages/documentation-v6/src/stories/utilities/background/background.components.tsx
diff --git a/packages/documentation/src/stories/utilities/background/background.stories.mdx b/packages/documentation-v6/src/stories/utilities/background/background.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/utilities/background/background.stories.mdx
rename to packages/documentation-v6/src/stories/utilities/background/background.stories.mdx
diff --git a/packages/documentation-v7/src/utils/bombArgs.ts b/packages/documentation-v6/src/stories/utilities/bombArgs.ts
similarity index 100%
rename from packages/documentation-v7/src/utils/bombArgs.ts
rename to packages/documentation-v6/src/stories/utilities/bombArgs.ts
diff --git a/packages/documentation/src/stories/utilities/common/common.stories.mdx b/packages/documentation-v6/src/stories/utilities/common/common.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/utilities/common/common.stories.mdx
rename to packages/documentation-v6/src/stories/utilities/common/common.stories.mdx
diff --git a/packages/documentation/src/stories/utilities/filterArgs.ts b/packages/documentation-v6/src/stories/utilities/filterArgs.ts
similarity index 100%
rename from packages/documentation/src/stories/utilities/filterArgs.ts
rename to packages/documentation-v6/src/stories/utilities/filterArgs.ts
diff --git a/packages/documentation/src/stories/utilities/heading.stories.mdx b/packages/documentation-v6/src/stories/utilities/heading.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/utilities/heading.stories.mdx
rename to packages/documentation-v6/src/stories/utilities/heading.stories.mdx
diff --git a/packages/documentation/src/stories/utilities/list/list.stories.mdx b/packages/documentation-v6/src/stories/utilities/list/list.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/utilities/list/list.stories.mdx
rename to packages/documentation-v6/src/stories/utilities/list/list.stories.mdx
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.stories.mdx b/packages/documentation-v6/src/stories/utilities/sizing/sizing.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/utilities/sizing/sizing.stories.mdx
rename to packages/documentation-v6/src/stories/utilities/sizing/sizing.stories.mdx
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.stories.mdx b/packages/documentation-v6/src/stories/utilities/spacing/spacing.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/utilities/spacing/spacing.stories.mdx
rename to packages/documentation-v6/src/stories/utilities/spacing/spacing.stories.mdx
diff --git a/packages/documentation/src/stories/utilities/text/text.components.tsx b/packages/documentation-v6/src/stories/utilities/text/text.components.tsx
similarity index 100%
rename from packages/documentation/src/stories/utilities/text/text.components.tsx
rename to packages/documentation-v6/src/stories/utilities/text/text.components.tsx
diff --git a/packages/documentation/src/stories/utilities/text/text.export.scss b/packages/documentation-v6/src/stories/utilities/text/text.export.scss
similarity index 100%
rename from packages/documentation/src/stories/utilities/text/text.export.scss
rename to packages/documentation-v6/src/stories/utilities/text/text.export.scss
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.mdx b/packages/documentation-v6/src/stories/utilities/text/text.stories.mdx
similarity index 100%
rename from packages/documentation/src/stories/utilities/text/text.stories.mdx
rename to packages/documentation-v6/src/stories/utilities/text/text.stories.mdx
diff --git a/packages/documentation/src/types/component.d.ts b/packages/documentation-v6/src/types/component.d.ts
similarity index 100%
rename from packages/documentation/src/types/component.d.ts
rename to packages/documentation-v6/src/types/component.d.ts
diff --git a/packages/documentation/src/types/mdx.d.ts b/packages/documentation-v6/src/types/mdx.d.ts
similarity index 100%
rename from packages/documentation/src/types/mdx.d.ts
rename to packages/documentation-v6/src/types/mdx.d.ts
diff --git a/packages/documentation-v7/src/utils/component-properties.ts b/packages/documentation-v6/src/utils/component-properties.ts
similarity index 100%
rename from packages/documentation-v7/src/utils/component-properties.ts
rename to packages/documentation-v6/src/utils/component-properties.ts
diff --git a/packages/documentation-v7/src/utils/index.ts b/packages/documentation-v6/src/utils/index.ts
similarity index 56%
rename from packages/documentation-v7/src/utils/index.ts
rename to packages/documentation-v6/src/utils/index.ts
index 540d902d4f..9896cdaab2 100644
--- a/packages/documentation-v7/src/utils/index.ts
+++ b/packages/documentation-v6/src/utils/index.ts
@@ -1,2 +1 @@
 export * from './component-properties';
-export * from './map-classes';
diff --git a/packages/documentation-v7/src/utils/react.ts b/packages/documentation-v6/src/utils/react.ts
similarity index 100%
rename from packages/documentation-v7/src/utils/react.ts
rename to packages/documentation-v6/src/utils/react.ts
diff --git a/packages/documentation-v7/src/utils/sass-export.ts b/packages/documentation-v6/src/utils/sass-export.ts
similarity index 100%
rename from packages/documentation-v7/src/utils/sass-export.ts
rename to packages/documentation-v6/src/utils/sass-export.ts
diff --git a/packages/documentation/src/utils/tests/component-properties.spec.ts b/packages/documentation-v6/src/utils/tests/component-properties.spec.ts
similarity index 100%
rename from packages/documentation/src/utils/tests/component-properties.spec.ts
rename to packages/documentation-v6/src/utils/tests/component-properties.spec.ts
diff --git a/packages/documentation-v7/src/utils/units.ts b/packages/documentation-v6/src/utils/units.ts
similarity index 100%
rename from packages/documentation-v7/src/utils/units.ts
rename to packages/documentation-v6/src/utils/units.ts
diff --git a/packages/documentation-v7/src/utils/version.ts b/packages/documentation-v6/src/utils/version.ts
similarity index 100%
rename from packages/documentation-v7/src/utils/version.ts
rename to packages/documentation-v6/src/utils/version.ts
diff --git a/packages/documentation-v7/tsconfig.json b/packages/documentation-v6/tsconfig.json
similarity index 72%
rename from packages/documentation-v7/tsconfig.json
rename to packages/documentation-v6/tsconfig.json
index 0d50cad9f5..b2489ed514 100644
--- a/packages/documentation-v7/tsconfig.json
+++ b/packages/documentation-v6/tsconfig.json
@@ -3,9 +3,9 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": true,
+    "allowJs": false,
     "skipLibCheck": true,
-    "esModuleInterop": true,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
@@ -15,11 +15,6 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    ".storybook/**/*",
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules/**/*"
-  ]
+  "include": ["src"],
+  "exclude": ["node_modules"]
 }
diff --git a/packages/documentation-v7/.gitignore b/packages/documentation-v7/.gitignore
deleted file mode 100644
index 42f1d19593..0000000000
--- a/packages/documentation-v7/.gitignore
+++ /dev/null
@@ -1,5 +0,0 @@
-# Storybook specific
-storybook-static
-
-# Project specific
-public/manager
diff --git a/packages/documentation-v7/.storybook/preview-head.html b/packages/documentation-v7/.storybook/preview-head.html
deleted file mode 100644
index 70375e27c8..0000000000
--- a/packages/documentation-v7/.storybook/preview-head.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!--
-  Do whatever you can do in an normal html header.
-  Storybook will inject these tags into the preview iframe where your components render, not the Storybook application UI.
--->
-
-<!-- Documentation: https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 -->
-<link rel="icon" href="/favicon.ico" sizes="any" />
-<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-<link rel="manifest" href="/site.webmanifest" />
-
-<meta name="design-system-settings" data-post-icon-base="/post-icons" />
-
-<script>
-  window.global = window;
-</script>
\ No newline at end of file
diff --git a/packages/documentation-v7/cypress/e2e/home.cy.ts b/packages/documentation-v7/cypress/e2e/home.cy.ts
deleted file mode 100644
index 09e600950b..0000000000
--- a/packages/documentation-v7/cypress/e2e/home.cy.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-describe('home', () => {
-  before(() => {
-    cy.visit('/iframe.html?id=home--docs', { timeout: 5000 });
-  });
-
-  it.skip('should show the home page', () => {
-    cy.get('.docs-header h1').should('have.text', 'Swiss PostDesign System');
-  });
-});
diff --git a/packages/documentation-v7/cypress/tsconfig.json b/packages/documentation-v7/cypress/tsconfig.json
deleted file mode 100644
index 9c1ee6b9b7..0000000000
--- a/packages/documentation-v7/cypress/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "types": ["cypress", "@percy/cypress", "@swisspost/internet-header"]
-  },
-  "include": ["./**/*.ts", "./**/*.tsx"],
-  "exclude": []
-}
diff --git a/packages/documentation-v7/package.json b/packages/documentation-v7/package.json
deleted file mode 100644
index 97a51accf5..0000000000
--- a/packages/documentation-v7/package.json
+++ /dev/null
@@ -1,69 +0,0 @@
-{
-  "name": "@swisspost/design-system-documentation-v7",
-  "version": "1.1.2",
-  "description": "Swiss Post Design System Documentation.",
-  "author": "Swiss Post <oss@post.ch>",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/swisspost/design-system.git"
-  },
-  "homepage": "https://next.design-system.post.ch",
-  "bugs": {
-    "url": "https://github.com/swisspost/design-system/issues"
-  },
-  "main": "index.js",
-  "private": true,
-  "scripts": {
-    "prebuild:managerui": "sass --update --load-path=node_modules .storybook/styles/manager.scss public/manager/ui.css",
-    "start": "pnpm clean & pnpm prebuild:managerui --style=expanded & storybook dev -p 9200 --quiet --docs",
-    "start:headless": "pnpm clean & pnpm prebuild:managerui --style=expanded & storybook dev -p 9300 --quiet --no-open --docs",
-    "build": "pnpm clean & pnpm prebuild:managerui --style=compressed --no-source-map & storybook build --quiet --docs",
-    "clean": "rimraf storybook-static public/manager",
-    "e2e": "cypress run",
-    "e2e:watch": "cypress open",
-    "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js --record --key 0995e768-43ec-42bd-a127-ff944a2ad8c9"
-  },
-  "dependencies": {
-    "@swisspost/design-system-components": "workspace:1.3.10",
-    "@swisspost/design-system-components-react": "workspace:1.0.16",
-    "@swisspost/design-system-icons": "workspace:1.0.10",
-    "@swisspost/design-system-styles": "workspace:6.3.0",
-    "@swisspost/internet-header": "workspace:1.9.0",
-    "bootstrap": "5.3.1"
-  },
-  "devDependencies": {
-    "@geometricpanda/storybook-addon-badges": "1.1.1",
-    "@open-wc/lit-helpers": "0.6.0",
-    "@percy/cli": "1.26.3",
-    "@percy/cypress": "3.1.2",
-    "@pxtrn/storybook-addon-docs-stencil": "6.4.1",
-    "@storybook/addon-a11y": "7.2.3",
-    "@storybook/addon-designs": "7.0.4",
-    "@storybook/addon-essentials": "7.2.3",
-    "@storybook/addon-links": "7.2.3",
-    "@storybook/addons": "7.2.3",
-    "@storybook/blocks": "7.2.3",
-    "@storybook/components": "7.2.3",
-    "@storybook/manager-api": "7.2.3",
-    "@storybook/preview-api": "7.2.3",
-    "@storybook/testing-library": "0.2.0",
-    "@storybook/theming": "7.2.3",
-    "@storybook/web-components": "7.2.3",
-    "@storybook/web-components-vite": "7.2.3",
-    "@types/mdx": "2.0.6",
-    "@types/react": "18.2.20",
-    "@types/react-syntax-highlighter": "15.5.7",
-    "cypress": "12.17.3",
-    "lit": "2.8.0",
-    "lit-html": "2.8.0",
-    "prettier": "2.8.8",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-syntax-highlighter": "15.5.0",
-    "rimraf": "5.0.1",
-    "sass": "1.65.1",
-    "storybook": "7.2.3",
-    "typescript": "5.1.6"
-  }
-}
diff --git a/packages/documentation-v7/src/stories/components/badge/badge.docs.mdx b/packages/documentation-v7/src/stories/components/badge/badge.docs.mdx
deleted file mode 100644
index 92fb95f735..0000000000
--- a/packages/documentation-v7/src/stories/components/badge/badge.docs.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import * as badgeStories from './badge.stories';
-
-<Meta of={badgeStories} />
-
-# Badge
-
-<div className="lead">
-  Documentation and examples for badges, our small count and labeling component.
-</div>
-
-<Canvas of={badgeStories.Default} />
-<div className="hide-col-default">
-  <Controls of={badgeStories.Default} />
-</div>
-
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/badge.scss';
-```
-
-## Examples
-
-### Checkable
-
-Checkable badges are nothing more than personalized checkboxes.
-Therefore, you can handle then like standard checkboxes.
-
-<Canvas of={badgeStories.Checkable} />
-
-### Dismissible
-
-Dismissible badges include a close button, allowing users to easily clear them from the page.
-Because the close button does not have a visible text,
-it should always include a visually hidden label to ensure accessibility for assistive technology users.
-
-<Canvas of={badgeStories.Dismissible} />
diff --git a/packages/documentation-v7/src/stories/components/card/card.docs.mdx b/packages/documentation-v7/src/stories/components/card/card.docs.mdx
deleted file mode 100644
index 3a4283b0c3..0000000000
--- a/packages/documentation-v7/src/stories/components/card/card.docs.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import LinkTo from '@storybook/addon-links/react';
-import * as CardStories from './card.stories';
-
-<Meta of={CardStories} />
-
-# Card
-
-<div className="lead">
-  Cards provide a flexible and extensible content container with multiple variants and options.
-</div>
-
-Built with flexbox, they offer easy alignment and mix well with other components.
-
-They have no fixed width to start, so they’ll naturally fill the full width of its parent element.
-This is easily customizable using the grid for example,
-for more details read our <LinkTo kind="foundations-layout" story="docs">layout docs</LinkTo>.
-
-<Canvas of={CardStories.Default}/>
-<div className="hide-col-default">
-  <Controls of={CardStories.Default} />
-</div>
-
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```scss
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```scss
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/card.scss';
-```
-
-## Examples
-
-### Custom Content
-
-Cards support a wide variety of content, including images, text, links, and more.
-This applies to the body of the card as well as its header and footer.
-
-<Canvas of={CardStories.CustomContent} />
-
-### List Group
-
-Create lists of content in a card by simply using a flush list group in place of the card body.
-
-<Canvas of={CardStories.ListGroup} />
-
-### Card Group
-
-Use card groups to render cards as a single, attached element with equal width and height columns.
-
-<Canvas of={CardStories.CardGroup} />
-
-### Bad example
-
-<div className="alert alert-danger mb-3">
-  Never use text with a background image because you can't ensure it is readable by everyone for all languages and browser sizes.
-</div>
-
-<Canvas of={CardStories.BackgroundImage} />
diff --git a/packages/documentation-v7/src/stories/components/checkbox/checkbox.docs.mdx b/packages/documentation-v7/src/stories/components/checkbox/checkbox.docs.mdx
deleted file mode 100644
index f5bb6aed38..0000000000
--- a/packages/documentation-v7/src/stories/components/checkbox/checkbox.docs.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import LinkTo from '@storybook/addon-links/react';
-import * as checkboxStories from './checkbox.stories';
-
-<Meta of={checkboxStories} />
-
-# Checkbox
-
-<div className="lead">
-  Create consistent cross-browser and cross-device checkboxes with our completely custom checks component.
-</div>
-
-Our checkboxes use custom icons to indicate checked or indeterminate states.
-
-<Canvas of={checkboxStories.Default} />
-<div className="hide-col-default">
-  <Controls of={checkboxStories.Default} />
-</div>
-
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```css
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```css
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/form-check.scss';
-
-// required if you use validation feedbacks
-@use '@swisspost/design-system-styles/components/form-feedback.scss';
-```
-
-## Examples
-
-### Indeterminate
-
-A checkbox can only be **checked** or **unchecked**.
-However, visually, there is a third state: the checkbox can be displayed as **indeterminate**.
-
-Beware,
-the indeterminate state is only visual, behind the scenes the checkbox is always either checked or unchecked.
-In other words, the indeterminate state hides the actual state of the checkbox.
-
-A possible use case for this state could be a list of checkboxes with a master checkbox that toggles all others,
-such as in a folder/subfolder tree where only some subfolders are selected.
-For an example,
-visit [Accessible Web Designs indeterminate checkbox](http://www.barrierefreies-webdesign.de/knowhow/checkbox/indeterminate.html).
-
-The indeterminate state can only be set via JavaScript and is styled using the `:indeterminate` pseudo-class.
-
-```javascript
-document.querySelector('input[type="checkbox"]').indeterminate = true;
-```
-
-### Inline
-
-To show the checkboxes inline, just add the `.form-check-inline` class to each of the checkboxes.
-
-<div className="alert alert-info alert-md">
-  Don't forget to wrap your checkbox group in a `&lt;fieldset&gt;` that includes a `&lt;legend&gt;` element.
-  You can then visually hide the legend using the `.visually-hidden` class.
-
-  Read more about that topic in our
-  <LinkTo kind="foundations-accessibility" story="docs">accessibility docs</LinkTo>.
-</div>
-
-<Canvas of={checkboxStories.Inline} />
-
-### Validation
-
-To provide feedback to your users about the validation state of a checkbox,
-simply add a `.is-valid` or a `.is-invalid` classes to it.
-
-These classes control the display of corresponding feedback messages that should be placed under the input:
-`<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>`.
-
-<Canvas of={checkboxStories.Validation} />
diff --git a/packages/documentation-v7/src/stories/components/heading/heading.docs.mdx b/packages/documentation-v7/src/stories/components/heading/heading.docs.mdx
deleted file mode 100644
index 0f901b96d2..0000000000
--- a/packages/documentation-v7/src/stories/components/heading/heading.docs.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Meta, Canvas, Controls } from '@storybook/blocks';
-import LinkTo from '@storybook/addon-links/react';
-import * as HeadingStories from './heading.stories';
-
-<Meta of={HeadingStories} />
-
-# Heading
-
-<div className="lead">
-  Use headings to structure content both visually and semantically.
-</div>
-
-All HTML headings are available, from `h1` the highest section level to `h6` the lowest.<br/>
-If you need to match the font styling of a heading but cannot use the associated HTML element,
-check out <LinkTo kind="utilities-heading" story="docs">heading utilities</LinkTo>.
-
-<Canvas of={HeadingStories.Default} />
-<div className="hide-col-default">
-  <Controls of={HeadingStories.Default} />
-</div>
-
-## SCSS Imports
-
-To import all styles from the design-system-styles package:
-
-```css dark
-@use '@swisspost/design-system-styles/index.scss';
-```
-
-To import only the styles required for this component:
-
-```css dark
-@use '@swisspost/design-system-styles/basics.scss';
-@use '@swisspost/design-system-styles/components/type.scss';
-```
diff --git a/packages/documentation-v7/src/stories/components/input-group/input-group.docs.mdx b/packages/documentation-v7/src/stories/components/input-group/input-group.docs.mdx
deleted file mode 100644
index 35b0e92ee3..0000000000
--- a/packages/documentation-v7/src/stories/components/input-group/input-group.docs.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import * as InputGroupStories from './input-group.stories';
-
-<Meta of={InputGroupStories} />
-
-# Input Group
-
-<div className="alert alert-info">
-  <h2 className="alert-heading">TODO:</h2>
-  <p>Make them work in styles and document it afterwards</p>
-</div>
diff --git a/packages/documentation-v7/src/stories/icons/components/icon.docs.mdx b/packages/documentation-v7/src/stories/icons/components/icon.docs.mdx
deleted file mode 100644
index f005c21578..0000000000
--- a/packages/documentation-v7/src/stories/icons/components/icon.docs.mdx
+++ /dev/null
@@ -1,76 +0,0 @@
-import LinkTo from '@storybook/addon-links/react';
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as IconStories from './icon.stories';
-
-<Meta of={IconStories} />
-
-# Icon
-
-<div className="lead">
-  Our <code>&lt;post-icon&gt;</code> component renders SVGs, so it scales quickly and easily and can
-  be styled with CSS.
-</div>
-
-<Canvas of={IconStories.Default} />
-<Controls of={IconStories.Default} />
-
-### Color
-
-By default, icons inherit the current text color of their parent element.<br/>
-You can therefore colorize an icon using our
-<LinkTo kind="utilities-text" story="docs">text color utilities</LinkTo>
-or by setting the CSS directly through a style attribute or self-defined classes.
-
-<Canvas of={IconStories.Color} sourceState="shown" />
-
-### Size
-
-Icons have a default `width` of `1em`, which means they will scale with the size of the current `font-size`.
-Therefore, you can manage the size of an icon using our
-<LinkTo kind="utilities-text" story="docs">font-size utilities</LinkTo>
-or by setting the CSS directly through a style attribute or self-defined classes.
-
-<Canvas of={IconStories.Size} sourceState="shown" />
-
-### Style
-
-With the use of our [border](#TODO),
-<LinkTo kind="utilities-background" story="docs">background</LinkTo>
-and [padding](#TODO) utilities, you can create various styling effects.
-
-<Canvas of={IconStories.Style} sourceState="shown" />
-
-### Transformations
-
-#### Flipping
-
-Flip the icon horizontally and/or vertically with the `flip-h` and `flip-v` props.
-
-<Canvas of={IconStories.Flip} sourceState="shown" />
-
-#### Scaling
-
-Scale the icon by any positive factor via the `scale` prop. Note this changes the icon's visual size but not its physical font size. To illustrate this we have added a background color to the icons.
-
-<Canvas of={IconStories.Scale} sourceState="shown" />
-
-#### Rotating
-
-Rotate the icon by a number of degrees with the `rotate` prop. Positive values will rotate the icon clockwise, while negative values will rotate the icon counterclockwise.
-
-<Canvas of={IconStories.Rotate} sourceState="shown" />
-
-#### Animating
-
-The `post-icon` includes the following built-in animations for icons:
-
-- `cylon` slides the icon left and right
-- `cylon-vertical` slides the icon up and down
-- `spin` smoothly spins the icon clockwise
-- `spin-reverse` smoothly spins the icon counter-clockwise
-- `fade` fades the icon in and out
-- `throb` scales the icon in and out
-
-To use them, set the `animation` prop to one of the animation names above.
-
-<Canvas of={IconStories.Animate} sourceState="shown" />
diff --git a/packages/documentation/.gitignore b/packages/documentation/.gitignore
index 1170adc2ad..42f1d19593 100644
--- a/packages/documentation/.gitignore
+++ b/packages/documentation/.gitignore
@@ -1,2 +1,5 @@
 # Storybook specific
-storybook-static
\ No newline at end of file
+storybook-static
+
+# Project specific
+public/manager
diff --git a/packages/documentation-v7/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx
similarity index 100%
rename from packages/documentation-v7/.storybook/blocks/footer.tsx
rename to packages/documentation/.storybook/blocks/footer.tsx
diff --git a/packages/documentation/.storybook/components/docs/header.tsx b/packages/documentation/.storybook/blocks/header.tsx
similarity index 100%
rename from packages/documentation/.storybook/components/docs/header.tsx
rename to packages/documentation/.storybook/blocks/header.tsx
diff --git a/packages/documentation-v7/.storybook/blocks/layout.tsx b/packages/documentation/.storybook/blocks/layout.tsx
similarity index 100%
rename from packages/documentation-v7/.storybook/blocks/layout.tsx
rename to packages/documentation/.storybook/blocks/layout.tsx
diff --git a/packages/documentation-v7/.storybook/constants.ts b/packages/documentation/.storybook/constants.ts
similarity index 100%
rename from packages/documentation-v7/.storybook/constants.ts
rename to packages/documentation/.storybook/constants.ts
diff --git a/packages/documentation-v7/.storybook/helpers/bages-config.ts b/packages/documentation/.storybook/helpers/bages-config.ts
similarity index 100%
rename from packages/documentation-v7/.storybook/helpers/bages-config.ts
rename to packages/documentation/.storybook/helpers/bages-config.ts
diff --git a/packages/documentation-v7/.storybook/helpers/index.ts b/packages/documentation/.storybook/helpers/index.ts
similarity index 100%
rename from packages/documentation-v7/.storybook/helpers/index.ts
rename to packages/documentation/.storybook/helpers/index.ts
diff --git a/packages/documentation-v7/.storybook/helpers/prettier-options.ts b/packages/documentation/.storybook/helpers/prettier-options.ts
similarity index 100%
rename from packages/documentation-v7/.storybook/helpers/prettier-options.ts
rename to packages/documentation/.storybook/helpers/prettier-options.ts
diff --git a/packages/documentation-v7/.storybook/helpers/register-web-components.ts b/packages/documentation/.storybook/helpers/register-web-components.ts
similarity index 100%
rename from packages/documentation-v7/.storybook/helpers/register-web-components.ts
rename to packages/documentation/.storybook/helpers/register-web-components.ts
diff --git a/packages/documentation-v7/.storybook/helpers/reset-sb-styled-components.ts b/packages/documentation/.storybook/helpers/reset-sb-styled-components.ts
similarity index 100%
rename from packages/documentation-v7/.storybook/helpers/reset-sb-styled-components.ts
rename to packages/documentation/.storybook/helpers/reset-sb-styled-components.ts
diff --git a/packages/documentation-v7/.storybook/main.ts b/packages/documentation/.storybook/main.ts
similarity index 100%
rename from packages/documentation-v7/.storybook/main.ts
rename to packages/documentation/.storybook/main.ts
diff --git a/packages/documentation/.storybook/manager-head.html b/packages/documentation/.storybook/manager-head.html
index e32ede4869..4039470a3c 100644
--- a/packages/documentation/.storybook/manager-head.html
+++ b/packages/documentation/.storybook/manager-head.html
@@ -9,48 +9,26 @@
 <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 <link rel="manifest" href="/site.webmanifest" />
 
+<!-- customize the manager ui -->
+<link rel="stylesheet" href="/manager/ui.css" />
+
 <!-- customize the sidebar icons -->
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  data-chromatic="ignore"
-  style="position: absolute; width: 0px; height: 0px"
->
+<svg xmlns="http://www.w3.org/2000/svg" data-chromatic="ignore" style="position: absolute; width: 0px; height: 0px">
   <symbol id="icon--folder" viewBox="0 0 32 32">
-    <path
-      fill="currentColor"
-      stroke="currentColor"
-      stroke-width="1"
-      d="M28.667 8H14.934c-.533 0-.933-.133-1.2-.4l-2.933-2.8c-.533-.533-1.333-.8-2.133-.8H3.335c-1.067 0-2 .933-2 2v22h29.333V10c0-1.067-.933-2-2-2zm.666 18.667H2.666V6c0-.4.267-.667.667-.667h5.333c.533 0 .933.133 1.2.4l2.8 2.8c.667.533 1.467.8 2.267.8h13.733c.4 0 .667.267.667.667v16.667z"
-    />
+    <path fill="currentColor" stroke="currentColor" stroke-width="1"
+      d="M28.667 8H14.934c-.533 0-.933-.133-1.2-.4l-2.933-2.8c-.533-.533-1.333-.8-2.133-.8H3.335c-1.067 0-2 .933-2 2v22h29.333V10c0-1.067-.933-2-2-2zm.666 18.667H2.666V6c0-.4.267-.667.667-.667h5.333c.533 0 .933.133 1.2.4l2.8 2.8c.667.533 1.467.8 2.267.8h13.733c.4 0 .667.267.667.667v16.667z" />
   </symbol>
   <symbol id="icon--component" viewBox="0 0 32 32">
-    <path
-      fill="currentColor"
-      stroke="currentColor"
-      stroke-width="1"
-      d="M28 9.333V4.266c0-.8-.8-1.6-1.6-1.6h-5.067c-.667 0-1.2.267-1.733.667l-1.733 1.733c-.133.133-.4.267-.8.267H5.6c-.8 0-1.6.8-1.6 1.6v2.4H0v20h32v-20h-4zm-22.667-2.4c0-.133.133-.267.267-.267h11.467c.667 0 1.2-.267 1.733-.667l1.733-1.733c.267-.133.533-.267.8-.267h4.933c.267 0 .4.133.4.267v5.067H5.333v-2.4zM30.667 28H1.334V10.667h29.333V28z"
-    />
-    <path
-      fill="currentColor"
-      stroke="currentColor"
-      stroke-width="1"
-      d="M10.667 14.667h10.667V16H10.667v-1.333z"
-    />
+    <path fill="currentColor" stroke="currentColor" stroke-width="1"
+      d="M28 9.333V4.266c0-.8-.8-1.6-1.6-1.6h-5.067c-.667 0-1.2.267-1.733.667l-1.733 1.733c-.133.133-.4.267-.8.267H5.6c-.8 0-1.6.8-1.6 1.6v2.4H0v20h32v-20h-4zm-22.667-2.4c0-.133.133-.267.267-.267h11.467c.667 0 1.2-.267 1.733-.667l1.733-1.733c.267-.133.533-.267.8-.267h4.933c.267 0 .4.133.4.267v5.067H5.333v-2.4zM30.667 28H1.334V10.667h29.333V28z" />
+    <path fill="currentColor" stroke="currentColor" stroke-width="1" d="M10.667 14.667h10.667V16H10.667v-1.333z" />
   </symbol>
   <symbol id="icon--document" viewBox="0 0 32 32">
-    <path
-      fill="currentColor"
-      stroke="currentColor"
-      stroke-width="1"
-      d="M5.333 2.667v26.666H20l6.667-6.666v-20H5.333zM20.667 26.78v-3.554h3.554l-3.554 3.554zm4.666-4.888h-6V28H6.667V4h18.666v17.893zM22.667 8.667H9.333V7.333h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334z"
-    />
+    <path fill="currentColor" stroke="currentColor" stroke-width="1"
+      d="M5.333 2.667v26.666H20l6.667-6.666v-20H5.333zM20.667 26.78v-3.554h3.554l-3.554 3.554zm4.666-4.888h-6V28H6.667V4h18.666v17.893zM22.667 8.667H9.333V7.333h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334zm0 4H9.333v-1.334h13.334v1.334z" />
   </symbol>
   <symbol id="icon--bookmarkhollow" viewBox="0 0 32 32">
-    <path
-      fill="currentColor"
-      stroke="currentColor"
-      stroke-width="1"
-      d="M20.9 1.3H4.6c-1.1 0-2 .9-2 2v16l4.098-3.21v.338H6.7V30.6H28V8.4l-7.1-7.1zm.4 6.6V3.6l2.2 2.2L25.7 8h-4.4v-.1zM4.6 2.7h8.1c.3 0 .6.3.6.6v13.3l-3.8-3-.8-.6-.8.6-3.8 3V3.3c-.1-.3.2-.6.5-.6zm22.1 26.7H8V15.2l-.001.001v-.13L8.6 14.6l6 4.7v-16c0-.2 0-.4-.1-.6H20v6.6h6.7v20.1z"
-    />
+    <path fill="currentColor" stroke="currentColor" stroke-width="1"
+      d="M20.9 1.3H4.6c-1.1 0-2 .9-2 2v16l4.098-3.21v.338H6.7V30.6H28V8.4l-7.1-7.1zm.4 6.6V3.6l2.2 2.2L25.7 8h-4.4v-.1zM4.6 2.7h8.1c.3 0 .6.3.6.6v13.3l-3.8-3-.8-.6-.8.6-3.8 3V3.3c-.1-.3.2-.6.5-.6zm22.1 26.7H8V15.2l-.001.001v-.13L8.6 14.6l6 4.7v-16c0-.2 0-.4-.1-.6H20v6.6h6.7v20.1z" />
   </symbol>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/packages/documentation-v7/.storybook/manager.ts b/packages/documentation/.storybook/manager.ts
similarity index 100%
rename from packages/documentation-v7/.storybook/manager.ts
rename to packages/documentation/.storybook/manager.ts
diff --git a/packages/documentation/.storybook/preview-head.html b/packages/documentation/.storybook/preview-head.html
index 14cad7d838..70375e27c8 100644
--- a/packages/documentation/.storybook/preview-head.html
+++ b/packages/documentation/.storybook/preview-head.html
@@ -3,9 +3,14 @@
   Storybook will inject these tags into the preview iframe where your components render, not the Storybook application UI.
 -->
 
-<link rel="icon" type="image/x-icon" href="favicon.ico" />
+<!-- Documentation: https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 -->
+<link rel="icon" href="/favicon.ico" sizes="any" />
+<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+<link rel="manifest" href="/site.webmanifest" />
+
 <meta name="design-system-settings" data-post-icon-base="/post-icons" />
 
 <script>
   window.global = window;
-</script>
+</script>
\ No newline at end of file
diff --git a/packages/documentation-v7/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
similarity index 100%
rename from packages/documentation-v7/.storybook/preview.ts
rename to packages/documentation/.storybook/preview.ts
diff --git a/packages/documentation-v7/.storybook/styles/layout.scss b/packages/documentation/.storybook/styles/layout.scss
similarity index 100%
rename from packages/documentation-v7/.storybook/styles/layout.scss
rename to packages/documentation/.storybook/styles/layout.scss
diff --git a/packages/documentation-v7/.storybook/styles/manager.scss b/packages/documentation/.storybook/styles/manager.scss
similarity index 100%
rename from packages/documentation-v7/.storybook/styles/manager.scss
rename to packages/documentation/.storybook/styles/manager.scss
diff --git a/packages/documentation-v7/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
similarity index 100%
rename from packages/documentation-v7/.storybook/styles/preview.scss
rename to packages/documentation/.storybook/styles/preview.scss
diff --git a/packages/documentation-v7/.storybook/styles/themes.ts b/packages/documentation/.storybook/styles/themes.ts
similarity index 100%
rename from packages/documentation-v7/.storybook/styles/themes.ts
rename to packages/documentation/.storybook/styles/themes.ts
diff --git a/packages/documentation/CHANGELOG.md b/packages/documentation/CHANGELOG.md
index 4cb442fb83..75eb2ee7e5 100644
--- a/packages/documentation/CHANGELOG.md
+++ b/packages/documentation/CHANGELOG.md
@@ -1,10 +1,6 @@
-# @swisspost/design-system-documentation
+# @swisspost/design-system-documentation-v7
 
-## 1.12.0
-
-### Minor Changes
-
-- Added a gray notification variant for cookie banners. (by [@alizedebray](https://github.com/alizedebray) with [#1350](https://github.com/swisspost/design-system/pull/1350))
+## 1.1.2
 
 ### Patch Changes
 
@@ -15,14 +11,18 @@
   - @swisspost/design-system-components@1.3.10
   - @swisspost/design-system-components-react@1.0.16
 
-## 1.11.3
+## 1.1.1
 
 ### Patch Changes
 
 - Updated dependencies:
   - @swisspost/internet-header@1.8.3
 
-## 1.11.2
+## 1.1.0
+
+### Minor Changes
+
+- Created a storybook v7 package, set up with vite and lit. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#1613](https://github.com/swisspost/design-system/pull/1613))
 
 ### Patch Changes
 
@@ -33,17 +33,6 @@
   - @swisspost/design-system-components@1.3.9
   - @swisspost/design-system-components-react@1.0.15
 
-## 1.11.1
-
-### Patch Changes
-
-- Updated dependencies:
-  - @swisspost/design-system-icons@1.0.8
-  - @swisspost/design-system-styles@6.2.5
-  - @swisspost/design-system-components@1.3.8
-  - @swisspost/internet-header@1.8.1
-  - @swisspost/design-system-components-react@1.0.14
-
 ## 1.11.0
 
 ### Minor Changes
diff --git a/packages/documentation/CONTRIBUTING.md b/packages/documentation/CONTRIBUTING.md
index 0b8db9a6ae..1942a3d4a0 100644
--- a/packages/documentation/CONTRIBUTING.md
+++ b/packages/documentation/CONTRIBUTING.md
@@ -1,4 +1,4 @@
-# Contributing to Design System Documentation
+# Contributing to Design System Documentation-V7
 
 These contribution guidelines extend the [general contribution guidelines](../../CONTRIBUTING.md), where you can find instructions on how to set up the repository for contributing.
 
diff --git a/packages/documentation/README.md b/packages/documentation/README.md
index 5cb3dd8ea0..8629e89522 100644
--- a/packages/documentation/README.md
+++ b/packages/documentation/README.md
@@ -1,13 +1,14 @@
-# Swiss Post Design System Documentation
+# Swiss Post Design System Documentation-V7
 
-![Swiss Post Design System splash screen](https://github.com/swisspost/design-system/assets/1659006/e84f1fea-e666-4853-8c85-726a6bf22e6c)
+![Swiss Post Design System splash screen](https://user-images.githubusercontent.com/1659006/187683368-d3aa2534-84be-4580-846e-2cad3796b573.png)
 
 A Storybook Documentation for the Swiss Post Design System.
 
 Includes stories for the following packages:
-
 - [@swisspost/design-system-styles](https://www.npmjs.com/package/@swisspost/design-system-styles)
+- [@swisspost/internet-header](https://www.npmjs.com/package/@swisspost/internet-header)
 - [@swisspost/design-system-components](https://www.npmjs.com/package/@swisspost/design-system-components)
+- [@swisspost/design-system-icons](https://www.npmjs.com/package/@swisspost/design-system-icons)
 
 ## Documentation
 
diff --git a/packages/documentation/cypress/e2e/home.cy.ts b/packages/documentation/cypress/e2e/home.cy.ts
index 60246f2cb0..09e600950b 100644
--- a/packages/documentation/cypress/e2e/home.cy.ts
+++ b/packages/documentation/cypress/e2e/home.cy.ts
@@ -1,10 +1,9 @@
 describe('home', () => {
   before(() => {
-    cy.visitStorybook();
+    cy.visit('/iframe.html?id=home--docs', { timeout: 5000 });
   });
 
-  it('should show the home page', () => {
-    cy.loadStory('Home', 'Page');
+  it.skip('should show the home page', () => {
     cy.get('.docs-header h1').should('have.text', 'Swiss PostDesign System');
   });
 });
diff --git a/packages/documentation-v7/cypress/snapshots/components/alert.snapshot.ts b/packages/documentation/cypress/snapshots/components/alert.snapshot.ts
similarity index 100%
rename from packages/documentation-v7/cypress/snapshots/components/alert.snapshot.ts
rename to packages/documentation/cypress/snapshots/components/alert.snapshot.ts
diff --git a/packages/documentation-v7/cypress/snapshots/components/blockquote.snapshot.ts b/packages/documentation/cypress/snapshots/components/blockquote.snapshot.ts
similarity index 100%
rename from packages/documentation-v7/cypress/snapshots/components/blockquote.snapshot.ts
rename to packages/documentation/cypress/snapshots/components/blockquote.snapshot.ts
diff --git a/packages/documentation-v7/cypress/snapshots/components/button.snapshot.ts b/packages/documentation/cypress/snapshots/components/button.snapshot.ts
similarity index 100%
rename from packages/documentation-v7/cypress/snapshots/components/button.snapshot.ts
rename to packages/documentation/cypress/snapshots/components/button.snapshot.ts
diff --git a/packages/documentation-v7/cypress/snapshots/components/card.snapshot.ts b/packages/documentation/cypress/snapshots/components/card.snapshot.ts
similarity index 100%
rename from packages/documentation-v7/cypress/snapshots/components/card.snapshot.ts
rename to packages/documentation/cypress/snapshots/components/card.snapshot.ts
diff --git a/packages/documentation/cypress/snapshots/components/collapsible.snapshot.ts b/packages/documentation/cypress/snapshots/components/collapsible.snapshot.ts
index 2e70ecdfba..d72ea712f2 100644
--- a/packages/documentation/cypress/snapshots/components/collapsible.snapshot.ts
+++ b/packages/documentation/cypress/snapshots/components/collapsible.snapshot.ts
@@ -1,6 +1,6 @@
 describe('Collapsible', () => {
   it('default', () => {
-    cy.visit('/iframe.html?id=components-collapsible--default');
+    cy.visit('/iframe.html?id=snapshots--collapsible');
     cy.get('post-collapsible.hydrated').should('be.visible');
     cy.percySnapshot('Collapsible');
   });
diff --git a/packages/documentation-v7/cypress/snapshots/components/headings.snapshot.ts b/packages/documentation/cypress/snapshots/components/headings.snapshot.ts
similarity index 100%
rename from packages/documentation-v7/cypress/snapshots/components/headings.snapshot.ts
rename to packages/documentation/cypress/snapshots/components/headings.snapshot.ts
diff --git a/packages/documentation-v7/cypress/snapshots/components/select.snapshot.ts b/packages/documentation/cypress/snapshots/components/select.snapshot.ts
similarity index 100%
rename from packages/documentation-v7/cypress/snapshots/components/select.snapshot.ts
rename to packages/documentation/cypress/snapshots/components/select.snapshot.ts
diff --git a/packages/documentation/cypress/support/e2e.ts b/packages/documentation/cypress/support/e2e.ts
index c2b4b1647f..0d0cd18178 100644
--- a/packages/documentation/cypress/support/e2e.ts
+++ b/packages/documentation/cypress/support/e2e.ts
@@ -15,8 +15,6 @@
 
 // Import commands.js using ES2015 syntax:
 import '@percy/cypress';
-import 'cypress-storybook/cypress';
-import 'cypress-each';
 import './commands';
 
 // https://docs.cypress.io/api/events/catalog-of-events#Uncaught-Exceptions
diff --git a/packages/documentation/cypress/tsconfig.json b/packages/documentation/cypress/tsconfig.json
index 322238f7e6..9c1ee6b9b7 100644
--- a/packages/documentation/cypress/tsconfig.json
+++ b/packages/documentation/cypress/tsconfig.json
@@ -2,13 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "noEmit": true,
-    "types": [
-      "cypress",
-      "cypress-each",
-      "@percy/cypress",
-      "@swisspost/internet-header",
-      "cypress-storybook/cypress"
-    ]
+    "types": ["cypress", "@percy/cypress", "@swisspost/internet-header"]
   },
   "include": ["./**/*.ts", "./**/*.tsx"],
   "exclude": []
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index 9f0032fc7c..84c09be7fe 100644
--- a/packages/documentation/package.json
+++ b/packages/documentation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-documentation",
-  "version": "1.12.0",
+  "version": "1.1.2",
   "description": "Swiss Post Design System Documentation.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -8,16 +8,18 @@
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
   },
-  "homepage": "https://swisspost-web-frontend.netlify.app",
+  "homepage": "https://next.design-system.post.ch",
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },
   "main": "index.js",
   "private": true,
   "scripts": {
-    "start": "start-storybook -p 9200 --quiet",
-    "start:headless": "start-storybook -p 9300 --quiet --no-open",
-    "build": "build-storybook --quiet",
+    "prebuild:managerui": "sass --update --load-path=node_modules .storybook/styles/manager.scss public/manager/ui.css",
+    "start": "pnpm clean & pnpm prebuild:managerui --style=expanded & storybook dev -p 9200 --quiet --docs",
+    "start:headless": "pnpm clean & pnpm prebuild:managerui --style=expanded & storybook dev -p 9300 --quiet --no-open --docs",
+    "build": "pnpm clean & pnpm prebuild:managerui --style=compressed --no-source-map & storybook build --quiet --docs",
+    "clean": "rimraf storybook-static public/manager",
     "e2e": "cypress run",
     "e2e:watch": "cypress open",
     "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js --record --key 0995e768-43ec-42bd-a127-ff944a2ad8c9"
@@ -28,43 +30,40 @@
     "@swisspost/design-system-icons": "workspace:1.0.10",
     "@swisspost/design-system-styles": "workspace:6.3.0",
     "@swisspost/internet-header": "workspace:1.9.0",
-    "html-react-parser": "4.2.1",
-    "prettier": "2.8.8",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-jsx-parser": "1.29.0"
+    "bootstrap": "5.3.1"
   },
   "devDependencies": {
-    "@babel/core": "7.22.10",
     "@geometricpanda/storybook-addon-badges": "1.1.1",
+    "@open-wc/lit-helpers": "0.6.0",
     "@percy/cli": "1.26.3",
     "@percy/cypress": "3.1.2",
     "@pxtrn/storybook-addon-docs-stencil": "6.4.1",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/client-api": "6.5.16",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.5.16",
+    "@storybook/addon-a11y": "7.2.3",
+    "@storybook/addon-designs": "7.0.4",
+    "@storybook/addon-essentials": "7.2.3",
+    "@storybook/addon-links": "7.2.3",
+    "@storybook/addons": "7.2.3",
+    "@storybook/blocks": "7.2.3",
+    "@storybook/components": "7.2.3",
+    "@storybook/manager-api": "7.2.3",
+    "@storybook/preview-api": "7.2.3",
     "@storybook/testing-library": "0.2.0",
-    "@storybook/theming": "6.5.16",
+    "@storybook/theming": "7.2.3",
+    "@storybook/web-components": "7.2.3",
+    "@storybook/web-components-vite": "7.2.3",
     "@types/mdx": "2.0.6",
     "@types/react": "18.2.20",
-    "@types/react-dom": "18.2.7",
-    "babel-loader": "9.1.3",
-    "css-loader": "5.2.7",
+    "@types/react-syntax-highlighter": "15.5.7",
     "cypress": "12.17.3",
-    "cypress-each": "1.13.3",
-    "cypress-storybook": "0.5.1",
-    "react-markdown": "8.0.7",
-    "rehype-raw": "6.1.1",
+    "lit": "2.8.0",
+    "lit-html": "2.8.0",
+    "prettier": "2.8.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-syntax-highlighter": "15.5.0",
+    "rimraf": "5.0.1",
     "sass": "1.65.1",
-    "sass-loader": "10.4.1",
-    "start-server-and-test": "2.0.0",
-    "storybook-dark-mode": "3.0.1",
-    "style-loader": "2.0.0",
-    "typescript": "4.9.5"
+    "storybook": "7.2.3",
+    "typescript": "5.1.6"
   }
 }
diff --git a/packages/documentation/public/assets/config/test-configuration.json b/packages/documentation/public/assets/config/test-configuration.json
index 3074106b97..fc32740863 100644
--- a/packages/documentation/public/assets/config/test-configuration.json
+++ b/packages/documentation/public/assets/config/test-configuration.json
@@ -1286,7 +1286,7 @@
                   "additionalAttributes": []
                 },
                 {
-                  "url": "https://www.youtube.com/swisspost",
+                  "url": "http://www.youtube.com/swisspost",
                   "icon": "8002_youtube",
                   "name": "Folgen Sie uns auf Youtube",
                   "target": "_blank",
@@ -1889,7 +1889,7 @@
                   "additionalAttributes": []
                 },
                 {
-                  "url": "https://www.youtube.com/swisspost",
+                  "url": "http://www.youtube.com/swisspost",
                   "icon": "8002_youtube",
                   "name": "Suivez-nous sur Youtube",
                   "target": "_blank",
@@ -2492,7 +2492,7 @@
                   "additionalAttributes": []
                 },
                 {
-                  "url": "https://www.youtube.com/swisspost",
+                  "url": "http://www.youtube.com/swisspost",
                   "icon": "8002_youtube",
                   "name": "Seguici su Youtube",
                   "target": "_blank",
@@ -3095,7 +3095,7 @@
                   "additionalAttributes": []
                 },
                 {
-                  "url": "https://www.youtube.com/swisspost",
+                  "url": "http://www.youtube.com/swisspost",
                   "icon": "8002_youtube",
                   "name": "Follow us on Youtube",
                   "target": "_blank",
diff --git a/packages/documentation/src/stories/components/alert/alert.docs.mdx b/packages/documentation/src/stories/components/alert/alert.docs.mdx
index 2cc50ba047..e037c041aa 100644
--- a/packages/documentation/src/stories/components/alert/alert.docs.mdx
+++ b/packages/documentation/src/stories/components/alert/alert.docs.mdx
@@ -1,31 +1,32 @@
-import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as AlertStories from './alert.stories';
 
-<Meta title="Components/Alert" />
+<Meta of={AlertStories} />
 
 # Alert
 
-Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.<br/>
+<div className="lead">
+  Provide contextual feedback messages for typical user actions with the handful of available and flexible alert
+  messages.
+</div>
+
 Alerts are available for any length of text, as well as an optional close button.
 By default, alerts are rendered with a contextually appropriate icon.
 
-<Canvas>
-  <Story id="components-alert--default" />
-</Canvas>
-<div className="hide-col-default">
-  <ArgsTable story="^" />
-</div>
+<Canvas of={AlertStories.Default} />
+<Controls of={AlertStories.Default} />
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/alert.scss';
 ```
@@ -38,9 +39,7 @@ The following examples show some of the different characteristics of the compone
 
 Alerts can also contain additional HTML elements like headings, paragraphs, lists, dividers, and more.
 
-<Canvas>
-  <Story id="components-alert--additional-content" />
-</Canvas>
+<Canvas of={AlertStories.AdditionalContent} />
 
 ### Dismissible
 
@@ -50,9 +49,13 @@ In the end, it's just a button with an `onClick()` event. As this is a CSS-only
 
 Dismiss buttons without text should always provide a `dismiss-label` prop, which defines the hidden text associated with the button.
 
-<Canvas withSource>
-  <Story id="components-alert--dismissible" />
-</Canvas>
+<Canvas of={AlertStories.Dismissible} />
+
+### Action Buttons
+
+To render an action alert with buttons, the alert element requires an additional class as well as additional HTML content. Thus, everything will be rendered as it should be.
+
+<Canvas of={AlertStories.ActionButtons} />
 
 ### Fixed
 
@@ -60,14 +63,4 @@ A fixed alert (at the bottom of the viewport) is obtained by adding the class `.
 As this is a CSS-only component, you have to define the logic to show/hide/toggle the alert yourself.
 Such an alert is normally also dismissible, so please notice the information for a dismissible alert as well.
 
-<Canvas>
-  <Story id="components-alert--fixed" />
-</Canvas>
-
-### Action Buttons
-
-To render an action alert with buttons, the alert element requires an additional class as well as additional HTML content. Thus, everything will be rendered as it should be.
-
-<Canvas>
-  <Story id="components-alert--action-buttons" />
-</Canvas>
+<Canvas of={AlertStories.Fixed} />
diff --git a/packages/documentation-v7/src/stories/components/alert/alert.snapshot.stories.ts b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/alert/alert.snapshot.stories.ts
rename to packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/alert/alert.stories.ts b/packages/documentation/src/stories/components/alert/alert.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/alert/alert.stories.ts
rename to packages/documentation/src/stories/components/alert/alert.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/alert/getAlertClasses.ts b/packages/documentation/src/stories/components/alert/getAlertClasses.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/alert/getAlertClasses.ts
rename to packages/documentation/src/stories/components/alert/getAlertClasses.ts
diff --git a/packages/documentation/src/stories/components/badge/badge.docs.mdx b/packages/documentation/src/stories/components/badge/badge.docs.mdx
index 64412788de..92fb95f735 100644
--- a/packages/documentation/src/stories/components/badge/badge.docs.mdx
+++ b/packages/documentation/src/stories/components/badge/badge.docs.mdx
@@ -1,52 +1,47 @@
-import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as badgeStories from './badge.stories';
 
-<Meta title="Components/Badge" />
+<Meta of={badgeStories} />
 
 # Badge
 
-<p className="lead">
+<div className="lead">
   Documentation and examples for badges, our small count and labeling component.
-</p>
+</div>
 
-<Canvas>
-  <Story id="components-badge--default" />
-</Canvas>
+<Canvas of={badgeStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={badgeStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/badge.scss';
 ```
 
-## Concrete Examples of Application
-
-The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.
+## Examples
 
 ### Checkable
 
-A checkable `.badge` is nothing else than a custom-checkbox. Therefore you can manipulate it like every default `checkbox` element.
+Checkable badges are nothing more than personalized checkboxes.
+Therefore, you can handle then like standard checkboxes.
 
-<Canvas>
-  <Story id="components-badge--checkable" />
-</Canvas>
+<Canvas of={badgeStories.Checkable} />
 
 ### Dismissible
 
-A dismissible `.badge` can be removed from the UI by the user, by clicking on the close button.
-Close buttons without text should always provide a `dismiss-label` prop, which defines the hidden text associated with the button.
+Dismissible badges include a close button, allowing users to easily clear them from the page.
+Because the close button does not have a visible text,
+it should always include a visually hidden label to ensure accessibility for assistive technology users.
 
-<Canvas>
-  <Story id="components-badge--dismissible" />
-</Canvas>
+<Canvas of={badgeStories.Dismissible} />
diff --git a/packages/documentation-v7/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/badge/badge.stories.ts
rename to packages/documentation/src/stories/components/badge/badge.stories.ts
diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx b/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx
index f0c165d1a6..7a32ef7d88 100644
--- a/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx
+++ b/packages/documentation/src/stories/components/blockquote/blockquote.docs.mdx
@@ -1,32 +1,32 @@
-import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as BlockquoteStories from './blockquote.stories.ts';
 
-<Meta title="Components/Blockquote" />
+<Meta of={BlockquoteStories} />
 
-# Badge
+# Blockquote
 
-<p className="lead">
-  For quoting blocks of content from another source within your document. Wrap &lt;blockquote
-  class="blockquote"&gt; around any HTML as the quote.
-</p>
+<div className="lead">
+  For quoting blocks of content from another source within your document. Wrap `<blockquote
+  class="blockquote">` around any HTML as the quote.
+</div>
+
+<Canvas of={BlockquoteStories.Default} />
 
-<Canvas>
-  <Story id="components-blockquote--default" />
-</Canvas>
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={BlockquoteStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/blockquote.scss';
 ```
@@ -39,6 +39,4 @@ The following examples show the different characteristics of the component. Thes
 
 To add simple quote characters around any nested text within your blockquote, you can wrap it with a <code>&lt;q&gt;</code> tag.
 
-<Canvas>
-  <Story id="components-blockquote--nested" />
-</Canvas>
+<Canvas of={BlockquoteStories.Nested} />
diff --git a/packages/documentation-v7/src/stories/components/blockquote/blockquote.snapshot.stories.ts b/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/blockquote/blockquote.snapshot.stories.ts
rename to packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/blockquote/blockquote.stories.ts b/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/blockquote/blockquote.stories.ts
rename to packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
diff --git a/packages/documentation/src/stories/components/button-group/button-group.docs.mdx b/packages/documentation/src/stories/components/button-group/button-group.docs.mdx
index c430b0fc2b..fce158e002 100644
--- a/packages/documentation/src/stories/components/button-group/button-group.docs.mdx
+++ b/packages/documentation/src/stories/components/button-group/button-group.docs.mdx
@@ -1,31 +1,30 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as ButtonGroupStories from './button-group.stories';
 
-<Meta title="Components/Button Group" />
+<Meta of={ButtonGroupStories} />
 
 # Button Group
 
-<p className="lead">
-  Group a series of buttons together on a single line or stack them in a vertical column.
-</p>
+<div className="lead">
+  Group a series of buttons together on a single line.
+</div>
 
-<Canvas>
-  <Story id="components-button-group--default" />
-</Canvas>
+<Canvas of={ButtonGroupStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={ButtonGroupStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/badge.scss';
 ```
@@ -39,16 +38,14 @@ The following examples show the different characteristics of the component. Thes
 You can change the size of buttons belonging to a group using button-sizing classes: `.btn-sm`, `.btn-rg` and `.btn-lg`.
 Just be sure to apply the same class to all buttons contained in the group.
 
-<Canvas>
-  <Story id="components-button-group--size" />
-</Canvas>
+<Canvas of={ButtonGroupStories.Sizing} />
 
 ### Checkbox & Radio
+
 Any HTML element that can be styled as a button can potentially be used in a button group.
 It is also possible to use checkable inputs:
+
 - Checkboxes: this allows all buttons in the group to be selected or deselected individually,
 - Radio buttons: in this case all the buttons are linked and only one of them can be selected at a time.
 
-<Canvas>
-  <Story id="components-button-group--checks" />
-</Canvas>
+<Canvas of={ButtonGroupStories.Checks} />
diff --git a/packages/documentation-v7/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/button-group/button-group.stories.ts
rename to packages/documentation/src/stories/components/button-group/button-group.stories.ts
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
index f32c4827c5..613d91d1ee 100644
--- a/packages/documentation/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -1,33 +1,32 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
+import * as ButtonStories from './button.stories';
 
-<Meta title="Components/Button" />
+<Meta of={ButtonStories} />
 
 # Button
 
-<p className="lead">
+<div className="lead">
   Use our custom button styles for actions in forms, dialogs, and more with support for multiple
   sizes, states, and more.
-</p>
+</div>
 
-<Canvas>
-  <Story id="components-button--default" />
-</Canvas>
+<Canvas of={ButtonStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={ButtonStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/button.scss';
 
@@ -41,26 +40,20 @@ The following examples show the different characteristics of the component. Thes
 
 ### Inverted
 
-Inverted buttons don't need special classes anymore, just use any of the <LinkTo kind="foundations-color">background classes</LinkTo> to set the background and you're done for the day.
+Inverted buttons don't need special classes anymore, just use any of the <LinkTo kind="utilities-background" story="docs">background classes</LinkTo> to set the background and you're done for the day.
 
-<Canvas>
-  <Story id="components-button--inverted" />
-</Canvas>
+<Canvas of={ButtonStories.Inverted} />
 
 ### Accent colors
 
 There are a number of accent colors that you can apply to buttons instead of the usual colors.
 
-<Canvas>
-  <Story id="components-button--accent-colors" />
-</Canvas>
+<Canvas of={ButtonStories.AccentColors} />
 
 ### Contextual colors
 
 Besides the usual and the accent button variations, there are also contextual button colors.
 
-<p className="alert alert-danger">These are only allowed for intranet applications!</p>
+<p className="alert alert-warning">These are only allowed for intranet applications!</p>
 
-<Canvas>
-  <Story id="components-button--contextual-colors" />
-</Canvas>
+<Canvas of={ButtonStories.ContextualColors} />
diff --git a/packages/documentation-v7/src/stories/components/button/button.snapshot.stories.ts b/packages/documentation/src/stories/components/button/button.snapshot.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/button/button.snapshot.stories.ts
rename to packages/documentation/src/stories/components/button/button.snapshot.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
similarity index 99%
rename from packages/documentation-v7/src/stories/components/button/button.stories.ts
rename to packages/documentation/src/stories/components/button/button.stories.ts
index afdb5e8df2..90cb4c0b6e 100644
--- a/packages/documentation-v7/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -251,7 +251,7 @@ function createProps(args: Args, isAnimated: boolean) {
     ]
       .filter(c => c && c !== 'null')
       .join(' '),
-    href: args.tag === 'a' ? 'javascript:void' : null,
+    href: args.tag === 'a' ? '#' : null,
     type: args.tag === 'input' ? args.type : null,
     value: args.tag === 'input' ? args.text : null,
     disabled: args.disabled ? args.disabled : null,
diff --git a/packages/documentation/src/stories/components/card/card.docs.mdx b/packages/documentation/src/stories/components/card/card.docs.mdx
index f2aff5a867..3a4283b0c3 100644
--- a/packages/documentation/src/stories/components/card/card.docs.mdx
+++ b/packages/documentation/src/stories/components/card/card.docs.mdx
@@ -1,85 +1,66 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import LinkTo from '@storybook/addon-links/react';
+import * as CardStories from './card.stories';
 
-<Meta title="Components/Card" />
+<Meta of={CardStories} />
 
 # Card
 
-<p className="lead">
+<div className="lead">
   Cards provide a flexible and extensible content container with multiple variants and options.
-</p>
+</div>
 
-A card is a flexible and extensible content container.<br/>
 Built with flexbox, they offer easy alignment and mix well with other components.
 
-Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.<br/>
-Use our <a href="#sizing" target="_self">sizing examples</a> to customize the size of a card.
-
-Last but not least, our card component is based on the <a href="https://getbootstrap.com/docs/5.1/components/card/" target="_blank">bootstrap card</a> component.<br/>
-Please also have a look at their documentation if you want to get more details or see even more examples.
+They have no fixed width to start, so they’ll naturally fill the full width of its parent element.
+This is easily customizable using the grid for example,
+for more details read our <LinkTo kind="foundations-layout" story="docs">layout docs</LinkTo>.
 
-<Canvas>
-  <Story id="components-card--default" />
-</Canvas>
+<Canvas of={CardStories.Default}/>
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={CardStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/card.scss';
 ```
 
-## Concrete Examples of Application
-
-The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.
-
-### List Groups
+## Examples
 
-Create lists of content in a card with a flush list group.<br/>
-Simply replace or complement the `.card-body` with a `.list-group` element.
+### Custom Content
 
-<Canvas>
-  <Story id="components-card--list-groups" />
-</Canvas>
+Cards support a wide variety of content, including images, text, links, and more.
+This applies to the body of the card as well as its header and footer.
 
-### Custom Content
+<Canvas of={CardStories.CustomContent} />
 
-Expect from the available space, there are no restrictions on what can be integrated into the `.card-header`, `.card-body`, `.list-group` and `.card-footer` elements.
+### List Group
 
-<Canvas>
-  <Story id="components-card--custom-content" />
-</Canvas>
+Create lists of content in a card by simply using a flush list group in place of the card body.
 
-### Groups
+<Canvas of={CardStories.ListGroup} />
 
-With the wrapper element `.card-group` you can group cards and adjust their height automatically line by line.
+### Card Group
 
-<Canvas>
-  <Story id="components-card--groups" />
-</Canvas>
+Use card groups to render cards as a single, attached element with equal width and height columns.
 
-### Image overlay
+<Canvas of={CardStories.CardGroup} />
 
-<div className="mb-3">
-  <Story id="components-card--image-overlay" />
-</div>
+### Bad example
 
 <div className="alert alert-danger mb-3">
-  <h4 className="h5">Bad Example</h4>
-  <p>
-    Don't do this at any time.
-    <br />
-    It's very difficult for content editors to always ensure that text is legible on an image for
-    every browser size and all different languages.
-  </p>
+  Never use text with a background image because you can't ensure it is readable by everyone for all languages and browser sizes.
 </div>
+
+<Canvas of={CardStories.BackgroundImage} />
diff --git a/packages/documentation-v7/src/stories/components/card/card.snapshot.stories.ts b/packages/documentation/src/stories/components/card/card.snapshot.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/card/card.snapshot.stories.ts
rename to packages/documentation/src/stories/components/card/card.snapshot.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/card/card.stories.ts b/packages/documentation/src/stories/components/card/card.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/card/card.stories.ts
rename to packages/documentation/src/stories/components/card/card.stories.ts
diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx b/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx
index 41bf4edd8a..f5bb6aed38 100644
--- a/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx
+++ b/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx
@@ -1,35 +1,33 @@
-import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
+import * as checkboxStories from './checkbox.stories';
 
-<Meta title="Components/Checkbox" />
+<Meta of={checkboxStories} />
 
 # Checkbox
 
-<p className="lead">
-  Customize the native <code>&lt;input type="checkbox"&gt;</code> with CSS that changes the
-  element’s initial appearance. Consistent, cross-browser and cross-device.
-</p>
+<div className="lead">
+  Create consistent cross-browser and cross-device checkboxes with our completely custom checks component.
+</div>
 
-Our checks use custom icons to indicate checked or indeterminate states.
+Our checkboxes use custom icons to indicate checked or indeterminate states.
 
-<Canvas>
-  <Story id="components-checkbox--default" />
-</Canvas>
+<Canvas of={checkboxStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={checkboxStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```css
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```css
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/form-check.scss';
 
@@ -37,46 +35,48 @@ To import only the styles required for this component:
 @use '@swisspost/design-system-styles/components/form-feedback.scss';
 ```
 
-## Concrete Examples of Application
-
-The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.
+## Examples
 
 ### Indeterminate
 
-Normally a checkbox input can only have two states: `checked` or `unchecked`. They can have any value, but they either submit that value (checked) or don't (unchecked) with a form submission.
+A checkbox can only be **checked** or **unchecked**.
+However, visually, there is a third state: the checkbox can be displayed as **indeterminate**.
+
+Beware,
+the indeterminate state is only visual, behind the scenes the checkbox is always either checked or unchecked.
+In other words, the indeterminate state hides the actual state of the checkbox.
 
-Visually, there are three states a checkbox can be in: `checked`, `unchecked`, or `indeterminate`.<br/>
-The `indeterminate` state is visual only. The checkbox is still either **checked** or **unchecked** as a value. That means the visual `indeterminate` state masks the real value of the checkbox. A possible use case for this state could be a list of checkboxes with one to toggle them all as in a folder/subfolder tree and only a part of the subfolders are selected. For an example visit [Accessible Web Designs indeterminate checkbox](http://www.barrierefreies-webdesign.de/knowhow/checkbox/indeterminate.html).
+A possible use case for this state could be a list of checkboxes with a master checkbox that toggles all others,
+such as in a folder/subfolder tree where only some subfolders are selected.
+For an example,
+visit [Accessible Web Designs indeterminate checkbox](http://www.barrierefreies-webdesign.de/knowhow/checkbox/indeterminate.html).
 
-A native `<input type="checkbox"/>` supports this `indeterminate` visual state which can only be set through JavaScript. It is then styled using the `:indeterminate` pseudo-class.
+The indeterminate state can only be set via JavaScript and is styled using the `:indeterminate` pseudo-class.
 
-```javascript dark
+```javascript
 document.querySelector('input[type="checkbox"]').indeterminate = true;
 ```
 
 ### Inline
 
-To render a checkbox inline, simply add the class `.form-check-inline` to the `.form-check` wrapper element.
+To show the checkboxes inline, just add the `.form-check-inline` class to each of the checkboxes.
 
 <div className="alert alert-info alert-md">
-  Remember to wrap your checkbox group with a <code>&lt;fieldset&gt;</code> including a{' '}
-  <code>&lt;legend&gt;</code> tag. This is the group label.
-  <br />
-  You can read more about that topic at our{' '}
-  <LinkTo kind="foundations-accessibility--page#grouping">grouping accessibility guide</LinkTo>.
-</div>
+  Don't forget to wrap your checkbox group in a `&lt;fieldset&gt;` that includes a `&lt;legend&gt;` element.
+  You can then visually hide the legend using the `.visually-hidden` class.
 
-To visually hide the `<legend>` element, use the `.visually-hidden` class.
+  Read more about that topic in our
+  <LinkTo kind="foundations-accessibility" story="docs">accessibility docs</LinkTo>.
+</div>
 
-<Canvas>
-  <Story id="components-checkbox--inline" />
-</Canvas>
+<Canvas of={checkboxStories.Inline} />
 
 ### Validation
 
-Simply add the classes `.is-valid` or `.is-invalid` to the `checkbox` element to show it in the expected state.<br/>
-When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the checkbox element to explain what went wrong. This enables the user to correct the mistake.
+To provide feedback to your users about the validation state of a checkbox,
+simply add a `.is-valid` or a `.is-invalid` classes to it.
+
+These classes control the display of corresponding feedback messages that should be placed under the input:
+`<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>`.
 
-<Canvas>
-  <Story id="components-checkbox--validation" />
-</Canvas>
+<Canvas of={checkboxStories.Validation} />
diff --git a/packages/documentation-v7/src/stories/components/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/checkbox/checkbox.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/checkbox/checkbox.stories.ts
rename to packages/documentation/src/stories/components/checkbox/checkbox.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/choice-card/checkbox-card.docs.mdx b/packages/documentation/src/stories/components/choice-card/checkbox-card.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/components/choice-card/checkbox-card.docs.mdx
rename to packages/documentation/src/stories/components/choice-card/checkbox-card.docs.mdx
diff --git a/packages/documentation-v7/src/stories/components/choice-card/checkbox-card.stories.ts b/packages/documentation/src/stories/components/choice-card/checkbox-card.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/choice-card/checkbox-card.stories.ts
rename to packages/documentation/src/stories/components/choice-card/checkbox-card.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/choice-card/choice-control.snapshot.stories.ts b/packages/documentation/src/stories/components/choice-card/choice-control.snapshot.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/choice-card/choice-control.snapshot.stories.ts
rename to packages/documentation/src/stories/components/choice-card/choice-control.snapshot.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/choice-card/choice-control.ts b/packages/documentation/src/stories/components/choice-card/choice-control.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/choice-card/choice-control.ts
rename to packages/documentation/src/stories/components/choice-card/choice-control.ts
diff --git a/packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.docs.mdx b/packages/documentation/src/stories/components/choice-card/radiobutton-card.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.docs.mdx
rename to packages/documentation/src/stories/components/choice-card/radiobutton-card.docs.mdx
diff --git a/packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.stories.ts b/packages/documentation/src/stories/components/choice-card/radiobutton-card.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/choice-card/radiobutton-card.stories.ts
rename to packages/documentation/src/stories/components/choice-card/radiobutton-card.stories.ts
diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx b/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx
index 6129004ef7..ee036ee7cb 100644
--- a/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx
+++ b/packages/documentation/src/stories/components/collapsible/collapsible.docs.mdx
@@ -1,6 +1,7 @@
-import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as CollapsibleStories from './collapsible.stories';
 
-<Meta title="Components/Collapsible" />
+<Meta of={CollapsibleStories} />
 
 # Collapsible
 
@@ -9,11 +10,8 @@ import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
 The `<post-collapsible>` component is used to show and hide content.
 Collapsing an element will animate the height from its current value to 0.
 
-<Canvas>
-  <Story id="components-collapsible--default" />
-</Canvas>
-
-<ArgsTable story="^" />
+<Canvas of={CollapsibleStories.Default} />
+<Controls of={CollapsibleStories.Default} />
 
 ## Examples
 
@@ -23,17 +21,13 @@ The following examples show different use cases for the `<post-collapsible>` com
 
 To make the collapsible content hidden by default, just use the `collapsible="true"` property.
 
-<Canvas>
-  <Story id="components-collapsible--initially-collapsed" />
-</Canvas>
+<Canvas of={CollapsibleStories.InitiallyCollapsed} />
 
 ### Heading Level
 
 Use the `heading-level` property to define the hierarchical level of the collapsible header within the structure of a document.
 
-<Canvas>
-  <Story id="components-collapsible--heading-level" />
-</Canvas>
+<Canvas of={CollapsibleStories.HeadingLevel} />
 
 ### Intricate Content
 
@@ -42,10 +36,7 @@ to allow any HTML content to be used as part of its header and body.<br/>
 By default, all children are appended to the component's body.
 For a specific child to be displayed in the header, a `slot="header"` attribute must be added.
 
-
-<Canvas withSource>
-  <Story id="components-collapsible--intricate-content" />
-</Canvas>
+<Canvas of={CollapsibleStories.IntricateContent} />
 
 ### Custom Trigger
 
@@ -53,7 +44,7 @@ The `<post-collapsible>` component exposes a `.toggle()` method that allows to t
 This method is asynchronous and returns a promise that resolves with the current open state.
 It optionally takes a boolean parameter that forces open when `true` or close when `false`.
 
-```typescript dark
+```typescript
 const collapsible = document.querySelector('#collapsibleId') as HTMLPostCollapsibleElement;
 collapsible.toggle(/* open: boolean */).then((/* isOpen: boolean */) => {});
 ```
@@ -66,6 +57,4 @@ Also make sure to add an `aria-expanded` attribute to the control element:
 if the collapsible element is closed, the attribute on the control element must have a value of `aria-expanded="false"`
 and `aria-expanded="true"` otherwise.
 
-<Canvas>
-  <Story id="components-collapsible--custom-trigger" />
-</Canvas>
+<Canvas of={CollapsibleStories.CustomTrigger} />
diff --git a/packages/documentation-v7/src/stories/components/collapsible/collapsible.snapshot.stories.tsx b/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.tsx
similarity index 100%
rename from packages/documentation-v7/src/stories/components/collapsible/collapsible.snapshot.stories.tsx
rename to packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.tsx
diff --git a/packages/documentation-v7/src/stories/components/collapsible/collapsible.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/collapsible/collapsible.stories.ts
rename to packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
diff --git a/packages/documentation/src/stories/components/heading/heading.docs.mdx b/packages/documentation/src/stories/components/heading/heading.docs.mdx
index 8cfa665fa1..0f901b96d2 100644
--- a/packages/documentation/src/stories/components/heading/heading.docs.mdx
+++ b/packages/documentation/src/stories/components/heading/heading.docs.mdx
@@ -1,22 +1,22 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
+import * as HeadingStories from './heading.stories';
 
-<Meta title="Components/Heading" />
+<Meta of={HeadingStories} />
 
-# Button
+# Heading
 
-<p className="lead">
-  Use our custom heading styles to create to display semantically correct and appealing headings.
-</p>
+<div className="lead">
+  Use headings to structure content both visually and semantically.
+</div>
 
-All HTML headings, `h1` through `h6`, are available.<br/>
-If you only want to make content appear like headings without using a semantic element, you should pay attention to our <LinkTo kind="utilities-heading">heading utilities</LinkTo>.
+All HTML headings are available, from `h1` the highest section level to `h6` the lowest.<br/>
+If you need to match the font styling of a heading but cannot use the associated HTML element,
+check out <LinkTo kind="utilities-heading" story="docs">heading utilities</LinkTo>.
 
-<Canvas>
-  <Story id="components-heading--default" />
-</Canvas>
+<Canvas of={HeadingStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={HeadingStories.Default} />
 </div>
 
 ## SCSS Imports
diff --git a/packages/documentation-v7/src/stories/components/heading/heading.snapshot.stories.ts b/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/heading/heading.snapshot.stories.ts
rename to packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/heading/heading.stories.ts b/packages/documentation/src/stories/components/heading/heading.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/heading/heading.stories.ts
rename to packages/documentation/src/stories/components/heading/heading.stories.ts
diff --git a/packages/documentation/src/stories/components/input-group/input-group.docs.mdx b/packages/documentation/src/stories/components/input-group/input-group.docs.mdx
index c2f74f5481..35b0e92ee3 100644
--- a/packages/documentation/src/stories/components/input-group/input-group.docs.mdx
+++ b/packages/documentation/src/stories/components/input-group/input-group.docs.mdx
@@ -1,6 +1,9 @@
-import { Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
+import * as InputGroupStories from './input-group.stories';
 
-# Input-Group
+<Meta of={InputGroupStories} />
+
+# Input Group
 
 <div className="alert alert-info">
   <h2 className="alert-heading">TODO:</h2>
diff --git a/packages/documentation-v7/src/stories/components/input-group/input-group.stories.ts b/packages/documentation/src/stories/components/input-group/input-group.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/input-group/input-group.stories.ts
rename to packages/documentation/src/stories/components/input-group/input-group.stories.ts
diff --git a/packages/documentation/src/stories/components/input/input.docs.mdx b/packages/documentation/src/stories/components/input/input.docs.mdx
index 48fb9a505a..f16f22f279 100644
--- a/packages/documentation/src/stories/components/input/input.docs.mdx
+++ b/packages/documentation/src/stories/components/input/input.docs.mdx
@@ -1,32 +1,33 @@
-import { Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as InputStories from './input.stories';
+
+<Meta of={InputStories} />
 
 # Text input
 
-<p className="lead">
+<div className="lead">
   Customize the native <code>&lt;input&gt;</code> with CSS that changes the element’s initial
   appearance.
-</p>
+</div>
 
 Custom input elements need only the class `.form-control` to trigger the custom styles.
 
-<Canvas>
-  <Story id="components-text-input--default" />
-</Canvas>
+<Canvas of={InputStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={InputStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/forms.scss';
 
@@ -46,9 +47,7 @@ The following examples show the different characteristics of the component. Thes
 Wrap a pair of `<input>` and `<label>` elements in a `.form-floating` container to enable floating labels.<br/>
 But note that the `<input>` element must come first, so we can ensure the correct styles.
 
-<Canvas>
-  <Story id="components-text-input--floating-label" />
-</Canvas>
+<Canvas of={InputStories.FloatingLabel} />
 
 ### Sizing
 
@@ -61,21 +60,17 @@ The size can be changed by simply adding one of four classes:
 
 <div className="alert alert-info">
   <h4 className="alert-heading">Do not apply size classes on floating-label elements</h4>
-  <p className="mt-0">
+  <div className="mt-0">
     It is not intended to apply the size classes to <code>input</code> elements that are nested in a{' '}
     <code>.form-floating</code> container.
-  </p>
+  </div>
 </div>
 
-<Canvas>
-  <Story id="components-text-input--size" />
-</Canvas>
+<Canvas of={InputStories.Size} />
 
 ### Validation
 
 Simply add the classes `.is-valid` or `.is-invalid` to the `<input>` element to show it in the expected state.<br/>
-When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `input` element to explain what went wrong. This enables the user to correct the mistake.
+When the component has been validated, don't forget to add a `<p class="valid-feedback">...</p>` or `<p class="invalid-feedback">...</p>` element after the `input` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas>
-  <Story id="components-text-input--validation" />
-</Canvas>
+<Canvas of={InputStories.Validation} />
diff --git a/packages/documentation-v7/src/stories/components/input/input.stories.ts b/packages/documentation/src/stories/components/input/input.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/input/input.stories.ts
rename to packages/documentation/src/stories/components/input/input.stories.ts
diff --git a/packages/documentation/src/stories/components/radio/radio.docs.mdx b/packages/documentation/src/stories/components/radio/radio.docs.mdx
index 8e1028d853..4bf20341dc 100644
--- a/packages/documentation/src/stories/components/radio/radio.docs.mdx
+++ b/packages/documentation/src/stories/components/radio/radio.docs.mdx
@@ -1,35 +1,34 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-<Meta title="Components/Radio" />
+import * as RadioStories from './radio.stories';
+
+<Meta of={RadioStories} />
 
 # Radio
 
-<p className="lead">
+<div className="lead">
   Customize the native <code>&lt;input type="radio"&gt;</code> with CSS that changes the element’s
   initial appearance. Consistent, cross-browser and cross-device.
-</p>
+</div>
 
 Our radios use custom icons to indicate checked states.
 
-<Canvas>
-  <Story id="components-radio-button--default" />
-</Canvas>
+<Canvas of={RadioStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={RadioStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/form-check.scss';
 
@@ -50,20 +49,16 @@ To render a radio inline, simply add the class `.form-check-inline` to the `.for
   <code>&lt;legend&gt;</code> tag. This provides a label for your radio group.
   <br />
   For more information, read our{' '}
-  <LinkTo kind="foundations-accessibility--page#grouping">grouping accessibility guide</LinkTo>.
+  <a href="/?path=/docs/foundations-accessibility--docs#grouping">grouping accessibility guide</a>.
 </div>
 
 To visually hide the `<legend>` element, use the `.visually-hidden` class.
 
-<Canvas>
-  <Story id="components-radio-button--inline" />
-</Canvas>
+<Canvas of={RadioStories.Inline} />
 
 ### Validation
 
 Simply add the classes `.is-valid` or `.is-invalid` to the `radio` element to show it in the expected state.<br/>
 When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `radio` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas>
-  <Story id="components-radio-button--validation" />
-</Canvas>
+<Canvas of={RadioStories.Validation} />
diff --git a/packages/documentation-v7/src/stories/components/radio/radio.stories.ts b/packages/documentation/src/stories/components/radio/radio.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/radio/radio.stories.ts
rename to packages/documentation/src/stories/components/radio/radio.stories.ts
diff --git a/packages/documentation/src/stories/components/range/range.docs.mdx b/packages/documentation/src/stories/components/range/range.docs.mdx
index ef571fd9d0..29ed32c1dd 100644
--- a/packages/documentation/src/stories/components/range/range.docs.mdx
+++ b/packages/documentation/src/stories/components/range/range.docs.mdx
@@ -1,34 +1,34 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-<Meta title="Components/Range" />
+import * as RangeStories from './range.stories';
+
+<Meta of={RangeStories} />
 
 # Range
 
-<p className="lead">
+<div className="lead">
   Use our custom <code>&lt;input type="range" /&gt;</code> for consistent cross-browser styling and
   built-in customization.
-</p>
+</div>
 
 Create custom `range` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers.
 
-<Canvas>
-  <Story id="components-range--default" />
-</Canvas>
+<Canvas of={RangeStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={RangeStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/form-range.scss';
 
@@ -45,15 +45,11 @@ The following examples show the different characteristics of the component. Thes
 Range inputs have implicit values for `min` and `max` (0 and 100 respectively), and snap to integer values by default.
 You may specify new values for those using the `min`, `max` and `step` attributes.
 
-<Canvas>
-  <Story id="components-range--boundaries" />
-</Canvas>
+<Canvas of={RangeStories.Boundaries} />
 
 ### Validation
 
 Simply add the classes `.is-valid` or `.is-invalid` to the `range` element to show it in the expected state.<br/>
-When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `range` element to explain what went wrong. This enables the user to correct the mistake.
+When the component has been validated, don't forget to add a `<p class="valid-feedback">...</p>` or `<p class="invalid-feedback">...</p>` element after the `range` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas>
-  <Story id="components-range--validation" />
-</Canvas>
+<Canvas of={RangeStories.Validation} />
diff --git a/packages/documentation-v7/src/stories/components/range/range.stories.ts b/packages/documentation/src/stories/components/range/range.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/range/range.stories.ts
rename to packages/documentation/src/stories/components/range/range.stories.ts
diff --git a/packages/documentation/src/stories/components/select/select.docs.mdx b/packages/documentation/src/stories/components/select/select.docs.mdx
index d7ff11ae85..ee4602e1e2 100644
--- a/packages/documentation/src/stories/components/select/select.docs.mdx
+++ b/packages/documentation/src/stories/components/select/select.docs.mdx
@@ -1,34 +1,33 @@
-import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as SelectStories from './select.stories';
 
-<Meta title="Components/Select" />
+<Meta of={SelectStories} />
 
 # Select
 
-<p className="lead">
+<div className="lead">
   Customize the native <code>&lt;select&gt;</code> with CSS that changes the element’s initial
   appearance.
-</p>
+</div>
 
 Custom `<select>` menus need only the class `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`’s initial appearance and cannot modify the `<option>` elements due to browser limitations.
 
-<Canvas>
-  <Story id="components-select--default" />
-</Canvas>
+<Canvas of={SelectStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={SelectStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/forms.scss';
 @use '@swisspost/design-system-styles/components/form-select.scss';
@@ -49,9 +48,7 @@ The following examples show the different characteristics of the component. Thes
 Wrap a pair of `<select>` and `<label>` elements in a `.form-floating` container to enable floating labels.<br/>
 But note that the `<select>` must come first, so we can ensure the correct styles.
 
-<Canvas>
-  <Story id="components-select--floating-label" />
-</Canvas>
+<Canvas of={SelectStories.FloatingLabel} />
 
 ### Sizing
 
@@ -67,15 +64,11 @@ The size can be adjusted, by simply adding one of the following four classes:
   <code>.form-floating</code> container.
 </div>
 
-<Canvas>
-  <Story id="components-select--size" />
-</Canvas>
+<Canvas of={SelectStories.Size} />
 
 ### Validation
 
 Simply add the classes `is-valid` or `is-invalid` to the `<select>` element to show it in the expected state.<br/>
 When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `select` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas>
-  <Story id="components-select--validation" />
-</Canvas>
+<Canvas of={SelectStories.Validation} />
diff --git a/packages/documentation-v7/src/stories/components/select/select.snapshot.stories.ts b/packages/documentation/src/stories/components/select/select.snapshot.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/select/select.snapshot.stories.ts
rename to packages/documentation/src/stories/components/select/select.snapshot.stories.ts
diff --git a/packages/documentation-v7/src/stories/components/select/select.stories.ts b/packages/documentation/src/stories/components/select/select.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/select/select.stories.ts
rename to packages/documentation/src/stories/components/select/select.stories.ts
diff --git a/packages/documentation/src/stories/components/switch/switch.docs.mdx b/packages/documentation/src/stories/components/switch/switch.docs.mdx
index 40b19e0989..da53f79512 100644
--- a/packages/documentation/src/stories/components/switch/switch.docs.mdx
+++ b/packages/documentation/src/stories/components/switch/switch.docs.mdx
@@ -1,34 +1,33 @@
-import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as switchStories from './switch.stories';
 
-<Meta title="Components/Switch" />
+<Meta of={switchStories} />
 
 # Switch
 
-<p className="lead">
+<div className="lead">
   A switch has the markup of a custom <code>&lt;input type="checkbox"/&gt;</code> but uses the{' '}
   <code>.form-switch</code> class to render a toggle switch.
-</p>
+</div>
 
 Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular `checkbox` as a fallback. Switches also support the `disabled` attribute.
 
-<Canvas>
-  <Story id="components-switch--default" />
-</Canvas>
-<div class="hide-col-default">
-  <ArgsTable story="^" />
+<Canvas of={switchStories.Default} />
+<div className="hide-col-default">
+  <Controls of={switchStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/form-check.scss';
 
@@ -46,15 +45,11 @@ Long labels can be used seamlessly and are automatically wrapped at the end of t
 You can also include inline elements into the label, such as `<a>`, `<strong>`, etc.<br/>
 However, make sure to always place multiline labels after the `checkbox`.
 
-<Canvas>
-  <Story id="components-switch--multiline-labels" />
-</Canvas>
+<Canvas of={switchStories.MultilineLabels} />
 
 ### Validation
 
 Simply add the classes `.is-valid` or `.is-invalid` to the `switch` element to show it in the expected state.<br/>
 When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `switch` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas>
-  <Story id="components-switch--validation" />
-</Canvas>
+<Canvas of={switchStories.Validation} />
diff --git a/packages/documentation-v7/src/stories/components/switch/switch.stories.ts b/packages/documentation/src/stories/components/switch/switch.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/switch/switch.stories.ts
rename to packages/documentation/src/stories/components/switch/switch.stories.ts
diff --git a/packages/documentation/src/stories/components/table/table.docs.mdx b/packages/documentation/src/stories/components/table/table.docs.mdx
index be1dbd16b0..19b54489d8 100644
--- a/packages/documentation/src/stories/components/table/table.docs.mdx
+++ b/packages/documentation/src/stories/components/table/table.docs.mdx
@@ -1,30 +1,31 @@
-import { Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as TableStories from './table.stories';
+
+<Meta of={TableStories} />
 
 # Table
 
-<p className="lead">
+<div className="lead">
   Customize the native <code>&lt;table&gt;</code> element with CSS that changes the element’s
   initial appearance.
-</p>
+</div>
 
-<Canvas>
-  <Story id="components-table--default" />
-</Canvas>
+<Canvas of={TableStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={TableStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/table.scss';
 ```
@@ -35,6 +36,4 @@ To import only the styles required for this component:
 
 When buttons are placed in a table, be sure to use `alignment: middle`, respectively `<tbody class="align-middle">` to nicely align the content and the buttons.
 
-<Canvas>
-  <Story id="components-table--table-with-buttons" />
-</Canvas>
+<Canvas of={TableStories.TableWithButtons} />
diff --git a/packages/documentation-v7/src/stories/components/table/table.stories.ts b/packages/documentation/src/stories/components/table/table.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/table/table.stories.ts
rename to packages/documentation/src/stories/components/table/table.stories.ts
diff --git a/packages/documentation/src/stories/components/textarea/textarea.docs.mdx b/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
index 710b3eb837..93786e4869 100644
--- a/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
+++ b/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
@@ -1,34 +1,33 @@
-import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as TextareaStories from './textarea.stories';
 
-<Meta title="Components/Textarea" />
+<Meta of={TextareaStories} />
 
 # Textarea
 
-<p className="lead">
+<div className="lead">
   Customize the native <code>&lt;textarea&gt;</code> with CSS that changes the element’s initial
   appearance.
-</p>
+</div>
 
 Custom textarea elements need only the class `.form-control` to trigger the custom styles.
 
-<Canvas>
-  <Story id="components-textarea--default" />
-</Canvas>
+<Canvas of={TextareaStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={TextareaStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/forms.scss';
 
@@ -48,9 +47,7 @@ The following examples show the different characteristics of the component. Thes
 Wrap a pair of `<textarea>` and `<label>` elements in a `.form-floating` container to enable floating labels.<br/>
 But note that the `<textarea>` element must come first, so we can ensure the correct styles.
 
-<Canvas>
-  <Story id="components-textarea--floating-label" />
-</Canvas>
+<Canvas of={TextareaStories.FloatingLabel} />
 
 ### Sizing
 
@@ -63,21 +60,17 @@ The size can be changed by simply adding one of four classes:
 
 <div className="alert alert-info">
   <h4 className="alert-heading">Do not apply size classes on floating-label elements</h4>
-  <p className="mt-0">
+  <div className="mt-0">
     It is not intended to apply the size classes to <code>textarea</code> elements that are nested
     in a <code>.form-floating</code> container.
-  </p>
+  </div>
 </div>
 
-<Canvas>
-  <Story id="components-textarea--size" />
-</Canvas>
+<Canvas of={TextareaStories.Size} />
 
 ### Validation
 
 Simply add the classes `.is-valid` or `.is-invalid` to the `<textarea>` element to show it in the expected state.<br/>
 When the component has been validated, don't forget to add a `<p className="valid-feedback">...</p>` or `<p className="invalid-feedback">...</p>` element after the `textarea` element to explain what went wrong. This enables the user to correct the mistake.
 
-<Canvas>
-  <Story id="components-textarea--validation" />
-</Canvas>
+<Canvas of={TextareaStories.Validation} />
diff --git a/packages/documentation-v7/src/stories/components/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/textarea/textarea.stories.ts
rename to packages/documentation/src/stories/components/textarea/textarea.stories.ts
diff --git a/packages/documentation/src/stories/components/toast/toast.docs.mdx b/packages/documentation/src/stories/components/toast/toast.docs.mdx
index 820596f02c..b30f665c22 100644
--- a/packages/documentation/src/stories/components/toast/toast.docs.mdx
+++ b/packages/documentation/src/stories/components/toast/toast.docs.mdx
@@ -1,36 +1,35 @@
-import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import LinkTo from '@storybook/addon-links/react';
+import * as ToastStories from './toast.stories';
 
-<Meta title="Components/Toast" />
+<Meta of={ToastStories} />
 
 # Toast
 
-<p className="lead">
+<div className="lead">
   Push notifications to your visitors with a <code>.toast</code> element, a lightweight and easily
   customizable alert message.
-</p>
+</div>
 
 Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
 They are intended to be small interruptions to your visitors or users, and therefore should contain minimal, to-the-point, non-interactive content.
 
-<Canvas>
-  <Story id="components-toast--default" />
-</Canvas>
+<Canvas of={ToastStories.Default} />
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={ToastStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/toast.scss';
 ```
@@ -41,9 +40,7 @@ The following examples show the different characteristics of the component. Thes
 
 ### Auto Close
 
-<Canvas>
-  <Story id="components-toast--auto-close" />
-</Canvas>
+<Canvas of={ToastStories.AutoClose} />
 
 Toasts should be closed automatically after a while, because they usually overlay the regular content.
 Each change on the screen should remain for at least 3-6 seconds for the user to perceive it.
@@ -56,13 +53,12 @@ Last but not least, if the user moves the mouse or the focus to the `.toast` ele
 
 You can stack toasts by wrapping them in a `.toast-container`, which will vertically add some spacing.
 
-<Canvas>
-  <Story id="components-toast--stacked" />
-</Canvas>
+<Canvas of={ToastStories.Stacked} />
 
 ## Accessibility
 
-Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an `aria-live` region. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without the need to move the user’s focus or interrupt in any way. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what changed (which could lead to problems if you only update part of the toast’s content, or if you show the same toast content later in time). If the information is important in the process, e.g. for a list of errors in a form, then use the <LinkTo kind="components-alert-">alert component</LinkTo> instead of the toast.
+Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an `aria-live` region. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without the need to move the user’s focus or interrupt in any way. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what changed (which could lead to problems if you only update part of the toast’s content, or if you show the same toast content later in time). If the information is important in the process, e.g. for a list of errors in a form, then use the
+<LinkTo kind="components-alert" story="docs">alert component</LinkTo> instead of the toast.
 
 Note that the live region needs to be present in the markup before the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
 
diff --git a/packages/documentation-v7/src/stories/components/toast/toast.stories.ts b/packages/documentation/src/stories/components/toast/toast.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/toast/toast.stories.ts
rename to packages/documentation/src/stories/components/toast/toast.stories.ts
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx
index 1365f8f22a..f9bd1d79cb 100644
--- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx
+++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.docs.mdx
@@ -1,34 +1,33 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as TopicTeaserStories from './topic-teaser.stories';
 
-<Meta title="Components/Topic Teaser" />
+<Meta of={TopicTeaserStories} />
 
 # Topic Teaser
 
-<p className="lead">
+<div className="lead">
   Topic Teaser provides a flexible and responsive content container with options to align the image,
   adding topic content and links as well as contextual background colors.
-</p>
+</div>
 
 If you use multiple topic teasers on one page, each topic teaser must have a different background.
 
-<Canvas>
-  <Story id="components-topic-teaser--default" />
-</Canvas>
+<Canvas of={TopicTeaserStories.Default}/>
 <div className="hide-col-default">
-  <ArgsTable story="^" />
+  <Controls of={TopicTeaserStories.Default} />
 </div>
 
 ## SCSS Imports
 
 To import all styles from the design-system-styles package:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/index.scss';
 ```
 
 To import only the styles required for this component:
 
-```css dark
+```scss
 @use '@swisspost/design-system-styles/basics.scss';
 @use '@swisspost/design-system-styles/components/topic-teaser.scss';
 ```
diff --git a/packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/components/topic-teaser/topic-teaser.stories.ts
rename to packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
diff --git a/packages/documentation-v7/src/stories/foundation/accessibility/accessibility.docs.mdx b/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/accessibility/accessibility.docs.mdx
rename to packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx
diff --git a/packages/documentation-v7/src/stories/foundation/accessibility/accessibility.stories.ts b/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/accessibility/accessibility.stories.ts
rename to packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
diff --git a/packages/documentation-v7/src/stories/foundation/color/color.blocks.tsx b/packages/documentation/src/stories/foundation/color/color.blocks.tsx
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/color/color.blocks.tsx
rename to packages/documentation/src/stories/foundation/color/color.blocks.tsx
diff --git a/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx b/packages/documentation/src/stories/foundation/color/color.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/color/color.docs.mdx
rename to packages/documentation/src/stories/foundation/color/color.docs.mdx
diff --git a/packages/documentation-v7/src/stories/foundation/color/color.module.scss b/packages/documentation/src/stories/foundation/color/color.module.scss
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/color/color.module.scss
rename to packages/documentation/src/stories/foundation/color/color.module.scss
diff --git a/packages/documentation-v7/src/stories/foundation/color/color.stories.ts b/packages/documentation/src/stories/foundation/color/color.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/color/color.stories.ts
rename to packages/documentation/src/stories/foundation/color/color.stories.ts
diff --git a/packages/documentation/src/stories/foundation/color/color.styles.scss b/packages/documentation/src/stories/foundation/color/color.styles.scss
index 7c08e4f47d..c7c247477b 100644
--- a/packages/documentation/src/stories/foundation/color/color.styles.scss
+++ b/packages/documentation/src/stories/foundation/color/color.styles.scss
@@ -1,37 +1,5 @@
 @use '@swisspost/design-system-styles/core' as post;
 
-:export {
-  brand_yellow: post.$yellow;
-  brand_white: post.$white;
-  brand_black: post.$black;
-
-  @each $color, $value in post.$post-grays {
-    gray_#{$color}: $value;
-  }
-
-  gray_light: post.$light;
-  gray_dark: post.$dark;
-
-  pagebackgrounds_gray-background-light: post.$gray-background-light;
-  pagebackgrounds_gray-background: post.$gray-background;
-
-  @each $color, $value in post.$contextual-colors {
-    contextual_#{$color}: $value;
-  }
-
-  @each $colorName, $value in post.$accent-colors {
-    @if (str-index($colorName, '-bright') == null) {
-      accent_dark_#{$colorName}: $value;
-    }
-  }
-
-  @each $colorName, $value in post.$accent-colors {
-    @if (str-index($colorName, '-bright')) {
-      accent_bright_#{$colorName}: $value;
-    }
-  }
-}
-
 .color-swatch__section {
   display: grid;
   grid-template-columns: minmax(max-content, 25%) 20% auto;
diff --git a/packages/documentation-v7/src/stories/foundation/elevation/elevation.blocks.tsx b/packages/documentation/src/stories/foundation/elevation/elevation.blocks.tsx
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/elevation/elevation.blocks.tsx
rename to packages/documentation/src/stories/foundation/elevation/elevation.blocks.tsx
diff --git a/packages/documentation-v7/src/stories/foundation/elevation/elevation.docs.mdx b/packages/documentation/src/stories/foundation/elevation/elevation.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/elevation/elevation.docs.mdx
rename to packages/documentation/src/stories/foundation/elevation/elevation.docs.mdx
diff --git a/packages/documentation-v7/src/stories/foundation/elevation/elevation.module.scss b/packages/documentation/src/stories/foundation/elevation/elevation.module.scss
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/elevation/elevation.module.scss
rename to packages/documentation/src/stories/foundation/elevation/elevation.module.scss
diff --git a/packages/documentation-v7/src/stories/foundation/elevation/elevation.stories.ts b/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/elevation/elevation.stories.ts
rename to packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
diff --git a/packages/documentation/src/stories/foundation/elevation/elevation.styles.scss b/packages/documentation/src/stories/foundation/elevation/elevation.styles.scss
index c1e7e861fc..a825894c0b 100644
--- a/packages/documentation/src/stories/foundation/elevation/elevation.styles.scss
+++ b/packages/documentation/src/stories/foundation/elevation/elevation.styles.scss
@@ -4,6 +4,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: post.$size-big;
+  margin-block: post.$size-large post.$size-bigger-big;
 }
 
 .elevation-tile {
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
index b1ba7e060b..fbfe4c6a16 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.blocks.tsx
@@ -3,7 +3,6 @@ import { parse } from '../../../../utils/sass-export';
 import scss from './breakpoints.module.scss';
 
 export const SCSS_VARIABLES = parse(scss);
-export const BreakpointCount = () => <span>{Object.keys(SCSS_VARIABLES.breakpoint).length}</span>;
 
 export const BreakpointTable = (props: { name: string; value: string }) => (
   <table className="table table-sm table-striped table-bordered">
diff --git a/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
rename to packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.docs.mdx
diff --git a/packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
rename to packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
diff --git a/packages/documentation-v7/src/stories/foundation/layout/layout.docs.mdx b/packages/documentation/src/stories/foundation/layout/layout.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/layout/layout.docs.mdx
rename to packages/documentation/src/stories/foundation/layout/layout.docs.mdx
diff --git a/packages/documentation-v7/src/stories/foundation/layout/layout.stories.ts b/packages/documentation/src/stories/foundation/layout/layout.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/layout/layout.stories.ts
rename to packages/documentation/src/stories/foundation/layout/layout.stories.ts
diff --git a/packages/documentation-v7/src/stories/foundation/typography/typography.blocks.tsx b/packages/documentation/src/stories/foundation/typography/typography.blocks.tsx
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/typography/typography.blocks.tsx
rename to packages/documentation/src/stories/foundation/typography/typography.blocks.tsx
diff --git a/packages/documentation-v7/src/stories/foundation/typography/typography.docs.mdx b/packages/documentation/src/stories/foundation/typography/typography.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/typography/typography.docs.mdx
rename to packages/documentation/src/stories/foundation/typography/typography.docs.mdx
diff --git a/packages/documentation-v7/src/stories/foundation/typography/typography.module.scss b/packages/documentation/src/stories/foundation/typography/typography.module.scss
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/typography/typography.module.scss
rename to packages/documentation/src/stories/foundation/typography/typography.module.scss
diff --git a/packages/documentation-v7/src/stories/foundation/typography/typography.stories.ts b/packages/documentation/src/stories/foundation/typography/typography.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/typography/typography.stories.ts
rename to packages/documentation/src/stories/foundation/typography/typography.stories.ts
diff --git a/packages/documentation-v7/src/stories/foundation/typography/typography.styles.scss b/packages/documentation/src/stories/foundation/typography/typography.styles.scss
similarity index 100%
rename from packages/documentation-v7/src/stories/foundation/typography/typography.styles.scss
rename to packages/documentation/src/stories/foundation/typography/typography.styles.scss
diff --git a/packages/documentation-v7/src/stories/getting-started/components/components.docs.mdx b/packages/documentation/src/stories/getting-started/components/components.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/getting-started/components/components.docs.mdx
rename to packages/documentation/src/stories/getting-started/components/components.docs.mdx
diff --git a/packages/documentation-v7/src/stories/getting-started/components/components.stories.ts b/packages/documentation/src/stories/getting-started/components/components.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/getting-started/components/components.stories.ts
rename to packages/documentation/src/stories/getting-started/components/components.stories.ts
diff --git a/packages/documentation-v7/src/stories/getting-started/styles/styles.docs.mdx b/packages/documentation/src/stories/getting-started/styles/styles.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/getting-started/styles/styles.docs.mdx
rename to packages/documentation/src/stories/getting-started/styles/styles.docs.mdx
diff --git a/packages/documentation-v7/src/stories/getting-started/styles/styles.stories.ts b/packages/documentation/src/stories/getting-started/styles/styles.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/getting-started/styles/styles.stories.ts
rename to packages/documentation/src/stories/getting-started/styles/styles.stories.ts
diff --git a/packages/documentation-v7/src/stories/home.blocks.tsx b/packages/documentation/src/stories/home.blocks.tsx
similarity index 100%
rename from packages/documentation-v7/src/stories/home.blocks.tsx
rename to packages/documentation/src/stories/home.blocks.tsx
diff --git a/packages/documentation-v7/src/stories/home.docs.mdx b/packages/documentation/src/stories/home.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/home.docs.mdx
rename to packages/documentation/src/stories/home.docs.mdx
diff --git a/packages/documentation/src/stories/icons/components/icon.docs.mdx b/packages/documentation/src/stories/icons/components/icon.docs.mdx
index 5efb6ee409..f005c21578 100644
--- a/packages/documentation/src/stories/icons/components/icon.docs.mdx
+++ b/packages/documentation/src/stories/icons/components/icon.docs.mdx
@@ -1,44 +1,44 @@
 import LinkTo from '@storybook/addon-links/react';
-import { Meta, Canvas, Story, Source, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as IconStories from './icon.stories';
 
-<Meta title="Icons/Components/Icon" />
+<Meta of={IconStories} />
 
 # Icon
 
-<p className="lead">
+<div className="lead">
   Our <code>&lt;post-icon&gt;</code> component renders SVGs, so it scales quickly and easily and can
   be styled with CSS.
-</p>
+</div>
 
-<Canvas dark>
-  <Story id="icons-components-icon--default" />
-</Canvas>
-<ArgsTable story="^" />
+<Canvas of={IconStories.Default} />
+<Controls of={IconStories.Default} />
 
 ### Color
 
 By default, icons inherit the current text color of their parent element.<br/>
-You can therefore colorize an icon using our <LinkTo kind="utilities-text" story="color">text color utilities</LinkTo> or by setting the CSS directly through a style attribute or self-defined classes.
+You can therefore colorize an icon using our
+<LinkTo kind="utilities-text" story="docs">text color utilities</LinkTo>
+or by setting the CSS directly through a style attribute or self-defined classes.
 
-<Canvas dark withSource="open">
-  <Story id="icons-components-icon--color" />
-</Canvas>
+<Canvas of={IconStories.Color} sourceState="shown" />
 
 ### Size
 
-Icons have a default `width` of `1em`, which means they will scale with the size of the current `font-size`. Therefore, you can manage the size of an icon using our <LinkTo kind="utilities-text" story="font-size">font-size utilities</LinkTo> or by setting the CSS directly through a style attribute or self-defined classes.
+Icons have a default `width` of `1em`, which means they will scale with the size of the current `font-size`.
+Therefore, you can manage the size of an icon using our
+<LinkTo kind="utilities-text" story="docs">font-size utilities</LinkTo>
+or by setting the CSS directly through a style attribute or self-defined classes.
 
-<Canvas dark withSource="open">
-  <Story id="icons-components-icon--size" />
-</Canvas>
+<Canvas of={IconStories.Size} sourceState="shown" />
 
 ### Style
 
-With the use of our [border](#TODO), [background](/?path=/docs/utilities-background--background-containers) and [padding](#TODO) utilities, you can create various styling effects.
+With the use of our [border](#TODO),
+<LinkTo kind="utilities-background" story="docs">background</LinkTo>
+and [padding](#TODO) utilities, you can create various styling effects.
 
-<Canvas dark withSource="open">
-  <Story id="icons-components-icon--style" />
-</Canvas>
+<Canvas of={IconStories.Style} sourceState="shown" />
 
 ### Transformations
 
@@ -46,25 +46,19 @@ With the use of our [border](#TODO), [background](/?path=/docs/utilities-backgro
 
 Flip the icon horizontally and/or vertically with the `flip-h` and `flip-v` props.
 
-<Canvas dark withSource="open">
-  <Story id="icons-components-icon--flip" />
-</Canvas>
+<Canvas of={IconStories.Flip} sourceState="shown" />
 
 #### Scaling
 
 Scale the icon by any positive factor via the `scale` prop. Note this changes the icon's visual size but not its physical font size. To illustrate this we have added a background color to the icons.
 
-<Canvas dark withSource="open">
-  <Story id="icons-components-icon--scale" />
-</Canvas>
+<Canvas of={IconStories.Scale} sourceState="shown" />
 
 #### Rotating
 
 Rotate the icon by a number of degrees with the `rotate` prop. Positive values will rotate the icon clockwise, while negative values will rotate the icon counterclockwise.
 
-<Canvas dark withSource="open">
-  <Story id="icons-components-icon--rotate" />
-</Canvas>
+<Canvas of={IconStories.Rotate} sourceState="shown" />
 
 #### Animating
 
@@ -79,6 +73,4 @@ The `post-icon` includes the following built-in animations for icons:
 
 To use them, set the `animation` prop to one of the animation names above.
 
-<Canvas dark withSource="open">
-  <Story id="icons-components-icon--animate" />
-</Canvas>
+<Canvas of={IconStories.Animate} sourceState="shown" />
diff --git a/packages/documentation-v7/src/stories/icons/components/icon.stories.ts b/packages/documentation/src/stories/icons/components/icon.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/icons/components/icon.stories.ts
rename to packages/documentation/src/stories/icons/components/icon.stories.ts
diff --git a/packages/documentation-v7/src/stories/icons/getting-started.docs.mdx b/packages/documentation/src/stories/icons/getting-started.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/icons/getting-started.docs.mdx
rename to packages/documentation/src/stories/icons/getting-started.docs.mdx
diff --git a/packages/documentation-v7/src/stories/icons/getting-started.stories.ts b/packages/documentation/src/stories/icons/getting-started.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/icons/getting-started.stories.ts
rename to packages/documentation/src/stories/icons/getting-started.stories.ts
diff --git a/packages/documentation-v7/src/stories/icons/search-icons/search-icons.blocks.tsx b/packages/documentation/src/stories/icons/search-icons/search-icons.blocks.tsx
similarity index 100%
rename from packages/documentation-v7/src/stories/icons/search-icons/search-icons.blocks.tsx
rename to packages/documentation/src/stories/icons/search-icons/search-icons.blocks.tsx
diff --git a/packages/documentation-v7/src/stories/icons/search-icons/search-icons.docs.mdx b/packages/documentation/src/stories/icons/search-icons/search-icons.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/icons/search-icons/search-icons.docs.mdx
rename to packages/documentation/src/stories/icons/search-icons/search-icons.docs.mdx
diff --git a/packages/documentation-v7/src/stories/internet-header/components/internet-header.docs.mdx b/packages/documentation/src/stories/internet-header/components/internet-header.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/internet-header/components/internet-header.docs.mdx
rename to packages/documentation/src/stories/internet-header/components/internet-header.docs.mdx
diff --git a/packages/documentation-v7/src/stories/internet-header/components/internet-header.stories.tsx b/packages/documentation/src/stories/internet-header/components/internet-header.stories.tsx
similarity index 100%
rename from packages/documentation-v7/src/stories/internet-header/components/internet-header.stories.tsx
rename to packages/documentation/src/stories/internet-header/components/internet-header.stories.tsx
diff --git a/packages/documentation-v7/src/stories/internet-header/components/internet-header.styles.scss b/packages/documentation/src/stories/internet-header/components/internet-header.styles.scss
similarity index 100%
rename from packages/documentation-v7/src/stories/internet-header/components/internet-header.styles.scss
rename to packages/documentation/src/stories/internet-header/components/internet-header.styles.scss
diff --git a/packages/documentation-v7/src/stories/internet-header/getting-started.docs.mdx b/packages/documentation/src/stories/internet-header/getting-started.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/internet-header/getting-started.docs.mdx
rename to packages/documentation/src/stories/internet-header/getting-started.docs.mdx
diff --git a/packages/documentation-v7/src/stories/internet-header/migration-guide.docs.mdx b/packages/documentation/src/stories/internet-header/migration-guide.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/internet-header/migration-guide.docs.mdx
rename to packages/documentation/src/stories/internet-header/migration-guide.docs.mdx
diff --git a/packages/documentation-v7/src/stories/intranet-header/intranet-header.docs.mdx b/packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/intranet-header/intranet-header.docs.mdx
rename to packages/documentation/src/stories/intranet-header/intranet-header.docs.mdx
diff --git a/packages/documentation-v7/src/stories/intranet-header/intranet-header.stories.ts b/packages/documentation/src/stories/intranet-header/intranet-header.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/intranet-header/intranet-header.stories.ts
rename to packages/documentation/src/stories/intranet-header/intranet-header.stories.ts
diff --git a/packages/documentation-v7/src/stories/misc/changelog/changelog.docs.mdx b/packages/documentation/src/stories/misc/changelog/changelog.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/misc/changelog/changelog.docs.mdx
rename to packages/documentation/src/stories/misc/changelog/changelog.docs.mdx
diff --git a/packages/documentation-v7/src/stories/misc/migration-guide/migration-guide.docs.mdx b/packages/documentation/src/stories/misc/migration-guide/migration-guide.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/misc/migration-guide/migration-guide.docs.mdx
rename to packages/documentation/src/stories/misc/migration-guide/migration-guide.docs.mdx
diff --git a/packages/documentation-v7/src/stories/misc/migration-guide/migration-guide.stories.ts b/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/misc/migration-guide/migration-guide.stories.ts
rename to packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts
diff --git a/packages/documentation-v7/src/stories/misc/versions/versions.blocks.tsx b/packages/documentation/src/stories/misc/versions/versions.blocks.tsx
similarity index 100%
rename from packages/documentation-v7/src/stories/misc/versions/versions.blocks.tsx
rename to packages/documentation/src/stories/misc/versions/versions.blocks.tsx
diff --git a/packages/documentation-v7/src/stories/misc/versions/versions.docs.mdx b/packages/documentation/src/stories/misc/versions/versions.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/misc/versions/versions.docs.mdx
rename to packages/documentation/src/stories/misc/versions/versions.docs.mdx
diff --git a/packages/documentation-v7/src/stories/misc/versions/versions.stories.ts b/packages/documentation/src/stories/misc/versions/versions.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/misc/versions/versions.stories.ts
rename to packages/documentation/src/stories/misc/versions/versions.stories.ts
diff --git a/packages/documentation-v7/src/stories/templates/forms/forms.docs.mdx b/packages/documentation/src/stories/templates/forms/forms.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/templates/forms/forms.docs.mdx
rename to packages/documentation/src/stories/templates/forms/forms.docs.mdx
diff --git a/packages/documentation-v7/src/stories/templates/forms/forms.stories.ts b/packages/documentation/src/stories/templates/forms/forms.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/templates/forms/forms.stories.ts
rename to packages/documentation/src/stories/templates/forms/forms.stories.ts
diff --git a/packages/documentation-v7/src/stories/utilities/background/background.blocks.tsx b/packages/documentation/src/stories/utilities/background/background.blocks.tsx
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/background/background.blocks.tsx
rename to packages/documentation/src/stories/utilities/background/background.blocks.tsx
diff --git a/packages/documentation-v7/src/stories/utilities/background/background.docs.mdx b/packages/documentation/src/stories/utilities/background/background.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/background/background.docs.mdx
rename to packages/documentation/src/stories/utilities/background/background.docs.mdx
diff --git a/packages/documentation-v7/src/stories/utilities/background/background.module.scss b/packages/documentation/src/stories/utilities/background/background.module.scss
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/background/background.module.scss
rename to packages/documentation/src/stories/utilities/background/background.module.scss
diff --git a/packages/documentation-v7/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/background/background.stories.ts
rename to packages/documentation/src/stories/utilities/background/background.stories.ts
diff --git a/packages/documentation-v7/src/stories/utilities/background/background.styles.scss b/packages/documentation/src/stories/utilities/background/background.styles.scss
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/background/background.styles.scss
rename to packages/documentation/src/stories/utilities/background/background.styles.scss
diff --git a/packages/documentation/src/stories/utilities/bombArgs.ts b/packages/documentation/src/stories/utilities/bombArgs.ts
index 74f827d88f..9403f6989e 100644
--- a/packages/documentation/src/stories/utilities/bombArgs.ts
+++ b/packages/documentation/src/stories/utilities/bombArgs.ts
@@ -1,19 +1,19 @@
-/**
- * Blow up all possible args and create a long list of all possible combinations of args.
- * You can then pass this to a template to create a lot of different variations of stories.
- * Credit: https://stackoverflow.com/questions/43055569/all-combinations-of-of-an-object-with-array-values-for-its-keys
- *
- * @param variants List of args to blow up
- * @returns
- */
-export const bombArgs = (variants: { [key: string]: Array<unknown> }) => {
-  return (function recurse(keys): Array<{ [key: string]: unknown }> {
-    if (!keys.length) return [{}];
-    let result = recurse(keys.slice(1));
-    return variants[keys[0]].reduce(
-      (acc: Array<{ [key: string]: unknown }>, value) =>
-        acc.concat(result.map((item: any) => Object.assign({}, item, { [keys[0]]: value }))),
-      [],
-    );
-  })(Object.keys(variants));
-};
+/**
+ * Blow up all possible args and create a long list of all possible combinations of args.
+ * You can then pass this to a template to create a lot of different variations of stories.
+ * Credit: https://stackoverflow.com/questions/43055569/all-combinations-of-of-an-object-with-array-values-for-its-keys
+ *
+ * @param variants List of args to blow up
+ * @returns
+ */
+export const bombArgs = (variants: { [key: string]: Array<unknown> }) => {
+  return (function recurse(keys): Array<{ [key: string]: unknown }> {
+    if (!keys.length) return [{}];
+    let result = recurse(keys.slice(1));
+    return variants[keys[0]].reduce(
+      (acc: Array<{ [key: string]: unknown }>, value) =>
+        acc.concat(result.map((item: any) => Object.assign({}, item, { [keys[0]]: value }))),
+      [],
+    );
+  })(Object.keys(variants));
+};
diff --git a/packages/documentation-v7/src/stories/utilities/common/common.docs.mdx b/packages/documentation/src/stories/utilities/common/common.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/common/common.docs.mdx
rename to packages/documentation/src/stories/utilities/common/common.docs.mdx
diff --git a/packages/documentation-v7/src/stories/utilities/common/common.stories.ts b/packages/documentation/src/stories/utilities/common/common.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/common/common.stories.ts
rename to packages/documentation/src/stories/utilities/common/common.stories.ts
diff --git a/packages/documentation-v7/src/stories/utilities/heading/heading.docs.mdx b/packages/documentation/src/stories/utilities/heading/heading.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/heading/heading.docs.mdx
rename to packages/documentation/src/stories/utilities/heading/heading.docs.mdx
diff --git a/packages/documentation-v7/src/stories/utilities/heading/heading.stories.ts b/packages/documentation/src/stories/utilities/heading/heading.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/heading/heading.stories.ts
rename to packages/documentation/src/stories/utilities/heading/heading.stories.ts
diff --git a/packages/documentation-v7/src/stories/utilities/list/list.docs.mdx b/packages/documentation/src/stories/utilities/list/list.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/list/list.docs.mdx
rename to packages/documentation/src/stories/utilities/list/list.docs.mdx
diff --git a/packages/documentation-v7/src/stories/utilities/list/list.stories.ts b/packages/documentation/src/stories/utilities/list/list.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/list/list.stories.ts
rename to packages/documentation/src/stories/utilities/list/list.stories.ts
diff --git a/packages/documentation-v7/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/sizing/sizing.docs.mdx
rename to packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
diff --git a/packages/documentation-v7/src/stories/utilities/sizing/sizing.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/sizing/sizing.stories.ts
rename to packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
diff --git a/packages/documentation-v7/src/stories/utilities/spacing/spacing.docs.mdx b/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/spacing/spacing.docs.mdx
rename to packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx
diff --git a/packages/documentation-v7/src/stories/utilities/spacing/spacing.stories.ts b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/spacing/spacing.stories.ts
rename to packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
diff --git a/packages/documentation-v7/src/stories/utilities/text/text.blocks.tsx b/packages/documentation/src/stories/utilities/text/text.blocks.tsx
similarity index 93%
rename from packages/documentation-v7/src/stories/utilities/text/text.blocks.tsx
rename to packages/documentation/src/stories/utilities/text/text.blocks.tsx
index 0fb13627b6..c73d2bb002 100644
--- a/packages/documentation-v7/src/stories/utilities/text/text.blocks.tsx
+++ b/packages/documentation/src/stories/utilities/text/text.blocks.tsx
@@ -26,7 +26,7 @@ export const TextUtilityAPI = (
       <dt className="col-3">Values:</dt>
       <dd className="col-9">
         {props.values.map((value, index) => (
-          <code key={index} className="me-2">{value}</code>
+          <code key={value} className="me-2">{value}</code>
         ))}
       </dd>
     </dl>
diff --git a/packages/documentation-v7/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/text/text.docs.mdx
rename to packages/documentation/src/stories/utilities/text/text.docs.mdx
diff --git a/packages/documentation-v7/src/stories/utilities/text/text.module.scss b/packages/documentation/src/stories/utilities/text/text.module.scss
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/text/text.module.scss
rename to packages/documentation/src/stories/utilities/text/text.module.scss
diff --git a/packages/documentation-v7/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
similarity index 100%
rename from packages/documentation-v7/src/stories/utilities/text/text.stories.ts
rename to packages/documentation/src/stories/utilities/text/text.stories.ts
diff --git a/packages/documentation-v7/src/stories/utilities/bombArgs.ts b/packages/documentation/src/utils/bombArgs.ts
similarity index 97%
rename from packages/documentation-v7/src/stories/utilities/bombArgs.ts
rename to packages/documentation/src/utils/bombArgs.ts
index 9403f6989e..74f827d88f 100644
--- a/packages/documentation-v7/src/stories/utilities/bombArgs.ts
+++ b/packages/documentation/src/utils/bombArgs.ts
@@ -1,19 +1,19 @@
-/**
- * Blow up all possible args and create a long list of all possible combinations of args.
- * You can then pass this to a template to create a lot of different variations of stories.
- * Credit: https://stackoverflow.com/questions/43055569/all-combinations-of-of-an-object-with-array-values-for-its-keys
- *
- * @param variants List of args to blow up
- * @returns
- */
-export const bombArgs = (variants: { [key: string]: Array<unknown> }) => {
-  return (function recurse(keys): Array<{ [key: string]: unknown }> {
-    if (!keys.length) return [{}];
-    let result = recurse(keys.slice(1));
-    return variants[keys[0]].reduce(
-      (acc: Array<{ [key: string]: unknown }>, value) =>
-        acc.concat(result.map((item: any) => Object.assign({}, item, { [keys[0]]: value }))),
-      [],
-    );
-  })(Object.keys(variants));
-};
+/**
+ * Blow up all possible args and create a long list of all possible combinations of args.
+ * You can then pass this to a template to create a lot of different variations of stories.
+ * Credit: https://stackoverflow.com/questions/43055569/all-combinations-of-of-an-object-with-array-values-for-its-keys
+ *
+ * @param variants List of args to blow up
+ * @returns
+ */
+export const bombArgs = (variants: { [key: string]: Array<unknown> }) => {
+  return (function recurse(keys): Array<{ [key: string]: unknown }> {
+    if (!keys.length) return [{}];
+    let result = recurse(keys.slice(1));
+    return variants[keys[0]].reduce(
+      (acc: Array<{ [key: string]: unknown }>, value) =>
+        acc.concat(result.map((item: any) => Object.assign({}, item, { [keys[0]]: value }))),
+      [],
+    );
+  })(Object.keys(variants));
+};
diff --git a/packages/documentation/src/utils/index.ts b/packages/documentation/src/utils/index.ts
index 9896cdaab2..540d902d4f 100644
--- a/packages/documentation/src/utils/index.ts
+++ b/packages/documentation/src/utils/index.ts
@@ -1 +1,2 @@
 export * from './component-properties';
+export * from './map-classes';
diff --git a/packages/documentation-v7/src/utils/map-classes.ts b/packages/documentation/src/utils/map-classes.ts
similarity index 100%
rename from packages/documentation-v7/src/utils/map-classes.ts
rename to packages/documentation/src/utils/map-classes.ts
diff --git a/packages/documentation/src/utils/version.ts b/packages/documentation/src/utils/version.ts
index 0fa2974c4f..0b92a90072 100644
--- a/packages/documentation/src/utils/version.ts
+++ b/packages/documentation/src/utils/version.ts
@@ -1,9 +1,12 @@
-import { version as styles, dependencies as stylesDeps } from './../../../styles/package.json';
-import { version as components } from './../../../components/package.json';
-import { version as internetheader } from './../../../internet-header/package.json';
+import {
+  version as styles,
+  dependencies as stylesDeps,
+} from '@swisspost/design-system-styles/package.json';
+import { version as components } from '@swisspost/design-system-components/package.json';
+import { version as internetheader } from '@swisspost/internet-header/package.json';
 import { version as intranetheader } from './../../../components-angular/projects/intranet-header/package.json';
-import { version as icons } from './../../../icons/package.json';
-import { version as documentation } from './../../../documentation/package.json';
+import { version as icons } from '@swisspost/design-system-icons/package.json';
+import { version as documentation } from './../../package.json';
 
 const versionFilterRegexes: any = {
   major: /^(?:(\d+)\.\d+\.\d+)/,
@@ -11,7 +14,7 @@ const versionFilterRegexes: any = {
   patch: /^(?:\d+\.\d+\.(\d+))/,
   pre: /^(?:\d+\.\d+\.\d+[ .:,;!?_~`'"^*+\-=<>#&$%@|\/()[\]{}]?(.*))/,
   majorminor: /^(?:(\d+\.\d+)\.\d+)/,
-  majorminorpatch: /^(\d+\.\d+\.\d+)/
+  majorminorpatch: /^(\d+\.\d+\.\d+)/,
 };
 
 const versionFilterMap: any = {
@@ -23,7 +26,7 @@ const versionFilterMap: any = {
   majorminor: 'majorminor',
   Mm: 'majorminor',
   majorminorpatch: 'majorminorpatch',
-  Mmp: 'majorminorpatch'
+  Mmp: 'majorminorpatch',
 };
 
 const versions: any = {
@@ -33,20 +36,20 @@ const versions: any = {
   intranetheader,
   icons,
   documentation,
-  bootstrap: stylesDeps.bootstrap
+  bootstrap: stylesDeps.bootstrap,
 };
 
-export function getVersion (version: string, filter: string = '') {
+export function getVersion(version: string, filter: string = '') {
   const cleanVersion = versions[version].replace(/^[^\d]+/, '');
 
   if (filter) {
     const filterRegex = versionFilterRegexes[versionFilterMap[filter]];
     let matchArray = null;
-    
+
     if (filterRegex) matchArray = cleanVersion.match(filterRegex);
 
     return matchArray !== null && matchArray[1] ? matchArray[1] : null;
   } else {
     return cleanVersion.length > 0 ? cleanVersion : versions[version] ?? null;
   }
-};
+}
diff --git a/packages/documentation/tsconfig.json b/packages/documentation/tsconfig.json
index b2489ed514..0d50cad9f5 100644
--- a/packages/documentation/tsconfig.json
+++ b/packages/documentation/tsconfig.json
@@ -3,9 +3,9 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
+    "allowJs": true,
     "skipLibCheck": true,
-    "esModuleInterop": false,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
@@ -15,6 +15,11 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"],
-  "exclude": ["node_modules"]
+  "include": [
+    ".storybook/**/*",
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules/**/*"
+  ]
 }
diff --git a/packages/documentation-v7/vite.config.js b/packages/documentation/vite.config.js
similarity index 100%
rename from packages/documentation-v7/vite.config.js
rename to packages/documentation/vite.config.js
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bbe9a8c334..a418997125 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
@@ -471,6 +471,124 @@ importers:
         version: 5.88.2
 
   packages/documentation:
+    dependencies:
+      '@swisspost/design-system-components':
+        specifier: workspace:1.3.10
+        version: link:../components
+      '@swisspost/design-system-components-react':
+        specifier: workspace:1.0.16
+        version: link:../components-react
+      '@swisspost/design-system-icons':
+        specifier: workspace:1.0.10
+        version: link:../icons
+      '@swisspost/design-system-styles':
+        specifier: workspace:6.3.0
+        version: link:../styles/dist
+      '@swisspost/internet-header':
+        specifier: workspace:1.9.0
+        version: link:../internet-header
+      bootstrap:
+        specifier: 5.3.1
+        version: 5.3.1(@popperjs/core@2.11.8)
+    devDependencies:
+      '@geometricpanda/storybook-addon-badges':
+        specifier: 1.1.1
+        version: 1.1.1(@storybook/addons@7.2.3)(@storybook/api@6.5.16)(@storybook/components@7.2.3)(@storybook/core-events@6.5.16)(@storybook/theming@7.2.3)(react-dom@18.2.0)(react@18.2.0)
+      '@open-wc/lit-helpers':
+        specifier: 0.6.0
+        version: 0.6.0(lit@2.8.0)
+      '@percy/cli':
+        specifier: 1.26.3
+        version: 1.26.3
+      '@percy/cypress':
+        specifier: 3.1.2
+        version: 3.1.2(cypress@12.17.3)
+      '@pxtrn/storybook-addon-docs-stencil':
+        specifier: 6.4.1
+        version: 6.4.1(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addon-a11y':
+        specifier: 7.2.3
+        version: 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addon-designs':
+        specifier: 7.0.4
+        version: 7.0.4(@storybook/addon-docs@7.2.3)(@storybook/addons@7.2.3)(@storybook/components@7.2.3)(@storybook/manager-api@7.2.3)(@storybook/preview-api@7.2.3)(@storybook/theming@7.2.3)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addon-essentials':
+        specifier: 7.2.3
+        version: 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addon-links':
+        specifier: 7.2.3
+        version: 7.2.3(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addons':
+        specifier: 7.2.3
+        version: 7.2.3(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/blocks':
+        specifier: 7.2.3
+        version: 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components':
+        specifier: 7.2.3
+        version: 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/manager-api':
+        specifier: 7.2.3
+        version: 7.2.3(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/preview-api':
+        specifier: 7.2.3
+        version: 7.2.3
+      '@storybook/testing-library':
+        specifier: 0.2.0
+        version: 0.2.0
+      '@storybook/theming':
+        specifier: 7.2.3
+        version: 7.2.3(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/web-components':
+        specifier: 7.2.3
+        version: 7.2.3(lit@2.8.0)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/web-components-vite':
+        specifier: 7.2.3
+        version: 7.2.3(lit@2.8.0)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6)(vite@4.4.3)
+      '@types/mdx':
+        specifier: 2.0.6
+        version: 2.0.6
+      '@types/react':
+        specifier: 18.2.20
+        version: 18.2.20
+      '@types/react-syntax-highlighter':
+        specifier: 15.5.7
+        version: 15.5.7
+      cypress:
+        specifier: 12.17.3
+        version: 12.17.3
+      lit:
+        specifier: 2.8.0
+        version: 2.8.0
+      lit-html:
+        specifier: 2.8.0
+        version: 2.8.0
+      prettier:
+        specifier: 2.8.8
+        version: 2.8.8
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: 18.2.0
+        version: 18.2.0(react@18.2.0)
+      react-syntax-highlighter:
+        specifier: 15.5.0
+        version: 15.5.0(react@18.2.0)
+      rimraf:
+        specifier: 5.0.1
+        version: 5.0.1
+      sass:
+        specifier: 1.65.1
+        version: 1.65.1
+      storybook:
+        specifier: 7.2.3
+        version: 7.2.3
+      typescript:
+        specifier: 5.1.6
+        version: 5.1.6
+
+  packages/documentation-v6:
     dependencies:
       '@swisspost/design-system-components':
         specifier: workspace:1.3.10
@@ -597,124 +715,6 @@ importers:
         specifier: 4.9.5
         version: 4.9.5
 
-  packages/documentation-v7:
-    dependencies:
-      '@swisspost/design-system-components':
-        specifier: workspace:1.3.10
-        version: link:../components
-      '@swisspost/design-system-components-react':
-        specifier: workspace:1.0.16
-        version: link:../components-react
-      '@swisspost/design-system-icons':
-        specifier: workspace:1.0.10
-        version: link:../icons
-      '@swisspost/design-system-styles':
-        specifier: workspace:6.3.0
-        version: link:../styles/dist
-      '@swisspost/internet-header':
-        specifier: workspace:1.9.0
-        version: link:../internet-header
-      bootstrap:
-        specifier: 5.3.1
-        version: 5.3.1(@popperjs/core@2.11.8)
-    devDependencies:
-      '@geometricpanda/storybook-addon-badges':
-        specifier: 1.1.1
-        version: 1.1.1(@storybook/addons@7.2.3)(@storybook/api@6.5.16)(@storybook/components@7.2.3)(@storybook/core-events@6.5.16)(@storybook/theming@7.2.3)(react-dom@18.2.0)(react@18.2.0)
-      '@open-wc/lit-helpers':
-        specifier: 0.6.0
-        version: 0.6.0(lit@2.8.0)
-      '@percy/cli':
-        specifier: 1.26.3
-        version: 1.26.3
-      '@percy/cypress':
-        specifier: 3.1.2
-        version: 3.1.2(cypress@12.17.3)
-      '@pxtrn/storybook-addon-docs-stencil':
-        specifier: 6.4.1
-        version: 6.4.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-a11y':
-        specifier: 7.2.3
-        version: 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-designs':
-        specifier: 7.0.4
-        version: 7.0.4(@storybook/addon-docs@7.2.3)(@storybook/addons@7.2.3)(@storybook/components@7.2.3)(@storybook/manager-api@7.2.3)(@storybook/preview-api@7.2.3)(@storybook/theming@7.2.3)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-essentials':
-        specifier: 7.2.3
-        version: 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-links':
-        specifier: 7.2.3
-        version: 7.2.3(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addons':
-        specifier: 7.2.3
-        version: 7.2.3(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/blocks':
-        specifier: 7.2.3
-        version: 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/components':
-        specifier: 7.2.3
-        version: 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/manager-api':
-        specifier: 7.2.3
-        version: 7.2.3(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api':
-        specifier: 7.2.3
-        version: 7.2.3
-      '@storybook/testing-library':
-        specifier: 0.2.0
-        version: 0.2.0
-      '@storybook/theming':
-        specifier: 7.2.3
-        version: 7.2.3(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/web-components':
-        specifier: 7.2.3
-        version: 7.2.3(lit@2.8.0)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/web-components-vite':
-        specifier: 7.2.3
-        version: 7.2.3(lit@2.8.0)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.6)(vite@4.4.3)
-      '@types/mdx':
-        specifier: 2.0.6
-        version: 2.0.6
-      '@types/react':
-        specifier: 18.2.20
-        version: 18.2.20
-      '@types/react-syntax-highlighter':
-        specifier: 15.5.7
-        version: 15.5.7
-      cypress:
-        specifier: 12.17.3
-        version: 12.17.3
-      lit:
-        specifier: 2.8.0
-        version: 2.8.0
-      lit-html:
-        specifier: 2.8.0
-        version: 2.8.0
-      prettier:
-        specifier: 2.8.8
-        version: 2.8.8
-      react:
-        specifier: 18.2.0
-        version: 18.2.0
-      react-dom:
-        specifier: 18.2.0
-        version: 18.2.0(react@18.2.0)
-      react-syntax-highlighter:
-        specifier: 15.5.0
-        version: 15.5.0(react@18.2.0)
-      rimraf:
-        specifier: 5.0.1
-        version: 5.0.1
-      sass:
-        specifier: 1.65.1
-        version: 1.65.1
-      storybook:
-        specifier: 7.2.3
-        version: 7.2.3
-      typescript:
-        specifier: 5.1.6
-        version: 5.1.6
-
   packages/icons:
     devDependencies:
       '@tsconfig/node16':
@@ -1688,14 +1688,14 @@ packages:
     resolution: {integrity: sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.22.5
-      '@babel/generator': 7.22.9
+      '@babel/code-frame': 7.22.10
+      '@babel/generator': 7.22.10
       '@babel/helper-module-transforms': 7.22.9(@babel/core@7.12.9)
-      '@babel/helpers': 7.22.6
-      '@babel/parser': 7.22.7
+      '@babel/helpers': 7.22.10
+      '@babel/parser': 7.22.10
       '@babel/template': 7.22.5
-      '@babel/traverse': 7.22.8
-      '@babel/types': 7.22.5
+      '@babel/traverse': 7.22.10
+      '@babel/types': 7.22.10
       convert-source-map: 1.9.0
       debug: 4.3.4(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
@@ -1735,15 +1735,15 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@babel/code-frame': 7.22.5
-      '@babel/generator': 7.22.9
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.20.12)
+      '@babel/code-frame': 7.22.10
+      '@babel/generator': 7.22.10
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-module-transforms': 7.22.9(@babel/core@7.20.12)
-      '@babel/helpers': 7.22.6
-      '@babel/parser': 7.22.7
+      '@babel/helpers': 7.22.10
+      '@babel/parser': 7.22.10
       '@babel/template': 7.22.5
-      '@babel/traverse': 7.22.8
-      '@babel/types': 7.22.5
+      '@babel/traverse': 7.22.10
+      '@babel/types': 7.22.10
       convert-source-map: 1.9.0
       debug: 4.3.4(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
@@ -1780,7 +1780,7 @@ packages:
     resolution: {integrity: sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       '@jridgewell/gen-mapping': 0.3.3
       jsesc: 2.5.2
     dev: true
@@ -1808,21 +1808,21 @@ packages:
     resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@babel/helper-annotate-as-pure@7.22.5:
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@babel/helper-builder-binary-assignment-operator-visitor@7.22.5:
     resolution: {integrity: sha512-m1EP3lVOPptR+2DwD125gziZNcmoNSHGmJROKoy87loWUQyJaVXDgpmruWqDARZSmtYQ+Dl25okU8+qhVzuykw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@babel/helper-compilation-targets@7.22.10:
@@ -1849,34 +1849,6 @@ packages:
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  /@babel/helper-compilation-targets@7.22.9(@babel/core@7.20.12):
-    resolution: {integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/core': 7.20.12
-      '@babel/helper-validator-option': 7.22.5
-      browserslist: 4.21.9
-      lru-cache: 5.1.1
-      semver: 6.3.1
-    dev: true
-
-  /@babel/helper-compilation-targets@7.22.9(@babel/core@7.22.10):
-    resolution: {integrity: sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/core': 7.22.10
-      '@babel/helper-validator-option': 7.22.5
-      browserslist: 4.21.9
-      lru-cache: 5.1.1
-      semver: 6.3.1
-    dev: true
-
   /@babel/helper-create-class-features-plugin@7.22.9(@babel/core@7.20.12):
     resolution: {integrity: sha512-Pwyi89uO4YrGKxL/eNJ8lfEH55DnRloGPOseaA8NFNL6jAUnn+KccaISiFazCj5IolPPDjGSdzQzXVzODVRqUQ==}
     engines: {node: '>=6.9.0'}
@@ -1943,26 +1915,10 @@ packages:
       '@babel/core': ^7.4.0-0
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.10)
-      '@babel/helper-module-imports': 7.22.5
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/traverse': 7.22.8
-      debug: 4.3.4(supports-color@8.1.1)
-      lodash.debounce: 4.0.8
-      resolve: 1.22.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@babel/helper-define-polyfill-provider@0.3.3(@babel/core@7.20.12):
-    resolution: {integrity: sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==}
-    peerDependencies:
-      '@babel/core': ^7.4.0-0
-    dependencies:
-      '@babel/core': 7.20.12
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.20.12)
+      '@babel/helper-compilation-targets': 7.22.10
+      '@babel/helper-module-imports': 7.22.5
       '@babel/helper-plugin-utils': 7.22.5
+      '@babel/traverse': 7.22.10
       debug: 4.3.4(supports-color@8.1.1)
       lodash.debounce: 4.0.8
       resolve: 1.22.3
@@ -1971,13 +1927,13 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/helper-define-polyfill-provider@0.3.3(@babel/core@7.22.10):
+  /@babel/helper-define-polyfill-provider@0.3.3(@babel/core@7.20.12):
     resolution: {integrity: sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==}
     peerDependencies:
       '@babel/core': ^7.4.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.10)
+      '@babel/core': 7.20.12
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-plugin-utils': 7.22.5
       debug: 4.3.4(supports-color@8.1.1)
       lodash.debounce: 4.0.8
@@ -1993,7 +1949,7 @@ packages:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.10)
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-plugin-utils': 7.22.5
       debug: 4.3.4(supports-color@8.1.1)
       lodash.debounce: 4.0.8
@@ -2023,7 +1979,7 @@ packages:
     resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@babel/helper-module-imports@7.22.5:
@@ -2091,7 +2047,7 @@ packages:
     resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@babel/helper-plugin-utils@7.10.4:
@@ -2161,14 +2117,14 @@ packages:
     resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@babel/helper-split-export-declaration@7.18.6:
     resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@babel/helper-split-export-declaration@7.22.6:
@@ -2195,7 +2151,7 @@ packages:
     dependencies:
       '@babel/helper-function-name': 7.22.5
       '@babel/template': 7.22.5
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@babel/helpers@7.22.10:
@@ -2308,19 +2264,6 @@ packages:
       '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.20.12)
     dev: true
 
-  /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.22.10):
-    resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-remap-async-to-generator': 7.22.9(@babel/core@7.22.10)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.10)
-    dev: true
-
   /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.20.12):
     resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==}
     engines: {node: '>=6.9.0'}
@@ -2355,18 +2298,6 @@ packages:
       '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.20.12)
     dev: true
 
-  /@babel/plugin-proposal-class-static-block@7.21.0(@babel/core@7.22.10):
-    resolution: {integrity: sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.12.0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-create-class-features-plugin': 7.22.9(@babel/core@7.22.10)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.22.10)
-    dev: true
-
   /@babel/plugin-proposal-decorators@7.21.0(@babel/core@7.22.10):
     resolution: {integrity: sha512-MfgX49uRrFUTL/HvWtmx3zmpyzMMr4MTj3d527MLlr/4RTT9G/ytFFP7qet2uM2Ve03b+BkpWUpK+lRXnQ+v9w==}
     engines: {node: '>=6.9.0'}
@@ -2392,17 +2323,6 @@ packages:
       '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.20.12)
     dev: true
 
-  /@babel/plugin-proposal-dynamic-import@7.18.6(@babel/core@7.22.10):
-    resolution: {integrity: sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.22.10)
-    dev: true
-
   /@babel/plugin-proposal-export-default-from@7.18.10(@babel/core@7.22.10):
     resolution: {integrity: sha512-5H2N3R2aQFxkV4PIBUR/i7PUSwgTZjouJKzI8eKswfIjT0PhvzkPn0t0wIS5zn6maQuvtT0t1oHtMUz61LOuow==}
     engines: {node: '>=6.9.0'}
@@ -2425,17 +2345,6 @@ packages:
       '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.20.12)
     dev: true
 
-  /@babel/plugin-proposal-export-namespace-from@7.18.9(@babel/core@7.22.10):
-    resolution: {integrity: sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.22.10)
-    dev: true
-
   /@babel/plugin-proposal-json-strings@7.18.6(@babel/core@7.20.12):
     resolution: {integrity: sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==}
     engines: {node: '>=6.9.0'}
@@ -2447,17 +2356,6 @@ packages:
       '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.20.12)
     dev: true
 
-  /@babel/plugin-proposal-json-strings@7.18.6(@babel/core@7.22.10):
-    resolution: {integrity: sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.22.10)
-    dev: true
-
   /@babel/plugin-proposal-logical-assignment-operators@7.20.7(@babel/core@7.20.12):
     resolution: {integrity: sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==}
     engines: {node: '>=6.9.0'}
@@ -2469,17 +2367,6 @@ packages:
       '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.20.12)
     dev: true
 
-  /@babel/plugin-proposal-logical-assignment-operators@7.20.7(@babel/core@7.22.10):
-    resolution: {integrity: sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.22.10)
-    dev: true
-
   /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.20.12):
     resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==}
     engines: {node: '>=6.9.0'}
@@ -2513,17 +2400,6 @@ packages:
       '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.20.12)
     dev: true
 
-  /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.22.10):
-    resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.22.10)
-    dev: true
-
   /@babel/plugin-proposal-object-rest-spread@7.12.1(@babel/core@7.12.9):
     resolution: {integrity: sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==}
     peerDependencies:
@@ -2543,7 +2419,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.22.9
       '@babel/core': 7.20.12
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.20.12)
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.20.12)
       '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.20.12)
@@ -2557,7 +2433,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.22.9
       '@babel/core': 7.22.10
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.10)
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.10)
       '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.22.10)
@@ -2574,17 +2450,6 @@ packages:
       '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.20.12)
     dev: true
 
-  /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.22.10):
-    resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.22.10)
-    dev: true
-
   /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.20.12):
     resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==}
     engines: {node: '>=6.9.0'}
@@ -3213,7 +3078,7 @@ packages:
     dependencies:
       '@babel/core': 7.20.12
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.20.12)
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-environment-visitor': 7.22.5
       '@babel/helper-function-name': 7.22.5
       '@babel/helper-optimise-call-expression': 7.22.5
@@ -3231,7 +3096,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.10
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.10)
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-environment-visitor': 7.22.5
       '@babel/helper-function-name': 7.22.5
       '@babel/helper-optimise-call-expression': 7.22.5
@@ -3407,7 +3272,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.20.12
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.20.12)
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-function-name': 7.22.5
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
@@ -3419,7 +3284,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.10)
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-function-name': 7.22.5
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
@@ -3652,7 +3517,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.22.9
       '@babel/core': 7.22.10
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.10)
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.10)
       '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.22.10)
@@ -3820,7 +3685,7 @@ packages:
       '@babel/helper-module-imports': 7.22.5
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-jsx': 7.21.4(@babel/core@7.22.10)
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@babel/plugin-transform-react-pure-annotations@7.18.6(@babel/core@7.22.10):
@@ -4080,7 +3945,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.22.9
       '@babel/core': 7.20.12
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.20.12)
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-validator-option': 7.22.5
       '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.5(@babel/core@7.20.12)
@@ -4148,7 +4013,7 @@ packages:
       '@babel/plugin-transform-unicode-escapes': 7.22.5(@babel/core@7.20.12)
       '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.20.12)
       '@babel/preset-modules': 0.1.5(@babel/core@7.20.12)
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       babel-plugin-polyfill-corejs2: 0.3.3(@babel/core@7.20.12)
       babel-plugin-polyfill-corejs3: 0.6.0(@babel/core@7.20.12)
       babel-plugin-polyfill-regenerator: 0.4.1(@babel/core@7.20.12)
@@ -4158,93 +4023,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/preset-env@7.21.5(@babel/core@7.22.10):
-    resolution: {integrity: sha512-wH00QnTTldTbf/IefEVyChtRdw5RJvODT/Vb4Vcxq1AZvtXj6T0YeX0cAcXhI6/BdGuiP3GcNIL4OQbI2DVNxg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/core': 7.22.10
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.10)
-      '@babel/helper-plugin-utils': 7.22.5
-      '@babel/helper-validator-option': 7.22.5
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-proposal-async-generator-functions': 7.20.7(@babel/core@7.22.10)
-      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.22.10)
-      '@babel/plugin-proposal-class-static-block': 7.21.0(@babel/core@7.22.10)
-      '@babel/plugin-proposal-dynamic-import': 7.18.6(@babel/core@7.22.10)
-      '@babel/plugin-proposal-export-namespace-from': 7.18.9(@babel/core@7.22.10)
-      '@babel/plugin-proposal-json-strings': 7.18.6(@babel/core@7.22.10)
-      '@babel/plugin-proposal-logical-assignment-operators': 7.20.7(@babel/core@7.22.10)
-      '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.22.10)
-      '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.22.10)
-      '@babel/plugin-proposal-object-rest-spread': 7.20.7(@babel/core@7.22.10)
-      '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.22.10)
-      '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.22.10)
-      '@babel/plugin-proposal-private-methods': 7.18.6(@babel/core@7.22.10)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0(@babel/core@7.22.10)
-      '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.22.10)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.22.10)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.22.10)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-import-assertions': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.22.10)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-arrow-functions': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-async-to-generator': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-block-scoped-functions': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-block-scoping': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-classes': 7.22.6(@babel/core@7.22.10)
-      '@babel/plugin-transform-computed-properties': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-destructuring': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-duplicate-keys': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-exponentiation-operator': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-for-of': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-function-name': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-literals': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-member-expression-literals': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-modules-amd': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-modules-commonjs': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-modules-systemjs': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-modules-umd': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-new-target': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-object-super': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-parameters': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-property-literals': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-regenerator': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-reserved-words': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-shorthand-properties': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-spread': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-sticky-regex': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-template-literals': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-typeof-symbol': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-unicode-escapes': 7.22.5(@babel/core@7.22.10)
-      '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.22.10)
-      '@babel/preset-modules': 0.1.5(@babel/core@7.22.10)
-      '@babel/types': 7.22.5
-      babel-plugin-polyfill-corejs2: 0.3.3(@babel/core@7.22.10)
-      babel-plugin-polyfill-corejs3: 0.6.0(@babel/core@7.22.10)
-      babel-plugin-polyfill-regenerator: 0.4.1(@babel/core@7.22.10)
-      core-js-compat: 3.31.1
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/preset-env@7.22.9(@babel/core@7.22.10):
     resolution: {integrity: sha512-wNi5H/Emkhll/bqPjsjQorSykrlfY5OWakd6AulLvMEytpKasMVUpVy8RL4qBIBs5Ac6/5i0/Rv0b/Fg6Eag/g==}
     engines: {node: '>=6.9.0'}
@@ -4253,7 +4031,7 @@ packages:
     dependencies:
       '@babel/compat-data': 7.22.9
       '@babel/core': 7.22.10
-      '@babel/helper-compilation-targets': 7.22.9(@babel/core@7.22.10)
+      '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-validator-option': 7.22.5
       '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.5(@babel/core@7.22.10)
@@ -4326,7 +4104,7 @@ packages:
       '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.22.10)
       '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.22.10)
       '@babel/preset-modules': 0.1.5(@babel/core@7.22.10)
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.22.10)
       babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.22.10)
       babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.22.10)
@@ -4357,7 +4135,7 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.20.12)
       '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.20.12)
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       esutils: 2.0.3
     dev: true
 
@@ -4370,7 +4148,7 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.22.10)
       '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.22.10)
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       esutils: 2.0.3
     dev: true
 
@@ -4439,9 +4217,9 @@ packages:
     resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.22.5
-      '@babel/parser': 7.22.7
-      '@babel/types': 7.22.5
+      '@babel/code-frame': 7.22.10
+      '@babel/parser': 7.22.10
+      '@babel/types': 7.22.10
     dev: true
 
   /@babel/template@7.22.5:
@@ -5550,7 +5328,7 @@ packages:
     dependencies:
       '@storybook/addons': 7.2.3(react-dom@18.2.0)(react@18.2.0)
       '@storybook/api': 6.5.16(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-events': 6.5.16
       '@storybook/theming': 7.2.3(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
@@ -7435,7 +7213,7 @@ packages:
       '@storybook/addon-highlight': 7.2.3
       '@storybook/channels': 7.2.3
       '@storybook/client-logger': 7.2.3
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-events': 7.2.3
       '@storybook/global': 5.0.0
       '@storybook/manager-api': 7.2.3(react-dom@18.2.0)(react@18.2.0)
@@ -7500,7 +7278,7 @@ packages:
         optional: true
     dependencies:
       '@storybook/client-logger': 7.2.3
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-events': 7.2.3
       '@storybook/global': 5.0.0
       '@storybook/manager-api': 7.2.3(react-dom@18.2.0)(react@18.2.0)
@@ -7564,7 +7342,7 @@ packages:
         optional: true
     dependencies:
       '@storybook/client-logger': 7.2.3
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-events': 7.2.3
       '@storybook/global': 5.0.0
       '@storybook/manager-api': 7.2.3(react-dom@18.2.0)(react@18.2.0)
@@ -7629,7 +7407,7 @@ packages:
     dependencies:
       '@storybook/blocks': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/client-logger': 7.2.3
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-common': 7.2.3
       '@storybook/core-events': 7.2.3
       '@storybook/manager-api': 7.2.3(react-dom@18.2.0)(react@18.2.0)
@@ -7669,7 +7447,7 @@ packages:
       '@figspec/react': 1.0.3(react@18.2.0)
       '@storybook/addon-docs': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/addons': 7.2.3(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/manager-api': 7.2.3(react-dom@18.2.0)(react@18.2.0)
       '@storybook/preview-api': 7.2.3
       '@storybook/theming': 7.2.3(react-dom@18.2.0)(react@18.2.0)
@@ -7692,7 +7470,7 @@ packages:
         optional: true
     dependencies:
       '@babel/plugin-transform-react-jsx': 7.21.5(@babel/core@7.22.10)
-      '@babel/preset-env': 7.21.5(@babel/core@7.22.10)
+      '@babel/preset-env': 7.22.9(@babel/core@7.22.10)
       '@jest/transform': 26.6.2
       '@mdx-js/react': 1.6.22(react@18.2.0)
       '@storybook/addons': 6.5.16(react-dom@18.2.0)(react@18.2.0)
@@ -7742,7 +7520,7 @@ packages:
       '@mdx-js/react': 2.3.0(react@18.2.0)
       '@storybook/blocks': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/client-logger': 7.2.3
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/csf-plugin': 7.2.3
       '@storybook/csf-tools': 7.2.3
       '@storybook/global': 5.0.0
@@ -7978,7 +7756,7 @@ packages:
         optional: true
     dependencies:
       '@storybook/client-logger': 7.2.3
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-events': 7.2.3
       '@storybook/global': 5.0.0
       '@storybook/manager-api': 7.2.3(react-dom@18.2.0)(react@18.2.0)
@@ -8031,7 +7809,7 @@ packages:
         optional: true
     dependencies:
       '@storybook/client-logger': 7.2.3
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-events': 7.2.3
       '@storybook/global': 5.0.0
       '@storybook/manager-api': 7.2.3(react-dom@18.2.0)(react@18.2.0)
@@ -8081,7 +7859,7 @@ packages:
         optional: true
     dependencies:
       '@storybook/client-logger': 7.2.3
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/manager-api': 7.2.3(react-dom@18.2.0)(react@18.2.0)
       '@storybook/preview-api': 7.2.3
       '@storybook/theming': 7.2.3(react-dom@18.2.0)(react@18.2.0)
@@ -8132,7 +7910,7 @@ packages:
         optional: true
     dependencies:
       '@storybook/client-logger': 7.2.3
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-events': 7.2.3
       '@storybook/global': 5.0.0
       '@storybook/manager-api': 7.2.3(react-dom@18.2.0)(react@18.2.0)
@@ -8170,19 +7948,6 @@ packages:
       regenerator-runtime: 0.13.11
     dev: true
 
-  /@storybook/addons@7.0.12(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-yVADbWCFdb12cSpspeb+/6lfTNarPtZZLql49Bhu6E7PxECw/Q3kfHu0LXBLcSnU7f4QqQvQjp88ultt01ABBQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18
-    dependencies:
-      '@storybook/manager-api': 7.0.12(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.0.12
-      '@storybook/types': 7.0.12
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@storybook/addons@7.2.3(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-l0RUwiXcA4NZawXB7+7SpPEUQ1ov4xjDLgqnURsC4IrzxpqhhzYyiXbNTe6vS3//xUhzd9B82f3UBSCsz3k+7Q==}
     peerDependencies:
@@ -8248,7 +8013,7 @@ packages:
     dependencies:
       '@storybook/channels': 7.2.3
       '@storybook/client-logger': 7.2.3
-      '@storybook/components': 7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-events': 7.2.3
       '@storybook/csf': 0.1.0
       '@storybook/docs-tools': 7.2.3
@@ -8425,17 +8190,6 @@ packages:
       telejson: 6.0.8
     dev: true
 
-  /@storybook/channel-postmessage@7.0.12:
-    resolution: {integrity: sha512-Tc7kQZ5yxlZ44Nmmzec92JaDJ6UZ3Ze4cBfiHik4XcnM1PtN8hr8VFoC6a2AIm1ybfIRenfT5w9TH5yriiPIhw==}
-    dependencies:
-      '@storybook/channels': 7.0.12
-      '@storybook/client-logger': 7.0.12
-      '@storybook/core-events': 7.0.12
-      '@storybook/global': 5.0.0
-      qs: 6.11.2
-      telejson: 7.1.0
-    dev: true
-
   /@storybook/channel-websocket@6.5.16:
     resolution: {integrity: sha512-wJg2lpBjmRC2GJFzmhB9kxlh109VE58r/0WhFtLbwKvPqsvGf82xkBEl6BtBCvIQ4stzYnj/XijjA8qSi2zpOg==}
     dependencies:
@@ -8458,17 +8212,6 @@ packages:
     resolution: {integrity: sha512-KDdDmDs8kxAJU+vndTqTNazjLO+XoIPiTRlfP7mk7cgHiQXSjMYy3JSCQ7W0of0Q+9VSl/ve9CNbnGbcQF7rNQ==}
     dev: true
 
-  /@storybook/channels@7.2.1:
-    resolution: {integrity: sha512-3ZogzjwlFG+oarwnI7TTvWvHVOUtJbjrgZkM5QuLMlxNzIR1XuBY8f01yf4K8+VpdNy9DY+7Q/j6tBThfwYvpA==}
-    dependencies:
-      '@storybook/client-logger': 7.2.1
-      '@storybook/core-events': 7.2.1
-      '@storybook/global': 5.0.0
-      qs: 6.11.2
-      telejson: 7.1.0
-      tiny-invariant: 1.3.1
-    dev: true
-
   /@storybook/channels@7.2.3:
     resolution: {integrity: sha512-4RMTTmqpEL44gKClT/IjJAGTWvYmEvNg1jKHXEVP6rgepMyFN7edx4fTbGZV0Vb+5auyazoGOCUBNA6uzHgWbA==}
     dependencies:
@@ -8486,7 +8229,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.10
       '@babel/preset-env': 7.22.9(@babel/core@7.22.10)
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       '@ndelangen/get-tarball': 3.0.9
       '@storybook/codemod': 7.2.3
       '@storybook/core-common': 7.2.3
@@ -8574,12 +8317,6 @@ packages:
       '@storybook/global': 5.0.0
     dev: true
 
-  /@storybook/client-logger@7.2.1:
-    resolution: {integrity: sha512-Lyht/lJg2S65CXRy9rXAZXP/Mgye7jbi/aqQL8z9VRMGChbL+k/3pSZnXTTrD1OVSpCEr4UWA+9bStzT4VjtYA==}
-    dependencies:
-      '@storybook/global': 5.0.0
-    dev: true
-
   /@storybook/client-logger@7.2.3:
     resolution: {integrity: sha512-Z+mEmtv3R3ose0xmlKLKQXCF4/eMGFPafuxIyyWtb9j5/RV3svMhQahH69sAfQ4Q74XB1erE7IowBroFuUwAZw==}
     dependencies:
@@ -8591,7 +8328,7 @@ packages:
     dependencies:
       '@babel/core': 7.22.10
       '@babel/preset-env': 7.22.9(@babel/core@7.22.10)
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       '@storybook/csf': 0.1.0
       '@storybook/csf-tools': 7.2.3
       '@storybook/node-logger': 7.2.3
@@ -8621,36 +8358,11 @@ packages:
       qs: 6.11.2
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      regenerator-runtime: 0.13.11
-      util-deprecate: 1.0.2
-    dev: true
-
-  /@storybook/components@7.2.1(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-7JuMT2yK9FGPu9hFCo38tC3FDyr/hJ3CQwU6dSR6E5rT9E658dq31Xl3y/fM5OMzl8MX8Off7TWiybHSuwYJTA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18
-    dependencies:
-      '@radix-ui/react-select': 1.2.2(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 7.2.1
-      '@storybook/csf': 0.1.0
-      '@storybook/global': 5.0.0
-      '@storybook/icons': 1.1.2(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/theming': 7.2.1(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.2.1
-      memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      use-resize-observer: 9.1.0(react-dom@18.2.0)(react@18.2.0)
-      util-deprecate: 1.0.2
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-      - debug
-      - supports-color
+      regenerator-runtime: 0.13.11
+      util-deprecate: 1.0.2
     dev: true
 
-  /@storybook/components@7.2.3(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0):
+  /@storybook/components@7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-w3c5DXdwbUj/ecyM8y0SqHObRZiDpAs+SxDeUzs9GJBD25qQZoxKhLAcsMk6F+N+2uPBtimwM4l8RJSo0oZOZg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18
@@ -8867,14 +8579,6 @@ packages:
     resolution: {integrity: sha512-VTmb/zjbz3o1bg+bATzLigVXMVDC/S1FP8CqIrz4mkiys52139FGzMandL2Y2AecPZPGss7ZRdfma28HKVYTRg==}
     dev: true
 
-  /@storybook/core-events@7.1.1:
-    resolution: {integrity: sha512-P5iI4zvCJo85de/sghglEHFK/GGkWAQQKzRFrz9kbVBX5LNaosfD7IYHIz/6ZWNPzxWR+RBOKcrRUfcArL4Njg==}
-    dev: true
-
-  /@storybook/core-events@7.2.1:
-    resolution: {integrity: sha512-EUXYb3gyQ2EzpDAWkgfoDl1EPabj3OE6+zntsD/gwvzQU85BTocs10ksnRyS55bfrQpYbf+Z+gw2CZboyagLgg==}
-    dev: true
-
   /@storybook/core-events@7.2.3:
     resolution: {integrity: sha512-WWpdORiEvOl3/71xFghfEwid7ptgm9U6OxoJm8hU9e5xNuj80k2B+t4sv/iVnz872UuI5xXJqamzCqGVTblPlg==}
     dev: true
@@ -9062,12 +8766,12 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/generator': 7.22.9
-      '@babel/parser': 7.22.7
+      '@babel/generator': 7.22.10
+      '@babel/parser': 7.22.10
       '@babel/plugin-transform-react-jsx': 7.21.5(@babel/core@7.22.10)
       '@babel/preset-env': 7.22.9(@babel/core@7.22.10)
-      '@babel/traverse': 7.22.8
-      '@babel/types': 7.22.5
+      '@babel/traverse': 7.22.10
+      '@babel/types': 7.22.10
       '@storybook/csf': 0.0.2--canary.4566f4d.1
       '@storybook/mdx1-csf': 0.0.1(@babel/core@7.22.10)
       core-js: 3.32.0
@@ -9082,10 +8786,10 @@ packages:
   /@storybook/csf-tools@7.2.3:
     resolution: {integrity: sha512-OitxpUBbQgs5EguqHCam0j27j1rpBj7cpFyS4zygc/bNaoxkNk7dRUP0JI9RoUa1a162v6koLx9UZhl9Cbsf1Q==}
     dependencies:
-      '@babel/generator': 7.22.9
-      '@babel/parser': 7.22.7
-      '@babel/traverse': 7.22.8
-      '@babel/types': 7.22.5
+      '@babel/generator': 7.22.10
+      '@babel/parser': 7.22.10
+      '@babel/traverse': 7.22.10
+      '@babel/types': 7.22.10
       '@storybook/csf': 0.1.0
       '@storybook/types': 7.2.3
       fs-extra: 11.1.1
@@ -9282,10 +8986,10 @@ packages:
   /@storybook/mdx1-csf@0.0.1(@babel/core@7.22.10):
     resolution: {integrity: sha512-4biZIWWzoWlCarMZmTpqcJNgo/RBesYZwGFbQeXiGYsswuvfWARZnW9RE9aUEMZ4XPn7B1N3EKkWcdcWe/K2tg==}
     dependencies:
-      '@babel/generator': 7.22.9
-      '@babel/parser': 7.22.7
+      '@babel/generator': 7.22.10
+      '@babel/parser': 7.22.10
       '@babel/preset-env': 7.22.9(@babel/core@7.22.10)
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       '@mdx-js/mdx': 1.6.22
       '@types/lodash': 4.14.194
       js-string-escape: 1.0.1
@@ -9338,26 +9042,6 @@ packages:
       style-loader: 2.0.0(webpack@5.88.2)
     dev: true
 
-  /@storybook/preview-api@7.0.12:
-    resolution: {integrity: sha512-YI/AfHszIOYt967fsRlc7j6I0zZB+RSsBwD/nMA8y9vszdpQ0MgRhxHgQxFf6cgqbuQcdCsnTIpT0iQ4GHjDXg==}
-    dependencies:
-      '@storybook/channel-postmessage': 7.0.12
-      '@storybook/channels': 7.0.12
-      '@storybook/client-logger': 7.0.12
-      '@storybook/core-events': 7.0.12
-      '@storybook/csf': 0.1.0
-      '@storybook/global': 5.0.0
-      '@storybook/types': 7.0.12
-      '@types/qs': 6.9.7
-      dequal: 2.0.3
-      lodash: 4.17.21
-      memoizerific: 1.11.3
-      qs: 6.11.2
-      synchronous-promise: 2.0.17
-      ts-dedent: 2.2.0
-      util-deprecate: 1.0.2
-    dev: true
-
   /@storybook/preview-api@7.2.3:
     resolution: {integrity: sha512-B09hkWJUKd5TarkZos0cX75lm64iOYOep7LS/Ew42CfIHlle27VYIknHWnvjWrhiy9TSQ39PlvX1neIL02QqZg==}
     dependencies:
@@ -9487,7 +9171,7 @@ packages:
       babel-plugin-add-react-displayname: 0.0.5
       babel-plugin-react-docgen: 4.2.1
       core-js: 3.32.0
-      escodegen: 2.0.0
+      escodegen: 2.1.0
       fs-extra: 9.1.0
       global: 4.4.0
       html-tags: 3.3.1
@@ -9700,20 +9384,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@storybook/theming@7.2.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-cfnNCLvKmzxjmoYKfLl7Q64gSTouLvd23CtvBAOlWcRYnMJ9v4/7A2tK3xQyVRlJYh9OuXiHFLL8AXbN58Hkzw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18
-    dependencies:
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@storybook/client-logger': 7.2.1
-      '@storybook/global': 5.0.0
-      memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@storybook/theming@7.2.3(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-rSvBGAvuN/VdhcHh6LdeQJoIGf8fZuvY+57IYt7Vc04bASyjDl41hMRkjIB1Sbcfj7gF+OrH6G8Fc4PvvT3gyQ==}
     peerDependencies:
@@ -9737,15 +9407,6 @@ packages:
       file-system-cache: 2.3.0
     dev: true
 
-  /@storybook/types@7.2.1:
-    resolution: {integrity: sha512-YwlIY1uyxfJjijbB5x1d1QOKaUUDJnMX8BSb8oGqU4cyT76X/Is4CbGs+vccFsJo0tZu1GfuahYXl0EDT0nnSQ==}
-    dependencies:
-      '@storybook/channels': 7.2.1
-      '@types/babel__core': 7.20.0
-      '@types/express': 4.17.17
-      file-system-cache: 2.3.0
-    dev: true
-
   /@storybook/types@7.2.3:
     resolution: {integrity: sha512-g/82OoTfQ/6moYS9/cLWx5ybn1oOOEhWtsVabsgNS+NHDC2II7o4Gu4xPno2Ql60ThAdB+EQQeLsnSotWsAgCw==}
     dependencies:
@@ -9897,7 +9558,7 @@ packages:
     resolution: {integrity: sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==}
     engines: {node: '>=10'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@svgr/plugin-jsx@5.5.0:
@@ -10022,8 +9683,8 @@ packages:
   /@types/babel__core@7.20.0:
     resolution: {integrity: sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==}
     dependencies:
-      '@babel/parser': 7.22.7
-      '@babel/types': 7.22.5
+      '@babel/parser': 7.22.10
+      '@babel/types': 7.22.10
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
       '@types/babel__traverse': 7.18.5
@@ -10032,20 +9693,20 @@ packages:
   /@types/babel__generator@7.6.4:
     resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@types/babel__template@7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.22.7
-      '@babel/types': 7.22.5
+      '@babel/parser': 7.22.10
+      '@babel/types': 7.22.10
     dev: true
 
   /@types/babel__traverse@7.18.5:
     resolution: {integrity: sha512-enCvTL8m/EHS/zIvJno9nE+ndYPh1/oNFzRYRmtUqJICG2VnCSBzMLW5VN2KCQU91f23tsNKR8v7VJJQMatl7Q==}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
     dev: true
 
   /@types/body-parser@1.19.2:
@@ -11214,21 +10875,12 @@ packages:
       acorn: 7.4.1
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.8.2):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.8.2
-    dev: false
-
   /acorn-jsx@5.3.2(acorn@8.9.0):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       acorn: 8.9.0
-    dev: true
 
   /acorn-walk@7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
@@ -11256,12 +10908,12 @@ packages:
     resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
     engines: {node: '>=0.4.0'}
     hasBin: true
+    dev: true
 
   /acorn@8.9.0:
     resolution: {integrity: sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /address@1.2.2:
     resolution: {integrity: sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==}
@@ -11944,7 +11596,7 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.21.9
+      browserslist: 4.21.10
       caniuse-lite: 1.0.30001516
       fraction.js: 4.2.0
       normalize-range: 0.1.2
@@ -11973,8 +11625,8 @@ packages:
     resolution: {integrity: sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==}
     hasBin: true
     dependencies:
-      browserslist: 4.21.9
-      caniuse-lite: 1.0.30001516
+      browserslist: 4.21.10
+      caniuse-lite: 1.0.30001520
       normalize-range: 0.1.2
       num2fraction: 1.2.2
       picocolors: 0.2.1
@@ -12200,7 +11852,7 @@ packages:
     engines: {node: '>= 10.14.2'}
     dependencies:
       '@babel/template': 7.22.5
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       '@types/babel__core': 7.20.0
       '@types/babel__traverse': 7.18.5
     dev: true
@@ -12210,7 +11862,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@babel/template': 7.22.5
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       '@types/babel__core': 7.20.0
       '@types/babel__traverse': 7.18.5
     dev: true
@@ -12220,7 +11872,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@babel/template': 7.22.5
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       '@types/babel__core': 7.20.0
       '@types/babel__traverse': 7.18.5
     dev: true
@@ -12247,19 +11899,6 @@ packages:
       - supports-color
     dev: true
 
-  /babel-plugin-polyfill-corejs2@0.3.3(@babel/core@7.22.10):
-    resolution: {integrity: sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/core': 7.22.10
-      '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.22.10)
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /babel-plugin-polyfill-corejs2@0.4.5(@babel/core@7.22.10):
     resolution: {integrity: sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg==}
     peerDependencies:
@@ -12297,18 +11936,6 @@ packages:
       - supports-color
     dev: true
 
-  /babel-plugin-polyfill-corejs3@0.6.0(@babel/core@7.22.10):
-    resolution: {integrity: sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.22.10)
-      core-js-compat: 3.31.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /babel-plugin-polyfill-corejs3@0.8.3(@babel/core@7.22.10):
     resolution: {integrity: sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA==}
     peerDependencies:
@@ -12332,17 +11959,6 @@ packages:
       - supports-color
     dev: true
 
-  /babel-plugin-polyfill-regenerator@0.4.1(@babel/core@7.22.10):
-    resolution: {integrity: sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.22.10)
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /babel-plugin-polyfill-regenerator@0.5.2(@babel/core@7.22.10):
     resolution: {integrity: sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA==}
     peerDependencies:
@@ -12783,7 +12399,6 @@ packages:
       electron-to-chromium: 1.4.490
       node-releases: 2.0.13
       update-browserslist-db: 1.0.11(browserslist@4.21.10)
-    dev: true
 
   /browserslist@4.21.5:
     resolution: {integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==}
@@ -12794,6 +12409,7 @@ packages:
       electron-to-chromium: 1.4.463
       node-releases: 2.0.13
       update-browserslist-db: 1.0.11(browserslist@4.21.5)
+    dev: true
 
   /browserslist@4.21.9:
     resolution: {integrity: sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==}
@@ -13116,7 +12732,6 @@ packages:
 
   /caniuse-lite@1.0.30001520:
     resolution: {integrity: sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==}
-    dev: true
 
   /capture-exit@2.0.0:
     resolution: {integrity: sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==}
@@ -13710,7 +13325,7 @@ packages:
   /core-js-compat@3.31.1:
     resolution: {integrity: sha512-wIDWd2s5/5aJSdpOJHfSibxNODxoGoWOBHt8JSPB41NOE94M7kuTPZCYLOlTtuoXTsBPKobpJ6T+y0SSy5L9SA==}
     dependencies:
-      browserslist: 4.21.9
+      browserslist: 4.21.10
     dev: true
 
   /core-js-pure@3.30.2:
@@ -13927,13 +13542,13 @@ packages:
     peerDependencies:
       webpack: ^4.27.0 || ^5.0.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.24)
+      icss-utils: 5.1.0(postcss@8.4.27)
       loader-utils: 2.0.4
-      postcss: 8.4.24
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.24)
-      postcss-modules-local-by-default: 4.0.0(postcss@8.4.24)
-      postcss-modules-scope: 3.0.0(postcss@8.4.24)
-      postcss-modules-values: 4.0.0(postcss@8.4.24)
+      postcss: 8.4.27
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.27)
+      postcss-modules-local-by-default: 4.0.0(postcss@8.4.27)
+      postcss-modules-scope: 3.0.0(postcss@8.4.27)
+      postcss-modules-values: 4.0.0(postcss@8.4.27)
       postcss-value-parser: 4.2.0
       schema-utils: 3.3.0
       semver: 7.5.3
@@ -14777,7 +14392,6 @@ packages:
 
   /electron-to-chromium@1.4.490:
     resolution: {integrity: sha512-6s7NVJz+sATdYnIwhdshx/N/9O6rvMxmhVoDSDFdj6iA45gHR8EQje70+RYsF4GeB+k0IeNSBnP7yG9ZXJFr7A==}
-    dev: true
 
   /element-resize-detector@1.2.4:
     resolution: {integrity: sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==}
@@ -15233,19 +14847,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /escodegen@2.0.0:
-    resolution: {integrity: sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==}
-    engines: {node: '>=6.0'}
-    hasBin: true
-    dependencies:
-      esprima: 4.0.1
-      estraverse: 5.3.0
-      esutils: 2.0.3
-      optionator: 0.8.3
-    optionalDependencies:
-      source-map: 0.6.1
-    dev: true
-
   /escodegen@2.1.0:
     resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
     engines: {node: '>=6.0'}
@@ -15607,8 +15208,8 @@ packages:
     resolution: {integrity: sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg==}
     engines: {node: '>=8.3.0'}
     dependencies:
-      '@babel/traverse': 7.22.8
-      '@babel/types': 7.22.5
+      '@babel/traverse': 7.22.10
+      '@babel/types': 7.22.10
       c8: 7.13.0
     transitivePeerDependencies:
       - supports-color
@@ -16349,7 +15950,7 @@ packages:
       vue-template-compiler:
         optional: true
     dependencies:
-      '@babel/code-frame': 7.22.5
+      '@babel/code-frame': 7.22.10
       chalk: 2.4.2
       micromatch: 3.1.10
       minimatch: 3.1.2
@@ -16376,7 +15977,7 @@ packages:
       vue-template-compiler:
         optional: true
     dependencies:
-      '@babel/code-frame': 7.22.5
+      '@babel/code-frame': 7.22.10
       '@types/json-schema': 7.0.11
       chalk: 4.1.2
       chokidar: 3.5.3
@@ -17728,15 +17329,6 @@ packages:
       postcss: 7.0.39
     dev: true
 
-  /icss-utils@5.1.0(postcss@8.4.24):
-    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      postcss: 8.4.24
-    dev: true
-
   /icss-utils@5.1.0(postcss@8.4.27):
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -18565,7 +18157,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/parser': 7.22.7
+      '@babel/parser': 7.22.10
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.1
@@ -19201,7 +18793,7 @@ packages:
     resolution: {integrity: sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==}
     engines: {node: '>= 10.14.2'}
     dependencies:
-      '@babel/traverse': 7.22.8
+      '@babel/traverse': 7.22.10
       '@jest/environment': 26.6.2
       '@jest/source-map': 26.6.2
       '@jest/test-result': 26.6.2
@@ -19310,7 +18902,7 @@ packages:
     resolution: {integrity: sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==}
     engines: {node: '>= 10.14.2'}
     dependencies:
-      '@babel/code-frame': 7.22.5
+      '@babel/code-frame': 7.22.10
       '@jest/types': 26.6.2
       '@types/stack-utils': 2.0.1
       chalk: 4.1.2
@@ -19325,7 +18917,7 @@ packages:
     resolution: {integrity: sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@babel/code-frame': 7.22.5
+      '@babel/code-frame': 7.22.10
       '@jest/types': 27.5.1
       '@types/stack-utils': 2.0.1
       chalk: 4.1.2
@@ -19717,7 +19309,7 @@ packages:
     resolution: {integrity: sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==}
     engines: {node: '>= 10.14.2'}
     dependencies:
-      '@babel/types': 7.22.5
+      '@babel/types': 7.22.10
       '@jest/types': 26.6.2
       '@types/babel__traverse': 7.18.5
       '@types/prettier': 2.7.2
@@ -19742,10 +19334,10 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/generator': 7.22.9
+      '@babel/generator': 7.22.10
       '@babel/plugin-syntax-typescript': 7.21.4(@babel/core@7.22.10)
-      '@babel/traverse': 7.22.8
-      '@babel/types': 7.22.5
+      '@babel/traverse': 7.22.10
+      '@babel/types': 7.22.10
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
       '@types/babel__traverse': 7.18.5
@@ -20041,7 +19633,7 @@ packages:
       '@babel/preset-env': ^7.1.6
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/parser': 7.22.7
+      '@babel/parser': 7.22.10
       '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.22.10)
       '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.22.10)
       '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.22.10)
@@ -20458,14 +20050,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /levn@0.3.0:
-    resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.1.2
-      type-check: 0.3.2
-    dev: true
-
   /levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -22364,18 +21948,6 @@ packages:
     hasBin: true
     dev: true
 
-  /optionator@0.8.3:
-    resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.3.0
-      prelude-ls: 1.1.2
-      type-check: 0.3.2
-      word-wrap: 1.2.3
-    dev: true
-
   /optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
@@ -22666,7 +22238,7 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/code-frame': 7.22.5
+      '@babel/code-frame': 7.22.10
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -23069,15 +22641,6 @@ packages:
       postcss: 7.0.39
     dev: true
 
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.24):
-    resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      postcss: 8.4.24
-    dev: true
-
   /postcss-modules-extract-imports@3.0.0(postcss@8.4.27):
     resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -23097,18 +22660,6 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-modules-local-by-default@4.0.0(postcss@8.4.24):
-    resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      icss-utils: 5.1.0(postcss@8.4.24)
-      postcss: 8.4.24
-      postcss-selector-parser: 6.0.13
-      postcss-value-parser: 4.2.0
-    dev: true
-
   /postcss-modules-local-by-default@4.0.0(postcss@8.4.27):
     resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -23129,16 +22680,6 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-modules-scope@3.0.0(postcss@8.4.24):
-    resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      postcss: 8.4.24
-      postcss-selector-parser: 6.0.13
-    dev: true
-
   /postcss-modules-scope@3.0.0(postcss@8.4.27):
     resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -23156,16 +22697,6 @@ packages:
       postcss: 7.0.39
     dev: true
 
-  /postcss-modules-values@4.0.0(postcss@8.4.24):
-    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
-    engines: {node: ^10 || ^12 || >= 14}
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      icss-utils: 5.1.0(postcss@8.4.24)
-      postcss: 8.4.24
-    dev: true
-
   /postcss-modules-values@4.0.0(postcss@8.4.27):
     resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -23257,15 +22788,6 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /postcss@8.4.24:
-    resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: true
-
   /postcss@8.4.27:
     resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -23285,11 +22807,6 @@ packages:
       which-pm: 2.0.0
     dev: true
 
-  /prelude-ls@1.1.2:
-    resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
-    engines: {node: '>= 0.8.0'}
-    dev: true
-
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -23751,7 +23268,7 @@ packages:
     hasBin: true
     dependencies:
       '@babel/core': 7.22.10
-      '@babel/generator': 7.22.9
+      '@babel/generator': 7.22.10
       '@babel/runtime': 7.21.5
       ast-types: 0.14.2
       commander: 2.20.3
@@ -23825,9 +23342,9 @@ packages:
       react-dom: '>=17 || >=18'
     dependencies:
       '@types/jsdom': 16.2.15
-      acorn: 8.8.2
-      acorn-jsx: 5.3.2(acorn@8.8.2)
-      browserslist: 4.21.5
+      acorn: 8.9.0
+      acorn-jsx: 5.3.2(acorn@8.9.0)
+      browserslist: 4.21.10
       core-js: 3.32.0
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -25598,12 +25115,12 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      '@storybook/addons': 7.0.12(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addons': 7.2.3(react-dom@18.2.0)(react@18.2.0)
       '@storybook/api': 7.0.12(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/components': 7.2.1(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 7.1.1
+      '@storybook/components': 7.2.3(@types/react-dom@18.2.7)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/core-events': 7.2.3
       '@storybook/global': 5.0.0
-      '@storybook/theming': 7.2.1(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/theming': 7.2.3(react-dom@18.2.0)(react@18.2.0)
       fast-deep-equal: 3.1.3
       memoizerific: 1.11.3
       react: 18.2.0
@@ -26793,13 +26310,6 @@ packages:
     resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}
     dev: true
 
-  /type-check@0.3.2:
-    resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.1.2
-    dev: true
-
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -27238,7 +26748,6 @@ packages:
       browserslist: 4.21.10
       escalade: 3.1.1
       picocolors: 1.0.0
-    dev: true
 
   /update-browserslist-db@1.0.11(browserslist@4.21.5):
     resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
@@ -27249,6 +26758,7 @@ packages:
       browserslist: 4.21.5
       escalade: 3.1.1
       picocolors: 1.0.0
+    dev: true
 
   /update-browserslist-db@1.0.11(browserslist@4.21.9):
     resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
@@ -28249,11 +27759,6 @@ packages:
     resolution: {integrity: sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==}
     dev: true
 
-  /word-wrap@1.2.3:
-    resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /wordwrap@1.0.0:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
     dev: true