From df0da9a5d4f4e8f3bad958578c710795c3f05289 Mon Sep 17 00:00:00 2001
From: Eirik Backer <eirik.backer@gmail.com>
Date: Thu, 24 Oct 2024 09:55:51 +0200
Subject: [PATCH] feat: relative sizing (#2541)

Work on #2508
Minor adjustments will be done in #2665

---------

Co-authored-by: Michael Marszalek <mimarz@gmail.com>
---
 .changeset/fair-beds-destroy.md               |   6 +
 packages/css/accordion.css                    |  15 +-
 packages/css/alert.css                        |  19 -
 packages/css/avatar.css                       |  18 +-
 packages/css/badge.css                        |  25 +-
 packages/css/base/base.css                    |  94 +-
 packages/css/breadcrumbs.css                  |  16 -
 packages/css/button.css                       |  43 +-
 packages/css/card.css                         |  12 +-
 packages/css/chip.css                         |  21 +-
 packages/css/dropdown.css                     |  39 +-
 packages/css/error-summary.css                |   1 +
 packages/css/heading.css                      |  11 +-
 packages/css/helptext.css                     |  10 -
 packages/css/index.css                        | 105 ++
 packages/css/input.css                        |  41 +-
 packages/css/label.css                        |  15 -
 packages/css/list.css                         |  14 -
 packages/css/pagination.css                   |  20 +-
 packages/css/paragraph.css                    |  56 +-
 packages/css/popover.css                      |  14 -
 packages/css/search.css                       |   2 +-
 packages/css/spinner.css                      |  21 +-
 packages/css/table.css                        |  17 -
 packages/css/tabs.css                         |  27 +-
 packages/css/tag.css                          |  19 +-
 packages/css/tooltip.css                      |   3 +-
 packages/css/validation-message.css           |  21 -
 .../src/components/Alert/Alert.stories.tsx    |   2 +-
 packages/react/src/components/Alert/Alert.tsx |   7 +-
 .../src/components/Avatar/Avatar.test.tsx     |   1 -
 .../react/src/components/Avatar/Avatar.tsx    |   5 +-
 packages/react/src/components/Badge/Badge.tsx |   7 +-
 .../components/Breadcrumbs/Breadcrumbs.tsx    |   4 +-
 .../react/src/components/Button/Button.mdx    |  18 +-
 .../src/components/Button/Button.stories.tsx  |  50 +-
 .../react/src/components/Button/Button.tsx    |   6 +-
 .../src/components/Card/Card.stories.tsx      | 101 +-
 packages/react/src/components/Chip/Chips.tsx  |   4 +-
 .../src/components/Dropdown/Dropdown.tsx      |  39 +-
 .../src/components/Dropdown/DropdownItem.tsx  |   9 +-
 .../components/ErrorSummary/ErrorSummary.tsx  |  11 +-
 .../ErrorSummary/ErrorSummaryHeading.tsx      |  21 +-
 .../ErrorSummary/ErrorSummaryList.tsx         |   7 +-
 .../react/src/components/Heading/Heading.tsx  |   7 +-
 .../src/components/HelpText/HelpText.tsx      |  19 +-
 packages/react/src/components/Label/Label.tsx |   4 +-
 packages/react/src/components/List/Lists.tsx  |   4 +-
 .../src/components/Modal/Modal.stories.tsx    |  16 +-
 packages/react/src/components/Modal/Modal.tsx |   1 -
 .../Pagination/Pagination.stories.tsx         |   8 +-
 .../src/components/Pagination/Pagination.tsx  |  26 +-
 .../Pagination/PaginationButton.tsx           |   8 +-
 .../components/Pagination/PaginationList.tsx  |   2 +-
 .../src/components/Paragraph/Paragraph.tsx    |   5 +-
 .../react/src/components/Popover/Popover.tsx  |   6 +-
 .../src/components/Table/Table.stories.tsx    | 213 ++--
 packages/react/src/components/Table/Table.tsx |   6 +-
 packages/react/src/components/Tabs/Tabs.tsx   |   8 +-
 .../react/src/components/Tabs/TabsPanel.tsx   |   2 +-
 packages/react/src/components/Tag/Tag.tsx     |   6 +-
 .../components/ToggleGroup/ToggleGroup.tsx    |  21 +-
 .../ToggleGroup/ToggleGroupItem.tsx           |   3 +-
 .../ToggleGroup/useToggleGroupitem.ts         |   3 -
 .../components/Tooltip/Tooltip.stories.tsx    |  15 +-
 .../react/src/components/Tooltip/Tooltip.tsx  |   2 +-
 .../ValidationMessage/ValidationMessage.tsx   |   4 +-
 .../src/components/form/Combobox/Combobox.tsx |   2 +-
 .../react/src/components/form/Input/Input.tsx |   6 +-
 .../src/components/form/Search/Search.tsx     |   3 +-
 .../src/components/form/Select/Select.tsx     |   3 +-
 .../form/Textarea/Textarea.stories.tsx        |   1 -
 .../src/components/form/Textarea/Textarea.tsx |   3 +-
 .../components/form/Textfield/Textfield.tsx   |   3 +-
 .../react/src/components/form/useFormField.ts |   3 +-
 .../loaders/Spinner/Spinner.test.tsx          |   8 -
 .../components/loaders/Spinner/Spinner.tsx    |   4 +-
 .../react/src/{types/Portal.ts => types.ts}   |   2 +
 packages/react/stories/testing.stories.tsx    | 911 +++++++++++++++++-
 79 files changed, 1431 insertions(+), 904 deletions(-)
 create mode 100644 .changeset/fair-beds-destroy.md
 rename packages/react/src/{types/Portal.ts => types.ts} (84%)

diff --git a/.changeset/fair-beds-destroy.md b/.changeset/fair-beds-destroy.md
new file mode 100644
index 0000000000..68c96596f7
--- /dev/null
+++ b/.changeset/fair-beds-destroy.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+CSS: base sizing on font-size so all components can have all sizes, and naturally inherits size from context
diff --git a/packages/css/accordion.css b/packages/css/accordion.css
index ea7e8e5fe1..cb0cb3a665 100644
--- a/packages/css/accordion.css
+++ b/packages/css/accordion.css
@@ -8,7 +8,8 @@
   --dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-default);
   --dsc-accordion-heading-background--open: var(--ds-color-neutral-background-subtle);
   --dsc-accordion-heading-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-padding: var(--ds-spacing-4);
+  --dsc-accordion-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-accordion-size: var(--ds-sizing-14);
 
   &[data-border] > * {
     border: var(--dsc-accordion-border);
@@ -65,16 +66,18 @@
   box-sizing: border-box;
 
   & > :is(summary, u-summary) {
+    align-items: center;
     background: var(--dsc-accordion-heading-background);
     box-sizing: border-box;
     cursor: pointer;
+    display: flex;
     list-style: none;
+    min-height: var(--dsc-accordion-size);
+    gap: var(--dsc-accordion-chevron-gap);
     outline: none;
-    padding-block: var(--dsc-accordion-padding);
-    padding-inline: calc(var(--dsc-accordion-padding) + var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) var(--dsc-accordion-padding);
+    padding: var(--dsc-accordion-padding);
 
     @composes ds-focus from './base/base.css';
-    @composes ds-body-text--sm from './base/base.css';
 
     &:focus-visible {
       position: relative; /* Ensure foucs outline renders on top */
@@ -84,11 +87,9 @@
       background: currentcolor;
       border-radius: var(--ds-border-radius-md);
       content: '';
+      flex-shrink: 0;
       height: var(--dsc-accordion-chevron-size);
       mask: 50% / contain no-repeat var(--dsc-accordion-chevron-url);
-      position: absolute;
-      margin-inline: calc((var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
-
       width: var(--dsc-accordion-chevron-size);
     }
   }
diff --git a/packages/css/alert.css b/packages/css/alert.css
index 4868a9d0c4..fe28d6aaae 100644
--- a/packages/css/alert.css
+++ b/packages/css/alert.css
@@ -18,8 +18,6 @@
   padding-inline: calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding);
   position: relative;
 
-  @composes ds-body-text--md from './base/base.css';
-
   & > :is(h1, h2, h3, h4, h5, h6):first-child::before /* If Alert starts with Heading, align icon to this */,
   &:not(:has(> :is(h1, h2, h3, h4, h5, h6):first-child))::before /* If there is no Heading, align icon to Alert itself */ {
     background: var(--dsc-alert-icon-color);
@@ -55,21 +53,4 @@
     --dsc-alert-icon-color: var(--ds-color-danger-text-subtle);
     --dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
   }
-
-  /**
-   * Sizes
-   */
-  &[data-size='sm'] {
-    --dsc-alert-icon-size: var(--ds-sizing-6);
-    --dsc-alert-padding: var(--ds-spacing-5);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-alert-icon-size: var(--ds-sizing-8);
-    --dsc-alert-padding: var(--ds-spacing-7);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
 }
diff --git a/packages/css/avatar.css b/packages/css/avatar.css
index 0f17adc12a..3e37c02b1a 100644
--- a/packages/css/avatar.css
+++ b/packages/css/avatar.css
@@ -12,6 +12,7 @@
   box-sizing: border-box;
   color: var(--dsc-avatar-color);
   display: inline-flex;
+  font-weight: var(--ds-font-weight-medium);
   height: var(--dsc-avatar-size);
   justify-content: center;
   overflow: hidden;
@@ -19,8 +20,6 @@
   text-transform: uppercase;
   user-select: none;
 
-  @composes ds-body-text--xs from './base/base.css';
-
   &:not(:has(> img)) {
     padding: var(--dsc-avatar-padding);
   }
@@ -79,31 +78,20 @@
     --dsc-avatar-color: var(--ds-color-brand3-contrast-default);
   }
 
+  /* TODO: Sizes */
   &[data-size='xs'] {
-    --dsc-avatar-size: var(--ds-sizing-7);
-    --dsc-avatar-padding: var(--ds-spacing-1);
-
-    @composes ds-body-text--xs from './base/base.css';
+    font-size: var(--ds-body-xs-font-size);
   }
 
   &[data-size='sm'] {
-    --dsc-avatar-size: var(--ds-sizing-9);
-    --dsc-avatar-padding: var(--ds-spacing-1);
-
     @composes ds-heading-text--2xs from './base/base.css';
   }
 
   &[data-size='md'] {
-    --dsc-avatar-size: var(--ds-sizing-12);
-    --dsc-avatar-padding: var(--ds-spacing-2);
-
     @composes ds-heading-text--sm from './base/base.css';
   }
 
   &[data-size='lg'] {
-    --dsc-avatar-size: var(--ds-sizing-15);
-    --dsc-avatar-padding: var(--ds-spacing-2);
-
     @composes ds-heading-text--md from './base/base.css';
   }
 }
diff --git a/packages/css/badge.css b/packages/css/badge.css
index 6d171b3bf8..704c304062 100644
--- a/packages/css/badge.css
+++ b/packages/css/badge.css
@@ -6,10 +6,9 @@
 
   box-sizing: border-box;
   display: inline-flex;
+  line-height: var(--ds-line-height-sm);
   position: relative;
 
-  @composes ds-body-text--short-sm from './base/base.css';
-
   &::before {
     content: attr(data-count);
     background: var(--dsc-badge-background);
@@ -23,26 +22,8 @@
     place-items: center;
   }
 
-  &[data-size='sm'] {
-    --dsc-badge-size: var(--ds-sizing-3);
-    --dsc-badge-padding: 0 var(--ds-spacing-1);
-
-    @composes ds-body-text--short-xs from './base/base.css';
-
-    &[data-count] {
-      --dsc-badge-size: var(--ds-sizing-5);
-    }
-  }
-
-  &[data-size='lg'] {
-    --dsc-badge-size: var(--ds-sizing-4);
-    --dsc-badge-padding: 0 var(--ds-spacing-2);
-
-    @composes ds-body-text--short-md from './base/base.css';
-
-    &[data-count] {
-      --dsc-badge-size: var(--ds-sizing-7);
-    }
+  &:not([data-size]) {
+    font-size: var(--ds-font-size-minus-1); /* Default to small when size is not defined */
   }
 
   &[data-color='info'] {
diff --git a/packages/css/base/base.css b/packages/css/base/base.css
index 62863d5826..37ce955b0f 100644
--- a/packages/css/base/base.css
+++ b/packages/css/base/base.css
@@ -17,6 +17,14 @@
   --dsc-focus-border-width: 3px; /* Default focus border width */
   --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
   --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
+  --ds-font-size-minus-1: max(.9em, .875rem); /* Default to 90% of font-size, but minimum 14px */
+  --ds-font-size-plus-1: 1.1em; /* Default to 110% */
+
+  /* font-size adjustments if supporting round() */
+  @supports (width: round(down, .1em, 1px)) {
+    --ds-font-size-minus-1: round(down, max(.9em, .875rem), 0.0625rem); /* Default to 90% of font-size, but minimum 14px */
+    --ds-font-size-plus-1: round(down, 1.1em, 0.0625rem); /* Default to 110% */
+  }
 
   color: var(--ds-color-neutral-text-default);
   background-color: var(--ds-color-neutral-background-default);
@@ -42,114 +50,44 @@
   outline-offset: var(--dsc-focus-border-width);
 }
 
-/** Body typography */
-.ds-body-text--xs {
+[data-size='xs'] {
   font-weight: var(--ds-body-xs-font-weight);
   line-height: var(--ds-body-xs-line-height);
   font-size: var(--ds-body-xs-font-size);
   letter-spacing: var(--ds-body-xs-letter-spacing);
 }
 
-.ds-body-text--sm {
+[data-size='sm'] {
   font-weight: var(--ds-body-sm-font-weight);
   line-height: var(--ds-body-sm-line-height);
   font-size: var(--ds-body-sm-font-size);
   letter-spacing: var(--ds-body-sm-letter-spacing);
 }
 
-.ds-body-text--md {
+/* Setting default font on <body> not :root/<html> to ensure 1rem is still 16px */
+body,
+[data-size='md'] {
   font-weight: var(--ds-body-md-font-weight);
   line-height: var(--ds-body-md-line-height);
   font-size: var(--ds-body-md-font-size);
   letter-spacing: var(--ds-body-md-letter-spacing);
 }
 
-.ds-body-text--lg {
+[data-size='lg'] {
   font-weight: var(--ds-body-lg-font-weight);
   line-height: var(--ds-body-lg-line-height);
   font-size: var(--ds-body-lg-font-size);
   letter-spacing: var(--ds-body-lg-letter-spacing);
 }
 
-.ds-body-text--xl {
+[data-size='xl'] {
   font-weight: var(--ds-body-xl-font-weight);
   line-height: var(--ds-body-xl-line-height);
   font-size: var(--ds-body-xl-font-size);
   letter-spacing: var(--ds-body-xl-letter-spacing);
 }
 
-.ds-body-text--long-xs {
-  font-weight: var(--ds-body-long-xs-font-weight);
-  line-height: var(--ds-body-long-xs-line-height);
-  font-size: var(--ds-body-long-xs-font-size);
-  letter-spacing: var(--ds-body-long-xs-letter-spacing);
-}
-
-.ds-body-text--long-sm {
-  font-weight: var(--ds-body-long-sm-font-weight);
-  line-height: var(--ds-body-long-sm-line-height);
-  font-size: var(--ds-body-long-sm-font-size);
-  letter-spacing: var(--ds-body-long-sm-letter-spacing);
-}
-
-.ds-body-text--long-md {
-  font-weight: var(--ds-body-long-md-font-weight);
-  line-height: var(--ds-body-long-md-line-height);
-  font-size: var(--ds-body-long-md-font-size);
-  letter-spacing: var(--ds-body-long-md-letter-spacing);
-}
-
-.ds-body-text--long-lg {
-  font-weight: var(--ds-body-long-lg-font-weight);
-  line-height: var(--ds-body-long-lg-line-height);
-  font-size: var(--ds-body-long-lg-font-size);
-  letter-spacing: var(--ds-body-long-lg-letter-spacing);
-}
-
-.ds-body-text--long-xl {
-  font-weight: var(--ds-body-long-xl-font-weight);
-  line-height: var(--ds-body-long-xl-line-height);
-  font-size: var(--ds-body-long-xl-font-size);
-  letter-spacing: var(--ds-body-long-xl-letter-spacing);
-}
-
-.ds-body-text--short-xs {
-  font-weight: var(--ds-body-short-xs-font-weight);
-  line-height: var(--ds-body-short-xs-line-height);
-  font-size: var(--ds-body-short-xs-font-size);
-  letter-spacing: var(--ds-body-short-xs-letter-spacing);
-}
-
-.ds-body-text--short-sm {
-  font-weight: var(--ds-body-short-sm-font-weight);
-  line-height: var(--ds-body-short-sm-line-height);
-  font-size: var(--ds-body-short-sm-font-size);
-  letter-spacing: var(--ds-body-short-sm-letter-spacing);
-}
-
-.ds-body-text--short-md {
-  font-weight: var(--ds-body-short-md-font-weight);
-  line-height: var(--ds-body-short-md-line-height);
-  font-size: var(--ds-body-short-md-font-size);
-  letter-spacing: var(--ds-body-short-md-letter-spacing);
-}
-
-.ds-body-text--short-lg {
-  font-weight: var(--ds-body-short-lg-font-weight);
-  line-height: var(--ds-body-short-lg-line-height);
-  font-size: var(--ds-body-short-lg-font-size);
-  letter-spacing: var(--ds-body-short-lg-letter-spacing);
-}
-
-.ds-body-text--short-xl {
-  font-weight: var(--ds-body-short-xl-font-weight);
-  line-height: var(--ds-body-short-xl-line-height);
-  font-size: var(--ds-body-short-xl-font-size);
-  letter-spacing: var(--ds-body-short-xl-letter-spacing);
-}
-
 /** Heading */
-
 .ds-heading-text--2xs {
   font-weight: var(--ds-heading-2xs-font-weight);
   line-height: var(--ds-heading-2xs-line-height);
@@ -199,6 +137,7 @@
   letter-spacing: var(--ds-heading-2xl-letter-spacing);
 }
 
+/* TODO: Maybe remove label sizes after sync with design */
 .ds-label--md {
   font-size: var(--ds-label-md-font-size);
   font-weight: var(--ds-label-md-font-weight);
@@ -227,6 +166,7 @@
   letter-spacing: var(--ds-label-lg-letter-spacing);
 }
 
+/* TODO: Maybe remove validation sizes after sync with design */
 .ds-validation-message--xs {
   font-weight: var(--ds-validation-message-xs-font-weight);
   line-height: var(--ds-validation-message-xs-line-height);
diff --git a/packages/css/breadcrumbs.css b/packages/css/breadcrumbs.css
index 851f4d2dda..fb778a47d0 100644
--- a/packages/css/breadcrumbs.css
+++ b/packages/css/breadcrumbs.css
@@ -3,22 +3,6 @@
   --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
   --dsc-breadcrumbs-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
 
-  @composes ds-body-text--md from './base/base.css';
-
-  &[data-size='sm'] {
-    --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
-    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
-    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
-
   & > :is(ol, ul) {
     display: flex;
     flex-wrap: wrap;
diff --git a/packages/css/button.css b/packages/css/button.css
index 86815edcd5..7b01cc64b9 100644
--- a/packages/css/button.css
+++ b/packages/css/button.css
@@ -5,13 +5,9 @@
   --dsc-button-color: var(--ds-color-accent-contrast-default);
   --dsc-button-font-size: var(--ds-font-size-5);
   --dsc-button-gap: var(--ds-spacing-2);
-  --dsc-button-padding-block: var(--ds-spacing-2);
-  --dsc-button-padding-inline: var(--ds-spacing-4);
+  --dsc-button-padding: var(--ds-spacing-2) var(--ds-spacing-4);
   --dsc-button-size: var(--ds-sizing-12);
 
-  @composes ds-body-text--short-md from './base/base.css';
-  @composes ds-focus from './base/base.css';
-
   align-items: center;
   background: var(--dsc-button-background);
   border-radius: var(--ds-border-radius-default);
@@ -20,19 +16,27 @@
   color: var(--dsc-button-color);
   cursor: pointer;
   font-family: inherit;
+  font-weight: var(--ds-font-weight-medium);
   gap: var(--dsc-button-gap);
   justify-content: center;
+  line-height: var(--ds-line-height-sm);
   min-height: var(--dsc-button-size);
   min-width: var(--dsc-button-size);
   outline: none;
-  padding: var(--dsc-button-padding-block) var(--dsc-button-padding-inline);
+  padding: var(--dsc-button-padding);
   text-align: inherit;
   text-decoration: none;
-  font-weight: var(--ds-font-weight-medium);
 
-  & svg,
-  & img {
+  @composes ds-focus from './base/base.css';
+
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inheriting font-size when <button> */
+  }
+
+  & :where(img, svg) {
     flex-shrink: 0;
+    font-size: 1.25em;
+    margin-block: -99em; /* Prevent large icon from crashing with padding */
   }
 
   &:focus-visible {
@@ -43,27 +47,8 @@
     display: flex;
   }
 
-  &[data-size='sm'] {
-    --dsc-button-gap: var(--ds-sizing-1);
-    --dsc-button-padding-block: var(--ds-spacing-2);
-    --dsc-button-padding-inline: var(--ds-spacing-3);
-    --dsc-button-size: var(--ds-sizing-10);
-
-    @composes ds-body-text--short-sm from './base/base.css';
-    font-weight: var(--ds-font-weight-medium);
-  }
-
-  &[data-size='lg'] {
-    --dsc-button-padding-block: var(--ds-spacing-3);
-    --dsc-button-padding-inline: var(--ds-spacing-5);
-    --dsc-button-size: var(--ds-sizing-14);
-
-    @composes ds-body-text--short-lg from './base/base.css';
-    font-weight: var(--ds-font-weight-medium);
-  }
-
   &[data-icon] {
-    padding-inline: var(--dsc-button-padding-block);
+    padding: 0;
   }
 
   &[data-fullwidth] {
diff --git a/packages/css/card.css b/packages/css/card.css
index 1815e7f047..51ea19eaee 100644
--- a/packages/css/card.css
+++ b/packages/css/card.css
@@ -5,20 +5,24 @@
   --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
   --dsc-card-border: 1px solid var(--dsc-card-border-color);
   --dsc-card-color: var(--ds-color-neutral-text-default);
-  --dsc-card-gap: 1rem;
+  --dsc-card-gap: var(--ds-spacing-3);
   --dsc-card-padding: var(--ds-spacing-6);
 
-  all: unset; /* Reset if <button> */
-  display: block;
   background: var(--dsc-card-background);
   border-radius: var(--ds-border-radius-lg);
   border: var(--dsc-card-border);
   box-sizing: border-box;
   color: var(--dsc-card-color);
+  display: block;
+  font-family: inherit;
+  margin: 0;
   overflow: clip; /* Needed to clip media elements and and Card.Block */
   padding: var(--dsc-card-padding);
+  text-align: inherit;
 
-  @composes ds-paragraph from './paragraph.css'; /* Must be after all: unset */
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inheriting font-size when <button> */
+  }
 
   /* Style link in heading, or heading when Card is anchor */
   :is(h1, h2, h3, h4, h5, h6) a:any-link /* Using :any-link to target both a and a:visited */,
diff --git a/packages/css/chip.css b/packages/css/chip.css
index 7f481211f3..5d9506eea9 100644
--- a/packages/css/chip.css
+++ b/packages/css/chip.css
@@ -10,7 +10,6 @@
   --dsc-chip-padding: 0 var(--ds-spacing-3);
 
   @composes ds-focus from './base/base.css';
-  @composes ds-body-text--short-sm from './base/base.css';
 
   align-items: center;
   background: var(--dsc-chip-background);
@@ -25,6 +24,10 @@
   padding: var(--dsc-chip-padding);
   text-decoration: none;
 
+  &:not([data-size]) {
+    font-size: var(--ds-font-size-minus-1);
+  }
+
   /* Make focus ring also when input inside is focused */
   &:has(:focus-visible) {
     @composes ds-focus--visible from './base/base.css';
@@ -54,22 +57,6 @@
     width: var(--dsc-chip-icon-size);
   }
 
-  &[data-size='sm'] {
-    --dsc-chip-height: var(--ds-sizing-7);
-    --dsc-chip-icon-size: var(--ds-sizing-5);
-    --dsc-chip-input-size: var(--ds-spacing-4);
-
-    @composes ds-body-text--short-xs from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-chip-height: var(--ds-sizing-9);
-    --dsc-chip-icon-size: var(--ds-sizing-7);
-    --dsc-chip-input-size: var(--ds-spacing-6);
-
-    @composes ds-body-text--short-md from './base/base.css';
-  }
-
   & > input {
     --gap: calc((var(--dsc-chip-height) - var(--dsc-chip-input-size)) / 2); /* Gap is based on remaining space between input and edge */
 
diff --git a/packages/css/dropdown.css b/packages/css/dropdown.css
index 1ef9ab4c22..2d874a0258 100644
--- a/packages/css/dropdown.css
+++ b/packages/css/dropdown.css
@@ -1,8 +1,7 @@
 .ds-dropdown {
   --dsc-dropdown-padding: var(--ds-spacing-3) var(--ds-spacing-2);
-  --dsc-dropdown-min-width: 16rem;
-  --dsc-dropdown-item-padding: 0 var(--ds-spacing-4);
-  --dsc-dropdown-header-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-dropdown-item-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-dropdown-item-size: var(--ds-spacing-12);
 
   background-color: var(--ds-color-neutral-background-default);
   border-radius: var(--ds-border-radius-md);
@@ -10,7 +9,7 @@
   box-shadow: var(--ds-shadow-md);
   box-sizing: border-box;
   list-style: none;
-  min-width: var(--dsc-dropdown-min-width);
+  min-width: 15em;
   padding: var(--dsc-dropdown-padding);
 
   /* Remove popover arrow */
@@ -19,33 +18,21 @@
   }
 
   .ds-dropdown__heading {
-    padding: var(--dsc-dropdown-header-padding);
-
-    @composes ds-body-text--md from './base/base.css';
-  }
-
-  &[data-size='sm'] {
-    --dsc-dropdown-padding: var(--ds-spacing-2);
-    --dsc-dropdown-min-width: 15rem;
-
-    & .ds-dropdown__heading {
-      @composes ds-body-text--sm from './base/base.css';
-    }
-  }
-
-  &[data-size='lg'] {
-    --dsc-dropdown-padding: var(--ds-spacing-4) var(--ds-spacing-2);
-    --dsc-dropdown-min-width: 18rem;
-
-    & .ds-dropdown__heading {
-      @composes ds-body-text--lg from './base/base.css';
-    }
+    align-items: center;
+    box-sizing: border-box;
+    color: var(--ds-color-neutral-text-subtle);
+    display: flex;
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    min-height: var(--dsc-dropdown-item-size);
+    padding: var(--dsc-dropdown-item-padding);
   }
 
   & :is(a, button, [role='button']) {
-    box-sizing: border-box;
     justify-content: start;
     padding: var(--dsc-dropdown-item-padding);
+    min-height: var(--dsc-dropdown-item-size);
     width: 100%;
     font-weight: var(--ds-font-weight-regular);
   }
diff --git a/packages/css/error-summary.css b/packages/css/error-summary.css
index d45a85f676..9aa4ebde8c 100644
--- a/packages/css/error-summary.css
+++ b/packages/css/error-summary.css
@@ -12,6 +12,7 @@
 
   & :is(h1, h2, h3, h4, h5, h6) {
     color: var(--dsc-errorsummary-heading-color);
+    font-size: var(--ds-font-size-plus-1);
     margin-bottom: var(--ds-spacing-2);
   }
 
diff --git a/packages/css/heading.css b/packages/css/heading.css
index 264ee46297..d86475f08f 100644
--- a/packages/css/heading.css
+++ b/packages/css/heading.css
@@ -1,8 +1,11 @@
 .ds-heading {
-  margin: 0;
-
   @composes ds-heading-text--md from './base/base.css';
 
+  margin: 0;
+  font-size: 1.3em; /* Fallback if not supporting round() */
+  font-size: round(down, 1.3em, 0.0625rem); /* Default to 130% */
+
+  /* Using font-size to ensure consistent size when explicitly setting data-size */
   &[data-size='2xs'] {
     @composes ds-heading-text--2xs from './base/base.css';
   }
@@ -15,6 +18,10 @@
     @composes ds-heading-text--sm from './base/base.css';
   }
 
+  &[data-size='md'] {
+    @composes ds-heading-text--md from './base/base.css';
+  }
+
   &[data-size='lg'] {
     @composes ds-heading-text--lg from './base/base.css';
   }
diff --git a/packages/css/helptext.css b/packages/css/helptext.css
index 9901e869dd..0b52a54e63 100644
--- a/packages/css/helptext.css
+++ b/packages/css/helptext.css
@@ -3,8 +3,6 @@
   --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
   --dsc-helptext-size: var(--ds-sizing-7);
 
-  @composes ds-focus from './base/base.css';
-
   border-radius: var(--ds-border-radius-full);
   border: 2px solid;
   box-sizing: border-box;
@@ -33,14 +31,6 @@
     mask-image: var(--dsc-helptext-icon-url), linear-gradient(currentcolor, currentcolor); /* Cut icon out of currentcolor surface */
   }
 
-  &[data-size='sm'] {
-    --dsc-helptext-size: var(--ds-sizing-6);
-  }
-
-  &[data-size='lg'] {
-    --dsc-helptext-size: var(--ds-sizing-8);
-  }
-
   @media print {
     display: none;
   }
diff --git a/packages/css/index.css b/packages/css/index.css
index 8a7be7c55e..77adbf78c7 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -43,3 +43,108 @@
 @import url('./breadcrumbs.css') layer(ds.components);
 @import url('./badge.css') layer(ds.components);
 @import url('./avatar.css') layer(ds.components);
+
+/* TODO: Will move to tokens as part of #2508 */
+:root {
+  --ds-sizing-base: 18; /* Unitless base font-size 18px */
+  --ds-sizing-step: 4; /* Unitless step size 4px */
+  --ds-sizing-scale: var(--ds-sizing-step) / var(--ds-sizing-base);
+
+  /* Sizing when not supporting round() */
+  --ds-sizing-1: calc(var(--ds-sizing-scale) * 1em);
+  --ds-sizing-2: calc(var(--ds-sizing-scale) * 2em);
+  --ds-sizing-3: calc(var(--ds-sizing-scale) * 3em);
+  --ds-sizing-4: calc(var(--ds-sizing-scale) * 4em);
+  --ds-sizing-5: calc(var(--ds-sizing-scale) * 5em);
+  --ds-sizing-6: calc(var(--ds-sizing-scale) * 6em);
+  --ds-sizing-7: calc(var(--ds-sizing-scale) * 7em);
+  --ds-sizing-8: calc(var(--ds-sizing-scale) * 8em);
+  --ds-sizing-9: calc(var(--ds-sizing-scale) * 9em);
+  --ds-sizing-10: calc(var(--ds-sizing-scale) * 10em);
+  --ds-sizing-11: calc(var(--ds-sizing-scale) * 11em);
+  --ds-sizing-12: calc(var(--ds-sizing-scale) * 12em);
+  --ds-sizing-13: calc(var(--ds-sizing-scale) * 13em);
+  --ds-sizing-14: calc(var(--ds-sizing-scale) * 14em);
+  --ds-sizing-15: calc(var(--ds-sizing-scale) * 15em);
+  --ds-sizing-16: calc(var(--ds-sizing-scale) * 16em);
+  --ds-sizing-17: calc(var(--ds-sizing-scale) * 17em);
+  --ds-sizing-18: calc(var(--ds-sizing-scale) * 18em);
+  --ds-sizing-19: calc(var(--ds-sizing-scale) * 19em);
+  --ds-sizing-20: calc(var(--ds-sizing-scale) * 20em);
+  --ds-sizing-21: calc(var(--ds-sizing-scale) * 21em);
+  --ds-sizing-22: calc(var(--ds-sizing-scale) * 22em);
+  --ds-sizing-23: calc(var(--ds-sizing-scale) * 23em);
+  --ds-sizing-24: calc(var(--ds-sizing-scale) * 24em);
+  --ds-sizing-25: calc(var(--ds-sizing-scale) * 25em);
+  --ds-sizing-26: calc(var(--ds-sizing-scale) * 26em);
+  --ds-sizing-27: calc(var(--ds-sizing-scale) * 27em);
+  --ds-sizing-28: calc(var(--ds-sizing-scale) * 28em);
+  --ds-sizing-29: calc(var(--ds-sizing-scale) * 29em);
+  --ds-sizing-30: calc(var(--ds-sizing-scale) * 30em);
+
+  /* Sizing when supporting round() */
+  @supports (width: round(down, .1em, 1px)) {
+    --ds-sizing-1: round(down, calc(var(--ds-sizing-scale) * 1em), 0.0625rem);
+    --ds-sizing-2: round(down, calc(var(--ds-sizing-scale) * 2em), 0.0625rem);
+    --ds-sizing-3: round(down, calc(var(--ds-sizing-scale) * 3em), 0.0625rem);
+    --ds-sizing-4: round(down, calc(var(--ds-sizing-scale) * 4em), 0.0625rem);
+    --ds-sizing-5: round(down, calc(var(--ds-sizing-scale) * 5em), 0.0625rem);
+    --ds-sizing-6: round(down, calc(var(--ds-sizing-scale) * 6em), 0.0625rem);
+    --ds-sizing-7: round(down, calc(var(--ds-sizing-scale) * 7em), 0.0625rem);
+    --ds-sizing-8: round(down, calc(var(--ds-sizing-scale) * 8em), 0.0625rem);
+    --ds-sizing-9: round(down, calc(var(--ds-sizing-scale) * 9em), 0.0625rem);
+    --ds-sizing-10: round(down, calc(var(--ds-sizing-scale) * 10em), 0.0625rem);
+    --ds-sizing-11: round(down, calc(var(--ds-sizing-scale) * 11em), 0.0625rem);
+    --ds-sizing-12: round(down, calc(var(--ds-sizing-scale) * 12em), 0.0625rem);
+    --ds-sizing-13: round(down, calc(var(--ds-sizing-scale) * 13em), 0.0625rem);
+    --ds-sizing-14: round(down, calc(var(--ds-sizing-scale) * 14em), 0.0625rem);
+    --ds-sizing-15: round(down, calc(var(--ds-sizing-scale) * 15em), 0.0625rem);
+    --ds-sizing-16: round(down, calc(var(--ds-sizing-scale) * 16em), 0.0625rem);
+    --ds-sizing-17: round(down, calc(var(--ds-sizing-scale) * 17em), 0.0625rem);
+    --ds-sizing-18: round(down, calc(var(--ds-sizing-scale) * 18em), 0.0625rem);
+    --ds-sizing-19: round(down, calc(var(--ds-sizing-scale) * 19em), 0.0625rem);
+    --ds-sizing-20: round(down, calc(var(--ds-sizing-scale) * 20em), 0.0625rem);
+    --ds-sizing-21: round(down, calc(var(--ds-sizing-scale) * 21em), 0.0625rem);
+    --ds-sizing-22: round(down, calc(var(--ds-sizing-scale) * 22em), 0.0625rem);
+    --ds-sizing-23: round(down, calc(var(--ds-sizing-scale) * 23em), 0.0625rem);
+    --ds-sizing-24: round(down, calc(var(--ds-sizing-scale) * 24em), 0.0625rem);
+    --ds-sizing-25: round(down, calc(var(--ds-sizing-scale) * 25em), 0.0625rem);
+    --ds-sizing-26: round(down, calc(var(--ds-sizing-scale) * 26em), 0.0625rem);
+    --ds-sizing-27: round(down, calc(var(--ds-sizing-scale) * 27em), 0.0625rem);
+    --ds-sizing-28: round(down, calc(var(--ds-sizing-scale) * 28em), 0.0625rem);
+    --ds-sizing-29: round(down, calc(var(--ds-sizing-scale) * 29em), 0.0625rem);
+    --ds-sizing-30: round(down, calc(var(--ds-sizing-scale) * 30em), 0.0625rem);
+  }
+
+  /* Spacing */
+  --ds-spacing-1: var(--ds-sizing-1);
+  --ds-spacing-2: var(--ds-sizing-2);
+  --ds-spacing-3: var(--ds-sizing-3);
+  --ds-spacing-4: var(--ds-sizing-4);
+  --ds-spacing-5: var(--ds-sizing-5);
+  --ds-spacing-6: var(--ds-sizing-6);
+  --ds-spacing-7: var(--ds-sizing-7);
+  --ds-spacing-8: var(--ds-sizing-8);
+  --ds-spacing-9: var(--ds-sizing-9);
+  --ds-spacing-10: var(--ds-sizing-10);
+  --ds-spacing-11: var(--ds-sizing-11);
+  --ds-spacing-12: var(--ds-sizing-12);
+  --ds-spacing-13: var(--ds-sizing-13);
+  --ds-spacing-14: var(--ds-sizing-14);
+  --ds-spacing-15: var(--ds-sizing-15);
+  --ds-spacing-16: var(--ds-sizing-16);
+  --ds-spacing-17: var(--ds-sizing-17);
+  --ds-spacing-18: var(--ds-sizing-18);
+  --ds-spacing-19: var(--ds-sizing-19);
+  --ds-spacing-20: var(--ds-sizing-20);
+  --ds-spacing-21: var(--ds-sizing-21);
+  --ds-spacing-22: var(--ds-sizing-22);
+  --ds-spacing-23: var(--ds-sizing-23);
+  --ds-spacing-24: var(--ds-sizing-24);
+  --ds-spacing-25: var(--ds-sizing-25);
+  --ds-spacing-26: var(--ds-sizing-26);
+  --ds-spacing-27: var(--ds-sizing-27);
+  --ds-spacing-28: var(--ds-sizing-28);
+  --ds-spacing-29: var(--ds-sizing-29);
+  --ds-spacing-30: var(--ds-sizing-30);
+}
diff --git a/packages/css/input.css b/packages/css/input.css
index 958b2c7593..fe0f25421b 100644
--- a/packages/css/input.css
+++ b/packages/css/input.css
@@ -39,14 +39,18 @@
   color: var(--dsc-input-color);
   font-family: inherit;
   height: var(--dsc-input-size);
+  line-height: var(--ds-line-height-sm);
   margin: 0; /* Reset native margin on checkbox and radio */
   max-width: 100%; /* Ensure input does not grow outside bounds even with a high value in size="" or cols="" */
   padding: var(--dsc-input-padding);
   position: relative; /* Ensure foucs outline renders on top */
 
-  @composes ds-body-text--md from './base/base.css';
   @composes ds-focus from './base/base.css';
 
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inheriting font-size */
+  }
+
   /* Change switch background with low specificity to allow states to overwrite */
   &:where([role='switch']) {
     --dsc-input-background: var(--dsc-input-background--switch);
@@ -102,27 +106,6 @@
     --dsc-input-color: var(--dsc-input-color--readonly);
   }
 
-  /**
-   * Sizes
-   */
-  &[data-size='sm'] {
-    @composes ds-body-text--sm from './base/base.css';
-
-    --dsc-input-padding: var(--ds-spacing-1) var(--ds-spacing-2);
-    --dsc-input-size--switch: var(--ds-sizing-6);
-    --dsc-input-size--toggle: var(--ds-sizing-5);
-    --dsc-input-size: var(--ds-sizing-10);
-  }
-
-  &[data-size='lg'] {
-    @composes ds-body-text--lg from './base/base.css';
-
-    --dsc-input-padding: var(--ds-spacing-3) var(--ds-spacing-4);
-    --dsc-input-size--switch: var(--ds-sizing-8);
-    --dsc-input-size--toggle: var(--ds-sizing-7);
-    --dsc-input-size: var(--ds-sizing-14);
-  }
-
   /**
    * Toggle inputs
    */
@@ -224,8 +207,6 @@ label:has(input:is([type='checkbox'], [type='radio']):not(:disabled, [aria-disab
     position: absolute;
   }
 
-  @composes ds-body-text--md from './base/base.css';
-
   /* Using double selector to ensure we win specificity */
   .ds-input.ds-input {
     align-self: stretch;
@@ -233,16 +214,4 @@ label:has(input:is([type='checkbox'], [type='radio']):not(:disabled, [aria-disab
     flex: 1 1 auto;
     height: auto;
   }
-
-  &:has([data-size='sm']) {
-    @composes ds-body-text--sm from './base/base.css';
-
-    --dsc-input-affix-padding-inline: var(--ds-spacing-3);
-  }
-
-  &:has([data-size='lg']) {
-    @composes ds-body-text--lg from './base/base.css';
-
-    --dsc-input-affix-padding-inline: var(--ds-spacing-5);
-  }
 }
diff --git a/packages/css/label.css b/packages/css/label.css
index 952da6952c..f268be3d05 100644
--- a/packages/css/label.css
+++ b/packages/css/label.css
@@ -3,23 +3,8 @@
   display: inline-block;
   margin: 0;
   padding: 0;
-
-  @composes ds-label--md from './base/base.css';
-
   font-weight: var(--ds-font-weight-medium);
 
-  &[data-size='xs'] {
-    @composes ds-label--xs from './base/base.css';
-  }
-
-  &[data-size='sm'] {
-    @composes ds-label--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    @composes ds-label--lg from './base/base.css';
-  }
-
   &[data-weight='semibold'] {
     font-weight: var(--ds-font-weight-semibold);
   }
diff --git a/packages/css/list.css b/packages/css/list.css
index cb7a19b13c..fe8bee54c1 100644
--- a/packages/css/list.css
+++ b/packages/css/list.css
@@ -6,8 +6,6 @@
   margin: 0;
   padding-left: var(--dsc-list-padding-left);
 
-  @composes ds-body-text--md from './base/base.css';
-
   & > li + li {
     margin-top: var(--dsc-list-spacing);
   }
@@ -23,16 +21,4 @@
     content: '\200B';
     position: absolute;
   }
-
-  &[data-size='sm'] {
-    --dsc-list-padding-left: var(--ds-spacing-4);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-list-spacing: var(--ds-spacing-4);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
 }
diff --git a/packages/css/pagination.css b/packages/css/pagination.css
index 262114e19e..4c3f9effef 100644
--- a/packages/css/pagination.css
+++ b/packages/css/pagination.css
@@ -1,5 +1,5 @@
 .ds-pagination {
-  --dsc-pagination-gap: var(--ds-spacing-4);
+  --dsc-pagination-gap: var(--ds-spacing-2);
   --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
   --dsc-pagination-chevron-size: var(--ds-sizing-6);
   --dsc-pagination-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
@@ -25,14 +25,10 @@
       rotate: 180deg;
     }
 
-    /* Makes page buttons square */
-    & > li:not(:first-child, :last-child) > :is(a, button) {
-      --dsc-button-padding-inline: var(--dsc-button-padding-block);
-    }
-
     /* Style as non-interactive ellipsis when empty */
-    & > li > [aria-hidden='true'] {
+    & > li > :empty {
       color: inherit;
+      padding: 0; /* Make ellipsis element square */
       pointer-events: none;
 
       &::before {
@@ -41,16 +37,6 @@
     }
   }
 
-  &[data-size='sm'] {
-    --dsc-pagination-gap: var(--ds-spacing-2);
-    --dsc-pagination-ellipsis-width: var(--ds-sizing-10);
-  }
-
-  &[data-size='lg'] {
-    --dsc-pagination-gap: var(--ds-spacing-6);
-    --dsc-pagination-ellipsis-width: var(--ds-sizing-14);
-  }
-
   &[data-compact] {
     --dsc-pagination-gap: var(--ds-spacing-0);
   }
diff --git a/packages/css/paragraph.css b/packages/css/paragraph.css
index 52ac9b10a3..0aaf069d77 100644
--- a/packages/css/paragraph.css
+++ b/packages/css/paragraph.css
@@ -1,61 +1,11 @@
 .ds-paragraph {
-  margin: 0;
-
-  @composes ds-body-text--md from './base/base.css';
-
-  &[data-size='xs'] {
-    @composes ds-body-text--xs from './base/base.css';
-  }
-
-  &[data-size='sm'] {
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    @composes ds-body-text--lg from './base/base.css';
-  }
-
-  &[data-size='xl'] {
-    @composes ds-body-text--xl from './base/base.css';
-  }
+  margin-block: 0;
 
   &[data-variant='long'] {
-    @composes ds-body-text--long-md from './base/base.css';
-
-    &[data-size='xs'] {
-      @composes ds-body-text--long-xs from './base/base.css';
-    }
-
-    &[data-size='sm'] {
-      @composes ds-body-text--long-sm from './base/base.css';
-    }
-
-    &[data-size='lg'] {
-      @composes ds-body-text--long-lg from './base/base.css';
-    }
-
-    &[data-size='xl'] {
-      @composes ds-body-text--long-xl from './base/base.css';
-    }
+    line-height: var(--ds-line-height-lg);
   }
 
   &[data-variant='short'] {
-    @composes ds-body-text--short-md from './base/base.css';
-
-    &[data-size='xs'] {
-      @composes ds-body-text--short-xs from './base/base.css';
-    }
-
-    &[data-size='sm'] {
-      @composes ds-body-text--short-sm from './base/base.css';
-    }
-
-    &[data-size='lg'] {
-      @composes ds-body-text--short-lg from './base/base.css';
-    }
-
-    &[data-size='xl'] {
-      @composes ds-body-text--short-xl from './base/base.css';
-    }
+    line-height: var(--ds-line-height-sm);
   }
 }
diff --git a/packages/css/popover.css b/packages/css/popover.css
index cf2d4e929d..f826be7c35 100644
--- a/packages/css/popover.css
+++ b/packages/css/popover.css
@@ -18,8 +18,6 @@
   padding: var(--dsc-popover-padding);
   position: fixed;
 
-  @composes ds-body-text--md from './base/base.css';
-
   &::before {
     background: var(--dsc-popover-background);
     border: inherit;
@@ -35,18 +33,6 @@
     width: var(--dsc-popover-arrow-size);
   }
 
-  &[data-size='sm'] {
-    --dsc-popover-padding: var(--ds-spacing-2) var(--ds-spacing-3);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-5);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
-
   &[data-placement='top']::before {
     rotate: 45deg;
   }
diff --git a/packages/css/search.css b/packages/css/search.css
index 9de0667e77..132a0c758f 100644
--- a/packages/css/search.css
+++ b/packages/css/search.css
@@ -61,7 +61,7 @@
   position: relative;
   box-sizing: border-box;
   flex: 0 1 auto;
-  height: var(--ds-sizing-10);
+  height: 100%;
   width: 100%;
   appearance: none;
   padding: 0 var(--ds-spacing-3);
diff --git a/packages/css/spinner.css b/packages/css/spinner.css
index e7caad77af..279cbe34ac 100644
--- a/packages/css/spinner.css
+++ b/packages/css/spinner.css
@@ -1,36 +1,41 @@
 .ds-spinner {
   --dsc-spinner-background: var(--ds-color-neutral-surface-default);
   --dsc-spinner-stroke: var(--ds-color-neutral-border-default);
-  --dsc-spinner-size: var(--ds-sizing-11);
   --dsc-spinner-animation-duration: 2s;
 
   animation: ds-spinner-rotate-animation linear infinite var(--dsc-spinner-animation-duration);
   box-sizing: border-box;
-  height: var(--dsc-spinner-size);
-  width: var(--dsc-spinner-size);
+  font-size: var(--ds-sizing-11);
+  height: 1em;
+  width: 1em;
 
   &[data-color='accent'] {
     --dsc-spinner-stroke: var(--ds-color-accent-base-default);
   }
 
+  /* Using font-size to ensure consistent size when explicitly setting data-size */
   &[data-size='2xs'] {
-    --dsc-spinner-size: var(--ds-sizing-3);
+    font-size: 0.75rem;
   }
 
   &[data-size='xs'] {
-    --dsc-spinner-size: var(--ds-sizing-5);
+    font-size: 1.25rem;
   }
 
   &[data-size='sm'] {
-    --dsc-spinner-size: var(--ds-sizing-8);
+    font-size: 2rem;
+  }
+
+  &[data-size='md'] {
+    font-size: 2.75rem;
   }
 
   &[data-size='lg'] {
-    --dsc-spinner-size: var(--ds-sizing-15);
+    font-size: 3.75rem;
   }
 
   &[data-size='xl'] {
-    --dsc-spinner-size: var(--ds-sizing-22);
+    font-size: 5.5rem;
   }
 }
 
diff --git a/packages/css/table.css b/packages/css/table.css
index 22a43c0a32..89af4b4f13 100644
--- a/packages/css/table.css
+++ b/packages/css/table.css
@@ -19,8 +19,6 @@
   color: var(--dsc-table-color);
   width: 100%;
 
-  @composes ds-body-text--md from './base/base.css';
-
   & > :is(tbody, thead) > tr > :is(th, td) {
     background: var(--dsc-table-background);
     border-bottom: var(--dsc-table-border);
@@ -110,21 +108,6 @@
     }
   }
 
-  /**
-   * Sizes
-   */
-  &[data-size='sm'] {
-    --dsc-table-padding: var(--ds-spacing-1) var(--ds-spacing-3);
-
-    @composes ds-body-text--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-table-padding: var(--ds-spacing-3) var(--ds-spacing-3);
-
-    @composes ds-body-text--lg from './base/base.css';
-  }
-
   /**
    * Configurations
    */
diff --git a/packages/css/tabs.css b/packages/css/tabs.css
index a36e22fc8f..31ea68ae6a 100644
--- a/packages/css/tabs.css
+++ b/packages/css/tabs.css
@@ -5,22 +5,6 @@
   --dsc-tabs-content-padding: var(--ds-spacing-5);
   --dsc-tabs-content-color: var(--ds-color-neutral-text-default);
   --dsc-tabs-list-border-color: var(--ds-color-neutral-border-subtle);
-
-  @composes ds-body-text--short-md from './base/base.css';
-
-  &[data-size='sm'] {
-    --dsc-tabs-tab-padding: var(--ds-spacing-2) var(--ds-spacing-4);
-    --dsc-tabs-content-padding: var(--ds-spacing-4);
-
-    @composes ds-body-text--short-sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-tabs-tab-padding: var(--ds-spacing-4) var(--ds-spacing-6);
-    --dsc-tabs-content-padding: var(--ds-spacing-6);
-
-    @composes ds-body-text--short-lg from './base/base.css';
-  }
 }
 
 .ds-tabs__panel {
@@ -36,19 +20,28 @@
 }
 
 .ds-tabs__tab {
-  all: unset; /* Reset <button> */
   align-items: center;
+  background: none;
+  border: 0;
   box-sizing: border-box;
   color: var(--dsc-tabs-tab-color);
   cursor: pointer;
   display: flex;
   flex-direction: row;
+  font-family: inherit;
+  font-size: inherit;
   gap: var(--ds-spacing-1);
   justify-content: center;
+  line-height: var(--ds-line-height-sm);
+  margin: 0;
   padding: var(--dsc-tabs-tab-padding);
   position: relative;
   text-align: center;
 
+  &:not([data-size]) {
+    font-size: inherit; /* Ensure inheriting font-size when <button> */
+  }
+
   &[aria-selected='true'] {
     --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
     --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle);
diff --git a/packages/css/tag.css b/packages/css/tag.css
index 191292892e..968aaa75c8 100644
--- a/packages/css/tag.css
+++ b/packages/css/tag.css
@@ -9,28 +9,13 @@
   border-radius: var(--ds-border-radius-sm);
   box-sizing: border-box;
   color: var(--dsc-tag-color);
-  display: flex;
+  display: inline-flex;
+  line-height: var(--ds-line-height-sm);
   min-height: var(--dsc-tag-min-height);
   padding: var(--dsc-tag-padding);
   width: max-content;
   word-break: break-word;
 
-  @composes ds-body-text--short-md from './base/base.css';
-
-  &[data-size='sm'] {
-    --dsc-tag-padding: 0 var(--ds-spacing-2);
-    --dsc-tag-min-height: var(--ds-sizing-7);
-
-    @composes ds-body-text--short-sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-tag-padding: 0 var(--ds-spacing-3);
-    --dsc-tag-min-height: var(--ds-sizing-9);
-
-    @composes ds-body-text--short-lg from './base/base.css';
-  }
-
   &[data-color='info'] {
     --dsc-tag-background: var(--ds-color-info-surface-default);
     --dsc-tag-color: var(--ds-color-info-text-default);
diff --git a/packages/css/tooltip.css b/packages/css/tooltip.css
index 3c80b6fb57..94c8487b9a 100644
--- a/packages/css/tooltip.css
+++ b/packages/css/tooltip.css
@@ -9,10 +9,9 @@
   border-radius: var(--dsc-tooltip-border-radius);
   box-sizing: border-box;
   color: var(--dsc-tooltip-color);
+  line-height: var(--ds-line-height-sm);
   padding: var(--dsc-tooltip-padding);
 
-  @composes ds-body-text--short-xs from './base/base.css';
-
   &::before {
     content: '';
     background: var(--dsc-tooltip-background);
diff --git a/packages/css/validation-message.css b/packages/css/validation-message.css
index c6921c9e85..9e20432a91 100644
--- a/packages/css/validation-message.css
+++ b/packages/css/validation-message.css
@@ -6,27 +6,6 @@
   margin: 0; /* Reset if rendered with <p> */
   position: relative;
 
-  @composes ds-validation-message--md from './base/base.css';
-
-  &[data-size='xs'] {
-    --dsc-validation-message-icon-size: var(--ds-sizing-5);
-    --dsc-validation-message-gap: var(--ds-spacing-1);
-
-    @composes ds-validation-message--xs from './base/base.css';
-  }
-
-  &[data-size='sm'] {
-    --dsc-validation-message-icon-size: var(--ds-sizing-6);
-
-    @composes ds-validation-message--sm from './base/base.css';
-  }
-
-  &[data-size='lg'] {
-    --dsc-validation-message-icon-size: var(--ds-sizing-8);
-
-    @composes ds-validation-message--lg from './base/base.css';
-  }
-
   /* Only render error icon if the ValidationMessage actually contains an error message */
   &[data-error]:not(:empty) {
     color: var(--ds-color-danger-text-subtle);
diff --git a/packages/react/src/components/Alert/Alert.stories.tsx b/packages/react/src/components/Alert/Alert.stories.tsx
index 115e105244..5564cda053 100644
--- a/packages/react/src/components/Alert/Alert.stories.tsx
+++ b/packages/react/src/components/Alert/Alert.stories.tsx
@@ -20,7 +20,7 @@ export const Preview: Story = (args) => <Alert {...args}></Alert>;
 
 Preview.args = {
   color: 'info',
-  size: 'md',
+  size: undefined,
   children: 'En beskjed det er viktig at brukeren ser',
 };
 
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index bbfe42ca25..7eea2dd392 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -1,6 +1,7 @@
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../types';
 
 export type AlertProps = {
   /**
@@ -11,10 +12,8 @@ export type AlertProps = {
   /**
    * Sets the size of the alert.
    * Does not affect font size.
-   *
-   * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -23,7 +22,7 @@ export type AlertProps = {
  * <Alert color='info'>Dette er en informasjonsmelding</Alert>
  */
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { color = 'info', size = 'md', className, ...rest },
+  { color = 'info', size, className, ...rest },
   ref,
 ) {
   return (
diff --git a/packages/react/src/components/Avatar/Avatar.test.tsx b/packages/react/src/components/Avatar/Avatar.test.tsx
index ba265017f4..a3817ac01d 100644
--- a/packages/react/src/components/Avatar/Avatar.test.tsx
+++ b/packages/react/src/components/Avatar/Avatar.test.tsx
@@ -5,7 +5,6 @@ describe('Avatar', () => {
   it('should render correctly with default props', () => {
     render(<Avatar aria-label='ola' />);
     expect(screen.getByRole('img')).toBeInTheDocument();
-    expect(screen.getByRole('img')).toHaveAttribute('data-size', 'md');
     expect(screen.getByRole('img')).toHaveAttribute('data-variant', 'circle');
     expect(screen.getByRole('img')).toHaveAttribute('data-color', 'accent');
   });
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
index 6a4b0fe18d..f883f30f5f 100644
--- a/packages/react/src/components/Avatar/Avatar.tsx
+++ b/packages/react/src/components/Avatar/Avatar.tsx
@@ -2,6 +2,7 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { Fragment, forwardRef } from 'react';
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { Size } from '../../types';
 
 export type AvatarProps = {
   /**
@@ -16,8 +17,6 @@ export type AvatarProps = {
   color?: 'accent' | 'neutral' | 'brand1' | 'brand2' | 'brand3';
   /**
    * The size of the avatar.
-   *
-   * @default 'md'
    */
   size?: 'xs' | 'sm' | 'md' | 'lg';
   /**
@@ -54,7 +53,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
   {
     'aria-label': ariaLabel,
     color = 'accent',
-    size = 'md',
+    size,
     variant = 'circle',
     className,
     children,
diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx
index 8bed93944a..2819b5dc9b 100644
--- a/packages/react/src/components/Badge/Badge.tsx
+++ b/packages/react/src/components/Badge/Badge.tsx
@@ -1,5 +1,6 @@
 import cl from 'clsx/lite';
 import { type HTMLAttributes, type ReactNode, forwardRef } from 'react';
+import type { Size } from '../../types';
 
 export type BadgeProps = {
   /**
@@ -10,10 +11,8 @@ export type BadgeProps = {
   color?: 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
   /**
    * The size of the badge
-   *
-   * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * The number to display in the badge
    */
@@ -63,7 +62,7 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
     maxCount,
     overlap = 'rectangle',
     placement = 'top-right',
-    size = 'md',
+    size,
     ...rest
   },
   ref,
diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
index 304bce93d5..ff67724b16 100644
--- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,5 +1,6 @@
 import cl from 'clsx/lite';
 import { type HTMLAttributes, forwardRef } from 'react';
+import type { Size } from '../../types';
 
 export type BreadcrumbsProps = {
   /**
@@ -9,9 +10,8 @@ export type BreadcrumbsProps = {
   'aria-label'?: string;
   /**
    * Sets the size of the component
-   * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & HTMLAttributes<HTMLElement>;
 
 export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
index affe2cdf48..2f05a1d675 100644
--- a/packages/react/src/components/Button/Button.mdx
+++ b/packages/react/src/components/Button/Button.mdx
@@ -109,23 +109,7 @@ Som regel er det **venstre** som er den beste plasseringen, men det finnes unnta
 
 ### Størrelse på ikon
 
-Når du bruker ikon må du sette størrelsen på ikonet selv. Vi anbefaler å bruke disse størrelsene for [Aksel](https://aksel.nav.no/ikoner) sine ikoner:
-
-| Størrelse på knapp | Aksels ikon `fontSize` |
-| :----------------- | :--------------------- |
-| sm                 | 1rem                   |
-| md                 | 1.5rem                 |
-| lg                 | 2rem                   |
-
-<Canvas of={ButtonStories.IconOnly} />
-
-For knapper med kun ikon anbefaler vi å bruke større ikon:
-
-| Størrelse på knapp | Aksels ikon `fontSize` |
-| :----------------- | :--------------------- |
-| sm                 | 1.5rem                 |
-| md                 | 2rem                   |
-| lg                 | 2.5rem                 |
+Ikon skalerer automatisk basert på knappestørrelse, men du endre denne ved å sette font størrelsen.
 
 <Canvas of={ButtonStories.IconOnly} />
 
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 28417350bc..d56c7ac0dc 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -67,7 +67,7 @@ export const Secondary: StoryFn<typeof Button> = () => (
 export const Tertiary: StoryFn<typeof Button> = () => (
   <>
     <Button variant='tertiary' color='accent'>
-      <PencilWritingIcon aria-hidden fontSize='1.5rem' />
+      <PencilWritingIcon aria-hidden />
       Rediger
     </Button>
   </>
@@ -102,15 +102,15 @@ AccentPressed.parameters = {
 export const Neutral: StoryFn<typeof Button> = () => (
   <>
     <Button variant='primary' color='neutral'>
-      <PrinterSmallIcon aria-hidden fontSize='1.5rem' />
+      <PrinterSmallIcon aria-hidden />
       Skriv ut
     </Button>
     <Button variant='secondary' color='neutral'>
-      <PencilWritingIcon aria-hidden fontSize='1.5rem' />
+      <PencilWritingIcon aria-hidden />
       Rediger
     </Button>
     <Button variant='tertiary' color='neutral'>
-      <ArrowForwardIcon aria-hidden fontSize='1.5rem' />
+      <ArrowForwardIcon aria-hidden />
       Videresend
     </Button>
   </>
@@ -131,15 +131,15 @@ NeutralPressed.parameters = {
 export const Danger: StoryFn<typeof Button> = () => (
   <>
     <Button variant='primary' color='danger'>
-      <TrashIcon aria-hidden fontSize='1.5rem' />
+      <TrashIcon aria-hidden />
       Slett
     </Button>
     <Button variant='secondary' color='danger'>
-      <TrashIcon aria-hidden fontSize='1.5rem' />
+      <TrashIcon aria-hidden />
       Slett
     </Button>
     <Button variant='tertiary' color='danger'>
-      <TrashIcon aria-hidden fontSize='1.5rem' />
+      <TrashIcon aria-hidden />
       Slett
     </Button>
   </>
@@ -175,7 +175,7 @@ export const AsLink: StoryFn<typeof Button> = () => (
   <Button asChild>
     <a target='_blank' rel='noreferrer' href='https://www.designsystemet.no'>
       Gå til Designsystemet
-      <ExternalLinkIcon fontSize='1.5rem' title='Ekstern lenke' />
+      <ExternalLinkIcon title='Ekstern lenke' />
     </a>
   </Button>
 );
@@ -184,10 +184,10 @@ export const TextAndIcon: StoryFn<typeof Button> = () => (
   <>
     <Button variant='primary' color='neutral'>
       Start utfylling
-      <ArrowRightIcon aria-hidden fontSize='1.5rem' />
+      <ArrowRightIcon aria-hidden />
     </Button>
     <Button variant='secondary' color='neutral'>
-      <ArrowUndoIcon aria-hidden fontSize='1.5rem' />
+      <ArrowUndoIcon aria-hidden />
       Angre
     </Button>
   </>
@@ -209,25 +209,25 @@ export const Loading: StoryFn<typeof Button> = () => (
 
 export const Icons: StoryFn<typeof Button> = () => (
   <>
-    <Button variant='primary' size='sm'>
-      <CogIcon fontSize='1rem' title='Innstillinger' />
+    <Button variant='primary' size='sm' icon>
+      <CogIcon title='Innstillinger' />
     </Button>
     <Button variant='primary' size='sm'>
-      <CogIcon fontSize='1rem' aria-hidden />
+      <CogIcon aria-hidden />
       Small
     </Button>
-    <Button variant='primary' size='md'>
-      <CogIcon fontSize='1.5rem' title='Innstillinger' />
+    <Button variant='primary' size='md' icon>
+      <CogIcon title='Innstillinger' />
     </Button>
     <Button variant='primary' size='md'>
-      <CogIcon fontSize='1.5rem' aria-hidden />
+      <CogIcon aria-hidden />
       Medium
     </Button>
-    <Button variant='primary' size='lg'>
-      <CogIcon fontSize='2rem' title='Innstillinger' />
+    <Button variant='primary' size='lg' icon>
+      <CogIcon title='Innstillinger' />
     </Button>
     <Button variant='primary' size='lg'>
-      <CogIcon fontSize='2rem' aria-hidden />
+      <CogIcon aria-hidden />
       Large
     </Button>
   </>
@@ -237,12 +237,12 @@ export const IconOnly: StoryFn<typeof Button> = () => (
   <>
     <Tooltip content='Legg til ny'>
       <Button icon color='neutral' variant='tertiary' aria-label='Legg til ny'>
-        <PlusCircleIcon fontSize='1.5rem' aria-hidden />
+        <PlusCircleIcon aria-hidden />
       </Button>
     </Tooltip>
     <Tooltip content='Varslinger'>
       <Button icon color='neutral' variant='tertiary' aria-label='Varslinger'>
-        <BellIcon fontSize='1.5rem' aria-hidden />
+        <BellIcon aria-hidden />
       </Button>
     </Tooltip>
     <Tooltip content='Instillinger'>
@@ -252,7 +252,7 @@ export const IconOnly: StoryFn<typeof Button> = () => (
         variant='tertiary'
         aria-label='Innstillinger'
       >
-        <CogIcon fontSize='1.5rem' aria-hidden />
+        <CogIcon aria-hidden />
       </Button>
     </Tooltip>
   </>
@@ -267,13 +267,13 @@ IconOnly.parameters = {
 export const IconsOnlyPrimary: StoryFn<typeof Button> = () => (
   <>
     <Button icon variant='primary' size='sm'>
-      <CogIcon fontSize='1.5rem' title='Innstillinger' />
+      <CogIcon title='Innstillinger' />
     </Button>
     <Button icon variant='primary' size='md'>
-      <CogIcon fontSize='2rem' title='Innstillinger' />
+      <CogIcon title='Innstillinger' />
     </Button>
     <Button icon variant='primary' size='lg'>
-      <CogIcon fontSize='2.5rem' title='Innstillinger' />
+      <CogIcon title='Innstillinger' />
     </Button>
   </>
 );
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index c39c955474..a3cff1f39d 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -2,6 +2,7 @@ import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes } from 'react';
+import type { Size } from '../../types';
 import { Spinner } from '../loaders/Spinner';
 
 export type ButtonProps = {
@@ -16,9 +17,8 @@ export type ButtonProps = {
   color?: 'accent' | 'neutral' | 'danger';
   /**
    * Size
-   * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /** Toggle icon only styling, pass icon as children
    * @default false
    */
@@ -53,7 +53,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       color = 'accent',
       icon = false,
       loading = false,
-      size = 'md',
+      size,
       variant = 'primary',
       ...rest
     },
diff --git a/packages/react/src/components/Card/Card.stories.tsx b/packages/react/src/components/Card/Card.stories.tsx
index 0eed2ccaff..7fad0635ef 100644
--- a/packages/react/src/components/Card/Card.stories.tsx
+++ b/packages/react/src/components/Card/Card.stories.tsx
@@ -6,13 +6,16 @@ import cat5 from '@assets/img/cats/Cat 5.jpg';
 import { PlusIcon, TrashFillIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Card } from '.';
-import { Button } from '../Button';
-import { Heading } from '../Heading';
-import { Label } from '../Label';
-import { Paragraph } from '../Paragraph';
-import { Select } from '../form/Select';
-import { Textfield } from '../form/Textfield';
+import {
+  Button,
+  Card,
+  Field,
+  Heading,
+  Label,
+  Paragraph,
+  Select,
+  Textfield,
+} from '../../';
 
 type Story = StoryFn<typeof Card>;
 
@@ -34,9 +37,7 @@ export default {
 
 export const Preview: Story = (args) => (
   <Card {...args} style={{ maxWidth: '320px' }}>
-    <Heading size='sm' level={2}>
-      Card Neutral
-    </Heading>
+    <Heading>Card Neutral</Heading>
     <Paragraph>
       Most provide as with carried business are much better more the perfected
       designer. Writing slightly explain desk unable at supposedly about this
@@ -56,9 +57,7 @@ export const Variants: StoryFn<typeof Card> = () => (
         <img src={cat1} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -71,9 +70,7 @@ export const Variants: StoryFn<typeof Card> = () => (
         <img src={cat2} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Subtle
-        </Heading>
+        <Heading>Card Subtle</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -86,9 +83,7 @@ export const Variants: StoryFn<typeof Card> = () => (
         <img src={cat3} alt='katter' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card First
-        </Heading>
+        <Heading>Card First</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -101,9 +96,7 @@ export const Variants: StoryFn<typeof Card> = () => (
         <img src={cat4} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Second
-        </Heading>
+        <Heading>Card Second</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -116,9 +109,7 @@ export const Variants: StoryFn<typeof Card> = () => (
         <img src={cat5} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Third
-        </Heading>
+        <Heading>Card Third</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -136,9 +127,7 @@ export const Media: Story = () => (
         <img src={cat1} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -148,9 +137,7 @@ export const Media: Story = () => (
     </Card>
     <Card>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -177,7 +164,7 @@ export const Video: Story = () => (
       ></iframe>
     </Card.Block>
     <Card.Block>
-      <Heading level={2} size='sm'>
+      <Heading>
         <a
           href='https://www.digdir.no/felleslosninger/30-ar-med-digitalt-innsyn/5015'
           target='_blank'
@@ -219,9 +206,7 @@ export const Composed: Story = () => (
             alignItems: 'center',
           }}
         >
-          <Heading level={2} size='xs'>
-            Rolle 1
-          </Heading>
+          <Heading>Rolle 1</Heading>
           <Button variant='secondary' color='danger' size='sm'>
             <TrashFillIcon aria-hidden fontSize='1.5rem' />
             Fjern
@@ -229,14 +214,16 @@ export const Composed: Story = () => (
         </div>
       </Card.Block>
       <Card.Block>
-        <Label htmlFor='my-select'>Velg rolle</Label>
-        <Select id='my-select'>
-          {options.map(({ value, label }, index) => (
-            <Select.Option key={index} value={value}>
-              {label}
-            </Select.Option>
-          ))}
-        </Select>
+        <Field>
+          <Label>Velg rolle</Label>
+          <Select>
+            {options.map(({ value, label }, index) => (
+              <Select.Option key={index} value={value}>
+                {label}
+              </Select.Option>
+            ))}
+          </Select>
+        </Field>
         <Textfield label='Fødsels- eller d-nummer' />
         <Textfield label='Etternavn' />
       </Card.Block>
@@ -252,9 +239,7 @@ export const Composed: Story = () => (
         <img src={cat1} alt='katt' />
       </Card.Block>
       <Card.Block>
-        <Heading level={2} size='sm'>
-          Card Neutral
-        </Heading>
+        <Heading>Card Neutral</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer. Writing slightly explain desk unable at supposedly
@@ -272,7 +257,7 @@ export const WithLink: Story = (args) => (
         <img src={cat5} alt='' />
       </Card.Block>
       <Card.Block>
-        <Heading size='sm' level={2}>
+        <Heading>
           <a
             href='https://designsystemet.no'
             target='_blank'
@@ -291,7 +276,7 @@ export const WithLink: Story = (args) => (
     </Card>
     <Card {...args} color='neutral'>
       <Card.Block>
-        <Heading size='sm' level={2}>
+        <Heading>
           <a
             href='https://designsystemet.no'
             target='_blank'
@@ -323,9 +308,7 @@ export const AsLink: Story = (args) => (
         rel='noopener noreferrer'
       >
         <Card.Block>
-          <Heading size='sm' level={2}>
-            Link Card with blocks
-          </Heading>
+          <Heading>Link Card with blocks</Heading>
         </Card.Block>
         <Card.Block>
           <Paragraph>
@@ -341,9 +324,7 @@ export const AsLink: Story = (args) => (
         target='_blank'
         rel='noopener noreferrer'
       >
-        <Heading size='sm' level={2}>
-          Link Card
-        </Heading>
+        <Heading>Link Card</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer.
@@ -358,9 +339,7 @@ export const AsButton: Story = (args) => (
     <Card {...args} color='brand1' asChild>
       <button type='button'>
         <Card.Block>
-          <Heading size='sm' level={2}>
-            Button Card with blocks
-          </Heading>
+          <Heading>Button Card with blocks</Heading>
         </Card.Block>
         <Card.Block>
           <Paragraph>
@@ -372,9 +351,7 @@ export const AsButton: Story = (args) => (
     </Card>
     <Card {...args} color='neutral' asChild>
       <button type='button'>
-        <Heading size='sm' level={2}>
-          Link Card
-        </Heading>
+        <Heading>Link Card</Heading>
         <Paragraph>
           Most provide as with carried business are much better more the
           perfected designer.
@@ -387,9 +364,7 @@ export const AsButton: Story = (args) => (
 export const AsGrid: Story = (args) => (
   <Card {...args} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
     <Card.Block>
-      <Heading size='sm' level={2}>
-        Button Card with blocks
-      </Heading>
+      <Heading>Button Card with blocks</Heading>
     </Card.Block>
     <Card.Block>
       <Paragraph>
diff --git a/packages/react/src/components/Chip/Chips.tsx b/packages/react/src/components/Chip/Chips.tsx
index 8f633f852d..dcf14c562d 100644
--- a/packages/react/src/components/Chip/Chips.tsx
+++ b/packages/react/src/components/Chip/Chips.tsx
@@ -2,13 +2,13 @@ import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
+import type { Size } from '../../types';
 
 type ChipBaseProps = {
   /**
    * Size
-   * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    * @default false
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 1a07ca95f9..738a089a9c 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -1,6 +1,5 @@
 import cl from 'clsx/lite';
-import { createContext, forwardRef, useEffect, useState } from 'react';
-import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
 
 import type { Placement } from '@floating-ui/react';
 import { Popover } from '../Popover';
@@ -11,7 +10,6 @@ export type DropdownProps = {
    * @default bottom-end
    */
   placement?: Placement;
-  children: ReactNode;
 } & Omit<PopoverProps, 'variant' | 'placement'>;
 
 export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
@@ -19,36 +17,13 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     { placement = 'bottom-end', className, ...rest },
     ref,
   ) {
-    const [size, setSize] = useState<NonNullable<DropdownProps['size']>>(
-      rest.size || 'md',
-    );
-
-    useEffect(() => {
-      setSize(rest.size || 'md');
-    }, [rest.size]);
-
     return (
-      <DropdownCtx.Provider
-        value={{
-          size,
-        }}
-      >
-        <Popover
-          ref={ref}
-          placement={placement}
-          size={size}
-          className={cl('ds-dropdown', className)}
-          {...rest}
-        />
-      </DropdownCtx.Provider>
+      <Popover
+        className={cl('ds-dropdown', className)}
+        placement={placement}
+        ref={ref}
+        {...rest}
+      />
     );
   },
 );
-
-type DropdownCtxType = {
-  size: NonNullable<DropdownProps['size']>;
-};
-
-export const DropdownCtx = createContext<DropdownCtxType>({
-  size: 'md',
-});
diff --git a/packages/react/src/components/Dropdown/DropdownItem.tsx b/packages/react/src/components/Dropdown/DropdownItem.tsx
index 22ca6d059d..1f594be09d 100644
--- a/packages/react/src/components/Dropdown/DropdownItem.tsx
+++ b/packages/react/src/components/Dropdown/DropdownItem.tsx
@@ -1,23 +1,18 @@
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 
 import type { ButtonProps } from '../Button';
 import { Button } from '../Button/Button';
 
-import { DropdownCtx } from './Dropdown';
-
 export type DropdownItemProps = Omit<ButtonProps, 'variant' | 'size' | 'color'>;
 
 export const DropdownItem = forwardRef<HTMLButtonElement, DropdownItemProps>(
   function DropdownItem({ className, style, ...rest }, ref) {
-    const { size } = useContext(DropdownCtx);
-
     return (
       <li className={className} style={style}>
         <Button
+          className='ds-dropdown__item'
           ref={ref}
           variant='tertiary'
-          size={size}
-          className='ds-dropdown__item'
           {...rest}
         />
       </li>
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
index 2df4ca7e4e..fbdc001310 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummary.tsx
@@ -1,30 +1,27 @@
 import cl from 'clsx/lite';
 import { createContext, forwardRef, useId, useState } from 'react';
 import type { HTMLAttributes } from 'react';
-
-import type { ListUnorderedProps } from '../List';
+import type { Size } from '../../types';
 
 type ErrorSummaryContextType = {
-  size: ListUnorderedProps['size'];
   headingId?: string;
   setHeadingId: (id: string) => void;
 };
 
 export const ErrorSummaryContext = createContext<ErrorSummaryContextType>({
-  size: 'md',
   headingId: 'heading',
   setHeadingId: () => {},
 });
 
 export type ErrorSummaryProps = {
-  size?: ListUnorderedProps['size'];
+  size?: Size;
 } & HTMLAttributes<HTMLDivElement>;
 
 export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   function ErrorSummary(
     {
       className,
-      size = 'md',
+      size,
       role = 'alert',
       'aria-live': ariaLive = 'polite',
       'aria-relevant': ariaRelevant = 'all',
@@ -36,7 +33,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
     const [headingId, setHeadingId] = useState<string>(randomId);
 
     return (
-      <ErrorSummaryContext.Provider value={{ size, headingId, setHeadingId }}>
+      <ErrorSummaryContext.Provider value={{ headingId, setHeadingId }}>
         <div
           aria-labelledby={headingId}
           aria-live={ariaLive}
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx b/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
index ecdc576e15..4e34175e0d 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummaryHeading.tsx
@@ -1,17 +1,9 @@
 import { forwardRef, useContext, useEffect } from 'react';
 import { Heading, type HeadingProps } from '../Heading';
-import { ErrorSummaryContext, type ErrorSummaryProps } from './ErrorSummary';
+import { ErrorSummaryContext } from './ErrorSummary';
 
 export type ErrorSummaryHeadingProps = HeadingProps;
 
-const HEADING_SIZE_MAP: {
-  [key in NonNullable<ErrorSummaryProps['size']>]: HeadingProps['size'];
-} = {
-  sm: '2xs',
-  md: 'xs',
-  lg: 'sm',
-} as const;
-
 export const ErrorSummaryHeading = forwardRef<
   HTMLHeadingElement,
   ErrorSummaryHeadingProps
@@ -19,18 +11,11 @@ export const ErrorSummaryHeading = forwardRef<
   { className, id, ...rest }: ErrorSummaryHeadingProps,
   ref,
 ) {
-  const { size, headingId, setHeadingId } = useContext(ErrorSummaryContext);
+  const { headingId, setHeadingId } = useContext(ErrorSummaryContext);
 
   useEffect(() => {
     if (id && headingId !== id) setHeadingId(id);
   }, [headingId, id, setHeadingId]);
 
-  return (
-    <Heading
-      id={headingId}
-      size={HEADING_SIZE_MAP[size ?? 'md']}
-      ref={ref}
-      {...rest}
-    />
-  );
+  return <Heading id={headingId} ref={ref} {...rest} />;
 });
diff --git a/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx b/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx
index 42ba5bd1e7..15835682c0 100644
--- a/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx
+++ b/packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx
@@ -1,14 +1,11 @@
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 import { List, type ListUnorderedProps } from '../List';
 
-import { ErrorSummaryContext } from './ErrorSummary';
-
 export type ErrorSummaryListProps = ListUnorderedProps;
 
 export const ErrorSummaryList = forwardRef<
   HTMLOListElement,
   ErrorSummaryListProps
 >(function ErrorSummaryList({ ...rest }: ErrorSummaryListProps, ref) {
-  const { size } = useContext(ErrorSummaryContext);
-  return <List.Unordered size={size} {...rest} ref={ref} />;
+  return <List.Unordered {...rest} ref={ref} />;
 });
diff --git a/packages/react/src/components/Heading/Heading.tsx b/packages/react/src/components/Heading/Heading.tsx
index ec42003cc3..dec96487ac 100644
--- a/packages/react/src/components/Heading/Heading.tsx
+++ b/packages/react/src/components/Heading/Heading.tsx
@@ -10,8 +10,6 @@ export type HeadingProps = {
    */
   level?: 1 | 2 | 3 | 4 | 5 | 6;
   /** Changes text sizing
-   * @default 'xl'
-   *
    */
   size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /**
@@ -28,10 +26,7 @@ export type HeadingProps = {
  * <Heading size='lg' level={2}>Heading</Heading>
  */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
-  function Heading(
-    { size = 'xl', level = 2, className, asChild, ...rest },
-    ref,
-  ) {
+  function Heading({ size, level = 2, className, asChild, ...rest }, ref) {
     const Component = asChild ? Slot : (`h${level}` as ElementType);
 
     return (
diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
index fcd96cde35..2dc6a2e273 100644
--- a/packages/react/src/components/HelpText/HelpText.tsx
+++ b/packages/react/src/components/HelpText/HelpText.tsx
@@ -3,7 +3,8 @@ import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes } from 'react';
 
-import { Popover, type PopoverProps } from '../Popover';
+import type { Size } from '../../types';
+import { Popover } from '../Popover';
 
 export type HelpTextProps = {
   /**
@@ -12,19 +13,21 @@ export type HelpTextProps = {
   'aria-label': string;
   /**
    * Size of the helptext
-   * @default md
    */
-  size?: PopoverProps['size'];
+  size?: Size;
   /**
    * Placement of the Popover.
    * @default 'right'
    */
   placement?: Placement;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+} & { 'data-size'?: string } & Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    'color'
+  >;
 
 export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   function HelpText(
-    { placement = 'right', size = 'md', className, children, ...rest },
+    { placement = 'right', size, className, children, ...rest },
     ref,
   ) {
     return (
@@ -36,7 +39,11 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           variant='tertiary'
           {...rest}
         />
-        <Popover placement={placement} size={size} variant='info'>
+        <Popover
+          placement={placement}
+          size={size || (rest['data-size'] as Size)}
+          variant='info'
+        >
           {children}
         </Popover>
       </Popover.Context>
diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx
index 0c41dd2f66..ef7562f81c 100644
--- a/packages/react/src/components/Label/Label.tsx
+++ b/packages/react/src/components/Label/Label.tsx
@@ -2,11 +2,11 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import type { LabelHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../types';
 
 export type LabelProps = {
   /**
    * Changes text sizing
-   * @default md
    */
   size?: 'xs' | 'sm' | 'md' | 'lg';
   /**
@@ -28,7 +28,7 @@ export type LabelProps = {
  * <Label size='lg'>Label</Label>
  */
 export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
-  { className, size = 'md', weight = 'medium', asChild, ...rest },
+  { className, size, weight = 'medium', asChild, ...rest },
   ref,
 ) {
   const Component = asChild ? Slot : 'label';
diff --git a/packages/react/src/components/List/Lists.tsx b/packages/react/src/components/List/Lists.tsx
index 83b76dc662..a8265a39c5 100644
--- a/packages/react/src/components/List/Lists.tsx
+++ b/packages/react/src/components/List/Lists.tsx
@@ -11,8 +11,6 @@ type ListBaseProps = {
   asChild?: boolean;
   /**
    * Changes text sizing
-   * @default md
-   *
    */
   size?: 'sm' | 'md' | 'lg';
 };
@@ -25,7 +23,7 @@ export type ListOrderedProps = ListBaseProps &
 
 const render = <T extends HTMLElement>(
   tagName: string,
-  { asChild, className, size = 'md', ...rest }: ListOrderedProps,
+  { asChild, className, size, ...rest }: ListOrderedProps,
   ref: ForwardedRef<T>,
 ) => {
   const Component = asChild ? Slot : tagName;
diff --git a/packages/react/src/components/Modal/Modal.stories.tsx b/packages/react/src/components/Modal/Modal.stories.tsx
index c13e49ae93..429bd9eff1 100644
--- a/packages/react/src/components/Modal/Modal.stories.tsx
+++ b/packages/react/src/components/Modal/Modal.stories.tsx
@@ -54,7 +54,7 @@ export const Preview: StoryFn<typeof Modal> = (args) => (
   <Modal.Context>
     <Modal.Trigger>Open Modal</Modal.Trigger>
     <Modal {...args}>
-      <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+      <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
         Modal header
       </Heading>
       <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
@@ -74,7 +74,7 @@ export const WithoutModalContext: StoryFn<typeof Modal> = (args) => {
       <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
       <Modal {...args} ref={modalRef}>
         <Paragraph size='sm'>Modal subtittel</Paragraph>
-        <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+        <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
           Modal header
         </Heading>
         <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
@@ -94,9 +94,7 @@ export const BackdropClose: StoryFn<typeof Modal> = () => {
     <Modal.Context>
       <Modal.Trigger>Open Modal</Modal.Trigger>
       <Modal ref={modalRef} backdropClose>
-        <Heading size='xs'>
-          Modal med backdropClose og en veldig lang tittel
-        </Heading>
+        <Heading>Modal med backdropClose og en veldig lang tittel</Heading>
         <Paragraph>
           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
           doloremque obcaecati assumenda odio ducimus sunt et.
@@ -113,7 +111,7 @@ export const WithHeaderAndFooter: StoryFn<typeof Modal> = () => (
     <Modal>
       <Modal.Block>
         <Paragraph size='sm'>Her er det også divider</Paragraph>
-        <Heading size='xs'>Vi kan legge divider under header</Heading>
+        <Heading>Vi kan legge divider under header</Heading>
       </Modal.Block>
       <Modal.Block>
         <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
@@ -152,7 +150,7 @@ export const ModalWithForm: StoryFn<typeof Modal> = () => {
     <Modal.Context>
       <Modal.Trigger>Open Modal</Modal.Trigger>
       <Modal ref={modalRef} onClose={() => setInput('')} backdropClose>
-        <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+        <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
           Modal med skjema
         </Heading>
         <Textfield
@@ -190,7 +188,7 @@ export const ModalWithMaxWidth: StoryFn<typeof Modal> = () => (
   <Modal.Context>
     <Modal.Trigger>Open Modal</Modal.Trigger>
     <Modal style={{ maxWidth: 1200 }}>
-      <Heading size='xs' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+      <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
         Modal med en veldig lang bredde
       </Heading>
       <Paragraph>
@@ -210,7 +208,7 @@ export const ModalWithCombobox: StoryFn<typeof Modal> = () => {
         <Modal.Trigger>Open Modal</Modal.Trigger>
         <Modal style={{ overflow: 'visible' }} ref={modalRef}>
           <Modal.Block>
-            <Heading size='xs'>Modal med combobox</Heading>
+            <Heading>Modal med combobox</Heading>
           </Modal.Block>
           <Modal.Block>
             <Combobox portal={false} label='Velg sted' autoFocus>
diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
index cf7dfbeb97..686ff41a29 100644
--- a/packages/react/src/components/Modal/Modal.tsx
+++ b/packages/react/src/components/Modal/Modal.tsx
@@ -20,7 +20,6 @@ export type ModalProps = {
   backdropClose?: boolean;
   /**
    * Callback that is called when the modal is closed.
-   * @default undefined
    */
   onClose?: () => void;
   asChild?: boolean;
diff --git a/packages/react/src/components/Pagination/Pagination.stories.tsx b/packages/react/src/components/Pagination/Pagination.stories.tsx
index f77596f8a8..399d3997f6 100644
--- a/packages/react/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/react/src/components/Pagination/Pagination.stories.tsx
@@ -2,13 +2,16 @@ import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryFn } from '@storybook/react';
 
 import { Pagination, type UsePaginationProps, usePagination } from '.';
+import type { Size } from '../../types';
 
 export default {
   title: 'Komponenter/Pagination',
   component: Pagination,
 } as Meta;
 
-export const Preview: StoryFn<UsePaginationProps> = (args) => {
+export const Preview: StoryFn<UsePaginationProps & { size?: Size }> = (
+  args,
+) => {
   const [, updateArgs] = useArgs();
   const { pages, nextButtonProps, prevButtonProps } = usePagination({
     ...args,
@@ -16,7 +19,7 @@ export const Preview: StoryFn<UsePaginationProps> = (args) => {
   });
 
   return (
-    <Pagination aria-label='Sidenavigering'>
+    <Pagination aria-label='Sidenavigering' size={args.size}>
       <Pagination.List>
         <Pagination.Item>
           <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
@@ -41,6 +44,7 @@ export const Preview: StoryFn<UsePaginationProps> = (args) => {
 };
 
 Preview.args = {
+  size: 'md',
   currentPage: 4,
   setCurrentPage: console.log, // Added to include in storybook args
   onChange: console.log, // Open console to see this event
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
index 42ed4ecd78..b607abeb03 100644
--- a/packages/react/src/components/Pagination/Pagination.tsx
+++ b/packages/react/src/components/Pagination/Pagination.tsx
@@ -1,11 +1,8 @@
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import { createContext, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import type { HTMLAttributes } from 'react';
-
-export const PaginationContext = createContext({
-  size: 'md' as NonNullable<PaginationProps['size']>,
-});
+import type { Size } from '../../types';
 
 export type PaginationProps = {
   /**
@@ -16,7 +13,7 @@ export type PaginationProps = {
   /** Sets the size of the component
    * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    * @default false
@@ -30,7 +27,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       'aria-label': ariaLabel = 'Sidenavigering',
       asChild,
       className,
-      size = 'md',
+      size,
       ...rest
     },
     ref,
@@ -38,14 +35,13 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
     const Component = asChild ? Slot : 'nav';
 
     return (
-      <PaginationContext.Provider value={{ size }}>
-        <Component
-          aria-label={ariaLabel}
-          className={cl('ds-pagination', className)}
-          ref={ref}
-          {...rest}
-        />
-      </PaginationContext.Provider>
+      <Component
+        aria-label={ariaLabel}
+        className={cl('ds-pagination', className)}
+        data-size={size}
+        ref={ref}
+        {...rest}
+      />
     );
   },
 );
diff --git a/packages/react/src/components/Pagination/PaginationButton.tsx b/packages/react/src/components/Pagination/PaginationButton.tsx
index aa579cb133..871adc9188 100644
--- a/packages/react/src/components/Pagination/PaginationButton.tsx
+++ b/packages/react/src/components/Pagination/PaginationButton.tsx
@@ -1,9 +1,7 @@
-import { type AriaAttributes, forwardRef, useContext } from 'react';
+import { type AriaAttributes, forwardRef } from 'react';
 
 import { Button, type ButtonProps } from '../Button/Button';
 
-import { PaginationContext } from './Pagination';
-
 export type PaginationButtonProps = {
   /**
    * Toggle button as active
@@ -16,7 +14,5 @@ export const PaginationButton = forwardRef<
   HTMLButtonElement,
   PaginationButtonProps
 >(function PaginationButton(rest, ref) {
-  const { size } = useContext(PaginationContext);
-
-  return <Button ref={ref} size={size} {...rest} />;
+  return <Button ref={ref} {...rest} />;
 });
diff --git a/packages/react/src/components/Pagination/PaginationList.tsx b/packages/react/src/components/Pagination/PaginationList.tsx
index 46ccf3a010..4cb627d9e9 100644
--- a/packages/react/src/components/Pagination/PaginationList.tsx
+++ b/packages/react/src/components/Pagination/PaginationList.tsx
@@ -1,5 +1,5 @@
 import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useContext, useEffect, useRef } from 'react';
+import { forwardRef } from 'react';
 import type { HTMLAttributes } from 'react';
 
 export type PaginationListProps = {
diff --git a/packages/react/src/components/Paragraph/Paragraph.tsx b/packages/react/src/components/Paragraph/Paragraph.tsx
index 87f6114d1f..3d6803a492 100644
--- a/packages/react/src/components/Paragraph/Paragraph.tsx
+++ b/packages/react/src/components/Paragraph/Paragraph.tsx
@@ -6,9 +6,6 @@ import { forwardRef } from 'react';
 export type ParagraphProps = {
   /**
    * Changes text sizing
-   *
-   * @default 'md'
-   *
    */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   /**
@@ -30,7 +27,7 @@ export type ParagraphProps = {
  */
 export const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(
   function Paragraph(
-    { className, size = 'md', asChild, variant = 'default', ...rest },
+    { className, size, asChild, variant = 'default', ...rest },
     ref,
   ) {
     const Component = asChild ? Slot : 'p';
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
index 3aa0b72360..301540bb41 100644
--- a/packages/react/src/components/Popover/Popover.tsx
+++ b/packages/react/src/components/Popover/Popover.tsx
@@ -12,6 +12,7 @@ import cl from 'clsx/lite';
 import { forwardRef, useContext, useRef, useState } from 'react';
 import type { HTMLAttributes } from 'react';
 import { useEffect } from 'react';
+import type { Size } from '../../types';
 import { Context } from './PopoverContext';
 
 // Make React support popovertarget attribute
@@ -51,9 +52,8 @@ export type PopoverProps = {
   open?: boolean;
   /**
    * Size of the popover
-   * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * Callback when the popover wants to open.
    */
@@ -80,7 +80,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       onOpen,
       open,
       placement = 'top',
-      size = 'md',
+      size,
       variant = 'default',
       autoPlacement = true,
       asChild = false,
diff --git a/packages/react/src/components/Table/Table.stories.tsx b/packages/react/src/components/Table/Table.stories.tsx
index 036ff0f955..f0489317a7 100644
--- a/packages/react/src/components/Table/Table.stories.tsx
+++ b/packages/react/src/components/Table/Table.stories.tsx
@@ -2,20 +2,9 @@ import type { Meta, StoryFn } from '@storybook/react';
 import type { ChangeEvent } from 'react';
 import { useEffect, useState } from 'react';
 
-import { Checkbox } from '../form/Checkbox';
-import { Textfield } from '../form/Textfield';
-
 import type { TableHeaderCellProps } from './TableHeaderCell';
 
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeaderCell,
-  TableRow,
-} from '.';
-import { Label } from '../Label';
+import { Checkbox, Label, Table, Textfield } from '../..';
 
 type Story = StoryFn<typeof Table>;
 
@@ -27,25 +16,25 @@ export default {
 export const Preview: Story = (args) => {
   return (
     <Table {...args}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Header 1</TableHeaderCell>
-          <TableHeaderCell>Header 2</TableHeaderCell>
-          <TableHeaderCell>Header 3</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        <TableRow>
-          <TableCell>Cell 1</TableCell>
-          <TableCell>Cell 2</TableCell>
-          <TableCell>Cell 3</TableCell>
-        </TableRow>
-        <TableRow>
-          <TableCell>Cell 4</TableCell>
-          <TableCell>Cell 5</TableCell>
-          <TableCell>Cell 6</TableCell>
-        </TableRow>
-      </TableBody>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Header 1</Table.HeaderCell>
+          <Table.HeaderCell>Header 2</Table.HeaderCell>
+          <Table.HeaderCell>Header 3</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>Cell 1</Table.Cell>
+          <Table.Cell>Cell 2</Table.Cell>
+          <Table.Cell>Cell 3</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Cell 4</Table.Cell>
+          <Table.Cell>Cell 5</Table.Cell>
+          <Table.Cell>Cell 6</Table.Cell>
+        </Table.Row>
+      </Table.Body>
     </Table>
   );
 };
@@ -117,32 +106,32 @@ export const Sortable: Story = (args) => {
 
   return (
     <Table {...args}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell
             sort={sortField === 'navn' ? sortDirection : 'none'}
             onClick={() => handleSort('navn')}
           >
             Navn
-          </TableHeaderCell>
-          <TableHeaderCell>Epost</TableHeaderCell>
-          <TableHeaderCell
+          </Table.HeaderCell>
+          <Table.HeaderCell>Epost</Table.HeaderCell>
+          <Table.HeaderCell
             sort={sortField === 'telefon' ? sortDirection : 'none'}
             onClick={() => handleSort('telefon')}
           >
             Telefon
-          </TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
+          </Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
         {sortedData.map((row) => (
-          <TableRow key={row.id}>
-            <TableCell>{row.navn}</TableCell>
-            <TableCell>{row.epost}</TableCell>
-            <TableCell>{row.telefon}</TableCell>
-          </TableRow>
+          <Table.Row key={row.id}>
+            <Table.Cell>{row.navn}</Table.Cell>
+            <Table.Cell>{row.epost}</Table.Cell>
+            <Table.Cell>{row.telefon}</Table.Cell>
+          </Table.Row>
         ))}
-      </TableBody>
+      </Table.Body>
     </Table>
   );
 };
@@ -151,22 +140,22 @@ export const StickyHeader: Story = (args) => {
   const rows = Array.from({ length: 50 }, (_, i) => i + 1);
   return (
     <Table {...args}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Header 1</TableHeaderCell>
-          <TableHeaderCell>Header 2</TableHeaderCell>
-          <TableHeaderCell>Header 3</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Header 1</Table.HeaderCell>
+          <Table.HeaderCell>Header 2</Table.HeaderCell>
+          <Table.HeaderCell>Header 3</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
         {rows.map((row) => (
-          <TableRow key={row}>
-            <TableCell>{`Cell ${row}1`}</TableCell>
-            <TableCell>{`Cell ${row}2`}</TableCell>
-            <TableCell>{`Cell ${row}3`}</TableCell>
-          </TableRow>
+          <Table.Row key={row}>
+            <Table.Cell>{`Cell ${row}1`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}2`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}3`}</Table.Cell>
+          </Table.Row>
         ))}
-      </TableBody>
+      </Table.Body>
     </Table>
   );
 };
@@ -221,9 +210,9 @@ export const WithFormElements: Story = (args) => {
 
   return (
     <Table {...args}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>
             <Label style={{ display: 'flex', gap: '8px' }}>
               <Checkbox
                 checked={headerChecked}
@@ -234,16 +223,16 @@ export const WithFormElements: Story = (args) => {
               />
               Selection
             </Label>
-          </TableHeaderCell>
-          <TableHeaderCell>Header 1</TableHeaderCell>
-          <TableHeaderCell>Header 2</TableHeaderCell>
-          <TableHeaderCell>Header 3</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
+          </Table.HeaderCell>
+          <Table.HeaderCell>Header 1</Table.HeaderCell>
+          <Table.HeaderCell>Header 2</Table.HeaderCell>
+          <Table.HeaderCell>Header 3</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
         {rows.map((row) => (
-          <TableRow key={row}>
-            <TableCell>
+          <Table.Row key={row}>
+            <Table.Cell>
               <Checkbox
                 aria-label={`Checkbox ${row}`}
                 checked={!!checkedItems[row]}
@@ -251,15 +240,15 @@ export const WithFormElements: Story = (args) => {
                 onChange={(event) => handleCheckboxChange(event, row)}
                 size='sm'
               />
-            </TableCell>
-            <TableCell>1</TableCell>
-            <TableCell>2</TableCell>
-            <TableCell>
+            </Table.Cell>
+            <Table.Cell>1</Table.Cell>
+            <Table.Cell>2</Table.Cell>
+            <Table.Cell>
               <Textfield size='sm' aria-label={`Textfield ${row}`} />
-            </TableCell>
-          </TableRow>
+            </Table.Cell>
+          </Table.Row>
         ))}
-      </TableBody>
+      </Table.Body>
     </Table>
   );
 };
@@ -273,22 +262,22 @@ export const FixedTable: Story = (args) => {
         tableLayout: 'fixed',
       }}
     >
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Header 1</TableHeaderCell>
-          <TableHeaderCell>Header 2</TableHeaderCell>
-          <TableHeaderCell>Header 3</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Header 1</Table.HeaderCell>
+          <Table.HeaderCell>Header 2</Table.HeaderCell>
+          <Table.HeaderCell>Header 3</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
         {rows.map((row) => (
-          <TableRow key={row}>
-            <TableCell>{`Cell ${row}1`}</TableCell>
-            <TableCell>{`Cell ${row}2`}</TableCell>
-            <TableCell>{`Cell ${row}3`}</TableCell>
-          </TableRow>
+          <Table.Row key={row}>
+            <Table.Cell>{`Cell ${row}1`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}2`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}3`}</Table.Cell>
+          </Table.Row>
         ))}
-      </TableBody>
+      </Table.Body>
     </Table>
   );
 };
@@ -297,26 +286,26 @@ export const MultipleHeaderRows: Story = (args) => {
   const rows = Array.from({ length: 50 }, (_, i) => i + 1);
   return (
     <Table {...args}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Header 1</TableHeaderCell>
-          <TableHeaderCell colSpan={2}>Header 2</TableHeaderCell>
-        </TableRow>
-        <TableRow>
-          <TableHeaderCell>Header 3</TableHeaderCell>
-          <TableHeaderCell>Header 4</TableHeaderCell>
-          <TableHeaderCell>Header 5</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Header 1</Table.HeaderCell>
+          <Table.HeaderCell colSpan={2}>Header 2</Table.HeaderCell>
+        </Table.Row>
+        <Table.Row>
+          <Table.HeaderCell>Header 3</Table.HeaderCell>
+          <Table.HeaderCell>Header 4</Table.HeaderCell>
+          <Table.HeaderCell>Header 5</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
         {rows.map((row) => (
-          <TableRow key={row}>
-            <TableCell>{`Cell ${row}1`}</TableCell>
-            <TableCell>{`Cell ${row}2`}</TableCell>
-            <TableCell>{`Cell ${row}3`}</TableCell>
-          </TableRow>
+          <Table.Row key={row}>
+            <Table.Cell>{`Cell ${row}1`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}2`}</Table.Cell>
+            <Table.Cell>{`Cell ${row}3`}</Table.Cell>
+          </Table.Row>
         ))}
-      </TableBody>
+      </Table.Body>
     </Table>
   );
 };
diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx
index 7e590a39a5..36cbcd346a 100644
--- a/packages/react/src/components/Table/Table.tsx
+++ b/packages/react/src/components/Table/Table.tsx
@@ -1,13 +1,13 @@
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { TableHTMLAttributes } from 'react';
+import type { Size } from '../../types';
 
 export type TableProps = {
   /**
    * The size of the table
-   * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /**
    * If true, the table will have zebra striping
    * @default false
@@ -36,7 +36,7 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
     stickyHeader = false,
     border = false,
     hover = false,
-    size = 'md',
+    size,
     className,
     children,
     ...rest
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index 129dfbf441..4615c3bcac 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -1,6 +1,7 @@
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { createContext, forwardRef, useState } from 'react';
+import type { Size } from '../../types';
 
 export type TabsProps = {
   /** Controlled state for `Tabs` component. */
@@ -11,16 +12,14 @@ export type TabsProps = {
   onChange?: (value: string) => void;
   /**
    * Changes items size and paddings
-   * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
 
 export type ContextProps = {
   value?: string;
   defaultValue?: string;
   onChange?: (value: string) => void;
-  size?: TabsProps['size'];
 };
 
 export const Context = createContext<ContextProps>({});
@@ -42,7 +41,7 @@ export const Context = createContext<ContextProps>({});
  * ```
  */
 export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
-  { size = 'md', value, defaultValue, className, onChange, ...rest },
+  { size, value, defaultValue, className, onChange, ...rest },
   ref,
 ) {
   const isControlled = value !== undefined;
@@ -64,7 +63,6 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
         value,
         defaultValue,
         onChange: onValueChange,
-        size,
       }}
     >
       <div
diff --git a/packages/react/src/components/Tabs/TabsPanel.tsx b/packages/react/src/components/Tabs/TabsPanel.tsx
index 3ff2493ee9..692b340d5c 100644
--- a/packages/react/src/components/Tabs/TabsPanel.tsx
+++ b/packages/react/src/components/Tabs/TabsPanel.tsx
@@ -18,7 +18,7 @@ export type TabsPanelProps = {
  */
 export const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
   function TabsPanel({ children, value, className, ...rest }, ref) {
-    const { value: tabsValue, size } = useContext(Context);
+    const { value: tabsValue } = useContext(Context);
     const active = value === tabsValue;
 
     return (
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 8dc290aa72..9d301ac9e8 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -1,6 +1,7 @@
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../types';
 
 export type TagProps = {
   /**
@@ -18,9 +19,8 @@ export type TagProps = {
     | 'brand3';
   /**
    * Size of the tag
-   * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & HTMLAttributes<HTMLSpanElement>;
 
 /**
@@ -29,7 +29,7 @@ export type TagProps = {
  * <Tag color='success'>Success</Tag>
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
-  { size = 'md', color = 'neutral', className, ...rest },
+  { size, color = 'neutral', className, ...rest },
   ref,
 ) {
   return (
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
index 7258c98e9c..033baac9e4 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
+++ b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
@@ -2,15 +2,14 @@ import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { createContext, forwardRef, useId, useState } from 'react';
 
+import type { Size } from '../../types';
 import { RovingFocusRoot } from '../../utilities/RovingFocus';
-import type { ButtonProps } from '../Button';
 
 export type ToggleGroupContextProps = {
   value?: string;
   defaultValue?: string;
   onChange?: (value: string) => void;
   name?: string;
-  size?: ButtonProps['size'];
 };
 
 export const ToggleGroupContext = createContext<ToggleGroupContextProps>({});
@@ -25,10 +24,9 @@ export type ToggleGroupProps = {
   /** Form element name */
   name?: string;
   /**
-   * Changes items size and paddings
-   * @default md
+   * Size
    */
-  size?: ToggleGroupContextProps['size'];
+  size?: Size;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>;
 
 /**
@@ -42,16 +40,7 @@ export type ToggleGroupProps = {
  */
 export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
   function ToggleGroup(
-    {
-      size = 'md',
-      children,
-      value,
-      defaultValue,
-      onChange,
-      name,
-      className,
-      ...rest
-    },
+    { size, children, value, defaultValue, onChange, name, className, ...rest },
     ref,
   ) {
     const nameId = useId();
@@ -76,12 +65,12 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
           defaultValue,
           name: name ?? `togglegroup-name-${nameId}`,
           onChange: onValueChange,
-          size,
         }}
       >
         <RovingFocusRoot asChild activeValue={value} orientation='ambiguous'>
           <div
             className={cl('ds-togglegroup', className)}
+            data-size={size}
             role='radiogroup'
             ref={ref}
             {...rest}
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx b/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx
index 2ad9681a3d..1e20d1d96c 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx
+++ b/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx
@@ -22,13 +22,12 @@ export const ToggleGroupItem = forwardRef<
   HTMLButtonElement,
   ToggleGroupItemProps
 >(function ToggleGroupItem(rest, ref) {
-  const { active, size = 'md', buttonProps, value } = useToggleGroupItem(rest);
+  const { active, buttonProps, value } = useToggleGroupItem(rest);
 
   return (
     <RovingFocusItem asChild value={value}>
       <Button
         variant={active ? 'primary' : 'tertiary'}
-        size={size}
         ref={ref}
         {...rest}
         {...buttonProps}
diff --git a/packages/react/src/components/ToggleGroup/useToggleGroupitem.ts b/packages/react/src/components/ToggleGroup/useToggleGroupitem.ts
index d3fbc0daf5..c8b863dbab 100644
--- a/packages/react/src/components/ToggleGroup/useToggleGroupitem.ts
+++ b/packages/react/src/components/ToggleGroup/useToggleGroupitem.ts
@@ -1,14 +1,12 @@
 import { useContext, useId } from 'react';
 
 import type { ButtonProps } from '../Button';
-import type { ToggleGroupContextProps } from './ToggleGroup';
 import { ToggleGroupContext } from './ToggleGroup';
 
 import type { ToggleGroupItemProps } from './ToggleGroupItem';
 
 type UseToggleGroupItem = (props: ToggleGroupItemProps) => {
   active: boolean;
-  size?: ToggleGroupContextProps['size'];
   value: string;
   buttonProps?: Pick<
     ButtonProps,
@@ -30,7 +28,6 @@ export const useToggleGroupItem: UseToggleGroupItem = (
   return {
     ...rest,
     active: active,
-    size: toggleGroup?.size,
     value,
     buttonProps: {
       id: buttonId,
diff --git a/packages/react/src/components/Tooltip/Tooltip.stories.tsx b/packages/react/src/components/Tooltip/Tooltip.stories.tsx
index 35d098ac95..88c9a44846 100644
--- a/packages/react/src/components/Tooltip/Tooltip.stories.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.stories.tsx
@@ -16,12 +16,15 @@ export default {
   },
 } satisfies Meta;
 
-export const Preview: Story = {
-  args: {
-    content: 'Tooltip text',
-    children: defaultChildren,
-    placement: 'top',
-  },
+export const Preview: StoryFn<typeof Tooltip> = (args) => (
+  <Tooltip {...args}>
+    <Button>My trigger</Button>
+  </Tooltip>
+);
+
+Preview.args = {
+  content: 'Tooltip text',
+  placement: 'top',
 };
 
 export const Placement: Story = {
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index f7c1757632..fa25841e54 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -23,7 +23,7 @@ import type {
 } from 'react';
 import { Fragment, cloneElement, forwardRef, useRef, useState } from 'react';
 
-import type { PortalProps } from '../../types/Portal';
+import type { PortalProps } from '../../types';
 
 export type TooltipProps = {
   /**
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
index f6c1871c9f..2b72268979 100644
--- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
+++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -2,11 +2,11 @@ import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../types';
 
 export type ValidationMessageProps = {
   /**
    * Changes text sizing
-   * @default md
    */
   size?: 'xs' | 'sm' | 'md' | 'lg';
   /** Toggle error color */
@@ -23,7 +23,7 @@ export const ValidationMessage = forwardRef<
   HTMLParagraphElement,
   ValidationMessageProps
 >(function ValidationMessage(
-  { size = 'md', className, asChild, error = true, ...rest },
+  { size, className, asChild, error = true, ...rest },
   ref,
 ) {
   const Component = asChild ? Slot : 'div';
diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
index c790cec1d6..f43a41c8ff 100644
--- a/packages/react/src/components/form/Combobox/Combobox.tsx
+++ b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -4,7 +4,7 @@ import cl from 'clsx/lite';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 
-import type { PortalProps } from '../../../types/Portal';
+import type { PortalProps } from '../../../types';
 import { omit, useDebounceCallback } from '../../../utilities';
 import { Spinner } from '../../loaders/Spinner';
 import type { FormFieldProps } from '../useFormField';
diff --git a/packages/react/src/components/form/Input/Input.tsx b/packages/react/src/components/form/Input/Input.tsx
index f1aea063a0..579a3f9456 100644
--- a/packages/react/src/components/form/Input/Input.tsx
+++ b/packages/react/src/components/form/Input/Input.tsx
@@ -1,14 +1,14 @@
 import cl from 'clsx/lite';
 import type { InputHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../../types';
 
 type InputAttr = InputHTMLAttributes<HTMLInputElement>;
 export type InputProps = {
   /**
    * Changes field size and paddings
-   * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /** Supported `input` types */
   type?: InputAttr['type'];
   /** Exposes the HTML `size` attribute.
@@ -33,7 +33,7 @@ export type InputProps = {
  * ```
  */
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { type = 'text', size = 'md', htmlSize, className, onClick, ...rest },
+  { type = 'text', size, htmlSize, className, onClick, ...rest },
   ref,
 ) {
   return (
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index 9a8eb92b1f..e5e77d2c12 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -4,6 +4,7 @@ import cl from 'clsx/lite';
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useCallback, useRef, useState } from 'react';
 
+import type { Size } from '../../../types';
 import { omit } from '../../../utilities';
 import { Button } from '../../Button/Button';
 import { Label } from '../../Label';
@@ -23,7 +24,7 @@ export type SearchProps = {
    * Changes field size and paddings
    * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /** Variant
    * @default 'simple'
    */
diff --git a/packages/react/src/components/form/Select/Select.tsx b/packages/react/src/components/form/Select/Select.tsx
index 39f44dc070..fdcc88a69a 100644
--- a/packages/react/src/components/form/Select/Select.tsx
+++ b/packages/react/src/components/form/Select/Select.tsx
@@ -1,13 +1,14 @@
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { SelectHTMLAttributes } from 'react';
+import type { Size } from '../../../types';
 
 export type SelectProps = {
   /**
    * Defines the size of the select.
    * @default md
    **/
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /** Defines if the select is readOnly
    * @default false
    */
diff --git a/packages/react/src/components/form/Textarea/Textarea.stories.tsx b/packages/react/src/components/form/Textarea/Textarea.stories.tsx
index 9472b2dfbf..c56d59d4d3 100644
--- a/packages/react/src/components/form/Textarea/Textarea.stories.tsx
+++ b/packages/react/src/components/form/Textarea/Textarea.stories.tsx
@@ -62,7 +62,6 @@ export const Preview: Story = {
 
 export const FullWidth: Story = {
   args: {
-    rows: 10,
     cols: 40,
     id: 'my-textarea',
   },
diff --git a/packages/react/src/components/form/Textarea/Textarea.tsx b/packages/react/src/components/form/Textarea/Textarea.tsx
index 979ae5c6fe..5887fc26e1 100644
--- a/packages/react/src/components/form/Textarea/Textarea.tsx
+++ b/packages/react/src/components/form/Textarea/Textarea.tsx
@@ -1,13 +1,14 @@
 import cl from 'clsx/lite';
 import type { TextareaHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
+import type { Size } from '../../../types';
 
 export type TextareaProps = {
   /**
    * Defines the size of the select.
    * @default md
    **/
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 /** Textarea field
diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx
index 11336bad66..69702b6538 100644
--- a/packages/react/src/components/form/Textfield/Textfield.tsx
+++ b/packages/react/src/components/form/Textfield/Textfield.tsx
@@ -3,6 +3,7 @@ import cl from 'clsx/lite';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useId, useState } from 'react';
 
+import type { Size } from '../../../types';
 import { omit } from '../../../utilities';
 import { Label } from '../../Label';
 import { Paragraph } from '../../Paragraph';
@@ -22,7 +23,7 @@ export type TextfieldProps = {
    * Changes field size and paddings
    * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
   /** Prefix for field. */
   prefix?: string;
   /** Suffix for field. */
diff --git a/packages/react/src/components/form/useFormField.ts b/packages/react/src/components/form/useFormField.ts
index e866b08233..7c4ab727c1 100644
--- a/packages/react/src/components/form/useFormField.ts
+++ b/packages/react/src/components/form/useFormField.ts
@@ -2,6 +2,7 @@ import cl from 'clsx/lite';
 import { useContext, useId } from 'react';
 import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
 
+import type { Size } from '../../types';
 import { FieldsetContext } from './Fieldset/FieldsetContext';
 
 export type FormFieldProps = {
@@ -23,7 +24,7 @@ export type FormFieldProps = {
    * Changes field size and paddings
    * @default md
    */
-  size?: 'sm' | 'md' | 'lg';
+  size?: Size;
 } & Pick<HTMLAttributes<HTMLElement>, 'aria-describedby'>;
 
 export type FormField = {
diff --git a/packages/react/src/components/loaders/Spinner/Spinner.test.tsx b/packages/react/src/components/loaders/Spinner/Spinner.test.tsx
index ac7c6cc49e..2c21afe4d3 100644
--- a/packages/react/src/components/loaders/Spinner/Spinner.test.tsx
+++ b/packages/react/src/components/loaders/Spinner/Spinner.test.tsx
@@ -7,14 +7,6 @@ beforeAll(() => {
 });
 
 describe('spinner', (): void => {
-  it('should render with default medium size', (): void => {
-    render(<Spinner title='Loading' />);
-    expect(screen.getByTitle('Loading').parentElement).toHaveAttribute(
-      'data-size',
-      'md',
-    );
-  });
-
   it('should render with title "loading', (): void => {
     render(<Spinner title='Loading' />);
     expect(screen.getByTitle('Loading')).toBeInTheDocument();
diff --git a/packages/react/src/components/loaders/Spinner/Spinner.tsx b/packages/react/src/components/loaders/Spinner/Spinner.tsx
index 93ea490ae6..f2d8a7fe41 100644
--- a/packages/react/src/components/loaders/Spinner/Spinner.tsx
+++ b/packages/react/src/components/loaders/Spinner/Spinner.tsx
@@ -8,8 +8,6 @@ export type SpinnerProps = {
   title: string;
   /**
    * Spinner size
-   *
-   * @default md
    */
   size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   /**
@@ -23,7 +21,7 @@ export type SpinnerProps = {
 export const Spinner = ({
   title,
   color = 'neutral',
-  size = 'md',
+  size,
   className,
   ...rest
 }: SpinnerProps): JSX.Element => {
diff --git a/packages/react/src/types/Portal.ts b/packages/react/src/types.ts
similarity index 84%
rename from packages/react/src/types/Portal.ts
rename to packages/react/src/types.ts
index 09ba9044b0..a70d2ef8e1 100644
--- a/packages/react/src/types/Portal.ts
+++ b/packages/react/src/types.ts
@@ -1,3 +1,5 @@
+export type Size = 'sm' | 'md' | 'lg';
+
 export type PortalProps = {
   /**
    * Portals the floating element outside of the app root and into the body.
diff --git a/packages/react/stories/testing.stories.tsx b/packages/react/stories/testing.stories.tsx
index 4c96b74d79..373546a5da 100644
--- a/packages/react/stories/testing.stories.tsx
+++ b/packages/react/stories/testing.stories.tsx
@@ -1,16 +1,44 @@
+import { PrinterSmallIcon } from '@navikt/aksel-icons';
 import type { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
 
 import {
+  Accordion,
+  Alert,
+  Avatar,
+  Badge,
+  Breadcrumbs,
   Button,
+  Card,
   Checkbox,
   Chip,
   Combobox,
+  Dropdown,
+  ErrorSummary,
+  Field,
+  Heading,
+  HelpText,
+  Input,
+  Label,
+  Link,
+  List,
+  Modal,
+  Pagination,
+  Paragraph,
+  Popover,
   Radio,
   Select,
+  Spinner,
   Switch,
+  Table,
+  Tabs,
   Tag,
   Textfield,
-} from '../src/components';
+  ToggleGroup,
+  Tooltip,
+  ValidationMessage,
+  usePagination,
+} from '../src';
 
 export default {
   title: 'Testing',
@@ -127,3 +155,884 @@ LargeCol.args = {
   size: 'lg',
   direction: 'column',
 };
+
+export const Sizes: StoryFn = () => {
+  const [currentPage, setCurrentPage] = useState(4);
+  const { pages, nextButtonProps, prevButtonProps } = usePagination({
+    currentPage,
+    onChange: console.log, // Open console to see this event
+    totalPages: 10,
+    showPages: 7,
+    setCurrentPage,
+  });
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        alignItems: 'start',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        gap: '2rem',
+        maxWidth: '90vw',
+      }}
+    >
+      <div>14px</div>
+      <div>16px</div>
+      <div>18px</div>
+      <div>24px</div>
+      <Accordion data-size='xs'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <Accordion data-size='sm'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <Accordion data-size='md'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <Accordion data-size='xl'>
+        <Accordion.Item>
+          <Accordion.Heading>
+            Hvem kan registrere seg i Frivillighetsregisteret?
+          </Accordion.Heading>
+          <Accordion.Content>
+            For å kunne bli registrert i Frivillighetsregisteret, må
+            organisasjonen drive frivillig virksomhet. Det er bare foreninger,
+            stiftelser og aksjeselskap som kan registreres. Virksomheten kan
+            ikke dele ut midler til fysiske personer. Virksomheten må ha et
+            styre.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      <Alert data-size='xs'>Dette er en alert</Alert>
+      <Alert size='sm'>Dette er en alert</Alert>
+      <Alert size='md'>Dette er en alert</Alert>
+      <Alert data-size='xl'>Dette er en alert</Alert>
+      <div>
+        <Avatar size='xs' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <div>
+        <Avatar size='sm' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <div>
+        <Avatar size='md' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <div>
+        <Avatar data-size='xl' aria-label='Jan Daniel'>
+          JD
+        </Avatar>
+      </div>
+      <Badge data-size='xs' count={99} maxCount={10} />
+      <Badge size='sm' count={99} maxCount={10} />
+      <Badge size='md' count={99} maxCount={10} />
+      <Badge data-size='xl' count={99} maxCount={10} />
+      <Breadcrumbs data-size='xs'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
+      <Breadcrumbs size='sm'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
+      <Breadcrumbs size='md'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
+      <Breadcrumbs data-size='xl'>
+        <Breadcrumbs.List>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+          <Breadcrumbs.Item>
+            <Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
+          </Breadcrumbs.Item>
+        </Breadcrumbs.List>
+      </Breadcrumbs>
+      <div>
+        <Button data-size='xs'>
+          <PrinterSmallIcon />
+          Klikk her
+        </Button>
+      </div>
+      <div>
+        <Button size='sm'>
+          <PrinterSmallIcon />
+          Klikk her
+        </Button>
+      </div>
+      <div>
+        <Button size='md'>
+          <PrinterSmallIcon /> Klikk her
+        </Button>
+      </div>
+      <div>
+        <Button data-size='xl'>
+          <PrinterSmallIcon /> Klikk her
+        </Button>
+      </div>
+      <Card data-size='xs'>
+        <Heading>Card Neutral</Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
+      <Card data-size='sm'>
+        <Heading>Card Neutral</Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
+      <Card data-size='md'>
+        <Heading>Card Neutral</Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
+      <Card data-size='xl'>
+        <Heading>Card Neutral</Heading>
+        <Paragraph>
+          Most provide as with carried business are much better more the
+          perfected designer. Writing slightly explain desk unable at supposedly
+          about this
+        </Paragraph>
+      </Card>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='xs'
+      >
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='sm'
+      >
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='md'
+      >
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div
+        style={{ display: 'flex', gap: 'var(--ds-sizing-2)' }}
+        data-size='xl'
+      >
+        <Chip.Radio>Radio</Chip.Radio>
+        <Chip.Checkbox>Check</Chip.Checkbox>
+        <Chip.Button>Knapp</Chip.Button>
+      </div>
+      <div data-size='xs'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
+      <div data-size='sm'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
+      <div data-size='md'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
+      <div data-size='xl'>
+        <Dropdown.Context>
+          <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
+          <Dropdown>
+            <Dropdown.Heading>Heading 1</Dropdown.Heading>
+            <Dropdown.List>
+              <Dropdown.Item>Button 1.1</Dropdown.Item>
+              <Dropdown.Item>Button 1.2</Dropdown.Item>
+            </Dropdown.List>
+          </Dropdown>
+        </Dropdown.Context>
+      </div>
+      <ErrorSummary data-size='xs'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
+      <ErrorSummary size='sm'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
+      <ErrorSummary size='md'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
+      <ErrorSummary data-size='xl'>
+        <ErrorSummary.Heading>
+          For å gå videre må du rette opp følgende feil:
+        </ErrorSummary.Heading>
+        <ErrorSummary.List>
+          <ErrorSummary.Item href='#'>
+            Fødselsdato kan ikke være etter år 2005
+          </ErrorSummary.Item>
+          <ErrorSummary.Item href='#'>E-post må være gyldig</ErrorSummary.Item>
+        </ErrorSummary.List>
+      </ErrorSummary>
+      <style>
+        {/* TMP fix */}
+        {`
+          .ds-field { display: block }
+          .ds-field input+label { margin: 0; font-weight: normal }
+        `}
+      </style>
+      <Field data-size='xs'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
+      <Field data-size='sm'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
+      <Field data-size='md'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
+      <Field data-size='xl'>
+        <Label>Text</Label>
+        <Input aria-invalid='true' defaultValue='Noe tekst' />
+        <ValidationMessage>En feil</ValidationMessage>
+      </Field>
+      <Field
+        data-size='xs'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='radio' name='my-radio' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='sm'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='radio' name='my-radio' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='md'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='radio' name='my-radio' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='xl'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='radio' name='my-radio' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='xs'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-check' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='sm'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-check' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='md'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-check' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='xl'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-check' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='xs'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='sm'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' defaultChecked />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='md'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' />
+        <Label>Text</Label>
+      </Field>
+      <Field
+        data-size='xl'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--ds-sizing-2)',
+        }}
+      >
+        <Input type='checkbox' name='my-switch' role='switch' />
+        <Label>Text</Label>
+      </Field>
+      <HelpText data-size='xs' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
+      <HelpText size='sm' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
+      <HelpText size='md' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
+      <HelpText data-size='xl' aria-label='Mer info'>
+        Mer tekst
+      </HelpText>
+      <div data-size='xs'>
+        <Link href='#'>Lenke</Link>
+      </div>
+      <div data-size='sm'>
+        <Link href='#'>Lenke</Link>
+      </div>
+      <div data-size='md'>
+        <Link href='#'>Lenke</Link>
+      </div>
+      <div data-size='xl'>
+        <Link href='#'>Lenke</Link>
+      </div>
+      <List.Unordered data-size='xs'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
+      <List.Unordered size='sm'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
+      <List.Unordered size='md'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
+      <List.Unordered data-size='xl'>
+        <List.Item>List Item 1</List.Item>
+        <List.Item>List Item 2</List.Item>
+        <List.Item>List Item 3</List.Item>
+      </List.Unordered>
+      <Spinner size='xs' title='Loading' />
+      <Spinner size='sm' title='Loading' />
+      <Spinner size='md' title='Loading' />
+      <Spinner size='xl' title='Loading' />
+      <div data-size='xs'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
+      <div data-size='sm'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
+      <div data-size='md'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
+      <div data-size='xl'>
+        <Modal.Context>
+          <Modal.Trigger>Open Modal</Modal.Trigger>
+          <Modal>
+            <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Modal header
+            </Heading>
+            <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+              Blanditiis doloremque obcaecati assumenda odio ducimus sunt et.
+            </Paragraph>
+          </Modal>
+        </Modal.Context>
+      </div>
+      <Pagination aria-label='Sidenavigering' data-size='xs'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
+      <Pagination aria-label='Sidenavigering' size='sm'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
+      <Pagination aria-label='Sidenavigering' size='md'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
+      <Pagination aria-label='Sidenavigering' data-size='xl'>
+        <Pagination.List>
+          <Pagination.Item>
+            <Pagination.Button aria-label='Forrige side' {...prevButtonProps}>
+              Forrige
+            </Pagination.Button>
+          </Pagination.Item>
+          {pages.map(({ page, itemKey, buttonProps }) => (
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button {...buttonProps} aria-label={`Side ${page}`}>
+                {page}
+              </Pagination.Button>
+            </Pagination.Item>
+          ))}
+          <Pagination.Item>
+            <Pagination.Button aria-label='Neste side' {...nextButtonProps}>
+              Neste
+            </Pagination.Button>
+          </Pagination.Item>
+        </Pagination.List>
+      </Pagination>
+      <div data-size='xs'>
+        <Popover.Context>
+          <Popover.Trigger>My popup</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
+      <div data-size='sm'>
+        <Popover.Context>
+          <Popover.Trigger>My popup</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
+      <div data-size='md'>
+        <Popover.Context>
+          <Popover.Trigger>My popup</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
+      <div data-size='xl'>
+        <Popover.Context>
+          <Popover.Trigger>My popup</Popover.Trigger>
+          <Popover>popover content</Popover>
+        </Popover.Context>
+      </div>
+      <Table data-size='xs'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Table size='sm'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Table size='md'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Table data-size='xl'>
+        <Table.Head>
+          <Table.Row>
+            <Table.HeaderCell>Header 1</Table.HeaderCell>
+            <Table.HeaderCell>Header 2</Table.HeaderCell>
+            <Table.HeaderCell>Header 3</Table.HeaderCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Cell 1</Table.Cell>
+            <Table.Cell>Cell 2</Table.Cell>
+            <Table.Cell>Cell 3</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Cell 4</Table.Cell>
+            <Table.Cell>Cell 5</Table.Cell>
+            <Table.Cell>Cell 6</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+      <Tabs data-size='xs' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
+      <Tabs size='sm' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
+      <Tabs size='md' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
+      <Tabs data-size='xl' defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+          <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='value1'>content 1</Tabs.Panel>
+        <Tabs.Panel value='value2'>content 2</Tabs.Panel>
+        <Tabs.Panel value='value3'>content 3</Tabs.Panel>
+      </Tabs>
+      <Tag data-size='xs'>Tag</Tag>
+      <Tag size='sm'>Tag</Tag>
+      <Tag size='md'>Tag</Tag>
+      <Tag data-size='xl'>Tag</Tag>
+      <ToggleGroup data-size='xs' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
+      <ToggleGroup size='sm' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
+      <ToggleGroup size='md' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
+      <ToggleGroup data-size='xl' defaultValue='innboks'>
+        <ToggleGroup.Item value='innboks'>Innboks</ToggleGroup.Item>
+        <ToggleGroup.Item value='utkast'>Utkast</ToggleGroup.Item>
+        <ToggleGroup.Item value='arkiv'>Arkiv</ToggleGroup.Item>
+      </ToggleGroup>
+      <div data-size='xs'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
+      <div data-size='sm'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
+      <div data-size='md'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
+      <div data-size='xl'>
+        <Tooltip content='Tooltip text'>
+          <Button>My tooltip</Button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};