@norges-domstoler/dds-components 17.7.0 → 18.0.0

package/dist/index.css

@@ -1,4 +1,5 @@
-@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens.css";
+@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-core.css";
+@import "@norges-domstoler/dds-design-tokens/dist/css/ddsTokens-public.css";
 
 /* src/styles/dds-tokens.css */
 
@@ -105,25 +106,15 @@
 
 /* src/styles/selection.css */
 *::-moz-selection {
-  background-color: var(--dds-color-tertiary-lightest);
+  background-color: var(--dds-color-surface-highlighted-default);
   color: var(--dds-color-text-default);
 }
 *::selection {
-  background-color: var(--dds-color-tertiary-lightest);
+  background-color: var(--dds-color-surface-highlighted-default);
   color: var(--dds-color-text-default);
 }
 
 /* src/components/Typography/typographyStyles.module.css */
-:root {
-  --dds-color-text-body: var(--dds-color-text-default);
-  --dds-color-text-body-subtle: var(--dds-color-text-subtle);
-  --dds-color-text-link: var(--dds-color-text-action-resting);
-  --dds-color-text-link-visited: var(--dds-color-text-action-visited);
-  --dds-color-text-label: var(--dds-color-text-medium);
-  --dds-color-text-placeholder: var(--dds-color-text-subtle);
-  --dds-color-text-helper: var(--dds-color-text-subtle);
-  --dds-color-icon-link: var(--dds-color-text-action-resting);
-}
 .typographyStyles_contrast {
   --dds-color-text-body: var(--dds-color-text-on-inverse);
   --dds-color-text-body-subtle: var(--dds-color-text-on-inverse);
@@ -157,7 +148,7 @@
 :where(.typographyStyles_a--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-body-sans-01-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-medium-paragraph-spacing);
 }
 :where(.typographyStyles_a--external) {
   & > svg {
@@ -172,277 +163,155 @@
     color: var(--dds-color-text-action-visited);
   }
 }
-:where(.typographyStyles_body-sans-01) {
-  margin: 0;
-  font: var(--dds-font-body-sans-01);
-  letter-spacing: var(--dds-font-body-sans-01-letter-spacing);
-  color: var(--dds-color-text-body);
-}
-:where(.typographyStyles_body-sans-01--margins) {
-  display: block;
-  margin-top: 0;
-  margin-bottom: var(--dds-font-body-sans-01-paragraph-spacing);
-}
-:where(.typographyStyles_body-sans-02) {
-  margin: 0;
-  font: var(--dds-font-body-sans-02);
-  letter-spacing: var(--dds-font-body-sans-02-letter-spacing);
-  color: var(--dds-color-text-body);
-}
-:where(.typographyStyles_body-sans-02--margins) {
-  display: block;
-  margin-top: 0;
-  margin-bottom: var(--dds-font-body-sans-02-paragraph-spacing);
-}
-:where(.typographyStyles_body-sans-03) {
-  margin: 0;
-  font: var(--dds-font-body-sans-03);
-  letter-spacing: var(--dds-font-body-sans-03-letter-spacing);
-  color: var(--dds-color-text-body);
-}
-:where(.typographyStyles_body-sans-03--margins) {
-  display: block;
-  margin-top: 0;
-  margin-bottom: var(--dds-font-body-sans-03-paragraph-spacing);
-}
-:where(.typographyStyles_body-sans-04) {
-  margin: 0;
-  font: var(--dds-font-body-sans-04);
-  letter-spacing: var(--dds-font-body-sans-04-letter-spacing);
-  color: var(--dds-color-text-body);
-}
-:where(.typographyStyles_body-sans-04--margins) {
-  display: block;
-  margin-top: 0;
-  margin-bottom: var(--dds-font-body-sans-04-paragraph-spacing);
-}
-:where(.typographyStyles_lead-sans-01) {
-  margin: 0;
-  font: var(--dds-font-lead-sans-01);
-  letter-spacing: var(--dds-font-lead-sans-01-letter-spacing);
-  color: var(--dds-color-text-body);
-}
-:where(.typographyStyles_lead-sans-01--margins) {
-  display: block;
-  margin-top: 0;
-  margin-bottom: var(--dds-font-lead-sans-01-paragraph-spacing);
-}
-:where(.typographyStyles_lead-sans-02) {
+:where(.typographyStyles_body-xsmall) {
   margin: 0;
-  font: var(--dds-font-lead-sans-02);
-  letter-spacing: var(--dds-font-lead-sans-02-letter-spacing);
+  font: var(--dds-font-body-xsmall);
+  letter-spacing: var(--dds-font-body-xsmall-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_lead-sans-02--margins) {
+:where(.typographyStyles_body-xsmall--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-lead-sans-02-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-xsmall-paragraph-spacing);
 }
-:where(.typographyStyles_lead-sans-03) {
+:where(.typographyStyles_body-small) {
   margin: 0;
-  font: var(--dds-font-lead-sans-03);
-  letter-spacing: var(--dds-font-lead-sans-03-letter-spacing);
+  font: var(--dds-font-body-small);
+  letter-spacing: var(--dds-font-body-small-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_lead-sans-03--margins) {
+:where(.typographyStyles_body-small--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-lead-sans-03-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-small-paragraph-spacing);
 }
-:where(.typographyStyles_lead-sans-04) {
+:where(.typographyStyles_body-medium) {
   margin: 0;
-  font: var(--dds-font-lead-sans-04);
-  letter-spacing: var(--dds-font-lead-sans-04-letter-spacing);
+  font: var(--dds-font-body-medium);
+  letter-spacing: var(--dds-font-body-medium-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_lead-sans-04--margins) {
+:where(.typographyStyles_body-medium--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-lead-sans-04-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-medium-paragraph-spacing);
 }
-:where(.typographyStyles_lead-sans-05) {
+:where(.typographyStyles_body-large) {
   margin: 0;
-  font: var(--dds-font-lead-sans-05);
-  letter-spacing: var(--dds-font-lead-sans-05-letter-spacing);
+  font: var(--dds-font-body-large);
+  letter-spacing: var(--dds-font-body-large-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_lead-sans-05--margins) {
+:where(.typographyStyles_body-large--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-lead-sans-05-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-large-paragraph-spacing);
 }
-:where(.typographyStyles_heading-sans-01) {
+:where(.typographyStyles_lead-medium) {
   margin: 0;
-  font: var(--dds-font-heading-sans-01);
-  letter-spacing: var(--dds-font-heading-sans-01-letter-spacing);
+  font: var(--dds-font-lead-medium);
+  letter-spacing: var(--dds-font-lead-medium-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_heading-sans-01--margins) {
+:where(.typographyStyles_lead-medium--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-heading-sans-01-paragraph-spacing);
-  padding-top: var(--dds-spacing-padding-top-heading);
+  margin-bottom: var(--dds-font-lead-medium-paragraph-spacing);
 }
-:where(.typographyStyles_heading-sans-02) {
+:where(.typographyStyles_heading-xxsmall) {
   margin: 0;
-  font: var(--dds-font-heading-sans-02);
-  letter-spacing: var(--dds-font-heading-sans-02-letter-spacing);
+  font: var(--dds-font-heading-xxsmall);
+  letter-spacing: var(--dds-font-heading-xxsmall-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_heading-sans-02--margins) {
+:where(.typographyStyles_heading-xxsmall--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-heading-sans-02-paragraph-spacing);
+  margin-bottom: var(--dds-font-heading-xxsmall-paragraph-spacing);
   padding-top: var(--dds-spacing-padding-top-heading);
 }
-:where(.typographyStyles_heading-sans-03) {
+:where(.typographyStyles_heading-xsmall) {
   margin: 0;
-  font: var(--dds-font-heading-sans-03);
-  letter-spacing: var(--dds-font-heading-sans-03-letter-spacing);
+  font: var(--dds-font-heading-xsmall);
+  letter-spacing: var(--dds-font-heading-xsmall-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_heading-sans-03--margins) {
+:where(.typographyStyles_heading-xsmall--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-heading-sans-03-paragraph-spacing);
+  margin-bottom: var(--dds-font-heading-xsmall-paragraph-spacing);
   padding-top: var(--dds-spacing-padding-top-heading);
 }
-:where(.typographyStyles_heading-sans-04) {
+:where(.typographyStyles_heading-small) {
   margin: 0;
-  font: var(--dds-font-heading-sans-04);
-  letter-spacing: var(--dds-font-heading-sans-04-letter-spacing);
+  font: var(--dds-font-heading-small);
+  letter-spacing: var(--dds-font-heading-small-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_heading-sans-04--margins) {
+:where(.typographyStyles_heading-small--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-heading-sans-04-paragraph-spacing);
+  margin-bottom: var(--dds-font-heading-small-paragraph-spacing);
   padding-top: var(--dds-spacing-padding-top-heading);
 }
-:where(.typographyStyles_heading-sans-05) {
+:where(.typographyStyles_heading-medium) {
   margin: 0;
-  font: var(--dds-font-heading-sans-05);
-  letter-spacing: var(--dds-font-heading-sans-05-letter-spacing);
+  font: var(--dds-font-heading-medium);
+  letter-spacing: var(--dds-font-heading-medium-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_heading-sans-05--margins) {
+:where(.typographyStyles_heading-medium--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-heading-sans-05-paragraph-spacing);
+  margin-bottom: var(--dds-font-heading-medium-paragraph-spacing);
   padding-top: var(--dds-spacing-padding-top-heading);
 }
-:where(.typographyStyles_heading-sans-06) {
+:where(.typographyStyles_heading-large) {
   margin: 0;
-  font: var(--dds-font-heading-sans-06);
-  letter-spacing: var(--dds-font-heading-sans-06-letter-spacing);
+  font: var(--dds-font-heading-large);
+  letter-spacing: var(--dds-font-heading-large-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_heading-sans-06--margins) {
+:where(.typographyStyles_heading-large--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-heading-sans-06-paragraph-spacing);
+  margin-bottom: var(--dds-font-heading-large-paragraph-spacing);
   padding-top: var(--dds-spacing-padding-top-heading);
 }
-:where(.typographyStyles_heading-sans-07) {
+:where(.typographyStyles_heading-xlarge) {
   margin: 0;
-  font: var(--dds-font-heading-sans-07);
-  letter-spacing: var(--dds-font-heading-sans-07-letter-spacing);
+  font: var(--dds-font-heading-xlarge);
+  letter-spacing: var(--dds-font-heading-xlarge-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_heading-sans-07--margins) {
+:where(.typographyStyles_heading-xlarge--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-heading-sans-07-paragraph-spacing);
+  margin-bottom: var(--dds-font-heading-xlarge-paragraph-spacing);
   padding-top: var(--dds-spacing-padding-top-heading);
 }
-:where(.typographyStyles_heading-sans-08) {
+:where(.typographyStyles_heading-xxlarge) {
   margin: 0;
-  font: var(--dds-font-heading-sans-08);
-  letter-spacing: var(--dds-font-heading-sans-08-letter-spacing);
+  font: var(--dds-font-heading-xxlarge);
+  letter-spacing: var(--dds-font-heading-xxlarge-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_heading-sans-08--margins) {
+:where(.typographyStyles_heading-xxlarge--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-heading-sans-08-paragraph-spacing);
+  margin-bottom: var(--dds-font-heading-xxlarge-paragraph-spacing);
   padding-top: var(--dds-spacing-padding-top-heading);
 }
-:where(.typographyStyles_supporting-style-label-01) {
+:where(.typographyStyles_label-medium) {
   margin: 0;
-  font: var(--dds-font-supporting-style-label-01);
-  letter-spacing: var(--dds-font-supporting-style-label-01-letter-spacing);
+  font: var(--dds-font-label-medium);
+  letter-spacing: var(--dds-font-label-medium-letter-spacing);
   color: var(--dds-color-text-label);
 }
-:where(.typographyStyles_supporting-style-label-01--margins) {
+:where(.typographyStyles_label-medium--margins) {
   display: block;
-  margin-top: var(--dds-font-supporting-style-label-01-paragraph-spacing);
-  margin-bottom: var(--dds-font-supporting-style-label-01-paragraph-spacing);
-}
-:where(.typographyStyles_supporting-style-helper-text-01) {
-  margin: 0;
-  font: var(--dds-font-supporting-style-helpertext-01);
-  letter-spacing: var(--dds-font-supporting-style-helpertext-01-letter-spacing);
-  color: var(--dds-color-text-helper);
-}
-:where(.typographyStyles_supporting-style-helper-text-01--margins) {
-  display: block;
-  margin-top: var(--dds-font-supporting-style-helpertext-01-paragraph-spacing);
-  margin-bottom: var( --dds-font-supporting-style-helpertext-01-paragraph-spacing );
-}
-:where(.typographyStyles_supporting-style-placeholder-text-01) {
-  margin: 0;
-  font: var(--dds-font-supporting-style-placeholdertext-01);
-  letter-spacing: var( --dds-font-supporting-style-placeholdertext-01-letter-spacing );
-  color: var(--dds-color-text-placeholder);
-}
-:where(.typographyStyles_supporting-style-placeholder-text-01--margins) {
-  display: block;
-  margin-top: var( --dds-font-supporting-style-placeholdertext-01-paragraph-spacing );
-  margin-bottom: var( --dds-font-supporting-style-placeholdertext-01-paragraph-spacing );
-}
-:where(.typographyStyles_supporting-style-placeholder-text-02) {
-  margin: 0;
-  font: var(--dds-font-supporting-style-placeholdertext-02);
-  letter-spacing: var( --dds-font-supporting-style-placeholdertext-02-letter-spacing );
-  color: var(--dds-color-text-placeholder);
-}
-:where(.typographyStyles_supporting-style-placeholder-text-02--margins) {
-  display: block;
-  margin-top: var( --dds-font-supporting-style-placeholdertext-02-paragraph-spacing );
-  margin-bottom: var( --dds-font-supporting-style-placeholdertext-02-paragraph-spacing );
-}
-:where(.typographyStyles_supporting-style-placeholder-text-03) {
-  margin: 0;
-  font: var(--dds-font-supporting-style-placeholdertext-03);
-  letter-spacing: var( --dds-font-supporting-style-placeholdertext-03-letter-spacing );
-  color: var(--dds-color-text-placeholder);
-}
-:where(.typographyStyles_supporting-style-placeholder-text-03--margins) {
-  display: block;
-  margin-top: var( --dds-font-supporting-style-placeholdertext-03-paragraph-spacing );
-  margin-bottom: var( --dds-font-supporting-style-placeholdertext-03-paragraph-spacing );
-}
-:where(.typographyStyles_supporting-style-tiny-01) {
-  margin: 0;
-  font: var(--dds-font-supporting-style-tiny-01);
-  letter-spacing: var(--dds-font-supporting-style-tiny-01-letter-spacing);
-  color: var(--dds-color-text-body);
-}
-:where(.typographyStyles_supporting-style-tiny-01--margins) {
-  display: block;
-  margin-top: var(--dds-font-supporting-style-tiny-01-paragraph-spacing);
-  margin-bottom: var(--dds-font-supporting-style-tiny-01-paragraph-spacing);
-}
-:where(.typographyStyles_supporting-style-tiny-02) {
-  margin: 0;
-  font: var(--dds-font-supporting-style-tiny-02);
-  letter-spacing: var(--dds-font-supporting-style-tiny-02-letter-spacing);
-  color: var(--dds-color-text-body);
-}
-:where(.typographyStyles_supporting-style-tiny-02--margins) {
-  display: block;
-  margin-top: var(--dds-font-supporting-style-tiny-02-paragraph-spacing);
-  margin-bottom: var(--dds-font-supporting-style-tiny-02-paragraph-spacing);
+  margin-top: var(--dds-font-label-medium-paragraph-spacing);
+  margin-bottom: var(--dds-font-label-medium-paragraph-spacing);
 }
 :where(.typographyStyles_legend) {
   padding-inline: 0;
@@ -462,9 +331,6 @@
 :where(.typographyStyles_underline) {
   text-decoration: underline;
 }
-:where(.typographyStyles_a) {
-  color: var(--dds-color-text-link);
-}
 .typographyStyles_text-color--default {
   color: var(--dds-color-text-default);
 }
@@ -479,9 +345,6 @@
 }
 
 /* src/components/helpers/styling/utilStyles.module.css */
-:root {
-  --dds-transition-duration-surface-move: 0.5s;
-}
 :where(.utilStyles_remove-list-styling) {
   list-style: none;
   padding: 0;
@@ -590,15 +453,13 @@
 }
 
 /* src/components/helpers/Chevron/Chevron.module.css */
-:root {
-  --dds-chevron-transition: transform 0.2s linear;
-}
 .Chevron_svg {
   display: inline-block;
   flex-shrink: 0;
   position: relative;
   text-align: center;
   vertical-align: middle;
+  --dds-chevron-transition: transform 0.2s linear;
 }
 .Chevron_group {
   transition: var(--dds-chevron-transition);
@@ -631,9 +492,6 @@
 }
 
 /* src/components/helpers/Input/Input.module.css */
-:root {
-  --dds-input-default-width: 320px;
-}
 .Input_container {
   position: relative;
 }
@@ -737,7 +595,7 @@
 :where(.Input_input--small) {
   padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
 }
-:where(.Input_input--tiny) {
+:where(.Input_input--xsmall) {
   padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
 }
 :where(.Input_input--with-affix) {
@@ -775,44 +633,10 @@
 }
 
 /* src/components/helpers/styling/focus.module.css */
-:root {
-  --dds-focus-outline: var(--dds-color-focus-outside) 2px solid;
-  --dds-focus-outline-offset: var(--dds-spacing-x0-125);
-  --dds-focus-outline-inset: calc(0px - var(--dds-spacing-x0-25));
-  --dds-focus-box-shadow: 0 0 0 2px var(--dds-color-focus-inside);
-  --dds-focus-transition: outline-offset 0.2s;
-}
-.focus_focusable:focus-visible {
-  outline: var(--dds-focus-outline);
-  outline-offset: var(--dds-focus-outline-offset);
-  box-shadow: var(--dds-focus-box-shadow);
-}
-.focus_focused {
-  outline: var(--dds-focus-outline);
-  outline-offset: var(--dds-focus-outline-offset);
-  box-shadow: var(--dds-focus-box-shadow);
-}
-.focus_focusable-within:focus-within {
-  outline: var(--dds-focus-outline);
-  outline-offset: var(--dds-focus-outline-offset);
-  box-shadow: var(--dds-focus-box-shadow);
-}
-.focus_focusable-textual:focus-visible::-moz-selection {
-  outline: var(--dds-focus-outline);
-  outline-offset: var(--dds-focus-outline-offset);
-  box-shadow: var(--dds-focus-box-shadow);
-}
-.focus_focusable-textual:focus-visible,
-.focus_focusable-textual:focus-visible::selection {
-  outline: var(--dds-focus-outline);
-  outline-offset: var(--dds-focus-outline-offset);
-  box-shadow: var(--dds-focus-box-shadow);
-}
-.focus_has-focusable-input:has(input:focus-visible) {
-  outline: var(--dds-focus-outline);
-  outline-offset: var(--dds-focus-outline-offset);
-  box-shadow: var(--dds-focus-box-shadow);
-}
+.focus_focused,
+.focus_focusable:focus-visible,
+.focus_focusable-within:focus-within,
+.focus_has-focusable-input:has(input:focus-visible),
 .focus_focusable-sibling:focus-visible + .focus_focus-styled-sibling {
   outline: var(--dds-focus-outline);
   outline-offset: var(--dds-focus-outline-offset);
@@ -1054,7 +878,7 @@
     justify-content: left;
   }
 }
-.Button_button--tiny {
+.Button_button--xsmall {
   &.Button_just-text {
     padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
   }
@@ -1364,11 +1188,11 @@
   }
 }
 
-/* src/components/Card/CardAccordion/CardAccordion.module.css */
-.CardAccordion_container {
+/* src/components/Card/CardExpandable/CardExpandable.module.css */
+.CardExpandable_container {
   border-radius: inherit;
 }
-.CardAccordion_header-button {
+.CardExpandable_header-button {
   @media (prefers-reduced-motion: no-preference) {
     transition: box-shadow 0.2s, var(--dds-focus-transition);
   }
@@ -1376,20 +1200,20 @@
     box-shadow: 0 0 0 2px var(--dds-color-border-action-hover);
   }
 }
-.CardAccordion_header-container {
+.CardExpandable_header-container {
   padding: var(--dds-card-accordion-header-container-padding);
   justify-content: space-between;
   @media (prefers-reduced-motion: no-preference) {
     transition: box-shadow 0.2s;
   }
 }
-.CardAccordion_header-container__chevron {
+.CardExpandable_header-container__chevron {
   margin-left: var(--dds-spacing-x0-5);
 }
-.CardAccordion_body {
+.CardExpandable_body {
   height: var(--dds-card-accordion-body-height);
 }
-.CardAccordion_body__content {
+.CardExpandable_body__content {
   padding: var(--dds-card-accordion-body-content-padding);
 }
 
@@ -1423,13 +1247,16 @@
   width: var(--dds-date-input-width);
 }
 .DateInput_date-input--medium {
-  padding-inline: var(--dds-spacing-x0-5);
+  padding-inline-start: var(--dds-spacing-x0-5);
+  padding-inline-end: var(--dds-spacing-x1);
 }
 .DateInput_date-input--small {
-  padding-inline: var(--dds-spacing-x0-5);
+  padding-inline-start: var(--dds-spacing-x0-5);
+  padding-inline-end: var(--dds-spacing-x0-75);
 }
-.DateInput_date-input--tiny {
-  padding-inline: var(--dds-spacing-x0-25);
+.DateInput_date-input--xsmall {
+  padding-inline-start: var(--dds-spacing-x0-25);
+  padding-inline-end: var(--dds-spacing-x0-5);
 }
 .DateInput_date-segment-container {
   display: flex;
@@ -1465,7 +1292,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-inline: -1px 0;
   padding: var(--dds-spacing-x0-25);
   color: var(--dds-color-icon-default);
 }
@@ -1598,7 +1424,7 @@
   }
 }
 .InputMessage_icon {
-  margin-top: var(--dds-spacing-x0-125);
+  margin-top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
 }
 
 /* src/components/DescriptionList/DescriptionList.module.css */
@@ -1674,20 +1500,26 @@
     }
   }
 }
-.DetailList_list--normal {
+.DetailList_list--small {
+  font: var(--dds-font-body-small);
+  letter-spacing: var(--dds-font-body-small-letter-spacing);
   .DetailList_cell {
-    padding-block: var(--dds-spacing-x1-5);
-    padding-inline: var(--dds-spacing-x0-75);
+    padding: var(--dds-spacing-x0-5);
   }
 }
-.DetailList_list--compact {
+.DetailList_list--medium {
+  font: var(--dds-font-body-medium);
+  letter-spacing: var(--dds-font-body-medium-letter-spacing);
   .DetailList_cell {
     padding: var(--dds-spacing-x0-75);
   }
 }
-.DetailList_list--extra-compact {
+.DetailList_list--large {
+  font: var(--dds-font-body-medium);
+  letter-spacing: var(--dds-font-body-medium-letter-spacing);
   .DetailList_cell {
-    padding: var(--dds-spacing-x0-5);
+    padding-block: var(--dds-spacing-x1-5);
+    padding-inline: var(--dds-spacing-x0-75);
   }
 }
 .DetailList_row {
@@ -1756,6 +1588,30 @@
   align-self: flex-end;
 }
 
+/* src/components/ThemeProvider/ThemeProvider.module.css */
+.ThemeProvider_global-variables {
+  --dds-color-text-body: var(--dds-color-text-default);
+  --dds-color-text-body-subtle: var(--dds-color-text-subtle);
+  --dds-color-text-link: var(--dds-color-text-action-resting);
+  --dds-color-text-link-visited: var(--dds-color-text-action-visited);
+  --dds-color-text-label: var(--dds-color-text-medium);
+  --dds-color-text-placeholder: var(--dds-color-text-subtle);
+  --dds-color-text-helper: var(--dds-color-text-subtle);
+  --dds-color-icon-link: var(--dds-color-text-action-resting);
+  --dds-focus-outline: var(--dds-color-focus-outside) 2px solid;
+  --dds-focus-outline-offset: var(--dds-spacing-x0-125);
+  --dds-focus-outline-inset: calc(0px - var(--dds-spacing-x0-25));
+  --dds-focus-box-shadow: 0 0 0 2px var(--dds-color-focus-inside);
+  --dds-focus-transition: outline-offset 0.2s;
+  --dds-input-default-width: 320px;
+  --dds-transition-duration-surface-move: 0.5s;
+}
+.ThemeProvider_global-styles {
+  font: var(--dds-font-body-medium);
+  letter-spacing: var(--dds-font-body-medium-letter-spacing);
+  color: var(--dds-color-text-default);
+}
+
 /* src/components/EmptyContent/EmptyContent.module.css */
 .EmptyContent_containter {
   display: flex;
@@ -2765,7 +2621,7 @@
 .Select_icon--small {
   left: var(--dds-spacing-x0-75);
 }
-.Select_icon--tiny {
+.Select_icon--xsmall {
   left: var(--dds-spacing-x0-5);
 }
 .Select_control {
@@ -2839,7 +2695,7 @@
 .NativeSelect_select--small {
   padding-right: var(--dds-spacing-x2);
 }
-.NativeSelect_select--tiny {
+.NativeSelect_select--xsmall {
   padding-right: var(--dds-spacing-x1-5);
 }
 .NativeSelect_select--multiple {
@@ -2871,7 +2727,7 @@
     border-bottom-right-radius: 0;
     margin-right: -1px;
   }
-  .PhoneInput_select--tiny {
+  .PhoneInput_select--xsmall {
     width: 5rem;
   }
 }
@@ -3288,10 +3144,10 @@
   .SelectionControl_selection-control:after {
     border: solid var(--dds-color-icon-on-action);
     border-width: 0 1px 1px 0;
-    left: 35%;
-    top: 10%;
-    width: 30%;
-    height: 65%;
+    left: 6px;
+    top: 1px;
+    width: 5px;
+    height: 10px;
     transform: rotate(45deg);
   }
   input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
@@ -3466,27 +3322,17 @@
     z-index: 50;
   }
 }
-.Table_table--normal {
-  td,
-  th {
-    padding: var(--dds-spacing-x1-5) var(--dds-spacing-x0-75);
-  }
-}
-.Table_table--compact {
-  td,
-  th {
-    padding: var(--dds-spacing-x0-75);
-  }
-}
-.Table_table--extra-compact {
+.Table_table--small {
+  font: var(--dds-font-body-small);
+  letter-spacing: var(--dds-font-body-small-letter-spacing);
   td,
   th {
     padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
   }
   th {
+    font: var(--dds-font-heading-xsmall);
+    letter-spacing: var(--dds-font-heading-xsmall-letter-spacing);
     background-color: var(--dds-color-surface-default);
-    font: var(--dds-font-body-sans-01);
-    font-weight: var(--dds-font-weight-bold);
   }
   .Table_row--body {
     &:nth-of-type(odd) {
@@ -3497,6 +3343,28 @@
     }
   }
 }
+.Table_table--medium {
+  font: var(--dds-font-body-medium);
+  letter-spacing: var(--dds-font-body-medium-letter-spacing);
+  th {
+    font: var(--dds-font-heading-small);
+  }
+  td,
+  th {
+    padding: var(--dds-spacing-x0-75);
+  }
+}
+.Table_table--large {
+  font: var(--dds-font-body-medium);
+  letter-spacing: var(--dds-font-body-medium-letter-spacing);
+  th {
+    font: var(--dds-font-heading-small);
+  }
+  td,
+  th {
+    padding: var(--dds-spacing-x1-5) var(--dds-spacing-x0-75);
+  }
+}
 .Table_row {
   @media (prefers-reduced-motion: no-preference) {
     transition:
@@ -3700,7 +3568,7 @@
 }
 .Tag_container--warning--strong {
   background-color: var(--dds-color-surface-warning-strong);
-  border-color: var(--dds-color-warning-light);
+  border-color: var(--dds-color-surface-warning-strong);
   svg {
     color: var(--dds-color-icon-on-warning-strong);
   }
@@ -3745,7 +3613,7 @@
   &.TextInput_with-icon--small {
     padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-small) + var(--dds-spacing-x0-5));
   }
-  &.TextInput_with-icon--tiny {
+  &.TextInput_with-icon--xsmall {
     padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-25));
   }
 }
@@ -3758,7 +3626,7 @@
 .TextInput_icon--small {
   left: var(--dds-spacing-x0-75);
 }
-.TextInput_icon--tiny {
+.TextInput_icon--xsmall {
   left: var(--dds-spacing-x0-5);
 }
 .TextInput_label {
@@ -3776,14 +3644,14 @@
 }
 .TextInput_prefix {
   left: 0;
-  margin-left: 8px;
-  padding-right: 8px;
+  margin-left: var(--dds-spacing-x0-5);
+  padding-right: var(--dds-spacing-x0-5);
   border-right: 1px solid var(--dds-color-border-default);
 }
 .TextInput_suffix {
   right: 0;
-  margin-right: 8px;
-  padding-left: 8px;
+  margin-right: var(--dds-spacing-x0-5);
+  padding-left: var(--dds-spacing-x0-5);
   border-left: 1px solid var(--dds-color-border-default);
 }
 .TextInput_affix--disabled {
@@ -3858,13 +3726,13 @@
   padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
   gap: var(--dds-spacing-x0-5);
 }
-.ToggleBar_content--tiny--just-icon {
+.ToggleBar_content--xsmall--just-icon {
   padding: var(--dds-spacing-x0-25);
   svg {
     font-size: calc(var(--dds-font-lineheight-x1) * 1em);
   }
 }
-.ToggleBar_content--tiny--with-text {
+.ToggleBar_content--xsmall--with-text {
   padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
   gap: var(--dds-spacing-x0-5);
 }