@equinor/eds-core-react 2.3.4 → 2.3.6-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (262) hide show
  1. package/build/index.css +186 -304
  2. package/build/index.min.css +1 -5
  3. package/dist/eds-core-react.cjs +233 -47
  4. package/dist/esm/components/Accordion/{Accordion.mjs → Accordion.js} +2 -2
  5. package/dist/esm/components/Accordion/{AccordionHeader.mjs → AccordionHeader.js} +4 -4
  6. package/dist/esm/components/Accordion/{index.mjs → index.js} +6 -6
  7. package/dist/esm/components/Autocomplete/{AddNewOption.mjs → AddNewOption.js} +5 -5
  8. package/dist/esm/components/Autocomplete/{Autocomplete.mjs → Autocomplete.js} +9 -9
  9. package/dist/esm/components/Autocomplete/{Autocomplete.tokens.mjs → Autocomplete.tokens.js} +1 -1
  10. package/dist/esm/components/Autocomplete/{AutocompleteContext.mjs → AutocompleteContext.js} +2 -2
  11. package/dist/esm/components/Autocomplete/{EmptyOption.mjs → EmptyOption.js} +2 -2
  12. package/dist/esm/components/Autocomplete/{MultipleInput.mjs → MultipleInput.js} +5 -5
  13. package/dist/esm/components/Autocomplete/{Option.mjs → Option.js} +13 -4
  14. package/dist/esm/components/Autocomplete/{OptionList.mjs → OptionList.js} +14 -12
  15. package/dist/esm/components/Autocomplete/{RightAdornments.mjs → RightAdornments.js} +4 -4
  16. package/dist/esm/components/Autocomplete/{SelectAllOption.mjs → SelectAllOption.js} +4 -4
  17. package/dist/esm/components/Autocomplete/{SingleInput.mjs → SingleInput.js} +3 -3
  18. package/dist/esm/components/Autocomplete/{useAutocomplete.mjs → useAutocomplete.js} +17 -6
  19. package/dist/esm/components/Autocomplete/{utils.mjs → utils.js} +2 -2
  20. package/dist/esm/components/Avatar/{Avatar.mjs → Avatar.js} +1 -1
  21. package/dist/esm/components/Banner/{Banner.mjs → Banner.js} +5 -5
  22. package/dist/esm/components/Banner/{Banner.tokens.mjs → Banner.tokens.js} +2 -10
  23. package/dist/esm/components/Banner/{BannerIcon.mjs → BannerIcon.js} +2 -2
  24. package/dist/esm/components/Banner/{BannerMessage.mjs → BannerMessage.js} +1 -1
  25. package/dist/esm/components/Banner/{index.mjs → index.js} +4 -4
  26. package/dist/esm/components/Breadcrumbs/{Breadcrumb.mjs → Breadcrumb.js} +3 -3
  27. package/dist/esm/components/Breadcrumbs/{Breadcrumbs.mjs → Breadcrumbs.js} +2 -2
  28. package/dist/esm/components/Breadcrumbs/{index.mjs → index.js} +2 -2
  29. package/dist/esm/components/Button/{Button.mjs → Button.js} +3 -3
  30. package/dist/esm/components/Button/ButtonGroup/{ButtonGroup.mjs → ButtonGroup.js} +1 -1
  31. package/dist/esm/components/Button/ToggleButton/{ToggleButton.mjs → ToggleButton.js} +2 -2
  32. package/dist/esm/components/Button/{index.mjs → index.js} +3 -3
  33. package/dist/esm/components/Button/tokens/{contained.mjs → contained.js} +2 -2
  34. package/dist/esm/components/Button/tokens/{contained_icon.mjs → contained_icon.js} +2 -2
  35. package/dist/esm/components/Button/tokens/{ghost.mjs → ghost.js} +2 -2
  36. package/dist/esm/components/Button/tokens/{icon.mjs → icon.js} +2 -2
  37. package/dist/esm/components/Button/tokens/{index.mjs → index.js} +5 -5
  38. package/dist/esm/components/Button/tokens/{outlined.mjs → outlined.js} +2 -2
  39. package/dist/esm/components/Card/{Card.mjs → Card.js} +2 -2
  40. package/dist/esm/components/Card/{CardActions.mjs → CardActions.js} +2 -2
  41. package/dist/esm/components/Card/{CardContent.mjs → CardContent.js} +1 -1
  42. package/dist/esm/components/Card/{CardHeader.mjs → CardHeader.js} +1 -1
  43. package/dist/esm/components/Card/{CardMedia.mjs → CardMedia.js} +1 -1
  44. package/dist/esm/components/Card/{index.mjs → index.js} +6 -6
  45. package/dist/esm/components/Checkbox/{Checkbox.mjs → Checkbox.js} +2 -2
  46. package/dist/esm/components/Checkbox/{Input.mjs → Input.js} +2 -2
  47. package/dist/esm/components/Chip/{Chip.mjs → Chip.js} +3 -3
  48. package/dist/esm/components/Chip/{Chip.tokens.mjs → Chip.tokens.js} +0 -2
  49. package/dist/esm/components/Chip/{Icon.mjs → Icon.js} +2 -2
  50. package/dist/esm/components/Datepicker/{DatePicker.mjs → DatePicker.js} +13 -10
  51. package/dist/esm/components/Datepicker/{DateRangePicker.mjs → DateRangePicker.js} +13 -10
  52. package/dist/esm/components/Datepicker/calendars/{Calendar.mjs → Calendar.js} +4 -4
  53. package/dist/esm/components/Datepicker/calendars/{CalendarCell.mjs → CalendarCell.js} +2 -2
  54. package/dist/esm/components/Datepicker/calendars/{CalendarGrid.mjs → CalendarGrid.js} +6 -10
  55. package/dist/esm/components/Datepicker/calendars/{CalendarHeader.mjs → CalendarHeader.js} +9 -9
  56. package/dist/esm/components/Datepicker/calendars/{RangeCalendar.mjs → RangeCalendar.js} +4 -4
  57. package/dist/esm/components/Datepicker/calendars/{YearGrid.mjs → YearGrid.js} +1 -1
  58. package/dist/esm/components/Datepicker/fields/{DateField.mjs → DateField.js} +2 -2
  59. package/dist/esm/components/Datepicker/fields/{DateFieldSegments.mjs → DateFieldSegments.js} +12 -3
  60. package/dist/esm/components/Datepicker/fields/{DateRangeField.mjs → DateRangeField.js} +3 -3
  61. package/dist/esm/components/Datepicker/fields/{DateSegment.mjs → DateSegment.js} +5 -2
  62. package/dist/esm/components/Datepicker/fields/{FieldWrapper.mjs → FieldWrapper.js} +3 -3
  63. package/dist/esm/components/Datepicker/fields/{Toggle.mjs → Toggle.js} +2 -2
  64. package/dist/esm/components/Datepicker/utils/{get-calendar-date.mjs → get-calendar-date.js} +1 -1
  65. package/dist/esm/components/Datepicker/utils/getLocalizedValidationErrors.js +164 -0
  66. package/dist/esm/components/Datepicker/utils/{useConvertedValidationFunctions.mjs → useConvertedValidationFunctions.js} +1 -1
  67. package/dist/esm/components/Dialog/{Dialog.mjs → Dialog.js} +3 -3
  68. package/dist/esm/components/Dialog/{DialogContent.mjs → DialogContent.js} +1 -1
  69. package/dist/esm/components/Dialog/{DialogHeader.mjs → DialogHeader.js} +1 -1
  70. package/dist/esm/components/Dialog/{index.mjs → index.js} +5 -5
  71. package/dist/esm/components/Divider/{Divider.mjs → Divider.js} +1 -1
  72. package/dist/esm/components/EdsProvider/{eds.context.mjs → eds.context.js} +1 -1
  73. package/dist/esm/components/Icon/{Icon.mjs → Icon.js} +1 -1
  74. package/dist/esm/components/Icon/index.js +7 -0
  75. package/dist/esm/components/Input/{Input.mjs → Input.js} +2 -2
  76. package/dist/esm/components/Input/{Input.tokens.mjs → Input.tokens.js} +1 -1
  77. package/dist/esm/components/InputWrapper/HelperText/{HelperText.mjs → HelperText.js} +1 -1
  78. package/dist/esm/components/InputWrapper/{InputWrapper.mjs → InputWrapper.js} +4 -4
  79. package/dist/esm/components/InputWrapper/{InputWrapper.tokens.mjs → InputWrapper.tokens.js} +1 -1
  80. package/dist/esm/components/Label/{Label.mjs → Label.js} +1 -1
  81. package/dist/esm/components/List/{List.mjs → List.js} +1 -1
  82. package/dist/esm/components/List/{index.mjs → index.js} +2 -2
  83. package/dist/esm/components/Menu/{Menu.context.mjs → Menu.context.js} +1 -1
  84. package/dist/esm/components/Menu/{Menu.mjs → Menu.js} +5 -5
  85. package/dist/esm/components/Menu/{MenuItem.mjs → MenuItem.js} +2 -2
  86. package/dist/esm/components/Menu/{MenuList.mjs → MenuList.js} +4 -4
  87. package/dist/esm/components/Menu/{MenuSection.mjs → MenuSection.js} +3 -3
  88. package/dist/esm/components/Menu/{index.mjs → index.js} +3 -3
  89. package/dist/esm/components/Pagination/{Pagination.mjs → Pagination.js} +6 -6
  90. package/dist/esm/components/Pagination/{PaginationItem.mjs → PaginationItem.js} +2 -2
  91. package/dist/esm/components/Paper/{Paper.mjs → Paper.js} +1 -1
  92. package/dist/esm/components/Popover/{Popover.mjs → Popover.js} +7 -7
  93. package/dist/esm/components/Popover/{PopoverHeader.mjs → PopoverHeader.js} +1 -1
  94. package/dist/esm/components/Popover/{index.mjs → index.js} +5 -5
  95. package/dist/esm/components/Progress/Circular/{CircularProgress.mjs → CircularProgress.js} +1 -1
  96. package/dist/esm/components/Progress/Dots/{DotProgress.mjs → DotProgress.js} +1 -1
  97. package/dist/esm/components/Progress/Linear/{LinearProgress.mjs → LinearProgress.js} +1 -1
  98. package/dist/esm/components/Progress/Star/{StarProgress.mjs → StarProgress.js} +1 -1
  99. package/dist/esm/components/Progress/index.js +13 -0
  100. package/dist/esm/components/Radio/{Radio.mjs → Radio.js} +2 -2
  101. package/dist/esm/components/Scrim/{Scrim.mjs → Scrim.js} +1 -1
  102. package/dist/esm/components/Search/{Search.mjs → Search.js} +4 -4
  103. package/dist/esm/components/Select/{NativeSelect.mjs → NativeSelect.js} +3 -3
  104. package/dist/esm/components/SideBar/{SideBar.context.mjs → SideBar.context.js} +1 -1
  105. package/dist/esm/components/SideBar/{SideBar.mjs → SideBar.js} +3 -3
  106. package/dist/esm/components/SideBar/SideBarAccordion/{index.mjs → index.js} +6 -6
  107. package/dist/esm/components/SideBar/SideBarAccordionItem/{index.mjs → index.js} +3 -3
  108. package/dist/esm/components/SideBar/SideBarButton/{index.mjs → index.js} +5 -5
  109. package/dist/esm/components/SideBar/{SideBarToggle.mjs → SideBarToggle.js} +5 -5
  110. package/dist/esm/components/SideBar/SidebarLink/{index.mjs → index.js} +5 -5
  111. package/dist/esm/components/SideBar/{index.mjs → index.js} +8 -8
  112. package/dist/esm/components/SideSheet/{SideSheet.mjs → SideSheet.js} +4 -4
  113. package/dist/esm/components/Slider/{MinMax.mjs → MinMax.js} +1 -1
  114. package/dist/esm/components/Slider/{Output.mjs → Output.js} +1 -1
  115. package/dist/esm/components/Slider/{Slider.mjs → Slider.js} +4 -4
  116. package/dist/esm/components/Slider/{SliderInput.mjs → SliderInput.js} +1 -1
  117. package/dist/esm/components/Snackbar/{Snackbar.mjs → Snackbar.js} +3 -3
  118. package/dist/esm/components/Snackbar/index.js +7 -0
  119. package/dist/esm/components/Switch/{Switch.mjs → Switch.js} +4 -4
  120. package/dist/esm/components/Switch/{SwitchDefault.mjs → SwitchDefault.js} +1 -1
  121. package/dist/esm/components/Switch/{SwitchSmall.mjs → SwitchSmall.js} +1 -1
  122. package/dist/esm/components/Table/{Body.mjs → Body.js} +1 -1
  123. package/dist/esm/components/Table/{Cell.mjs → Cell.js} +4 -4
  124. package/dist/esm/components/Table/DataCell/{DataCell.mjs → DataCell.js} +3 -3
  125. package/dist/esm/components/Table/DataCell/{DataCell.tokens.mjs → DataCell.tokens.js} +1 -1
  126. package/dist/esm/components/Table/Foot/{Foot.mjs → Foot.js} +2 -2
  127. package/dist/esm/components/Table/FooterCell/{FooterCell.mjs → FooterCell.js} +3 -3
  128. package/dist/esm/components/Table/Head/{Head.mjs → Head.js} +2 -2
  129. package/dist/esm/components/Table/HeaderCell/{HeaderCell.mjs → HeaderCell.js} +3 -3
  130. package/dist/esm/components/Table/Row/{Row.mjs → Row.js} +1 -1
  131. package/dist/esm/components/Table/{Table.mjs → Table.js} +1 -1
  132. package/dist/esm/components/Table/{index.mjs → index.js} +7 -7
  133. package/dist/esm/components/TableOfContents/{TableOfContents.mjs → TableOfContents.js} +4 -4
  134. package/dist/esm/components/TableOfContents/{index.mjs → index.js} +2 -2
  135. package/dist/esm/components/Tabs/{TabList.mjs → TabList.js} +1 -1
  136. package/dist/esm/components/Tabs/{TabPanels.mjs → TabPanels.js} +1 -1
  137. package/dist/esm/components/Tabs/{Tabs.mjs → Tabs.js} +3 -3
  138. package/dist/esm/components/Tabs/{index.mjs → index.js} +5 -5
  139. package/dist/esm/components/TextField/{TextField.mjs → TextField.js} +3 -3
  140. package/dist/esm/components/Textarea/{Textarea.mjs → Textarea.js} +6 -6
  141. package/dist/esm/components/Tooltip/{Tooltip.mjs → Tooltip.js} +2 -2
  142. package/dist/esm/components/TopBar/{TopBar.mjs → TopBar.js} +3 -3
  143. package/dist/esm/components/TopBar/{index.mjs → index.js} +4 -4
  144. package/dist/esm/components/Typography/{Heading.mjs → Heading.js} +1 -1
  145. package/dist/esm/components/Typography/{Paragraph.mjs → Paragraph.js} +1 -1
  146. package/dist/esm/components/Typography/{Typography.mjs → Typography.js} +1 -1
  147. package/dist/esm/index.js +100 -0
  148. package/dist/esm/node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/internal/{_curry1.mjs → _curry1.js} +1 -1
  149. package/dist/esm/node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/internal/{_curry2.mjs → _curry2.js} +2 -2
  150. package/dist/esm/node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/internal/{_curry3.mjs → _curry3.js} +3 -3
  151. package/dist/esm/node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/{mergeDeepRight.mjs → mergeDeepRight.js} +2 -2
  152. package/dist/esm/node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/{mergeDeepWithKey.mjs → mergeDeepWithKey.js} +3 -3
  153. package/dist/esm/node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/{mergeWith.mjs → mergeWith.js} +2 -2
  154. package/dist/esm/node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/{mergeWithKey.mjs → mergeWithKey.js} +2 -2
  155. package/dist/esm/node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/{pickBy.mjs → pickBy.js} +1 -1
  156. package/dist/esm-next/components/Tooltip/{Tooltip.mjs → Tooltip.js} +2 -2
  157. package/dist/esm-next/components/next/Button/{Button.mjs → Button.js} +5 -6
  158. package/dist/esm-next/components/next/Checkbox/{Checkbox.mjs → Checkbox.js} +2 -2
  159. package/dist/esm-next/components/next/Field/{Field.Description.mjs → Field.Description.js} +1 -1
  160. package/dist/esm-next/components/next/Field/{Field.HelperMessage.mjs → Field.HelperMessage.js} +1 -1
  161. package/dist/esm-next/components/next/Field/{Field.Label.mjs → Field.Label.js} +1 -1
  162. package/dist/esm-next/components/next/Field/{Field.mjs → Field.js} +3 -3
  163. package/dist/esm-next/components/next/Icon/{Icon.mjs → Icon.js} +27 -1
  164. package/dist/esm-next/components/next/Input/{Input.mjs → Input.js} +7 -12
  165. package/dist/esm-next/components/next/Radio/{Radio.mjs → Radio.js} +2 -2
  166. package/dist/esm-next/components/next/Switch/{Switch.mjs → Switch.js} +1 -1
  167. package/dist/esm-next/components/next/TextField/{TextField.mjs → TextField.js} +13 -7
  168. package/dist/esm-next/index.next.js +9 -0
  169. package/dist/index.next.cjs +44 -19
  170. package/dist/types/components/Autocomplete/Autocomplete.d.ts +1 -1
  171. package/dist/types/components/Autocomplete/AutocompleteContext.d.ts +2 -2
  172. package/dist/types/components/Autocomplete/useAutocomplete.d.ts +3 -2
  173. package/dist/types/components/Datepicker/DateRangePicker.d.ts +1 -1
  174. package/dist/types/components/Datepicker/utils/getLocalizedValidationErrors.d.ts +9 -0
  175. package/dist/types/components/SideBar/SideBarButton/index.d.ts +1 -1
  176. package/dist/types/components/next/Icon/Icon.d.ts +0 -1
  177. package/dist/types/components/next/Input/Input.types.d.ts +6 -4
  178. package/dist/types/components/next/TextField/TextField.d.ts +1 -0
  179. package/package.json +46 -39
  180. package/dist/esm/components/Icon/index.mjs +0 -7
  181. package/dist/esm/components/Progress/index.mjs +0 -13
  182. package/dist/esm/components/Snackbar/index.mjs +0 -7
  183. package/dist/esm/index.mjs +0 -100
  184. package/dist/esm-next/index.next.mjs +0 -9
  185. /package/dist/esm/components/Accordion/{Accordion.tokens.mjs → Accordion.tokens.js} +0 -0
  186. /package/dist/esm/components/Accordion/{AccordionHeaderActions.mjs → AccordionHeaderActions.js} +0 -0
  187. /package/dist/esm/components/Accordion/{AccordionHeaderTitle.mjs → AccordionHeaderTitle.js} +0 -0
  188. /package/dist/esm/components/Accordion/{AccordionItem.mjs → AccordionItem.js} +0 -0
  189. /package/dist/esm/components/Accordion/{AccordionPanel.mjs → AccordionPanel.js} +0 -0
  190. /package/dist/esm/components/Avatar/{Avatar.tokens.mjs → Avatar.tokens.js} +0 -0
  191. /package/dist/esm/components/Banner/{BannerActions.mjs → BannerActions.js} +0 -0
  192. /package/dist/esm/components/Breadcrumbs/{Breadcrumbs.tokens.mjs → Breadcrumbs.tokens.js} +0 -0
  193. /package/dist/esm/components/Button/ButtonGroup/{ButtonGroup.tokens.mjs → ButtonGroup.tokens.js} +0 -0
  194. /package/dist/esm/components/Button/{InnerFullWidth.mjs → InnerFullWidth.js} +0 -0
  195. /package/dist/esm/components/Button/tokens/{button.mjs → button.js} +0 -0
  196. /package/dist/esm/components/Card/{Card.tokens.mjs → Card.tokens.js} +0 -0
  197. /package/dist/esm/components/Card/{CardHeaderTitle.mjs → CardHeaderTitle.js} +0 -0
  198. /package/dist/esm/components/Checkbox/{Checkbox.tokens.mjs → Checkbox.tokens.js} +0 -0
  199. /package/dist/esm/components/Datepicker/calendars/{CalendarWrapper.mjs → CalendarWrapper.js} +0 -0
  200. /package/dist/esm/components/Datepicker/utils/{context.mjs → context.js} +0 -0
  201. /package/dist/esm/components/Datepicker/utils/{getPageYears.mjs → getPageYears.js} +0 -0
  202. /package/dist/esm/components/Datepicker/utils/{useGetLocale.mjs → useGetLocale.js} +0 -0
  203. /package/dist/esm/components/Dialog/{Dialog.tokens.mjs → Dialog.tokens.js} +0 -0
  204. /package/dist/esm/components/Dialog/{DialogActions.mjs → DialogActions.js} +0 -0
  205. /package/dist/esm/components/Dialog/{DialogTitle.mjs → DialogTitle.js} +0 -0
  206. /package/dist/esm/components/Divider/{Divider.tokens.mjs → Divider.tokens.js} +0 -0
  207. /package/dist/esm/components/Icon/{library.mjs → library.js} +0 -0
  208. /package/dist/esm/components/InputWrapper/HelperText/{HelperText.token.mjs → HelperText.token.js} +0 -0
  209. /package/dist/esm/components/InputWrapper/{useInputField.mjs → useInputField.js} +0 -0
  210. /package/dist/esm/components/Label/{Label.tokens.mjs → Label.tokens.js} +0 -0
  211. /package/dist/esm/components/List/{List.tokens.mjs → List.tokens.js} +0 -0
  212. /package/dist/esm/components/List/{ListItem.mjs → ListItem.js} +0 -0
  213. /package/dist/esm/components/Menu/{Menu.tokens.mjs → Menu.tokens.js} +0 -0
  214. /package/dist/esm/components/Pagination/{Pagination.tokens.mjs → Pagination.tokens.js} +0 -0
  215. /package/dist/esm/components/Pagination/{paginationControl.mjs → paginationControl.js} +0 -0
  216. /package/dist/esm/components/Paper/{Paper.tokens.mjs → Paper.tokens.js} +0 -0
  217. /package/dist/esm/components/Popover/{Popover.tokens.mjs → Popover.tokens.js} +0 -0
  218. /package/dist/esm/components/Popover/{PopoverActions.mjs → PopoverActions.js} +0 -0
  219. /package/dist/esm/components/Popover/{PopoverContent.mjs → PopoverContent.js} +0 -0
  220. /package/dist/esm/components/Popover/{PopoverTitle.mjs → PopoverTitle.js} +0 -0
  221. /package/dist/esm/components/Progress/Circular/{CircularProgress.tokens.mjs → CircularProgress.tokens.js} +0 -0
  222. /package/dist/esm/components/Progress/Dots/{DotProgress.tokens.mjs → DotProgress.tokens.js} +0 -0
  223. /package/dist/esm/components/Progress/Linear/{LinearProgress.tokens.mjs → LinearProgress.tokens.js} +0 -0
  224. /package/dist/esm/components/Progress/Star/{StarProgress.tokens.mjs → StarProgress.tokens.js} +0 -0
  225. /package/dist/esm/components/Radio/{Radio.tokens.mjs → Radio.tokens.js} +0 -0
  226. /package/dist/esm/components/Scrim/{Scrim.tokens.mjs → Scrim.tokens.js} +0 -0
  227. /package/dist/esm/components/Select/{NativeSelect.tokens.mjs → NativeSelect.tokens.js} +0 -0
  228. /package/dist/esm/components/SideBar/{SideBar.tokens.mjs → SideBar.tokens.js} +0 -0
  229. /package/dist/esm/components/SideBar/{SideBarContent.mjs → SideBarContent.js} +0 -0
  230. /package/dist/esm/components/SideBar/{SideBarFooter.mjs → SideBarFooter.js} +0 -0
  231. /package/dist/esm/components/SideSheet/{SideSheet.tokens.mjs → SideSheet.tokens.js} +0 -0
  232. /package/dist/esm/components/Slider/{Slider.tokens.mjs → Slider.tokens.js} +0 -0
  233. /package/dist/esm/components/Snackbar/{Snackbar.tokens.mjs → Snackbar.tokens.js} +0 -0
  234. /package/dist/esm/components/Snackbar/{SnackbarAction.mjs → SnackbarAction.js} +0 -0
  235. /package/dist/esm/components/Switch/{Switch.styles.mjs → Switch.styles.js} +0 -0
  236. /package/dist/esm/components/Switch/{Switch.tokens.mjs → Switch.tokens.js} +0 -0
  237. /package/dist/esm/components/Table/{Caption.mjs → Caption.js} +0 -0
  238. /package/dist/esm/components/Table/Foot/{Foot.tokens.mjs → Foot.tokens.js} +0 -0
  239. /package/dist/esm/components/Table/Head/{Head.tokens.mjs → Head.tokens.js} +0 -0
  240. /package/dist/esm/components/Table/HeaderCell/{HeaderCell.tokens.mjs → HeaderCell.tokens.js} +0 -0
  241. /package/dist/esm/components/Table/{Inner.context.mjs → Inner.context.js} +0 -0
  242. /package/dist/esm/components/Table/Row/{Row.tokens.mjs → Row.tokens.js} +0 -0
  243. /package/dist/esm/components/TableOfContents/{LinkItem.mjs → LinkItem.js} +0 -0
  244. /package/dist/esm/components/TableOfContents/{TableOfContents.tokens.mjs → TableOfContents.tokens.js} +0 -0
  245. /package/dist/esm/components/Tabs/{Tab.mjs → Tab.js} +0 -0
  246. /package/dist/esm/components/Tabs/{TabPanel.mjs → TabPanel.js} +0 -0
  247. /package/dist/esm/components/Tabs/{Tabs.context.mjs → Tabs.context.js} +0 -0
  248. /package/dist/esm/components/Tabs/{Tabs.tokens.mjs → Tabs.tokens.js} +0 -0
  249. /package/dist/esm/components/Tooltip/{Tooltip.tokens.mjs → Tooltip.tokens.js} +0 -0
  250. /package/dist/esm/components/TopBar/{Actions.mjs → Actions.js} +0 -0
  251. /package/dist/esm/components/TopBar/{CustomContent.mjs → CustomContent.js} +0 -0
  252. /package/dist/esm/components/TopBar/{Header.mjs → Header.js} +0 -0
  253. /package/dist/esm/components/TopBar/{TopBar.tokens.mjs → TopBar.tokens.js} +0 -0
  254. /package/dist/esm/components/Typography/{Typography.new.mjs → Typography.new.js} +0 -0
  255. /package/dist/esm/components/Typography/{Typography.tokens.mjs → Typography.tokens.js} +0 -0
  256. /package/dist/esm/node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/internal/{_has.mjs → _has.js} +0 -0
  257. /package/dist/esm/node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/internal/{_isObject.mjs → _isObject.js} +0 -0
  258. /package/dist/esm/node_modules/.pnpm/ramda@0.32.0/node_modules/ramda/es/internal/{_isPlaceholder.mjs → _isPlaceholder.js} +0 -0
  259. /package/dist/esm-next/components/EdsProvider/{eds.context.mjs → eds.context.js} +0 -0
  260. /package/dist/esm-next/components/Tooltip/{Tooltip.tokens.mjs → Tooltip.tokens.js} +0 -0
  261. /package/dist/esm-next/components/Typography/{Typography.new.mjs → Typography.new.js} +0 -0
  262. /package/dist/esm-next/components/next/Field/{useFieldIds.mjs → useFieldIds.js} +0 -0
package/build/index.css CHANGED
@@ -2,15 +2,27 @@
2
2
  @layer eds-components;
3
3
  /* EDS 2.0 Next Components - CSS */
4
4
  /* Define layer order - eds-components has lowest priority for easy user overrides */
5
+ /*
6
+ * Font loading:
7
+ * Next components use two font families:
8
+ * - "Inter" for UI text (buttons, inputs, labels, etc.)
9
+ * - "Equinor" for headings
10
+ *
11
+ * Load both fonts via the EDS variable font stylesheet:
12
+ * <link rel="stylesheet" href="https://cdn.eds.equinor.com/font/eds-uprights-vf.css" />
13
+ *
14
+ * Note: The older "equinor-font.css" only includes the Equinor font.
15
+ * If you only load that, UI components will fall back to a generic sans-serif.
16
+ */
5
17
  :root,[data-color-scheme=light]{color-scheme:light}
6
18
  [data-color-scheme=dark]{color-scheme:dark}
7
- :root{--eds-color-bg-floating:light-dark(#fff,#202223);--eds-color-bg-backdrop:light-dark(#aeaeae,#738696);--eds-color-bg-input:light-dark(#f5f5f5,#0b0b0b);--eds-color-border-focus:light-dark(#6fb6e9,#2d8bc5);--eds-color-text-link:light-dark(#0070a9,#5abbfb);--eds-color-accent-1:light-dark(#eaf8fa,#0a0b0b);--eds-color-accent-2:light-dark(#f6ffff,#1e2323);--eds-color-accent-3:light-dark(#cfe7e9,#3c6266);--eds-color-accent-4:light-dark(#bbdbdf,#3e7378);--eds-color-accent-5:light-dark(#a2cdd2,#41878e);--eds-color-accent-6:light-dark(#bbdbdf,#3c6266);--eds-color-accent-7:light-dark(#7cbac1,#439199);--eds-color-accent-8:light-dark(#21767e,#6ec0c9);--eds-color-accent-9:light-dark(#206f77,#8cd2da);--eds-color-accent-10:light-dark(#205c62,#ace3e9);--eds-color-accent-11:light-dark(#20565c,#c7f1f6);--eds-color-accent-12:light-dark(#1f6369,#bcebf1);--eds-color-accent-13:light-dark(#141f20,#e6ffff);--eds-color-accent-14:light-dark(#cae4e7,#2c3839);--eds-color-accent-15:light-dark(#fff,#030303);--eds-color-neutral-1:light-dark(#f5f5f5,#0b0b0b);--eds-color-neutral-2:light-dark(#fff,#202223);--eds-color-neutral-3:light-dark(#e1e1e1,#525c65);--eds-color-neutral-4:light-dark(#d4d4d4,#5d6b76);--eds-color-neutral-5:light-dark(#c4c4c4,#6b7d8b);--eds-color-neutral-6:light-dark(#d4d4d4,#525c65);--eds-color-neutral-7:light-dark(#aeaeae,#738696);--eds-color-neutral-8:light-dark(#696969,#9fb4c6);--eds-color-neutral-9:light-dark(#636363,#b4c7d7);--eds-color-neutral-10:light-dark(#525252,#cadae7);--eds-color-neutral-11:light-dark(#4d4d4d,#deeaf4);--eds-color-neutral-12:light-dark(#585858,#d6e3ee);--eds-color-neutral-13:light-dark(#1d1d1d,#f5fdff);--eds-color-neutral-14:light-dark(#dedede,#333639);--eds-color-neutral-15:light-dark(#fff,#030303);--eds-color-info-1:light-dark(#e7f8ff,#0a0b0c);--eds-color-info-2:light-dark(#f4ffff,#1d2226);--eds-color-info-3:light-dark(#cae6fa,#33607e);--eds-color-info-4:light-dark(#b5daf5,#316f98);--eds-color-info-5:light-dark(#99cbf0,#2e82b7);--eds-color-info-6:light-dark(#b5daf5,#33607e);--eds-color-info-7:light-dark(#6fb6e9,#2d8bc5);--eds-color-info-8:light-dark(#0070a9,#5abbfb);--eds-color-info-9:light-dark(#006aa0,#7dceff);--eds-color-info-10:light-dark(#085883,#a2e0ff);--eds-color-info-11:light-dark(#0e5279,#c4eeff);--eds-color-info-12:light-dark(#015e8d,#b7e8ff);--eds-color-info-13:light-dark(#121e27,#ecffff);--eds-color-info-14:light-dark(#c5e3f9,#2a3741);--eds-color-info-15:light-dark(#fff,#030304);--eds-color-success-1:light-dark(#eafbe8,#0a0c0a);--eds-color-success-2:light-dark(#f6fff5,#1e231e);--eds-color-success-3:light-dark(#cfeacc,#3c673a);--eds-color-success-4:light-dark(#bbe0b8,#3e793c);--eds-color-success-5:light-dark(#a2d49e,#418e3e);--eds-color-success-6:light-dark(#bbe0b8,#3c673a);--eds-color-success-7:light-dark(#7cc278,#439941);--eds-color-success-8:light-dark(#227e22,#6eca6a);--eds-color-success-9:light-dark(#207720,#8cdb87);--eds-color-success-10:light-dark(#20621f,#aceba8);--eds-color-success-11:light-dark(#215c1f,#c7f7c3);--eds-color-success-12:light-dark(#20691f,#bcf2b8);--eds-color-success-13:light-dark(#142114,#e6ffe3);--eds-color-success-14:light-dark(#cae8c7,#2c392b);--eds-color-success-15:light-dark(#fff,#030303);--eds-color-warning-1:light-dark(#fff1e2,#0c0b0a);--eds-color-warning-2:light-dark(#fffcf0,#27201b);--eds-color-warning-3:light-dark(#fbdac1,#7e4e25);--eds-color-warning-4:light-dark(#f6caaa,#97571b);--eds-color-warning-5:light-dark(#f0b689,#b46201);--eds-color-warning-6:light-dark(#f6caaa,#7e4e25);--eds-color-warning-7:light-dark(#e89959,#c36800);--eds-color-warning-8:light-dark(#a34e00,#f99539);--eds-color-warning-9:light-dark(#9b4900,#ffad63);--eds-color-warning-10:light-dark(#813e00,#ffc791);--eds-color-warning-11:light-dark(#773a00,#ffddb9);--eds-color-warning-12:light-dark(#8a4100,#ffd4aa);--eds-color-warning-13:light-dark(#27190e,#fff7e6);--eds-color-warning-14:light-dark(#fad6bc,#413226);--eds-color-warning-15:light-dark(#fff,#040303);--eds-color-danger-1:light-dark(#ffecea,#0d0a0a);--eds-color-danger-2:light-dark(#fff9f8,#2a1e1e);--eds-color-danger-3:light-dark(#ffd0ce,#923a3c);--eds-color-danger-4:light-dark(#ffbcba,#b03940);--eds-color-danger-5:light-dark(#ffa3a1,#d43745);--eds-color-danger-6:light-dark(#ffbcba,#923a3c);--eds-color-danger-7:light-dark(#ff7a7d,#e53748);--eds-color-danger-8:light-dark(#c6002d,#ff8082);--eds-color-danger-9:light-dark(#bc002a,#ffa3a1);--eds-color-danger-10:light-dark(#9a1026,#ffc1bf);--eds-color-danger-11:light-dark(#8e1525,#ffd9d7);--eds-color-danger-12:light-dark(#a50827,#ffd0ce);--eds-color-danger-13:light-dark(#2e1414,#fff5f4);--eds-color-danger-14:light-dark(#ffcbc9,#492d2c);--eds-color-danger-15:light-dark(#fff,#040303);--eds-color-bg-neutral-canvas:var(--eds-color-neutral-1);--eds-color-bg-neutral-surface:var(--eds-color-neutral-2);--eds-color-bg-neutral-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-neutral-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-neutral-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-neutral-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-neutral-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-neutral-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-accent-canvas:var(--eds-color-accent-1);--eds-color-bg-accent-surface:var(--eds-color-accent-2);--eds-color-bg-accent-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-accent-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-accent-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-accent-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-accent-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-accent-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-success-canvas:var(--eds-color-success-1);--eds-color-bg-success-surface:var(--eds-color-success-2);--eds-color-bg-success-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-success-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-success-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-success-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-success-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-success-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-info-canvas:var(--eds-color-info-1);--eds-color-bg-info-surface:var(--eds-color-info-2);--eds-color-bg-info-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-info-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-info-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-info-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-info-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-info-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-warning-canvas:var(--eds-color-warning-1);--eds-color-bg-warning-surface:var(--eds-color-warning-2);--eds-color-bg-warning-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-warning-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-warning-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-warning-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-warning-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-warning-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-danger-canvas:var(--eds-color-danger-1);--eds-color-bg-danger-surface:var(--eds-color-danger-2);--eds-color-bg-danger-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-danger-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-danger-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-danger-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-danger-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-danger-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-border-neutral-subtle:var(--eds-color-neutral-6);--eds-color-border-neutral-medium:var(--eds-color-neutral-7);--eds-color-border-neutral-strong:var(--eds-color-neutral-8);--eds-color-border-accent-subtle:var(--eds-color-accent-6);--eds-color-border-accent-medium:var(--eds-color-accent-7);--eds-color-border-accent-strong:var(--eds-color-accent-8);--eds-color-border-success-subtle:var(--eds-color-success-6);--eds-color-border-success-medium:var(--eds-color-success-7);--eds-color-border-success-strong:var(--eds-color-success-8);--eds-color-border-info-subtle:var(--eds-color-info-6);--eds-color-border-info-medium:var(--eds-color-info-7);--eds-color-border-info-strong:var(--eds-color-info-8);--eds-color-border-warning-subtle:var(--eds-color-warning-6);--eds-color-border-warning-medium:var(--eds-color-warning-7);--eds-color-border-warning-strong:var(--eds-color-warning-8);--eds-color-border-danger-subtle:var(--eds-color-danger-6);--eds-color-border-danger-medium:var(--eds-color-danger-7);--eds-color-border-danger-strong:var(--eds-color-danger-8);--eds-color-text-neutral-subtle:var(--eds-color-neutral-12);--eds-color-text-neutral-strong:var(--eds-color-neutral-13);--eds-color-text-neutral-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-neutral-strong-on-emphasis:var(--eds-color-neutral-15);--eds-color-text-accent-subtle:var(--eds-color-accent-12);--eds-color-text-accent-strong:var(--eds-color-accent-13);--eds-color-text-accent-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-accent-strong-on-emphasis:var(--eds-color-accent-15);--eds-color-text-success-subtle:var(--eds-color-success-12);--eds-color-text-success-strong:var(--eds-color-success-13);--eds-color-text-success-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-success-strong-on-emphasis:var(--eds-color-success-15);--eds-color-text-info-subtle:var(--eds-color-info-12);--eds-color-text-info-strong:var(--eds-color-info-13);--eds-color-text-info-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-info-strong-on-emphasis:var(--eds-color-info-15);--eds-color-text-warning-subtle:var(--eds-color-warning-12);--eds-color-text-warning-strong:var(--eds-color-warning-13);--eds-color-text-warning-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-warning-strong-on-emphasis:var(--eds-color-warning-15);--eds-color-text-danger-subtle:var(--eds-color-danger-12);--eds-color-text-danger-strong:var(--eds-color-danger-13);--eds-color-text-danger-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-danger-strong-on-emphasis:var(--eds-color-danger-15)}
8
- :root,[data-color-appearance=neutral]{--eds-color-bg-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-canvas:var(--eds-color-neutral-1);--eds-color-bg-surface:var(--eds-color-neutral-2);--eds-color-border-subtle:var(--eds-color-neutral-6);--eds-color-border-medium:var(--eds-color-neutral-7);--eds-color-border-strong:var(--eds-color-neutral-8);--eds-color-text-subtle:var(--eds-color-neutral-12);--eds-color-text-strong:var(--eds-color-neutral-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-strong-on-emphasis:var(--eds-color-neutral-15)}
9
- [data-color-appearance=accent]{--eds-color-bg-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-canvas:var(--eds-color-accent-1);--eds-color-bg-surface:var(--eds-color-accent-2);--eds-color-border-subtle:var(--eds-color-accent-6);--eds-color-border-medium:var(--eds-color-accent-7);--eds-color-border-strong:var(--eds-color-accent-8);--eds-color-text-subtle:var(--eds-color-accent-12);--eds-color-text-strong:var(--eds-color-accent-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-strong-on-emphasis:var(--eds-color-accent-15)}
10
- [data-color-appearance=danger]{--eds-color-bg-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-bg-canvas:var(--eds-color-danger-1);--eds-color-bg-surface:var(--eds-color-danger-2);--eds-color-border-subtle:var(--eds-color-danger-6);--eds-color-border-medium:var(--eds-color-danger-7);--eds-color-border-strong:var(--eds-color-danger-8);--eds-color-text-subtle:var(--eds-color-danger-12);--eds-color-text-strong:var(--eds-color-danger-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-strong-on-emphasis:var(--eds-color-danger-15)}
11
- [data-color-appearance=info]{--eds-color-bg-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-canvas:var(--eds-color-info-1);--eds-color-bg-surface:var(--eds-color-info-2);--eds-color-border-subtle:var(--eds-color-info-6);--eds-color-border-medium:var(--eds-color-info-7);--eds-color-border-strong:var(--eds-color-info-8);--eds-color-text-subtle:var(--eds-color-info-12);--eds-color-text-strong:var(--eds-color-info-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-strong-on-emphasis:var(--eds-color-info-15)}
12
- [data-color-appearance=success]{--eds-color-bg-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-canvas:var(--eds-color-success-1);--eds-color-bg-surface:var(--eds-color-success-2);--eds-color-border-subtle:var(--eds-color-success-6);--eds-color-border-medium:var(--eds-color-success-7);--eds-color-border-strong:var(--eds-color-success-8);--eds-color-text-subtle:var(--eds-color-success-12);--eds-color-text-strong:var(--eds-color-success-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-strong-on-emphasis:var(--eds-color-success-15)}
13
- [data-color-appearance=warning]{--eds-color-bg-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-canvas:var(--eds-color-warning-1);--eds-color-bg-surface:var(--eds-color-warning-2);--eds-color-border-subtle:var(--eds-color-warning-6);--eds-color-border-medium:var(--eds-color-warning-7);--eds-color-border-strong:var(--eds-color-warning-8);--eds-color-text-subtle:var(--eds-color-warning-12);--eds-color-text-strong:var(--eds-color-warning-13);--eds-color-text-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-strong-on-emphasis:var(--eds-color-warning-15)}
19
+ :root{--eds-color-bg-floating:light-dark(#fff,#202223);--eds-color-bg-backdrop:light-dark(#aeaeae,#738696);--eds-color-bg-input:light-dark(#f5f5f5,#0b0b0b);--eds-color-border-focus:light-dark(#6fb6e9,#2d8bc5);--eds-color-text-link:light-dark(#0070a9,#5abbfb);--eds-color-bg-disabled:light-dark(#e1e1e1,#525c65);--eds-color-border-disabled:light-dark(#aeaeae,#738696);--eds-color-text-disabled:light-dark(#aeaeae,#738696);--eds-color-accent-1:light-dark(#eaf8fa,#0a0b0b);--eds-color-accent-2:light-dark(#f6ffff,#1e2323);--eds-color-accent-3:light-dark(#cfe7e9,#3c6266);--eds-color-accent-4:light-dark(#bbdbdf,#3e7378);--eds-color-accent-5:light-dark(#a2cdd2,#41878e);--eds-color-accent-6:light-dark(#bbdbdf,#3c6266);--eds-color-accent-7:light-dark(#7cbac1,#439199);--eds-color-accent-8:light-dark(#21767e,#6ec0c9);--eds-color-accent-9:light-dark(#206f77,#8cd2da);--eds-color-accent-10:light-dark(#205c62,#ace3e9);--eds-color-accent-11:light-dark(#20565c,#c7f1f6);--eds-color-accent-12:light-dark(#1f6369,#bcebf1);--eds-color-accent-13:light-dark(#141f20,#e6ffff);--eds-color-accent-14:light-dark(#cae4e7,#2c3839);--eds-color-accent-15:light-dark(#fff,#030303);--eds-color-neutral-1:light-dark(#f5f5f5,#0b0b0b);--eds-color-neutral-2:light-dark(#fff,#202223);--eds-color-neutral-3:light-dark(#e1e1e1,#525c65);--eds-color-neutral-4:light-dark(#d4d4d4,#5d6b76);--eds-color-neutral-5:light-dark(#c4c4c4,#6b7d8b);--eds-color-neutral-6:light-dark(#d4d4d4,#525c65);--eds-color-neutral-7:light-dark(#aeaeae,#738696);--eds-color-neutral-8:light-dark(#696969,#9fb4c6);--eds-color-neutral-9:light-dark(#636363,#b4c7d7);--eds-color-neutral-10:light-dark(#525252,#cadae7);--eds-color-neutral-11:light-dark(#4d4d4d,#deeaf4);--eds-color-neutral-12:light-dark(#585858,#d6e3ee);--eds-color-neutral-13:light-dark(#1d1d1d,#f5fdff);--eds-color-neutral-14:light-dark(#dedede,#333639);--eds-color-neutral-15:light-dark(#fff,#030303);--eds-color-info-1:light-dark(#e7f8ff,#0a0b0c);--eds-color-info-2:light-dark(#f4ffff,#1d2226);--eds-color-info-3:light-dark(#cae6fa,#33607e);--eds-color-info-4:light-dark(#b5daf5,#316f98);--eds-color-info-5:light-dark(#99cbf0,#2e82b7);--eds-color-info-6:light-dark(#b5daf5,#33607e);--eds-color-info-7:light-dark(#6fb6e9,#2d8bc5);--eds-color-info-8:light-dark(#0070a9,#5abbfb);--eds-color-info-9:light-dark(#006aa0,#7dceff);--eds-color-info-10:light-dark(#085883,#a2e0ff);--eds-color-info-11:light-dark(#0e5279,#c4eeff);--eds-color-info-12:light-dark(#015e8d,#b7e8ff);--eds-color-info-13:light-dark(#121e27,#ecffff);--eds-color-info-14:light-dark(#c5e3f9,#2a3741);--eds-color-info-15:light-dark(#fff,#030304);--eds-color-success-1:light-dark(#eafbe8,#0a0c0a);--eds-color-success-2:light-dark(#f6fff5,#1e231e);--eds-color-success-3:light-dark(#cfeacc,#3c673a);--eds-color-success-4:light-dark(#bbe0b8,#3e793c);--eds-color-success-5:light-dark(#a2d49e,#418e3e);--eds-color-success-6:light-dark(#bbe0b8,#3c673a);--eds-color-success-7:light-dark(#7cc278,#439941);--eds-color-success-8:light-dark(#227e22,#6eca6a);--eds-color-success-9:light-dark(#207720,#8cdb87);--eds-color-success-10:light-dark(#20621f,#aceba8);--eds-color-success-11:light-dark(#215c1f,#c7f7c3);--eds-color-success-12:light-dark(#20691f,#bcf2b8);--eds-color-success-13:light-dark(#142114,#e6ffe3);--eds-color-success-14:light-dark(#cae8c7,#2c392b);--eds-color-success-15:light-dark(#fff,#030303);--eds-color-warning-1:light-dark(#fff1e2,#0c0b0a);--eds-color-warning-2:light-dark(#fffcf0,#27201b);--eds-color-warning-3:light-dark(#fbdac1,#7e4e25);--eds-color-warning-4:light-dark(#f6caaa,#97571b);--eds-color-warning-5:light-dark(#f0b689,#b46201);--eds-color-warning-6:light-dark(#f6caaa,#7e4e25);--eds-color-warning-7:light-dark(#e89959,#c36800);--eds-color-warning-8:light-dark(#a34e00,#f99539);--eds-color-warning-9:light-dark(#9b4900,#ffad63);--eds-color-warning-10:light-dark(#813e00,#ffc791);--eds-color-warning-11:light-dark(#773a00,#ffddb9);--eds-color-warning-12:light-dark(#8a4100,#ffd4aa);--eds-color-warning-13:light-dark(#27190e,#fff7e6);--eds-color-warning-14:light-dark(#fad6bc,#413226);--eds-color-warning-15:light-dark(#fff,#040303);--eds-color-danger-1:light-dark(#ffecea,#0d0a0a);--eds-color-danger-2:light-dark(#fff9f8,#2a1e1e);--eds-color-danger-3:light-dark(#ffd0ce,#923a3c);--eds-color-danger-4:light-dark(#ffbcba,#b03940);--eds-color-danger-5:light-dark(#ffa3a1,#d43745);--eds-color-danger-6:light-dark(#ffbcba,#923a3c);--eds-color-danger-7:light-dark(#ff7a7d,#e53748);--eds-color-danger-8:light-dark(#c6002d,#ff8082);--eds-color-danger-9:light-dark(#bc002a,#ffa3a1);--eds-color-danger-10:light-dark(#9a1026,#ffc1bf);--eds-color-danger-11:light-dark(#8e1525,#ffd9d7);--eds-color-danger-12:light-dark(#a50827,#ffd0ce);--eds-color-danger-13:light-dark(#2e1414,#fff5f4);--eds-color-danger-14:light-dark(#ffcbc9,#492d2c);--eds-color-danger-15:light-dark(#fff,#040303);--eds-color-bg-neutral-canvas:var(--eds-color-neutral-1);--eds-color-bg-neutral-surface:var(--eds-color-neutral-2);--eds-color-bg-neutral-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-neutral-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-neutral-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-neutral-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-neutral-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-neutral-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-accent-canvas:var(--eds-color-accent-1);--eds-color-bg-accent-surface:var(--eds-color-accent-2);--eds-color-bg-accent-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-accent-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-accent-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-accent-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-accent-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-accent-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-success-canvas:var(--eds-color-success-1);--eds-color-bg-success-surface:var(--eds-color-success-2);--eds-color-bg-success-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-success-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-success-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-success-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-success-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-success-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-info-canvas:var(--eds-color-info-1);--eds-color-bg-info-surface:var(--eds-color-info-2);--eds-color-bg-info-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-info-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-info-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-info-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-info-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-info-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-warning-canvas:var(--eds-color-warning-1);--eds-color-bg-warning-surface:var(--eds-color-warning-2);--eds-color-bg-warning-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-warning-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-warning-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-warning-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-warning-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-warning-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-danger-canvas:var(--eds-color-danger-1);--eds-color-bg-danger-surface:var(--eds-color-danger-2);--eds-color-bg-danger-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-danger-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-danger-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-danger-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-danger-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-danger-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-border-neutral-subtle:var(--eds-color-neutral-6);--eds-color-border-neutral-medium:var(--eds-color-neutral-7);--eds-color-border-neutral-strong:var(--eds-color-neutral-8);--eds-color-border-accent-subtle:var(--eds-color-accent-6);--eds-color-border-accent-medium:var(--eds-color-accent-7);--eds-color-border-accent-strong:var(--eds-color-accent-8);--eds-color-border-success-subtle:var(--eds-color-success-6);--eds-color-border-success-medium:var(--eds-color-success-7);--eds-color-border-success-strong:var(--eds-color-success-8);--eds-color-border-info-subtle:var(--eds-color-info-6);--eds-color-border-info-medium:var(--eds-color-info-7);--eds-color-border-info-strong:var(--eds-color-info-8);--eds-color-border-warning-subtle:var(--eds-color-warning-6);--eds-color-border-warning-medium:var(--eds-color-warning-7);--eds-color-border-warning-strong:var(--eds-color-warning-8);--eds-color-border-danger-subtle:var(--eds-color-danger-6);--eds-color-border-danger-medium:var(--eds-color-danger-7);--eds-color-border-danger-strong:var(--eds-color-danger-8);--eds-color-text-neutral-subtle:var(--eds-color-neutral-12);--eds-color-text-neutral-strong:var(--eds-color-neutral-13);--eds-color-text-neutral-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-neutral-strong-on-emphasis:var(--eds-color-neutral-15);--eds-color-text-accent-subtle:var(--eds-color-accent-12);--eds-color-text-accent-strong:var(--eds-color-accent-13);--eds-color-text-accent-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-accent-strong-on-emphasis:var(--eds-color-accent-15);--eds-color-text-success-subtle:var(--eds-color-success-12);--eds-color-text-success-strong:var(--eds-color-success-13);--eds-color-text-success-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-success-strong-on-emphasis:var(--eds-color-success-15);--eds-color-text-info-subtle:var(--eds-color-info-12);--eds-color-text-info-strong:var(--eds-color-info-13);--eds-color-text-info-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-info-strong-on-emphasis:var(--eds-color-info-15);--eds-color-text-warning-subtle:var(--eds-color-warning-12);--eds-color-text-warning-strong:var(--eds-color-warning-13);--eds-color-text-warning-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-warning-strong-on-emphasis:var(--eds-color-warning-15);--eds-color-text-danger-subtle:var(--eds-color-danger-12);--eds-color-text-danger-strong:var(--eds-color-danger-13);--eds-color-text-danger-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-danger-strong-on-emphasis:var(--eds-color-danger-15)}
20
+ :root,[data-color-appearance=neutral]{--eds-color-bg-fill-muted-default:var(--eds-color-neutral-3);--eds-color-bg-fill-muted-hover:var(--eds-color-neutral-4);--eds-color-bg-fill-muted-active:var(--eds-color-neutral-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-neutral-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-neutral-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-neutral-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-neutral-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-neutral-3);--eds-color-bg-canvas:var(--eds-color-neutral-1);--eds-color-bg-surface:var(--eds-color-neutral-2);--eds-color-border-subtle:var(--eds-color-neutral-6);--eds-color-border-medium:var(--eds-color-neutral-7);--eds-color-border-strong:var(--eds-color-neutral-8);--eds-color-border-disabled:var(--eds-color-neutral-7);--eds-color-text-subtle:var(--eds-color-neutral-12);--eds-color-text-strong:var(--eds-color-neutral-13);--eds-color-text-disabled:var(--eds-color-neutral-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-neutral-14);--eds-color-text-strong-on-emphasis:var(--eds-color-neutral-15)}
21
+ [data-color-appearance=accent]{--eds-color-bg-fill-muted-default:var(--eds-color-accent-3);--eds-color-bg-fill-muted-hover:var(--eds-color-accent-4);--eds-color-bg-fill-muted-active:var(--eds-color-accent-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-accent-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-accent-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-accent-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-accent-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-accent-3);--eds-color-bg-canvas:var(--eds-color-accent-1);--eds-color-bg-surface:var(--eds-color-accent-2);--eds-color-border-subtle:var(--eds-color-accent-6);--eds-color-border-medium:var(--eds-color-accent-7);--eds-color-border-strong:var(--eds-color-accent-8);--eds-color-border-disabled:var(--eds-color-accent-7);--eds-color-text-subtle:var(--eds-color-accent-12);--eds-color-text-strong:var(--eds-color-accent-13);--eds-color-text-disabled:var(--eds-color-accent-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-accent-14);--eds-color-text-strong-on-emphasis:var(--eds-color-accent-15)}
22
+ [data-color-appearance=danger]{--eds-color-bg-fill-muted-default:var(--eds-color-danger-3);--eds-color-bg-fill-muted-hover:var(--eds-color-danger-4);--eds-color-bg-fill-muted-active:var(--eds-color-danger-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-danger-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-danger-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-danger-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-danger-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-danger-3);--eds-color-bg-canvas:var(--eds-color-danger-1);--eds-color-bg-surface:var(--eds-color-danger-2);--eds-color-border-subtle:var(--eds-color-danger-6);--eds-color-border-medium:var(--eds-color-danger-7);--eds-color-border-strong:var(--eds-color-danger-8);--eds-color-border-disabled:var(--eds-color-danger-7);--eds-color-text-subtle:var(--eds-color-danger-12);--eds-color-text-strong:var(--eds-color-danger-13);--eds-color-text-disabled:var(--eds-color-danger-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-danger-14);--eds-color-text-strong-on-emphasis:var(--eds-color-danger-15)}
23
+ [data-color-appearance=info]{--eds-color-bg-fill-muted-default:var(--eds-color-info-3);--eds-color-bg-fill-muted-hover:var(--eds-color-info-4);--eds-color-bg-fill-muted-active:var(--eds-color-info-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-info-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-info-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-info-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-info-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-info-3);--eds-color-bg-canvas:var(--eds-color-info-1);--eds-color-bg-surface:var(--eds-color-info-2);--eds-color-border-subtle:var(--eds-color-info-6);--eds-color-border-medium:var(--eds-color-info-7);--eds-color-border-strong:var(--eds-color-info-8);--eds-color-border-disabled:var(--eds-color-info-7);--eds-color-text-subtle:var(--eds-color-info-12);--eds-color-text-strong:var(--eds-color-info-13);--eds-color-text-disabled:var(--eds-color-info-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-info-14);--eds-color-text-strong-on-emphasis:var(--eds-color-info-15)}
24
+ [data-color-appearance=success]{--eds-color-bg-fill-muted-default:var(--eds-color-success-3);--eds-color-bg-fill-muted-hover:var(--eds-color-success-4);--eds-color-bg-fill-muted-active:var(--eds-color-success-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-success-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-success-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-success-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-success-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-success-3);--eds-color-bg-canvas:var(--eds-color-success-1);--eds-color-bg-surface:var(--eds-color-success-2);--eds-color-border-subtle:var(--eds-color-success-6);--eds-color-border-medium:var(--eds-color-success-7);--eds-color-border-strong:var(--eds-color-success-8);--eds-color-border-disabled:var(--eds-color-success-7);--eds-color-text-subtle:var(--eds-color-success-12);--eds-color-text-strong:var(--eds-color-success-13);--eds-color-text-disabled:var(--eds-color-success-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-success-14);--eds-color-text-strong-on-emphasis:var(--eds-color-success-15)}
25
+ [data-color-appearance=warning]{--eds-color-bg-fill-muted-default:var(--eds-color-warning-3);--eds-color-bg-fill-muted-hover:var(--eds-color-warning-4);--eds-color-bg-fill-muted-active:var(--eds-color-warning-5);--eds-color-bg-fill-muted-disabled:var(--eds-color-warning-3);--eds-color-bg-fill-emphasis-default:var(--eds-color-warning-9);--eds-color-bg-fill-emphasis-hover:var(--eds-color-warning-10);--eds-color-bg-fill-emphasis-active:var(--eds-color-warning-11);--eds-color-bg-fill-emphasis-disabled:var(--eds-color-warning-3);--eds-color-bg-canvas:var(--eds-color-warning-1);--eds-color-bg-surface:var(--eds-color-warning-2);--eds-color-border-subtle:var(--eds-color-warning-6);--eds-color-border-medium:var(--eds-color-warning-7);--eds-color-border-strong:var(--eds-color-warning-8);--eds-color-border-disabled:var(--eds-color-warning-7);--eds-color-text-subtle:var(--eds-color-warning-12);--eds-color-text-strong:var(--eds-color-warning-13);--eds-color-text-disabled:var(--eds-color-warning-7);--eds-color-text-subtle-on-emphasis:var(--eds-color-warning-14);--eds-color-text-strong-on-emphasis:var(--eds-color-warning-15)}
14
26
  :root,[data-density=spacious]{--eds-sizing-icon-xs:1rem;--eds-sizing-icon-sm:1.125rem;--eds-sizing-icon-md:1.25rem;--eds-sizing-icon-lg:1.5rem;--eds-sizing-icon-xl:1.75rem;--eds-sizing-icon-2xl:2rem;--eds-sizing-icon-3xl:2.313rem;--eds-sizing-icon-4xl:2.625rem;--eds-sizing-icon-5xl:3rem;--eds-sizing-icon-6xl:3.5rem;--eds-sizing-selectable-xs:1.25rem;--eds-sizing-selectable-sm:1.5rem;--eds-sizing-selectable-md:2.25rem;--eds-sizing-selectable-lg:2.75rem;--eds-sizing-selectable-xl:3.25rem;--eds-sizing-selectable-2xl:3.75rem;--eds-sizing-stroke-thin:.063rem;--eds-sizing-stroke-thick:.125rem;--eds-sizing-stroke-none:0rem;--eds-spacing-icon-xs-gap-horizontal:.406rem;--eds-spacing-icon-xs-gap-vertical:.406rem;--eds-spacing-icon-sm-gap-horizontal:.469rem;--eds-spacing-icon-sm-gap-vertical:.469rem;--eds-spacing-icon-md-gap-horizontal:.531rem;--eds-spacing-icon-md-gap-vertical:.531rem;--eds-spacing-icon-lg-gap-horizontal:.625rem;--eds-spacing-icon-lg-gap-vertical:.625rem;--eds-spacing-icon-xl-gap-horizontal:.719rem;--eds-spacing-icon-xl-gap-vertical:.719rem;--eds-spacing-icon-2xl-gap-horizontal:.813rem;--eds-spacing-icon-2xl-gap-vertical:.813rem;--eds-spacing-icon-3xl-gap-horizontal:.938rem;--eds-spacing-icon-3xl-gap-vertical:.938rem;--eds-spacing-icon-4xl-gap-horizontal:1.094rem;--eds-spacing-icon-4xl-gap-vertical:1.094rem;--eds-spacing-icon-5xl-gap-horizontal:1.25rem;--eds-spacing-icon-5xl-gap-vertical:1.25rem;--eds-spacing-icon-6xl-gap-horizontal:1.438rem;--eds-spacing-icon-6xl-gap-vertical:1.438rem;--eds-spacing-border-radius-rounded:.25rem;--eds-spacing-border-radius-pill:62.5rem;--eds-spacing-border-radius-none:0rem;--eds-spacing-inset-xs-horizontal:.5rem;--eds-spacing-inset-xs-vertical-squished:.375rem;--eds-spacing-inset-xs-vertical-squared:.5rem;--eds-spacing-inset-xs-vertical-stretched:.75rem;--eds-spacing-inset-sm-horizontal:.75rem;--eds-spacing-inset-sm-vertical-squished:.5rem;--eds-spacing-inset-sm-vertical-squared:.75rem;--eds-spacing-inset-sm-vertical-stretched:1rem;--eds-spacing-inset-md-horizontal:1rem;--eds-spacing-inset-md-vertical-squished:.75rem;--eds-spacing-inset-md-vertical-squared:1rem;--eds-spacing-inset-md-vertical-stretched:1.25rem;--eds-spacing-inset-lg-horizontal:1.25rem;--eds-spacing-inset-lg-vertical-squished:1rem;--eds-spacing-inset-lg-vertical-squared:1.25rem;--eds-spacing-inset-lg-vertical-stretched:1.5rem;--eds-spacing-inset-xl-horizontal:1.5rem;--eds-spacing-inset-xl-vertical-squished:1.25rem;--eds-spacing-inset-xl-vertical-squared:1.5rem;--eds-spacing-inset-xl-vertical-stretched:1.75rem;--eds-spacing-horizontal-4xs:.125rem;--eds-spacing-horizontal-3xs:.25rem;--eds-spacing-horizontal-2xs:.375rem;--eds-spacing-horizontal-xs:.5rem;--eds-spacing-horizontal-sm:.75rem;--eds-spacing-horizontal-md:1rem;--eds-spacing-horizontal-lg:1.25rem;--eds-spacing-horizontal-xl:1.5rem;--eds-spacing-horizontal-2xl:1.75rem;--eds-spacing-horizontal-3xl:2rem;--eds-spacing-vertical-4xs:.125rem;--eds-spacing-vertical-3xs:.25rem;--eds-spacing-vertical-2xs:.375rem;--eds-spacing-vertical-xs:.5rem;--eds-spacing-vertical-sm:.75rem;--eds-spacing-vertical-md:1rem;--eds-spacing-vertical-lg:1.25rem;--eds-spacing-vertical-xl:1.5rem;--eds-spacing-vertical-2xl:1.75rem;--eds-spacing-vertical-3xl:2rem;--eds-typography-ui-body-xs-font-size:.656rem;--eds-typography-ui-body-xs-tracking-tight:-1.15px;--eds-typography-ui-body-xs-tracking-normal:0px;--eds-typography-ui-body-xs-tracking-wide:1.15px;--eds-typography-ui-body-xs-font-weight-lighter:300;--eds-typography-ui-body-xs-font-weight-normal:400;--eds-typography-ui-body-xs-font-weight-bolder:500;--eds-typography-ui-body-xs-line-height-default:1rem;--eds-typography-ui-body-xs-line-height-squished:.75rem;--eds-typography-ui-body-sm-font-size:.75rem;--eds-typography-ui-body-sm-tracking-tight:-1.32px;--eds-typography-ui-body-sm-tracking-normal:0px;--eds-typography-ui-body-sm-tracking-wide:1.32px;--eds-typography-ui-body-sm-font-weight-lighter:300;--eds-typography-ui-body-sm-font-weight-normal:400;--eds-typography-ui-body-sm-font-weight-bolder:500;--eds-typography-ui-body-sm-line-height-default:1rem;--eds-typography-ui-body-sm-line-height-squished:.75rem;--eds-typography-ui-body-font-family:"Inter";--eds-typography-ui-body-md-font-size:.875rem;--eds-typography-ui-body-md-tracking-tight:-1.54px;--eds-typography-ui-body-md-tracking-normal:0px;--eds-typography-ui-body-md-tracking-wide:1.54px;--eds-typography-ui-body-md-font-weight-lighter:300;--eds-typography-ui-body-md-font-weight-normal:400;--eds-typography-ui-body-md-font-weight-bolder:500;--eds-typography-ui-body-md-line-height-default:1.25rem;--eds-typography-ui-body-md-line-height-squished:1rem;--eds-typography-ui-body-lg-font-size:1rem;--eds-typography-ui-body-lg-tracking-tight:-1.76px;--eds-typography-ui-body-lg-tracking-normal:0px;--eds-typography-ui-body-lg-tracking-wide:1.76px;--eds-typography-ui-body-lg-font-weight-lighter:300;--eds-typography-ui-body-lg-font-weight-normal:400;--eds-typography-ui-body-lg-font-weight-bolder:500;--eds-typography-ui-body-lg-line-height-default:1.5rem;--eds-typography-ui-body-lg-line-height-squished:1.25rem;--eds-typography-ui-body-xl-font-size:1.156rem;--eds-typography-ui-body-xl-tracking-tight:-1.76px;--eds-typography-ui-body-xl-tracking-normal:0px;--eds-typography-ui-body-xl-tracking-wide:2.035px;--eds-typography-ui-body-xl-font-weight-lighter:300;--eds-typography-ui-body-xl-font-weight-normal:400;--eds-typography-ui-body-xl-font-weight-bolder:500;--eds-typography-ui-body-xl-line-height-default:1.5rem;--eds-typography-ui-body-xl-line-height-squished:1.25rem;--eds-typography-ui-body-2xl-font-size:1.313rem;--eds-typography-ui-body-2xl-tracking-tight:-2.31px;--eds-typography-ui-body-2xl-tracking-normal:0px;--eds-typography-ui-body-2xl-tracking-wide:2.31px;--eds-typography-ui-body-2xl-font-weight-lighter:300;--eds-typography-ui-body-2xl-font-weight-normal:400;--eds-typography-ui-body-2xl-font-weight-bolder:500;--eds-typography-ui-body-2xl-line-height-default:1.75rem;--eds-typography-ui-body-2xl-line-height-squished:1.5rem;--eds-typography-ui-body-3xl-font-size:1.531rem;--eds-typography-ui-body-3xl-tracking-tight:-2.695px;--eds-typography-ui-body-3xl-tracking-normal:0px;--eds-typography-ui-body-3xl-tracking-wide:2.695px;--eds-typography-ui-body-3xl-font-weight-lighter:300;--eds-typography-ui-body-3xl-font-weight-normal:400;--eds-typography-ui-body-3xl-font-weight-bolder:500;--eds-typography-ui-body-3xl-line-height-default:2rem;--eds-typography-ui-body-3xl-line-height-squished:1.75rem;--eds-typography-ui-body-4xl-font-size:1.75rem;--eds-typography-ui-body-4xl-tracking-tight:-3.08px;--eds-typography-ui-body-4xl-tracking-normal:0px;--eds-typography-ui-body-4xl-tracking-wide:3.08px;--eds-typography-ui-body-4xl-font-weight-lighter:300;--eds-typography-ui-body-4xl-font-weight-normal:400;--eds-typography-ui-body-4xl-font-weight-bolder:500;--eds-typography-ui-body-4xl-line-height-default:2rem;--eds-typography-ui-body-4xl-line-height-squished:1.75rem;--eds-typography-ui-body-5xl-font-size:2rem;--eds-typography-ui-body-5xl-tracking-tight:-3.52px;--eds-typography-ui-body-5xl-tracking-normal:0px;--eds-typography-ui-body-5xl-tracking-wide:3.52px;--eds-typography-ui-body-5xl-font-weight-lighter:300;--eds-typography-ui-body-5xl-font-weight-normal:400;--eds-typography-ui-body-5xl-font-weight-bolder:500;--eds-typography-ui-body-5xl-line-height-default:2.25rem;--eds-typography-ui-body-5xl-line-height-squished:2rem;--eds-typography-ui-body-6xl-font-size:2.313rem;--eds-typography-ui-body-6xl-tracking-tight:-4.07px;--eds-typography-ui-body-6xl-tracking-normal:0px;--eds-typography-ui-body-6xl-tracking-wide:4.07px;--eds-typography-ui-body-6xl-font-weight-lighter:300;--eds-typography-ui-body-6xl-font-weight-normal:400;--eds-typography-ui-body-6xl-font-weight-bolder:500;--eds-typography-ui-body-6xl-line-height-default:2.5rem;--eds-typography-ui-body-6xl-line-height-squished:2.25rem;--eds-typography-header-font-family:"Equinor";--eds-typography-header-xs-font-size:.75rem;--eds-typography-header-xs-tracking-tight:-1.15px;--eds-typography-header-xs-tracking-normal:0px;--eds-typography-header-xs-tracking-wide:1.15px;--eds-typography-header-xs-font-weight-lighter:300;--eds-typography-header-xs-font-weight-normal:400;--eds-typography-header-xs-font-weight-bolder:500;--eds-typography-header-xs-line-height-default:1rem;--eds-typography-header-xs-line-height-squished:.75rem;--eds-typography-header-sm-font-size:.875rem;--eds-typography-header-sm-tracking-tight:-1.32px;--eds-typography-header-sm-tracking-normal:0px;--eds-typography-header-sm-tracking-wide:1.32px;--eds-typography-header-sm-font-weight-lighter:300;--eds-typography-header-sm-font-weight-normal:400;--eds-typography-header-sm-font-weight-bolder:500;--eds-typography-header-sm-line-height-default:1rem;--eds-typography-header-sm-line-height-squished:.75rem;--eds-typography-header-md-font-size:1rem;--eds-typography-header-md-tracking-tight:-1.54px;--eds-typography-header-md-tracking-normal:0px;--eds-typography-header-md-tracking-wide:1.54px;--eds-typography-header-md-font-weight-lighter:300;--eds-typography-header-md-font-weight-normal:400;--eds-typography-header-md-font-weight-bolder:500;--eds-typography-header-md-line-height-default:1.25rem;--eds-typography-header-md-line-height-squished:1rem;--eds-typography-header-lg-font-size:1.125rem;--eds-typography-header-lg-tracking-tight:-1.76px;--eds-typography-header-lg-tracking-normal:0px;--eds-typography-header-lg-tracking-wide:1.76px;--eds-typography-header-lg-font-weight-lighter:300;--eds-typography-header-lg-font-weight-normal:400;--eds-typography-header-lg-font-weight-bolder:500;--eds-typography-header-lg-line-height-default:1.5rem;--eds-typography-header-lg-line-height-squished:1.25rem;--eds-typography-header-xl-font-size:1.313rem;--eds-typography-header-xl-tracking-tight:-1.76px;--eds-typography-header-xl-tracking-normal:0px;--eds-typography-header-xl-tracking-wide:2.035px;--eds-typography-header-xl-font-weight-lighter:300;--eds-typography-header-xl-font-weight-normal:400;--eds-typography-header-xl-font-weight-bolder:500;--eds-typography-header-xl-line-height-default:1.5rem;--eds-typography-header-xl-line-height-squished:1.25rem;--eds-typography-header-2xl-font-size:1.5rem;--eds-typography-header-2xl-tracking-tight:-2.31px;--eds-typography-header-2xl-tracking-normal:0px;--eds-typography-header-2xl-tracking-wide:2.31px;--eds-typography-header-2xl-font-weight-lighter:300;--eds-typography-header-2xl-font-weight-normal:400;--eds-typography-header-2xl-font-weight-bolder:500;--eds-typography-header-2xl-line-height-default:1.75rem;--eds-typography-header-2xl-line-height-squished:1.5rem;--eds-typography-header-3xl-font-size:1.719rem;--eds-typography-header-3xl-tracking-tight:-2.695px;--eds-typography-header-3xl-tracking-normal:0px;--eds-typography-header-3xl-tracking-wide:2.695px;--eds-typography-header-3xl-font-weight-lighter:300;--eds-typography-header-3xl-font-weight-normal:400;--eds-typography-header-3xl-font-weight-bolder:500;--eds-typography-header-3xl-line-height-default:2rem;--eds-typography-header-3xl-line-height-squished:1.75rem;--eds-typography-header-4xl-font-size:1.969rem;--eds-typography-header-4xl-tracking-tight:-3.08px;--eds-typography-header-4xl-tracking-normal:0px;--eds-typography-header-4xl-tracking-wide:3.08px;--eds-typography-header-4xl-font-weight-lighter:300;--eds-typography-header-4xl-font-weight-normal:400;--eds-typography-header-4xl-font-weight-bolder:500;--eds-typography-header-4xl-line-height-default:2rem;--eds-typography-header-4xl-line-height-squished:1.75rem;--eds-typography-header-5xl-font-size:2.281rem;--eds-typography-header-5xl-tracking-tight:-3.52px;--eds-typography-header-5xl-tracking-normal:0px;--eds-typography-header-5xl-tracking-wide:3.52px;--eds-typography-header-5xl-font-weight-lighter:300;--eds-typography-header-5xl-font-weight-normal:400;--eds-typography-header-5xl-font-weight-bolder:500;--eds-typography-header-5xl-line-height-default:2.25rem;--eds-typography-header-5xl-line-height-squished:2rem;--eds-typography-header-6xl-font-size:2.625rem;--eds-typography-header-6xl-tracking-tight:-4.07px;--eds-typography-header-6xl-tracking-normal:0px;--eds-typography-header-6xl-tracking-wide:4.07px;--eds-typography-header-6xl-font-weight-lighter:300;--eds-typography-header-6xl-font-weight-normal:400;--eds-typography-header-6xl-font-weight-bolder:500;--eds-typography-header-6xl-line-height-default:2.5rem;--eds-typography-header-6xl-line-height-squished:2.25rem}
15
27
  [data-density=comfortable]{--eds-sizing-icon-xs:.875rem;--eds-sizing-icon-sm:1rem;--eds-sizing-icon-md:1.125rem;--eds-sizing-icon-lg:1.25rem;--eds-sizing-icon-xl:1.5rem;--eds-sizing-icon-2xl:1.75rem;--eds-sizing-icon-3xl:2rem;--eds-sizing-icon-4xl:2.313rem;--eds-sizing-icon-5xl:2.625rem;--eds-sizing-icon-6xl:3rem;--eds-sizing-selectable-xs:1rem;--eds-sizing-selectable-sm:1.25rem;--eds-sizing-selectable-md:1.5rem;--eds-sizing-selectable-lg:2.25rem;--eds-sizing-selectable-xl:2.75rem;--eds-sizing-selectable-2xl:3.25rem;--eds-sizing-stroke-thin:.063rem;--eds-sizing-stroke-thick:.125rem;--eds-sizing-stroke-none:0rem;--eds-spacing-icon-xs-gap-horizontal:.344rem;--eds-spacing-icon-xs-gap-vertical:.344rem;--eds-spacing-icon-sm-gap-horizontal:.406rem;--eds-spacing-icon-sm-gap-vertical:.406rem;--eds-spacing-icon-md-gap-horizontal:.469rem;--eds-spacing-icon-md-gap-vertical:.469rem;--eds-spacing-icon-lg-gap-horizontal:.531rem;--eds-spacing-icon-lg-gap-vertical:.531rem;--eds-spacing-icon-xl-gap-horizontal:.625rem;--eds-spacing-icon-xl-gap-vertical:.625rem;--eds-spacing-icon-2xl-gap-horizontal:.719rem;--eds-spacing-icon-2xl-gap-vertical:.719rem;--eds-spacing-icon-3xl-gap-horizontal:.813rem;--eds-spacing-icon-3xl-gap-vertical:.813rem;--eds-spacing-icon-4xl-gap-horizontal:.938rem;--eds-spacing-icon-4xl-gap-vertical:.938rem;--eds-spacing-icon-5xl-gap-horizontal:1.094rem;--eds-spacing-icon-5xl-gap-vertical:1.094rem;--eds-spacing-icon-6xl-gap-horizontal:1.25rem;--eds-spacing-icon-6xl-gap-vertical:1.25rem;--eds-spacing-border-radius-rounded:.188rem;--eds-spacing-border-radius-pill:62.5rem;--eds-spacing-border-radius-none:0rem;--eds-spacing-inset-xs-horizontal:.375rem;--eds-spacing-inset-xs-vertical-squished:.25rem;--eds-spacing-inset-xs-vertical-squared:.375rem;--eds-spacing-inset-xs-vertical-stretched:.5rem;--eds-spacing-inset-sm-horizontal:.5rem;--eds-spacing-inset-sm-vertical-squished:.375rem;--eds-spacing-inset-sm-vertical-squared:.5rem;--eds-spacing-inset-sm-vertical-stretched:.75rem;--eds-spacing-inset-md-horizontal:.75rem;--eds-spacing-inset-md-vertical-squished:.5rem;--eds-spacing-inset-md-vertical-squared:.75rem;--eds-spacing-inset-md-vertical-stretched:1rem;--eds-spacing-inset-lg-horizontal:1rem;--eds-spacing-inset-lg-vertical-squished:.75rem;--eds-spacing-inset-lg-vertical-squared:1rem;--eds-spacing-inset-lg-vertical-stretched:1.25rem;--eds-spacing-inset-xl-horizontal:1.25rem;--eds-spacing-inset-xl-vertical-squished:1rem;--eds-spacing-inset-xl-vertical-squared:1.25rem;--eds-spacing-inset-xl-vertical-stretched:1.5rem;--eds-spacing-horizontal-4xs:.063rem;--eds-spacing-horizontal-3xs:.125rem;--eds-spacing-horizontal-2xs:.25rem;--eds-spacing-horizontal-xs:.375rem;--eds-spacing-horizontal-sm:.5rem;--eds-spacing-horizontal-md:.75rem;--eds-spacing-horizontal-lg:1rem;--eds-spacing-horizontal-xl:1.25rem;--eds-spacing-horizontal-2xl:1.5rem;--eds-spacing-horizontal-3xl:1.75rem;--eds-spacing-vertical-4xs:.063rem;--eds-spacing-vertical-3xs:.125rem;--eds-spacing-vertical-2xs:.25rem;--eds-spacing-vertical-xs:.375rem;--eds-spacing-vertical-sm:.5rem;--eds-spacing-vertical-md:.75rem;--eds-spacing-vertical-lg:1rem;--eds-spacing-vertical-xl:1.25rem;--eds-spacing-vertical-2xl:1.5rem;--eds-spacing-vertical-3xl:1.75rem;--eds-typography-ui-body-xs-font-size:.563rem;--eds-typography-ui-body-xs-tracking-tight:-.99px;--eds-typography-ui-body-xs-tracking-normal:0px;--eds-typography-ui-body-xs-tracking-wide:.99px;--eds-typography-ui-body-xs-font-weight-lighter:300;--eds-typography-ui-body-xs-font-weight-normal:400;--eds-typography-ui-body-xs-font-weight-bolder:500;--eds-typography-ui-body-xs-line-height-default:.75rem;--eds-typography-ui-body-xs-line-height-squished:.75rem;--eds-typography-ui-body-sm-font-size:.656rem;--eds-typography-ui-body-sm-tracking-tight:-1.15px;--eds-typography-ui-body-sm-tracking-normal:0px;--eds-typography-ui-body-sm-tracking-wide:1.15px;--eds-typography-ui-body-sm-font-weight-lighter:300;--eds-typography-ui-body-sm-font-weight-normal:400;--eds-typography-ui-body-sm-font-weight-bolder:500;--eds-typography-ui-body-sm-line-height-default:1rem;--eds-typography-ui-body-sm-line-height-squished:.75rem;--eds-typography-ui-body-font-family:"Inter";--eds-typography-ui-body-md-font-size:.75rem;--eds-typography-ui-body-md-tracking-tight:-1.32px;--eds-typography-ui-body-md-tracking-normal:0px;--eds-typography-ui-body-md-tracking-wide:1.32px;--eds-typography-ui-body-md-font-weight-lighter:300;--eds-typography-ui-body-md-font-weight-normal:400;--eds-typography-ui-body-md-font-weight-bolder:500;--eds-typography-ui-body-md-line-height-default:1rem;--eds-typography-ui-body-md-line-height-squished:.75rem;--eds-typography-ui-body-lg-font-size:.875rem;--eds-typography-ui-body-lg-tracking-tight:-1.54px;--eds-typography-ui-body-lg-tracking-normal:0px;--eds-typography-ui-body-lg-tracking-wide:1.54px;--eds-typography-ui-body-lg-font-weight-lighter:300;--eds-typography-ui-body-lg-font-weight-normal:400;--eds-typography-ui-body-lg-font-weight-bolder:500;--eds-typography-ui-body-lg-line-height-default:1.25rem;--eds-typography-ui-body-lg-line-height-squished:1rem;--eds-typography-ui-body-xl-font-size:1rem;--eds-typography-ui-body-xl-tracking-tight:-1.76px;--eds-typography-ui-body-xl-tracking-normal:0px;--eds-typography-ui-body-xl-tracking-wide:1.76px;--eds-typography-ui-body-xl-font-weight-lighter:300;--eds-typography-ui-body-xl-font-weight-normal:400;--eds-typography-ui-body-xl-font-weight-bolder:500;--eds-typography-ui-body-xl-line-height-default:1.5rem;--eds-typography-ui-body-xl-line-height-squished:1.25rem;--eds-typography-ui-body-2xl-font-size:1.156rem;--eds-typography-ui-body-2xl-tracking-tight:-1.76px;--eds-typography-ui-body-2xl-tracking-normal:0px;--eds-typography-ui-body-2xl-tracking-wide:2.035px;--eds-typography-ui-body-2xl-font-weight-lighter:300;--eds-typography-ui-body-2xl-font-weight-normal:400;--eds-typography-ui-body-2xl-font-weight-bolder:500;--eds-typography-ui-body-2xl-line-height-default:1.5rem;--eds-typography-ui-body-2xl-line-height-squished:1.25rem;--eds-typography-ui-body-3xl-font-size:1.313rem;--eds-typography-ui-body-3xl-tracking-tight:-2.31px;--eds-typography-ui-body-3xl-tracking-normal:0px;--eds-typography-ui-body-3xl-tracking-wide:2.31px;--eds-typography-ui-body-3xl-font-weight-lighter:300;--eds-typography-ui-body-3xl-font-weight-normal:400;--eds-typography-ui-body-3xl-font-weight-bolder:500;--eds-typography-ui-body-3xl-line-height-default:1.75rem;--eds-typography-ui-body-3xl-line-height-squished:1.5rem;--eds-typography-ui-body-4xl-font-size:1.531rem;--eds-typography-ui-body-4xl-tracking-tight:-2.695px;--eds-typography-ui-body-4xl-tracking-normal:0px;--eds-typography-ui-body-4xl-tracking-wide:2.695px;--eds-typography-ui-body-4xl-font-weight-lighter:300;--eds-typography-ui-body-4xl-font-weight-normal:400;--eds-typography-ui-body-4xl-font-weight-bolder:500;--eds-typography-ui-body-4xl-line-height-default:2rem;--eds-typography-ui-body-4xl-line-height-squished:1.75rem;--eds-typography-ui-body-5xl-font-size:1.75rem;--eds-typography-ui-body-5xl-tracking-tight:-3.08px;--eds-typography-ui-body-5xl-tracking-normal:0px;--eds-typography-ui-body-5xl-tracking-wide:3.08px;--eds-typography-ui-body-5xl-font-weight-lighter:300;--eds-typography-ui-body-5xl-font-weight-normal:400;--eds-typography-ui-body-5xl-font-weight-bolder:500;--eds-typography-ui-body-5xl-line-height-default:2rem;--eds-typography-ui-body-5xl-line-height-squished:1.75rem;--eds-typography-ui-body-6xl-font-size:2rem;--eds-typography-ui-body-6xl-tracking-tight:-3.52px;--eds-typography-ui-body-6xl-tracking-normal:0px;--eds-typography-ui-body-6xl-tracking-wide:3.52px;--eds-typography-ui-body-6xl-font-weight-lighter:300;--eds-typography-ui-body-6xl-font-weight-normal:0px;--eds-typography-ui-body-6xl-font-weight-bolder:500;--eds-typography-ui-body-6xl-line-height-default:2.25rem;--eds-typography-ui-body-6xl-line-height-squished:2rem;--eds-typography-header-font-family:"Equinor";--eds-typography-header-xs-font-size:.656rem;--eds-typography-header-xs-tracking-tight:-.99px;--eds-typography-header-xs-tracking-normal:0px;--eds-typography-header-xs-tracking-wide:.99px;--eds-typography-header-xs-font-weight-lighter:300;--eds-typography-header-xs-font-weight-normal:400;--eds-typography-header-xs-font-weight-bolder:500;--eds-typography-header-xs-line-height-default:.75rem;--eds-typography-header-xs-line-height-squished:.75rem;--eds-typography-header-sm-font-size:.75rem;--eds-typography-header-sm-tracking-tight:-1.15px;--eds-typography-header-sm-tracking-normal:0px;--eds-typography-header-sm-tracking-wide:1.15px;--eds-typography-header-sm-font-weight-lighter:300;--eds-typography-header-sm-font-weight-normal:400;--eds-typography-header-sm-font-weight-bolder:500;--eds-typography-header-sm-line-height-default:1rem;--eds-typography-header-sm-line-height-squished:.75rem;--eds-typography-header-md-font-size:.875rem;--eds-typography-header-md-tracking-tight:-1.32px;--eds-typography-header-md-tracking-normal:0px;--eds-typography-header-md-tracking-wide:1.32px;--eds-typography-header-md-font-weight-lighter:300;--eds-typography-header-md-font-weight-normal:400;--eds-typography-header-md-font-weight-bolder:500;--eds-typography-header-md-line-height-default:1rem;--eds-typography-header-md-line-height-squished:.75rem;--eds-typography-header-lg-font-size:1rem;--eds-typography-header-lg-tracking-tight:-1.54px;--eds-typography-header-lg-tracking-normal:0px;--eds-typography-header-lg-tracking-wide:1.54px;--eds-typography-header-lg-font-weight-lighter:300;--eds-typography-header-lg-font-weight-normal:400;--eds-typography-header-lg-font-weight-bolder:500;--eds-typography-header-lg-line-height-default:1.25rem;--eds-typography-header-lg-line-height-squished:1rem;--eds-typography-header-xl-font-size:1.125rem;--eds-typography-header-xl-tracking-tight:-1.76px;--eds-typography-header-xl-tracking-normal:0px;--eds-typography-header-xl-tracking-wide:1.76px;--eds-typography-header-xl-font-weight-lighter:300;--eds-typography-header-xl-font-weight-normal:400;--eds-typography-header-xl-font-weight-bolder:500;--eds-typography-header-xl-line-height-default:1.5rem;--eds-typography-header-xl-line-height-squished:1.25rem;--eds-typography-header-2xl-font-size:1.313rem;--eds-typography-header-2xl-tracking-tight:-1.76px;--eds-typography-header-2xl-tracking-normal:0px;--eds-typography-header-2xl-tracking-wide:2.035px;--eds-typography-header-2xl-font-weight-lighter:300;--eds-typography-header-2xl-font-weight-normal:400;--eds-typography-header-2xl-font-weight-bolder:500;--eds-typography-header-2xl-line-height-default:1.5rem;--eds-typography-header-2xl-line-height-squished:1.25rem;--eds-typography-header-3xl-font-size:1.5rem;--eds-typography-header-3xl-tracking-tight:-2.31px;--eds-typography-header-3xl-tracking-normal:0px;--eds-typography-header-3xl-tracking-wide:2.31px;--eds-typography-header-3xl-font-weight-lighter:300;--eds-typography-header-3xl-font-weight-normal:400;--eds-typography-header-3xl-font-weight-bolder:500;--eds-typography-header-3xl-line-height-default:1.75rem;--eds-typography-header-3xl-line-height-squished:1.5rem;--eds-typography-header-4xl-font-size:1.719rem;--eds-typography-header-4xl-tracking-tight:-2.695px;--eds-typography-header-4xl-tracking-normal:0px;--eds-typography-header-4xl-tracking-wide:2.695px;--eds-typography-header-4xl-font-weight-lighter:300;--eds-typography-header-4xl-font-weight-normal:400;--eds-typography-header-4xl-font-weight-bolder:500;--eds-typography-header-4xl-line-height-default:2rem;--eds-typography-header-4xl-line-height-squished:1.75rem;--eds-typography-header-5xl-font-size:1.969rem;--eds-typography-header-5xl-tracking-tight:-3.08px;--eds-typography-header-5xl-tracking-normal:0px;--eds-typography-header-5xl-tracking-wide:3.08px;--eds-typography-header-5xl-font-weight-lighter:300;--eds-typography-header-5xl-font-weight-normal:400;--eds-typography-header-5xl-font-weight-bolder:500;--eds-typography-header-5xl-line-height-default:2rem;--eds-typography-header-5xl-line-height-squished:1.75rem;--eds-typography-header-6xl-font-size:2.281rem;--eds-typography-header-6xl-tracking-tight:-3.52px;--eds-typography-header-6xl-tracking-normal:0px;--eds-typography-header-6xl-tracking-wide:3.52px;--eds-typography-header-6xl-font-weight-lighter:300;--eds-typography-header-6xl-font-weight-normal:400;--eds-typography-header-6xl-font-weight-bolder:500;--eds-typography-header-6xl-line-height-default:2.25rem;--eds-typography-header-6xl-line-height-squished:2rem}
16
28
  [data-space-proportions=squished]{--eds-spacing-proportions-xs-horizontal:var(--eds-spacing-inset-xs-horizontal);--eds-spacing-proportions-xs-vertical:var(--eds-spacing-inset-xs-vertical-squished);--eds-spacing-proportions-sm-horizontal:var(--eds-spacing-inset-sm-horizontal);--eds-spacing-proportions-sm-vertical:var(--eds-spacing-inset-sm-vertical-squished);--eds-spacing-proportions-md-horizontal:var(--eds-spacing-inset-md-horizontal);--eds-spacing-proportions-md-vertical:var(--eds-spacing-inset-md-vertical-squished);--eds-spacing-proportions-lg-horizontal:var(--eds-spacing-inset-lg-horizontal);--eds-spacing-proportions-lg-vertical:var(--eds-spacing-inset-lg-vertical-squished);--eds-spacing-proportions-xl-horizontal:var(--eds-spacing-inset-xl-horizontal);--eds-spacing-proportions-xl-vertical:var(--eds-spacing-inset-xl-vertical-squished)}
@@ -92,13 +104,9 @@
92
104
  [data-tracking=wide],[data-tracking=loose]{--eds-typography-tracking:var(--eds-typography-tracking-wide)}
93
105
  @layer eds-components {
94
106
  /* Inline with text: uses token from parent's data-font-size, or 1.5em fallback */
95
- .icon {
96
- /*
97
- * Set font-size first to establish the icon's size context.
98
- * Then use 1em for width/height (relative to computed font-size).
99
- * This avoids compound scaling (1.5em × 1.5em = 2.25em would be wrong).
100
- */
101
- font-size: var(--eds-typography-icon-size, 1.5em);
107
+ .eds-icon {
108
+ flex-shrink: 0;
109
+
102
110
  width: 1em;
103
111
  height: 1em;
104
112
 
@@ -106,11 +114,16 @@
106
114
  margin-block: -0.25em;
107
115
  margin-inline: -0.1em;
108
116
 
109
- flex-shrink: 0;
117
+ /*
118
+ * font-size establishes the icon's size context.
119
+ * width/height use 1em (relative to this computed font-size).
120
+ * This avoids compound scaling (1.5em × 1.5em = 2.25em would be wrong).
121
+ */
122
+ font-size: var(--eds-typography-icon-size, 1.5em);
110
123
  }
111
124
 
112
125
  /* Explicit size: fixed size from design tokens, no margins */
113
- .icon[data-icon-size] {
126
+ .eds-icon[data-icon-size] {
114
127
  --_explicit-size: var(--eds-sizing-icon-md); /* fallback */
115
128
 
116
129
  width: var(--_explicit-size);
@@ -119,176 +132,119 @@
119
132
  font-size: inherit;
120
133
  }
121
134
 
122
- .icon[data-icon-size='xs'] {
135
+ .eds-icon[data-icon-size='xs'] {
123
136
  --_explicit-size: var(--eds-sizing-icon-xs);
124
137
  }
125
- .icon[data-icon-size='sm'] {
138
+
139
+ .eds-icon[data-icon-size='sm'] {
126
140
  --_explicit-size: var(--eds-sizing-icon-sm);
127
141
  }
128
- .icon[data-icon-size='md'] {
142
+
143
+ .eds-icon[data-icon-size='md'] {
129
144
  --_explicit-size: var(--eds-sizing-icon-md);
130
145
  }
131
- .icon[data-icon-size='lg'] {
146
+
147
+ .eds-icon[data-icon-size='lg'] {
132
148
  --_explicit-size: var(--eds-sizing-icon-lg);
133
149
  }
134
- .icon[data-icon-size='xl'] {
150
+
151
+ .eds-icon[data-icon-size='xl'] {
135
152
  --_explicit-size: var(--eds-sizing-icon-xl);
136
153
  }
137
- .icon[data-icon-size='2xl'] {
154
+
155
+ .eds-icon[data-icon-size='2xl'] {
138
156
  --_explicit-size: var(--eds-sizing-icon-2xl);
139
157
  }
140
- .icon[data-icon-size='3xl'] {
158
+
159
+ .eds-icon[data-icon-size='3xl'] {
141
160
  --_explicit-size: var(--eds-sizing-icon-3xl);
142
161
  }
143
- .icon[data-icon-size='4xl'] {
162
+
163
+ .eds-icon[data-icon-size='4xl'] {
144
164
  --_explicit-size: var(--eds-sizing-icon-4xl);
145
165
  }
146
- .icon[data-icon-size='5xl'] {
166
+
167
+ .eds-icon[data-icon-size='5xl'] {
147
168
  --_explicit-size: var(--eds-sizing-icon-5xl);
148
169
  }
149
- .icon[data-icon-size='6xl'] {
170
+
171
+ .eds-icon[data-icon-size='6xl'] {
150
172
  --_explicit-size: var(--eds-sizing-icon-6xl);
151
173
  }
152
174
  }
153
175
  @layer eds-components {
154
176
  .eds-button {
177
+ cursor: pointer;
178
+
155
179
  /* Layout */
156
180
  display: inline-flex;
157
181
  align-items: center;
158
182
  justify-content: center;
183
+
159
184
  box-sizing: border-box;
160
185
 
161
186
  /* Appearance */
162
187
  border: none;
163
188
  border-radius: var(--eds-spacing-border-radius-rounded, 4px);
164
- cursor: pointer;
165
- outline: none;
189
+
166
190
  text-decoration: none;
167
191
 
192
+ outline: none;
193
+
168
194
  /* Transitions */
169
195
  transition:
170
196
  background-color 150ms ease-in-out,
171
197
  border-color 150ms ease-in-out,
172
198
  color 150ms ease-in-out;
173
-
174
- /* Comfortable density asymmetric padding for visual text centering */
175
- /* These values compensate for font metrics (ascenders/descenders) */
176
- /* Empirically determined from Figma design */
177
- --_comfortable-padding-top: 0.313rem; /* 5px */
178
- --_comfortable-padding-bottom: 0.188rem; /* 3px */
179
-
180
- /* Comfortable density icon-only padding to match label button heights */
181
- /* Formula: (target-height - icon-size) / 2 where target-height = label button height */
182
- /* Empirically determined from Figma design */
183
- --_comfortable-icon-padding-sm: 0.125rem; /* 2px: (20px - 16px) / 2 */
184
- --_comfortable-icon-padding-md: 0.188rem; /* 3px: (24px - 18px) / 2 */
185
- --_comfortable-icon-padding-lg: 0.5rem; /* 8px: (36px - 20px) / 2 */
186
199
  }
187
200
 
188
- /* ===== SIZE VARIANTS (Button with label) ===== */
201
+ /* ===== SIZE VARIANTS ===== */
189
202
  /*
190
- * Spacing adjusted from design tokens to compensate for icon negative margins
191
- * Icons have margin-block: -0.25em and margin-inline: -0.1em for optical alignment
203
+ * Button height is controlled by min-height.
204
+ * The span keeps its natural line-height and is centered by flexbox.
192
205
  *
193
- * Token reference (from --eds-selectable-space-*):
194
- * - lg: horizontal=20px, vertical=16px (spacious) / 12px (comfortable)
195
- * - md: horizontal=16px, vertical=12px (spacious) / 8px (comfortable)
196
- * - sm: horizontal=12px, vertical=8px (spacious) / 6px (comfortable)
197
- *
198
- * Adjustments made:
199
- * - Vertical padding reduced by ~4px to account for icon negative margins
200
- * - Gap values slightly adjusted for visual balance with icons
206
+ * Spacious (default): sm=24px, md=36px, lg=44px
207
+ * Comfortable: sm=20px, md=24px, lg=36px
201
208
  */
202
209
 
203
210
  .eds-button[data-selectable-space='lg'] {
204
- /* Base from token (16px spacious / 12px comfortable) → Adjusted: -4px vertical for icon margins */
205
- padding-block: calc(var(--eds-selectable-space-vertical) - 0.25rem); /* 16px → 12px / 12px → 8px */
206
- padding-inline: var(--eds-selectable-space-horizontal); /* 20px spacious / 16px comfortable */
207
211
  gap: var(--eds-typography-gap-horizontal);
212
+ min-height: 2.75rem; /* 44px */
213
+ padding-inline: var(--eds-selectable-space-horizontal);
208
214
  }
209
215
 
210
216
  .eds-button[data-selectable-space='md'] {
211
- /* Base from token (12px spacious / 8px comfortable) → Adjusted: -2px vertical for icon margins */
212
- padding-block: calc(var(--eds-selectable-space-vertical) - 0.125rem); /* 12px → 10px / 8px → 6px */
213
- padding-inline: var(--eds-selectable-space-horizontal); /* 16px spacious / 12px comfortable */
214
217
  gap: var(--eds-typography-gap-horizontal);
218
+ min-height: 2.25rem; /* 36px */
219
+ padding-inline: var(--eds-selectable-space-horizontal);
215
220
  }
216
221
 
217
222
  .eds-button[data-selectable-space='sm'] {
218
- /* Base from token (8px spacious / 6px comfortable) → Adjusted: -2px vertical for icon margins */
219
- padding-block: calc(var(--eds-selectable-space-vertical) - 0.125rem); /* 8px → 6px / 6px → 4px */
220
- padding-inline: var(--eds-selectable-space-horizontal); /* 12px spacious / 8px comfortable */
221
223
  gap: var(--eds-typography-gap-horizontal);
224
+ min-height: 1.5rem; /* 24px */
225
+ padding-inline: var(--eds-selectable-space-horizontal);
222
226
  }
223
227
 
224
- /* ===== DENSITY OVERRIDES ===== */
225
- /*
226
- * Note: Density-specific overrides are defined OUTSIDE @layer (after this block closes)
227
- * to ensure they can override the typography tokens from @equinor/eds-tokens
228
- */
228
+ /* Comfortable density */
229
229
 
230
- /* ===== ICON-ONLY BUTTON ===== */
231
- /*
232
- * Icon-only buttons maintain same height as label buttons but adapt to density.
233
- * Formula: padding = base-padding + (line-height - icon-size) / 2
234
- *
235
- * This ensures icon buttons:
236
- * - Match label button height in both spacious and comfortable density
237
- * - Center the icon vertically regardless of density mode
238
- * - Adapt automatically via --eds-typography-line-height-squished token
239
- *
240
- * Density behavior:
241
- * - Spacious: Uses larger line-height → more padding → taller buttons
242
- * - Comfortable: Uses smaller line-height → less padding → shorter buttons
243
- */
244
-
245
- .eds-button[data-icon-only] {
246
- aspect-ratio: 1;
230
+ [data-density='comfortable'] .eds-button[data-selectable-space='lg'] {
231
+ min-height: 2.25rem; /* 36px */
247
232
  }
248
233
 
249
- .eds-button[data-icon-only][data-selectable-space='lg'] {
250
- /* Base padding from token minus icon compensation: (16px - 4px) = 12px spacious / (12px - 4px) = 8px comfortable */
251
- /* Adapts with line-height (20px spacious / 16px comfortable) */
252
- /* Target height: 44px spacious / 40px comfortable */
253
- --_base-padding: calc(var(--eds-selectable-space-vertical) - 0.25rem);
254
- padding: calc(
255
- var(--_base-padding) +
256
- (
257
- var(--eds-typography-line-height-squished) -
258
- var(--eds-typography-icon-size)
259
- ) /
260
- 2
261
- );
234
+ [data-density='comfortable'] .eds-button[data-selectable-space='md'] {
235
+ min-height: 1.5rem; /* 24px */
262
236
  }
263
237
 
264
- .eds-button[data-icon-only][data-selectable-space='md'] {
265
- /* Base padding from token minus icon compensation: (12px - 2px) = 10px spacious / (8px - 2px) = 6px comfortable */
266
- /* Adapts with line-height (16px spacious / 12px comfortable) */
267
- /* Target height: 36px spacious / 32px comfortable */
268
- --_base-padding: calc(var(--eds-selectable-space-vertical) - 0.125rem);
269
- padding: calc(
270
- var(--_base-padding) +
271
- (
272
- var(--eds-typography-line-height-squished) -
273
- var(--eds-typography-icon-size)
274
- ) /
275
- 2
276
- );
238
+ [data-density='comfortable'] .eds-button[data-selectable-space='sm'] {
239
+ min-height: 1.25rem; /* 20px */
277
240
  }
278
241
 
279
- .eds-button[data-icon-only][data-selectable-space='sm'] {
280
- /* Base padding from token minus icon compensation: (8px - 2px) = 6px spacious / (6px - 2px) = 4px comfortable */
281
- /* Line-height (12px) same for both densities */
282
- /* Target height: 24px (consistent across densities) */
283
- --_base-padding: calc(var(--eds-selectable-space-vertical) - 0.125rem);
284
- padding: calc(
285
- var(--_base-padding) +
286
- (
287
- var(--eds-typography-line-height-squished) -
288
- var(--eds-typography-icon-size)
289
- ) /
290
- 2
291
- );
242
+ /* ===== ICON-ONLY BUTTON ===== */
243
+ /* Height from size variant, aspect-ratio makes it square, flexbox centers icon */
244
+
245
+ .eds-button[data-icon-only] {
246
+ aspect-ratio: 1;
247
+ padding: 0;
292
248
  }
293
249
 
294
250
  /* ===== ROUND ICON-ONLY BUTTON ===== */
@@ -300,8 +256,8 @@
300
256
  /* ===== PRIMARY VARIANT ===== */
301
257
 
302
258
  .eds-button[data-variant='primary'] {
303
- background-color: var(--eds-color-bg-fill-emphasis-default);
304
259
  color: var(--eds-color-text-strong-on-emphasis);
260
+ background-color: var(--eds-color-bg-fill-emphasis-default);
305
261
  }
306
262
 
307
263
  .eds-button[data-variant='primary']:hover:not(:disabled) {
@@ -313,16 +269,16 @@
313
269
  }
314
270
 
315
271
  .eds-button[data-variant='primary']:disabled {
316
- background-color: var(--eds-color-bg-fill-muted-default);
317
- color: var(--eds-color-border-medium);
318
272
  cursor: not-allowed;
273
+ color: var(--eds-color-text-disabled);
274
+ background-color: var(--eds-color-bg-fill-emphasis-disabled);
319
275
  }
320
276
 
321
277
  /* ===== SECONDARY VARIANT ===== */
322
278
 
323
279
  .eds-button[data-variant='secondary'] {
324
- background-color: transparent;
325
280
  color: var(--eds-color-text-subtle);
281
+ background-color: transparent;
326
282
  outline: var(--eds-border-width-default, 1px) solid
327
283
  var(--eds-color-border-strong);
328
284
  outline-offset: calc(-1 * var(--eds-border-width-default, 1px));
@@ -337,18 +293,18 @@
337
293
  }
338
294
 
339
295
  .eds-button[data-variant='secondary']:disabled {
296
+ cursor: not-allowed;
297
+ color: var(--eds-color-text-disabled);
340
298
  outline: var(--eds-border-width-default, 1px) solid
341
- var(--eds-color-border-medium);
299
+ var(--eds-color-border-disabled);
342
300
  outline-offset: calc(-1 * var(--eds-border-width-default, 1px));
343
- color: var(--eds-color-border-medium);
344
- cursor: not-allowed;
345
301
  }
346
302
 
347
303
  /* ===== GHOST VARIANT ===== */
348
304
 
349
305
  .eds-button[data-variant='ghost'] {
350
- background-color: transparent;
351
306
  color: var(--eds-color-text-subtle);
307
+ background-color: transparent;
352
308
  }
353
309
 
354
310
  .eds-button[data-variant='ghost']:hover:not(:disabled) {
@@ -360,8 +316,8 @@
360
316
  }
361
317
 
362
318
  .eds-button[data-variant='ghost']:disabled {
363
- color: var(--eds-color-border-medium);
364
319
  cursor: not-allowed;
320
+ color: var(--eds-color-text-disabled);
365
321
  }
366
322
 
367
323
  /* ===== FOCUS STATE ===== */
@@ -380,106 +336,31 @@
380
336
  /* Icons inherit size from Typography via --eds-typography-icon-size */
381
337
  /* Icons use em-based negative margins from icon.css for optical alignment */
382
338
 
383
- .eds-button .icon {
339
+ .eds-button .eds-icon {
384
340
  flex-shrink: 0;
385
341
  }
386
342
 
387
- /* Icon-only buttons: remove negative margins, use padding for sizing */
388
- .eds-button[data-icon-only] .icon {
343
+ /* Icon-only buttons: remove negative margins since flexbox handles centering */
344
+ .eds-button[data-icon-only] .eds-icon {
389
345
  margin: 0;
390
346
  }
391
347
  }
392
- /* ===== LABEL WRAPPER (TypographyNext) ===== */
393
- /* Outside @layer to override typography.css which sets display: block on [data-font-family] */
394
- .eds-button {
395
- display: inline-flex;
396
- }
397
- .eds-button > span {
398
- display: inline-flex;
399
- align-items: center;
400
- gap: inherit;
401
- }
402
- /* Reset baseline padding and text-box-trim for proper centering */
403
- .eds-button > span[data-baseline] {
404
- padding: 0;
405
- /* Disable text-box-trim so text sits centered within its line-height box */
406
- /* Flexbox will then center the entire line-height box vertically in the button */
407
- text-box-trim: none;
408
- text-box-edge: auto;
409
- }
410
- /* Icon-only: span should not affect layout */
411
- .eds-button[data-icon-only] > span {
412
- display: contents;
413
- }
414
- /* ===== DENSITY OVERRIDES ===== */
415
348
  /*
416
- * Comfortable density uses smaller font-sizes (one size down) and tighter spacing.
417
- *
418
- * Font-size mapping (from Figma):
419
- * - small: XS (10.5px) instead of SM (12px)
420
- * - default: SM (12px) instead of MD (14px)
421
- * - large: MD (14px) instead of LG (16px)
349
+ * Outside @layer to override typography.css [data-font-family] { display: block }.
350
+ * The span wraps text children via TypographyNext and needs inline-flex for
351
+ * icon+text gap and vertical centering.
422
352
  *
423
- * Target heights in comfortable mode:
424
- * - small: 20px (4px × 2 + 12px line-height)
425
- * - default: 24px (4px × 2 + 16px line-height)
426
- * - large: 36px (8px × 2 + 20px line-height)
427
- *
428
- * These overrides are OUTSIDE @layer to ensure they can override the typography
429
- * tokens from @equinor/eds-tokens/css/variables.
353
+ * text-box/padding-block reset disables typography.css baseline padding —
354
+ * button handles its own sizing via min-height + flexbox centering.
430
355
  */
431
- [data-density='comfortable'] .eds-button[data-selectable-space='sm'][data-font-size='sm'],
432
- [data-density='comfortable'] .eds-button[data-selectable-space='sm'] [data-font-size='sm'] {
433
- /* Override line-height to maintain SM height (12px instead of XS's 12px) */
434
- --eds-typography-line-height: 0.75rem; /* 12px (SM line-height) */
435
- --eds-typography-line-height-squished: 0.75rem; /* 12px */
436
- }
437
- [data-density='comfortable'] .eds-button[data-selectable-space='sm'][data-font-size='sm'] {
438
- /* Target: 20px = (5px + 3px) + 12px line-height */
439
- /* Asymmetric padding to visually center text (more top, less bottom) */
440
- padding-top: var(--_comfortable-padding-top);
441
- padding-bottom: var(--_comfortable-padding-bottom);
442
- }
443
- [data-density='comfortable'] .eds-button[data-selectable-space='md'][data-font-size='md'],
444
- [data-density='comfortable'] .eds-button[data-selectable-space='md'] [data-font-size='md'] {
445
- /* Override line-height to maintain MD height (16px instead of SM's 12px) */
446
- --eds-typography-line-height: 1rem; /* 16px (MD line-height, NOT SM) */
447
- --eds-typography-line-height-squished: 1rem; /* 16px */
448
- }
449
- [data-density='comfortable'] .eds-button[data-selectable-space='md'][data-font-size='md'] {
450
- /* Target: 24px = (5px + 3px) + 16px line-height */
451
- /* Asymmetric padding to visually center text (more top, less bottom) */
452
- padding-top: var(--_comfortable-padding-top);
453
- padding-bottom: var(--_comfortable-padding-bottom);
454
- }
455
- [data-density='comfortable'] .eds-button[data-selectable-space='lg'][data-font-size='lg'],
456
- [data-density='comfortable'] .eds-button[data-selectable-space='lg'] [data-font-size='lg'] {
457
- /* Override line-height to maintain LG height (20px instead of MD's 16px) */
458
- --eds-typography-line-height: 1.25rem; /* 20px (LG line-height, NOT MD) */
459
- --eds-typography-line-height-squished: 1.25rem; /* 20px */
460
- }
461
- [data-density='comfortable'] .eds-button[data-selectable-space='lg'][data-font-size='lg'] {
462
- /* Target: 36px = (8px × 2) + 20px */
463
- /* Token gives 12px in comfortable mode, minus icon compensation = 8px */
464
- padding-block: calc(var(--eds-selectable-space-vertical) - 0.25rem); /* 12px → 8px */
465
- }
466
- /* Icon-only button overrides for comfortable density */
467
- /* Set fixed padding to ensure square buttons that match labeled button heights */
468
- /* Formula: padding = (target-height - icon-size) / 2 */
469
- [data-density='comfortable'] .eds-button[data-icon-only][data-selectable-space='sm'] {
470
- /* Target: 20×20px to match labeled small button (20px height) */
471
- /* Icon size: 16px, padding needed: (20 - 16) / 2 = 2px */
472
- padding: var(--_comfortable-icon-padding-sm);
473
- }
474
- [data-density='comfortable'] .eds-button[data-icon-only][data-selectable-space='md'] {
475
- /* Target: 24×24px to match labeled default button (24px height) */
476
- /* Icon size: 18px, padding needed: (24 - 18) / 2 = 3px */
477
- padding: var(--_comfortable-icon-padding-md);
478
- }
479
- [data-density='comfortable'] .eds-button[data-icon-only][data-selectable-space='lg'] {
480
- /* Target: 36×36px to match labeled large button (36px height) */
481
- /* Icon size: 20px, padding needed: (36 - 20) / 2 = 8px */
482
- padding: var(--_comfortable-icon-padding-lg);
356
+ .eds-button__label {
357
+ display: inline-flex;
358
+ gap: var(--eds-typography-gap-horizontal);
359
+ align-items: center;
360
+
361
+ padding-block: 0;
362
+
363
+ text-box: normal;
483
364
  }
484
365
  @layer eds-components {
485
366
  .eds-field {
@@ -539,9 +420,15 @@
539
420
  color: var(--_eds-field-helper-color);
540
421
  }
541
422
 
423
+ /* Reduce gap before helper message to 3xs spacing.
424
+ Applied to the preceding sibling (not helper message) to avoid [data-font-family] margin: 0 override. */
425
+ .eds-field > :has(+ .eds-field__helper-message) {
426
+ margin-block-end: calc(var(--eds-spacing-vertical-3xs) - var(--eds-generic-gap-vertical));
427
+ }
428
+
542
429
  /* Only helper message changes color when disabled */
543
430
  .eds-field[data-disabled='true'] {
544
- --_eds-field-helper-color: var(--eds-color-border-neutral-medium);
431
+ --_eds-field-helper-color: var(--eds-color-text-disabled);
545
432
  }
546
433
  }
547
434
  @layer eds-components {
@@ -692,7 +579,7 @@
692
579
  }
693
580
 
694
581
  .eds-checkbox[data-disabled='true'] .eds-checkbox__icon {
695
- fill: var(--eds-color-border-medium);
582
+ fill: var(--eds-color-text-disabled);
696
583
  }
697
584
 
698
585
  /* Icon visibility */
@@ -731,7 +618,7 @@
731
618
  }
732
619
 
733
620
  .eds-field.eds-checkbox[data-disabled='true'] .eds-field__label {
734
- color: var(--eds-color-border-medium);
621
+ color: var(--eds-color-text-disabled);
735
622
  cursor: not-allowed;
736
623
  }
737
624
 
@@ -884,7 +771,7 @@
884
771
  }
885
772
 
886
773
  .eds-radio[data-disabled='true'] .eds-radio__icon {
887
- fill: var(--eds-color-border-medium);
774
+ fill: var(--eds-color-text-disabled);
888
775
  }
889
776
 
890
777
  /* Icon visibility */
@@ -909,7 +796,7 @@
909
796
  }
910
797
 
911
798
  .eds-field.eds-radio[data-disabled='true'] .eds-field__label {
912
- color: var(--eds-color-border-medium);
799
+ color: var(--eds-color-text-disabled);
913
800
  cursor: not-allowed;
914
801
  }
915
802
  }
@@ -965,7 +852,7 @@
965
852
  }
966
853
 
967
854
  &[data-disabled='true'] .eds-field__label {
968
- color: var(--eds-color-border-medium);
855
+ color: var(--eds-color-text-disabled);
969
856
  cursor: not-allowed;
970
857
  }
971
858
  }
@@ -1039,7 +926,7 @@
1039
926
  }
1040
927
 
1041
928
  .eds-switch:has(.eds-switch__input:disabled) & {
1042
- background-color: var(--eds-color-border-medium);
929
+ background-color: var(--eds-color-bg-disabled);
1043
930
  box-shadow: none;
1044
931
  }
1045
932
  }
@@ -1047,6 +934,11 @@
1047
934
  @layer eds-components {
1048
935
  /* Container */
1049
936
  .eds-input-container {
937
+ /* Temporary alias until proper input background token is available */
938
+ --_bg-input: var(--eds-color-bg-canvas);
939
+ /* Temporary alias until proper readonly text token is available */
940
+ --_readonly-text-color: var(--eds-color-border-strong);
941
+
1050
942
  isolation: isolate;
1051
943
  display: flex;
1052
944
  flex-direction: row;
@@ -1054,8 +946,8 @@
1054
946
  gap: var(--eds-typography-gap-horizontal);
1055
947
  box-sizing: border-box;
1056
948
  inline-size: 100%;
1057
- background: var(--eds-color-bg-canvas);
1058
- /* Use outline instead of border to not affect height (36px target) */
949
+ background: var(--_bg-input);
950
+ /* Outline instead of border to not affect height calculation */
1059
951
  outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-subtle);
1060
952
  outline-offset: calc(-1 * var(--eds-sizing-stroke-thin));
1061
953
  border-radius: var(--eds-spacing-border-radius-none);
@@ -1065,40 +957,28 @@
1065
957
  background-color 150ms,
1066
958
  outline-color 150ms;
1067
959
 
1068
- /* Hover - only for enabled inputs */
1069
960
  &:hover:not([data-disabled]):not([data-readonly]) {
1070
961
  outline-color: var(--eds-color-border-strong);
1071
962
 
1072
963
  & .eds-input {
1073
964
  color: var(--eds-color-text-strong);
1074
- /* -webkit-text-fill-color overrides Safari autofill background styling */
965
+ /* Safari autofill override */
1075
966
  -webkit-text-fill-color: var(--eds-color-text-strong);
1076
967
 
1077
968
  &::placeholder {
1078
969
  color: var(--eds-color-text-strong);
970
+ /* Safari autofill override */
1079
971
  -webkit-text-fill-color: var(--eds-color-text-strong);
1080
972
  }
1081
973
  }
1082
-
1083
- /* Hover for adornments - only when not invalid */
1084
- &:not([data-invalid]) {
1085
- & .eds-adornment__text,
1086
- & .eds-adornment__adornment {
1087
- color: var(--eds-color-text-strong);
1088
- }
1089
- }
1090
974
  }
1091
975
 
1092
- /* Focus state - border stays in place, focus ring appears outside with gap
1093
- Matches Switch pattern: stroke-thin ring with stroke-thick gap */
976
+ /* Focus ring with gap (box-shadow since outline is used for border) */
1094
977
  &:focus-within {
1095
978
  outline-color: var(--eds-color-border-strong);
1096
- /* Use box-shadow since outline is used for the border */
1097
979
  box-shadow:
1098
- 0 0 0 var(--eds-sizing-stroke-thick) var(--eds-color-bg-canvas),
1099
- 0 0 0
1100
- calc(var(--eds-sizing-stroke-thick) + var(--eds-sizing-stroke-thin))
1101
- var(--eds-color-border-focus);
980
+ 0 0 0 var(--eds-sizing-stroke-thin) var(--_bg-input),
981
+ 0 0 0 calc(var(--eds-sizing-stroke-thin) * 2) var(--eds-color-border-focus);
1102
982
  }
1103
983
 
1104
984
  /* Invalid state */
@@ -1108,15 +988,8 @@
1108
988
  &:focus-within {
1109
989
  outline-color: var(--eds-color-border-strong);
1110
990
  box-shadow:
1111
- 0 0 0 var(--eds-sizing-stroke-thick) var(--eds-color-bg-canvas),
1112
- 0 0 0
1113
- calc(var(--eds-sizing-stroke-thick) + var(--eds-sizing-stroke-thin))
1114
- var(--eds-color-border-focus);
1115
- }
1116
-
1117
- & .eds-input::placeholder {
1118
- color: var(--eds-color-border-strong);
1119
- -webkit-text-fill-color: var(--eds-color-border-strong);
991
+ 0 0 0 var(--eds-sizing-stroke-thin) var(--_bg-input),
992
+ 0 0 0 calc(var(--eds-sizing-stroke-thin) * 2) var(--eds-color-border-focus);
1120
993
  }
1121
994
  }
1122
995
 
@@ -1126,23 +999,23 @@
1126
999
  outline-color: transparent;
1127
1000
 
1128
1001
  & .eds-input {
1129
- color: var(--eds-color-border-medium);
1002
+ color: var(--eds-color-text-disabled);
1130
1003
  cursor: not-allowed;
1131
1004
  opacity: 1;
1132
- -webkit-text-fill-color: var(
1133
- --eds-color-border-medium
1134
- ); /* Safari autofill override */
1005
+ /* Safari autofill override */
1006
+ -webkit-text-fill-color: var(--eds-color-text-disabled);
1135
1007
 
1136
1008
  &::placeholder {
1137
- color: var(--eds-color-border-medium);
1138
- -webkit-text-fill-color: var(--eds-color-border-medium);
1009
+ color: var(--eds-color-text-disabled);
1010
+ /* Safari autofill override */
1011
+ -webkit-text-fill-color: var(--eds-color-text-disabled);
1139
1012
  }
1140
1013
  }
1141
1014
 
1142
1015
  & .eds-adornment__text,
1143
1016
  & .eds-adornment__adornment,
1144
1017
  & .eds-error-icon {
1145
- color: var(--eds-color-border-medium);
1018
+ color: var(--eds-color-text-disabled);
1146
1019
  }
1147
1020
  }
1148
1021
 
@@ -1151,26 +1024,28 @@
1151
1024
  outline-color: transparent;
1152
1025
 
1153
1026
  & .eds-input {
1154
- color: var(--eds-color-border-strong);
1155
- -webkit-text-fill-color: var(
1156
- --eds-color-border-strong
1157
- ); /* Safari autofill override */
1158
-
1159
- &::placeholder {
1160
- color: var(--eds-color-border-strong);
1161
- -webkit-text-fill-color: var(--eds-color-border-strong);
1162
- }
1027
+ color: var(--_readonly-text-color);
1028
+ /* Safari autofill override */
1029
+ -webkit-text-fill-color: var(--_readonly-text-color);
1163
1030
  }
1164
1031
 
1165
1032
  & .eds-adornment__text,
1166
1033
  & .eds-adornment__adornment {
1167
- color: var(--eds-color-border-strong);
1034
+ color: var(--_readonly-text-color);
1168
1035
  }
1169
1036
  }
1170
1037
  }
1171
1038
 
1039
+ /* Comfortable density: uses XS vertical spacing for 24px height */
1040
+ [data-density='comfortable'] .eds-input-container {
1041
+ padding-block: var(--eds-spacing-proportions-xs-vertical);
1042
+ }
1043
+
1172
1044
  /* Input/Textarea element */
1173
1045
  .eds-input {
1046
+ /* Temporary alias until proper placeholder text token is available */
1047
+ --_placeholder-text-color: var(--eds-color-border-strong);
1048
+
1174
1049
  flex: 1;
1175
1050
  min-inline-size: 0;
1176
1051
  border: var(--eds-sizing-stroke-none);
@@ -1184,7 +1059,9 @@
1184
1059
  resize: none;
1185
1060
 
1186
1061
  &::placeholder {
1187
- color: var(--eds-color-border-strong);
1062
+ color: var(--_placeholder-text-color);
1063
+ /* Safari autofill override */
1064
+ -webkit-text-fill-color: var(--_placeholder-text-color);
1188
1065
  }
1189
1066
  }
1190
1067
 
@@ -1200,16 +1077,42 @@
1200
1077
  align-items: center;
1201
1078
  gap: var(--eds-typography-gap-horizontal);
1202
1079
  flex-shrink: 0;
1203
- }
1204
-
1205
- /* Adornment text (prefix/suffix) */
1206
- .eds-adornment__text {
1207
1080
  color: var(--eds-color-text-subtle);
1208
1081
  }
1209
1082
 
1210
- /* Adornment icons */
1083
+ /* Adornment icons and buttons */
1211
1084
  .eds-adornment__adornment {
1212
- color: var(--eds-color-text-subtle);
1085
+ display: flex;
1086
+ align-items: center;
1087
+ }
1088
+
1089
+ /* Prevent button from expanding Input (Button size="small" is 24px, Input needs 20px) */
1090
+ .eds-adornment__adornment:has(button) {
1091
+ block-size: var(--eds-typography-ui-body-md-line-height-default);
1092
+ }
1093
+
1094
+ /* Make button fit the 20px space to match Input content height */
1095
+ .eds-adornment__adornment button {
1096
+ inline-size: var(--eds-typography-ui-body-md-line-height-default);
1097
+ block-size: var(--eds-typography-ui-body-md-line-height-default);
1098
+ padding: 0;
1099
+ }
1100
+
1101
+ /* Negative margin aligns buttons with icon adornments
1102
+ Applied to wrapper to avoid [data-font-family] margin override */
1103
+
1104
+ /* End adornment */
1105
+ .eds-input ~ .eds-adornment .eds-adornment__adornment:has(button) {
1106
+ margin-inline-end: calc(
1107
+ (var(--eds-sizing-icon-xs) - var(--eds-typography-ui-body-md-line-height-default)) / 2
1108
+ );
1109
+ }
1110
+
1111
+ /* Start adornment */
1112
+ .eds-adornment:has(~ .eds-input) .eds-adornment__adornment:has(button) {
1113
+ margin-inline-start: calc(
1114
+ (var(--eds-sizing-icon-xs) - var(--eds-typography-ui-body-md-line-height-default)) / 2
1115
+ );
1213
1116
  }
1214
1117
  }
1215
1118
  @layer eds-components {
@@ -1222,31 +1125,10 @@
1222
1125
  }
1223
1126
 
1224
1127
  .eds-text-field__info {
1225
- display: inline-flex;
1226
- align-items: center;
1227
1128
  flex-shrink: 0;
1228
- padding: 0;
1229
- border: none;
1230
- background: transparent;
1231
- color: var(--eds-color-icon-subtle);
1232
- cursor: pointer;
1129
+ /* Negative margin collapses the button's 24px layout contribution to ~8px,
1130
+ matching Figma's 8px icon container. Label text-box height determines row height. */
1233
1131
  margin-block: calc(var(--eds-sizing-icon-xs) / -2);
1234
-
1235
- &:hover,
1236
- &:focus-visible {
1237
- color: var(--eds-color-icon-info);
1238
-
1239
- & svg {
1240
- background: var(--eds-color-bg-fill-muted-hover);
1241
- border-radius: var(--eds-spacing-border-radius-pill);
1242
- }
1243
- }
1244
-
1245
- &:focus-visible {
1246
- outline: var(--eds-sizing-stroke-thick) solid var(--eds-color-focus);
1247
- outline-offset: var(--eds-sizing-stroke-thick);
1248
- border-radius: var(--eds-spacing-border-radius-pill);
1249
- }
1250
1132
  }
1251
1133
  }
1252
1134