@norges-domstoler/dds-components 0.0.0-dev-20260108091446 → 0.0.0-dev-20260112082908

package/dist/index.css

@@ -206,9 +206,9 @@
 :where(.typographyStyles_a--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-body-medium-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-long-medium-paragraph-spacing);
 }
-:where(.typographyStyles_a--external) > svg,
+:where(.typographyStyles_a--external) > .typographyStyles_svg,
 .typographyStyles_a__icon {
   display: inline;
   margin: 0.1em 0.1em -0.1em;
@@ -218,49 +218,93 @@
 .typographyStyles_a--visited:visited {
   color: var(--dds-color-text-link-visited);
 }
-:where(.typographyStyles_body-xsmall) {
+:where(.typographyStyles_body-short-xsmall) {
   margin: 0;
-  font: var(--dds-font-body-xsmall);
-  letter-spacing: var(--dds-font-body-xsmall-letter-spacing);
+  font: var(--dds-font-body-short-xsmall);
+  letter-spacing: var(--dds-font-body-short-xsmall-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_body-xsmall--margins) {
+:where(.typographyStyles_body-short-xsmall--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-body-xsmall-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-short-xsmall-paragraph-spacing);
 }
-:where(.typographyStyles_body-small) {
+:where(.typographyStyles_body-short-small) {
   margin: 0;
-  font: var(--dds-font-body-small);
-  letter-spacing: var(--dds-font-body-small-letter-spacing);
+  font: var(--dds-font-body-short-small);
+  letter-spacing: var(--dds-font-body-short-small-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_body-small--margins) {
+:where(.typographyStyles_body-short-small--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-body-small-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-short-small-paragraph-spacing);
 }
-:where(.typographyStyles_body-medium) {
+:where(.typographyStyles_body-short-medium) {
   margin: 0;
-  font: var(--dds-font-body-medium);
-  letter-spacing: var(--dds-font-body-medium-letter-spacing);
+  font: var(--dds-font-body-short-medium);
+  letter-spacing: var(--dds-font-body-short-medium-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_body-medium--margins) {
+:where(.typographyStyles_body-short-medium--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-body-medium-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-short-medium-paragraph-spacing);
 }
-:where(.typographyStyles_body-large) {
+:where(.typographyStyles_body-short-large) {
   margin: 0;
-  font: var(--dds-font-body-large);
-  letter-spacing: var(--dds-font-body-large-letter-spacing);
+  font: var(--dds-font-body-short-large);
+  letter-spacing: var(--dds-font-body-short-large-letter-spacing);
   color: var(--dds-color-text-body);
 }
-:where(.typographyStyles_body-large--margins) {
+:where(.typographyStyles_body-short-large--margins) {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--dds-font-body-large-paragraph-spacing);
+  margin-bottom: var(--dds-font-body-short-large-paragraph-spacing);
+}
+:where(.typographyStyles_body-long-xsmall) {
+  margin: 0;
+  font: var(--dds-font-body-long-xsmall);
+  letter-spacing: var(--dds-font-body-long-xsmall-letter-spacing);
+  color: var(--dds-color-text-body);
+}
+:where(.typographyStyles_body-long-xsmall--margins) {
+  display: block;
+  margin-top: 0;
+  margin-bottom: var(--dds-font-body-long-xsmall-paragraph-spacing);
+}
+:where(.typographyStyles_body-long-small) {
+  margin: 0;
+  font: var(--dds-font-body-long-small);
+  letter-spacing: var(--dds-font-body-long-small-letter-spacing);
+  color: var(--dds-color-text-body);
+}
+:where(.typographyStyles_body-long-small--margins) {
+  display: block;
+  margin-top: 0;
+  margin-bottom: var(--dds-font-body-long-small-paragraph-spacing);
+}
+:where(.typographyStyles_body-long-medium) {
+  margin: 0;
+  font: var(--dds-font-body-long-medium);
+  letter-spacing: var(--dds-font-body-long-medium-letter-spacing);
+  color: var(--dds-color-text-body);
+}
+:where(.typographyStyles_body-long-medium--margins) {
+  display: block;
+  margin-top: 0;
+  margin-bottom: var(--dds-font-body-long-medium-paragraph-spacing);
+}
+:where(.typographyStyles_body-long-large) {
+  margin: 0;
+  font: var(--dds-font-body-long-large);
+  letter-spacing: var(--dds-font-body-long-large-letter-spacing);
+  color: var(--dds-color-text-body);
+}
+:where(.typographyStyles_body-long-large--margins) {
+  display: block;
+  margin-top: 0;
+  margin-bottom: var(--dds-font-body-long-large-paragraph-spacing);
 }
 :where(.typographyStyles_lead-medium) {
   margin: 0;
@@ -678,13 +722,6 @@
   position: relative;
 }
 
-/* src/components/Icon/Icon.module.css */
-.Icon_svg {
-  display: inline-block;
-  transition: fill 0.2s;
-  flex-shrink: 0;
-}
-
 /* src/components/layout/common/layout.module.css */
 .layout_dds-p {
   --dds-r-p: var(--dds-r-xs-p);
@@ -1651,43 +1688,45 @@
   box-shadow: var(--dds-focus-box-shadow);
 }
 
-/* src/components/helpers/Chevron/Chevron.module.css */
-.Chevron_svg {
+/* src/components/Icon/Icon.module.css */
+.Icon_svg {
   display: inline-block;
+  transition: fill 0.2s;
   flex-shrink: 0;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  --dds-chevron-transition: transform 0.2s linear;
 }
-.Chevron_group {
+
+/* src/components/Icon/icons/animated/AnimatedChevronUpDown/AnimatedChevronUpDown.module.css */
+.AnimatedChevronUpDown_svg {
+  @media (prefers-reduced-motion: no-preference) {
+    --dds-chevron-transition: transform 0.2s linear;
+  }
+}
+.AnimatedChevronUpDown_group {
   transition: var(--dds-chevron-transition);
 }
-.Chevron_group--up {
-  transform: translateY(3px);
+.AnimatedChevronUpDown_svg--up .AnimatedChevronUpDown_group {
+  transform: translateY(-3px);
 }
-.Chevron_group--down {
-  transform: translateY(0);
+.AnimatedChevronUpDown_svg--down .AnimatedChevronUpDown_group {
+  transform: translateY(3px);
 }
-.Chevron_left {
+.AnimatedChevronUpDown_left,
+.AnimatedChevronUpDown_right {
   transition: var(--dds-chevron-transition);
-  transform-origin: 1px 1px;
-}
-.Chevron_left--up {
-  transform: rotate(-90deg) translateY(0);
+  stroke-linecap: round;
+  transform-origin: center;
 }
-.Chevron_left--down {
-  transform: rotate(0) translateY(0);
+.AnimatedChevronUpDown_svg--up .AnimatedChevronUpDown_left {
+  transform: rotate(-45deg);
 }
-.Chevron_right {
-  transition: var(--dds-chevron-transition);
-  transform-origin: 7px 1px;
+.AnimatedChevronUpDown_svg--down .AnimatedChevronUpDown_left {
+  transform: rotate(45deg);
 }
-.Chevron_right--up {
-  transform: rotate(90deg) translateY(0);
+.AnimatedChevronUpDown_svg--up .AnimatedChevronUpDown_right {
+  transform: rotate(45deg);
 }
-.Chevron_right--down {
-  transform: rotate(0) translateY(0);
+.AnimatedChevronUpDown_svg--down .AnimatedChevronUpDown_right {
+  transform: rotate(-45deg);
 }
 
 /* src/components/ThemeProvider/ThemeProvider.module.css */
@@ -1718,7 +1757,6 @@
   --dds-focus-transition: outline-offset 0.2s;
   --dds-input-default-width: 320px;
   --dds-input-default-width-xsmall: 210px;
-  --dds-selection-control-height: 18px;
   --dds-spacing-xs-icon-text-gap: var(--dds-spacing-x0-25);
   --dds-spacing-sm-icon-text-gap: var(--dds-spacing-x0-25);
   --dds-spacing-md-icon-text-gap: var(--dds-spacing-x0-5);
@@ -1726,8 +1764,8 @@
   --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);
+  font: var(--dds-font-body-long-medium);
+  letter-spacing: var(--dds-font-body-long-medium-letter-spacing);
   color: var(--dds-color-text-default);
 }
 
@@ -1745,9 +1783,17 @@
   color: inherit;
   &:hover {
     background-color: var(--dds-color-surface-hover-default);
-    color: var(--dds-color-text-action-hover);
+    .Accordion_chevron {
+      color: var(--dds-color-text-action-hover);
+    }
   }
 }
+.Accordion_body {
+  height: var(--dds-card-accordion-body-height);
+}
+.Accordion_chevron {
+  margin-inline-end: var(--dds-spacing-x0-5);
+}
 
 /* src/components/helpers/AccordionBase/AccordionBase.module.css */
 :where(.AccordionBase_header-button) {
@@ -1760,19 +1806,10 @@
   width: 100%;
   border-radius: inherit;
 }
-.AccordionBase_header-container {
-  display: flex;
-  align-items: center;
-}
 .AccordionBase_header__content {
   text-align: left;
-}
-.AccordionBase_header__chevron {
   display: flex;
   align-items: center;
-  justify-content: center;
-  height: var(--dds-icon-size-medium);
-  width: var(--dds-icon-size-medium);
 }
 .AccordionBase_body {
   overflow: hidden;
@@ -1881,9 +1918,6 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x0-25);
   }
-  .Button_icon {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
 }
 .Button_button--small {
   &.Button_just-text {
@@ -1902,9 +1936,6 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x0-5);
   }
-  .Button_icon {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
 }
 .Button_button--medium {
   &.Button_just-text {
@@ -1923,9 +1954,6 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x0-75);
   }
-  .Button_icon {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
 }
 .Button_button--large {
   &.Button_just-text {
@@ -1944,9 +1972,6 @@
   &.Button_button--is-loading.Button_no-content {
     padding: var(--dds-spacing-x1);
   }
-  .Button_icon {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
 }
 .Button_spinner-wrapper--absolute {
   position: absolute;
@@ -2150,11 +2175,15 @@
 }
 .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;
   }
 }
+.CardExpandable_header__content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .CardExpandable_header-container__chevron {
   margin-left: var(--dds-spacing-x0-5);
 }
@@ -2174,7 +2203,7 @@
 }
 .SelectionControl_group--column {
   flex-direction: column;
-  gap: var(--dds-spacing-x0-5);
+  gap: var(--dds-spacing-x0-75);
 }
 .SelectionControl_label {
   cursor: pointer;
@@ -2225,10 +2254,10 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   .SelectionControl_selection-control:after {
     border: solid var(--dds-color-icon-on-action);
     border-width: 0 1px 1px 0;
-    left: 6px;
-    top: 1px;
-    width: 5px;
-    height: 10px;
+    left: 35%;
+    top: 10%;
+    width: 30%;
+    height: 60%;
     transform: rotate(45deg);
   }
   input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
@@ -2244,8 +2273,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   .SelectionControl_selection-control:after {
     border-radius: var(--dds-border-radius-rounded);
     background-color: var(--dds-color-icon-on-action);
-    height: 8px;
-    width: 8px;
+    height: 45%;
+    width: 45%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -2286,8 +2315,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-color: var(--dds-color-border-default);
   background-color: var(--dds-color-surface-field-default);
   border-radius: var(--dds-border-radius-input);
-  height: var(--dds-selection-control-height);
-  width: var(--dds-selection-control-height);
+  height: var(--dds-size-icon-component);
+  width: var(--dds-size-icon-component);
   &:after {
     content: "";
     position: absolute;
@@ -2307,26 +2336,36 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   border-radius: var(--dds-border-radius-rounded);
 }
 
-/* src/components/InputMessage/InputMessage.module.css */
-.InputMessage_container {
-  word-break: break-word;
-}
-.InputMessage_icon {
-  margin-top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
-}
-
 /* src/components/Chip/Chip.module.css */
 .Chip_container {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  gap: var(--dds-spacing-x0-25);
-  padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
   border: 1px solid var(--dds-color-border-subtle);
   border-radius: var(--dds-border-radius-chip);
   background-color: var(--dds-color-surface-subtle);
 }
 
+/* src/components/helpers/InlineIconButton/InlineIconButton.module.css */
+.InlineIconButton_button {
+  display: inline-flex;
+  border-radius: var(--dds-border-radius-button);
+  color: var(--dds-color-icon-default);
+  &:hover:not(:disabled) {
+    background-color: var(--dds-color-surface-hover-default);
+    color: var(--dds-color-icon-action-hover);
+  }
+  &:not(:focus-visible) {
+    outline: none;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      var(--dds-focus-transition);
+  }
+}
+
 /* src/components/Contrast/Contrast.module.css */
 :where(.Contrast_container) {
   background-color: var(--dds-color-surface-inverse-default);
@@ -2334,11 +2373,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 
 /* src/components/CookieBanner/CookieBanner.module.css */
 .CookieBanner_checkbox-label {
-  padding: 0 0 0 calc(var(--dds-selection-control-height) + var(--dds-spacing-x0-5));
+  padding: 0 0 0 calc(var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
   align-items: flex-start;
-  & > span {
-    top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
-  }
 }
 
 /* src/components/date-inputs/common/DateInput.module.css */
@@ -2360,6 +2396,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .DateInput_date-segment-container {
   display: flex;
   flex-direction: row;
+  font-family: var(--dds-font-family-monospace);
 }
 .DateInput_segment {
   padding: 0 0.05rem;
@@ -2368,7 +2405,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   width: max-content;
   font-variant-numeric: tabular-nums;
   outline: none;
-  font-family: var(--dds-font-family-monospace);
   &:focus {
     background-color: var(--dds-color-surface-action-selected);
     color: var(--dds-color-text-on-action);
@@ -2379,7 +2415,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   width: 100%;
   font-variant-numeric: tabular-nums;
   pointer-events: none;
-  font-family: var(--dds-font-family-monospace);
   .DateInput_segment:focus & {
     color: var(--dds-color-text-on-action);
   }
@@ -2405,7 +2440,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .DateInput_popover-button {
   padding: 3px;
-  margin-inline-start: -3px;
+  margin-left: -3px;
 }
 .DateInput_popover {
   z-index: var(--dds-zindex-popover);
@@ -2432,6 +2467,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   width: 40px;
   height: 40px;
 }
+.DateInput_calendar__th {
+  font-weight: normal;
+}
 .DateInput_calendar__week-number {
   display: flex;
   align-items: center;
@@ -2477,29 +2515,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   text-decoration: underline line-through;
 }
 
-/* src/components/helpers/InlineIconButton/InlineIconButton.module.css */
-.InlineIconButton_button {
-  display: inline-flex;
-  border-radius: var(--dds-border-radius-button);
-  color: var(--dds-color-icon-default);
-  &:hover:not(:disabled) {
-    background-color: var(--dds-color-surface-hover-default);
-    color: var(--dds-color-icon-action-hover);
-  }
-  &:not(:focus-visible) {
-    outline: none;
-  }
-  &:disabled {
-    cursor: not-allowed;
-  }
-  @media (prefers-reduced-motion: no-preference) {
-    transition:
-      background-color 0.2s,
-      color 0.2s,
-      var(--dds-focus-transition);
-  }
-}
-
 /* src/components/helpers/Input/Input.module.css */
 .Input_container {
   position: relative;
@@ -2605,34 +2620,46 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   padding: var(--dds-spacing-x0-75);
 }
 :where(.Input_input--small) {
-  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
+  padding: var(--dds-spacing-x0-5);
 }
 :where(.Input_input--xsmall) {
-  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
+  padding: var(--dds-spacing-x0-25);
 }
 .Input_input-with-icon--large {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-lg-icon-text-gap));
+  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
 }
 .Input_input-with-icon--medium {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-md-icon-text-gap));
+  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
 }
 .Input_input-with-icon--small {
-  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-sm-icon-text-gap));
+  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
 }
 .Input_input-with-icon--xsmall {
-  padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-xs-icon-text-gap));
+  padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
 }
 .Input_input-with-el-right--large {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
 }
 .Input_input-with-el-right--medium {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
 }
 .Input_input-with-el-right--small {
-  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
+  padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component) + var(--dds-spacing-x0-5));
 }
 .Input_input-with-el-right--xsmall {
-  padding-inline-end: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-xs-icon-text-gap));
+  padding-inline-end: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
+}
+.Input_el-right--large {
+  right: var(--dds-spacing-x0-75);
+}
+.Input_el-right--medium {
+  right: var(--dds-spacing-x0-75);
+}
+.Input_el-right--small {
+  right: var(--dds-spacing-x0-5);
+}
+.Input_el-right--xsmall {
+  right: var(--dds-spacing-x0-25);
 }
 :where(.Input_input--with-affix) {
   gap: var(--dds-spacing-x1);
@@ -2651,10 +2678,10 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   left: var(--dds-spacing-x0-75);
 }
 :where(.Input_input-group__absolute-el--small) {
-  left: var(--dds-spacing-x0-75);
+  left: var(--dds-spacing-x0-5);
 }
 :where(.Input_input-group__absolute-el--xsmall) {
-  left: var(--dds-spacing-x0-5);
+  left: var(--dds-spacing-x0-25);
 }
 
 /* src/components/DescriptionList/DescriptionList.module.css */
@@ -2736,24 +2763,18 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .DetailList_list--small {
-  font: var(--dds-font-body-small);
-  letter-spacing: var(--dds-font-body-small-letter-spacing);
   dt,
   dd {
     padding: var(--dds-spacing-x0-5);
   }
 }
 .DetailList_list--medium {
-  font: var(--dds-font-body-medium);
-  letter-spacing: var(--dds-font-body-medium-letter-spacing);
   dt,
   dd {
     padding: var(--dds-spacing-x0-75);
   }
 }
 .DetailList_list--large {
-  font: var(--dds-font-body-medium);
-  letter-spacing: var(--dds-font-body-medium-letter-spacing);
   dt,
   dd {
     padding-block: var(--dds-spacing-x1-5);
@@ -2855,12 +2876,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .FavStar_container--medium {
-  width: var(--dds-icon-size-medium);
-  height: var(--dds-icon-size-medium);
+  width: var(--dds-size-icon-medium);
+  height: var(--dds-size-icon-medium);
 }
 .FavStar_container--large {
-  width: var(--dds-icon-size-large);
-  height: var(--dds-icon-size-large);
+  width: var(--dds-size-icon-large);
+  height: var(--dds-size-icon-large);
 }
 .FavStar_icon {
   color: currentColor;
@@ -2911,12 +2932,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Feedback_button--horizontal {
-  width: var(--dds-icon-size-medium);
-  height: var(--dds-icon-size-medium);
+  width: var(--dds-size-icon-medium);
+  height: var(--dds-size-icon-medium);
 }
 .Feedback_button--vertical {
-  width: var(--dds-icon-size-large);
-  height: var(--dds-icon-size-large);
+  width: var(--dds-size-icon-large);
+  height: var(--dds-size-icon-large);
 }
 
 /* src/components/TextArea/TextArea.module.css */
@@ -3141,14 +3162,14 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 }
 .InlineEdit_edit-icon-textarea {
   position: absolute;
-  top: calc(((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2) + var(--dds-spacing-x0-25));
+  top: var(--dds-spacing-x0-25);
 }
 .InlineEdit_chevron {
   right: var(--dds-spacing-x0-25);
   pointer-events: none;
 }
 .InlineEdit_clear-button {
-  right: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-small));
+  right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-small));
 }
 
 /* src/components/InternalHeader/InternalHeader.module.css */
@@ -3378,10 +3399,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   visibility: hidden;
 }
 .Pagination_indicators {
-  display: grid;
   grid-auto-flow: column;
-  align-items: center;
-  gap: var(--dds-spacing-x0-75);
 }
 .Pagination_truncation-icon {
   color: var(--dds-color-icon-medium);
@@ -3402,15 +3420,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   box-sizing: border-box;
   max-width: 100%;
 }
-.Select_icon--medium {
-  left: var(--dds-spacing-x0-75);
-}
-.Select_icon--small {
-  left: var(--dds-spacing-x0-75);
-}
-.Select_icon--xsmall {
-  left: var(--dds-spacing-x0-5);
-}
 .Select_control {
   &:hover:not(.Select_control--readonly) .Select_dropdown-indicator,
   &:focus-within .Select_dropdown-indicator {
@@ -3430,6 +3439,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   -moz-appearance: none;
   appearance: none;
   text-overflow: ellipsis;
+  font: inherit;
   width: 100%;
   &:hover:not(:disabled):not(.NativeSelect_select--readonly) {
     border-color: var(--dds-color-border-action-hover);
@@ -3471,14 +3481,14 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     color: var(--dds-color-icon-subtle);
   }
 }
-.NativeSelect_select--medium {
-  padding-right: var(--dds-spacing-x2);
+.NativeSelect_select--xsmall {
+  padding-right: calc(var(--dds-spacing-x0-25) + var(--dds-size-icon-component));
 }
 .NativeSelect_select--small {
-  padding-right: var(--dds-spacing-x2);
+  padding-right: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component));
 }
-.NativeSelect_select--xsmall {
-  padding-right: var(--dds-spacing-x1-5);
+.NativeSelect_select--medium {
+  padding-right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component));
 }
 .NativeSelect_select--multiple {
   padding-right: 0;
@@ -3486,22 +3496,27 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     background-color: var(--dds-color-surface-field-disabled);
   }
 }
+.NativeSelect_select--with-clear-button-medium {
+  padding-right: calc(var(--dds-spacing-x0-75) + 2 * var(--dds-size-icon-component));
+}
 .NativeSelect_select--with-clear-button-small {
-  padding-right: var(--dds-spacing-x3);
+  padding-right: calc(var(--dds-spacing-x0-5) + 2 * var(--dds-size-icon-component));
 }
-.NativeSelect_select--with-clear-button-medium {
-  padding-right: var(--dds-spacing-x4);
+.NativeSelect_select--with-clear-button-xsmall {
+  padding-right: calc(var(--dds-spacing-x0-25) + 2 * var(--dds-size-icon-component));
 }
 .NativeSelect_icon {
-  right: var(--dds-spacing-x0-5);
   align-self: center;
   pointer-events: none;
 }
+.NativeSelect_clear-button--xsmall {
+  right: calc(var(--dds-spacing-x0-25) + var(--dds-size-icon-component));
+}
 .NativeSelect_clear-button--small {
-  right: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small));
+  right: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component));
 }
 .NativeSelect_clear-button--medium {
-  right: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-medium));
+  right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component));
 }
 
 /* src/components/PhoneInput/PhoneInput.module.css */
@@ -3743,6 +3758,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   &[type=search]::-webkit-search-results-decoration {
     -webkit-appearance: none;
   }
+  font: inherit;
 }
 .Search_clear-button {
   right: var(--dds-spacing-x1);
@@ -3838,8 +3854,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .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);
@@ -3859,8 +3873,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .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);
   }
@@ -3870,8 +3882,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .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);
   }
@@ -3942,8 +3952,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Table_collapse-button {
-  height: var(--dds-icon-size-medium);
-  width: var(--dds-icon-size-medium);
   border-radius: var(--dds-border-radius-button);
   margin-left: auto;
   margin-right: auto;
@@ -4008,19 +4016,19 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   }
 }
 .Tabs_tab--medium--row {
-  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-5);
+  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
   gap: var(--dds-spacing-md-icon-text-gap);
 }
 .Tabs_tab--small--row {
-  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
+  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
   gap: var(--dds-spacing-sm-icon-text-gap);
 }
 .Tabs_tab--medium--column {
-  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
+  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
   gap: var(--dds-spacing-x0-25);
 }
 .Tabs_tab--small--column {
-  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
+  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
 }
 .Tabs_tab--row {
   flex-direction: row;
@@ -4133,24 +4141,11 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
 .TextInput_input--extended {
   width: 100%;
 }
-.TextInput_icon--medium {
-  left: var(--dds-spacing-x0-75);
-}
-.TextInput_icon--small {
-  left: var(--dds-spacing-x0-75);
-}
-.TextInput_icon--xsmall {
-  left: var(--dds-spacing-x0-5);
-}
 .TextInput_affix {
-  position: absolute;
   height: 100%;
-  top: 50%;
-  transform: translateY(-50%);
   display: flex;
   align-items: center;
   pointer-events: none;
-  z-index: var(--dds-zindex-absolute-element);
 }
 .TextInput_prefix {
   left: 0;
@@ -4174,7 +4169,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   align-items: center;
   width: -moz-fit-content;
   width: fit-content;
-  gap: var(--dds-spacing-x0-75);
+  gap: var(--dds-spacing-x0-25);
   --dds-toggle-medium-thumb-spacing-inline: var(--dds-spacing-x0-125);
   --dds-toggle-large-thumb-spacing-inline: var(--dds-spacing-x0-25);
 }
@@ -4348,10 +4343,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
   box-sizing: border-box;
   cursor: pointer;
   background-color: var(--dds-color-surface-default);
-  border-right: 1px solid var(--dds-color-border-default);
-  border-top: 1px solid var(--dds-color-border-default);
-  border-bottom: 1px solid var(--dds-color-border-default);
-  border-color: var(--dds-color-border-default);
+  border: 1px solid var(--dds-color-border-default);
   @media (prefers-reduced-motion: no-preference) {
     transition:
       border-color 0.2s,
@@ -4361,52 +4353,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
       var(--dds-focus-transition);
   }
 }
-.ToggleBar_content--large--just-icon {
-  padding: var(--dds-spacing-x1);
-  svg {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
-}
-.ToggleBar_content--large--with-text {
-  padding: var(--dds-spacing-x1) var(--dds-spacing-x2);
-  gap: var(--dds-spacing-lg-icon-text-gap);
-}
-.ToggleBar_content--medium--just-icon {
-  padding: var(--dds-spacing-x0-75);
-  svg {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
-}
-.ToggleBar_content--medium--with-text {
-  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1-5);
-  gap: var(--dds-spacing-md-icon-text-gap);
-}
-.ToggleBar_content--small--just-icon {
-  padding: var(--dds-spacing-x0-5);
-  svg {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
-}
-.ToggleBar_content--small--with-text {
-  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
-  gap: var(--dds-spacing-sm-icon-text-gap);
-}
-.ToggleBar_content--xsmall--just-icon {
-  padding: var(--dds-spacing-x0-25);
-  svg {
-    font-size: calc(var(--dds-font-lineheight-x1) * 1em);
-  }
-}
-.ToggleBar_content--xsmall--with-text {
-  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
-  gap: var(--dds-spacing-xs-icon-text-gap);
-}
 .ToggleBar_label {
   &:hover .ToggleBar_content {
     background-color: var(--dds-color-surface-hover-default);
   }
   &:first-child .ToggleBar_content {
-    border-left: 1px solid var(--dds-color-border-default);
+    margin-inline-end: -1px;
     border-top-left-radius: var(--dds-border-radius-button);
     border-bottom-left-radius: var(--dds-border-radius-button);
   }
@@ -4414,6 +4366,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
     border-top-right-radius: var(--dds-border-radius-button);
     border-bottom-right-radius: var(--dds-border-radius-button);
   }
+  &:not(:first-child):not(:last-child) .ToggleBar_content {
+    margin-inline-end: -1px;
+  }
   input:checked + .ToggleBar_content {
     color: var(--dds-color-text-on-action);
     border-color: var(--dds-color-surface-action-selected);