@dnb/eufemia 9.16.3 → 9.18.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 (785) hide show
  1. package/CHANGELOG.md +50 -0
  2. package/assets/assets/icons/above_the_line.svg +1 -1
  3. package/assets/assets/icons/eufemia-icons-pdf-categorized.tgz +0 -0
  4. package/assets/assets/icons/eufemia-icons-pdf.tgz +0 -0
  5. package/assets/assets/icons/facebook.svg +3 -0
  6. package/assets/assets/icons/facebook_medium.svg +3 -0
  7. package/assets/assets/icons/fridge.svg +1 -1
  8. package/assets/assets/icons/information_circled.svg +2 -1
  9. package/assets/assets/icons/information_circled_medium.svg +2 -1
  10. package/assets/assets/icons/instagram.svg +5 -0
  11. package/assets/assets/icons/instagram_medium.svg +12 -0
  12. package/assets/assets/icons/linkedin.svg +3 -0
  13. package/assets/assets/icons/linkedin_medium.svg +3 -0
  14. package/assets/assets/icons/motorcycle_medium.svg +2 -2
  15. package/assets/assets/icons/paragraph.svg +1 -1
  16. package/assets/assets/icons/scooter_medium.svg +2 -2
  17. package/assets/assets/icons/tag.svg +4 -0
  18. package/assets/assets/icons/tag_medium.svg +4 -0
  19. package/assets/icons/above_the_line.svg +1 -1
  20. package/assets/icons/eufemia-icons-pdf-categorized.tgz +0 -0
  21. package/assets/icons/eufemia-icons-pdf.tgz +0 -0
  22. package/assets/icons/facebook.svg +3 -0
  23. package/assets/icons/facebook_medium.svg +3 -0
  24. package/assets/icons/fridge.svg +1 -1
  25. package/assets/icons/information_circled.svg +2 -1
  26. package/assets/icons/information_circled_medium.svg +2 -1
  27. package/assets/icons/instagram.svg +5 -0
  28. package/assets/icons/instagram_medium.svg +12 -0
  29. package/assets/icons/linkedin.svg +3 -0
  30. package/assets/icons/linkedin_medium.svg +3 -0
  31. package/assets/icons/motorcycle_medium.svg +2 -2
  32. package/assets/icons/paragraph.svg +1 -1
  33. package/assets/icons/scooter_medium.svg +2 -2
  34. package/assets/icons/tag.svg +4 -0
  35. package/assets/icons/tag_medium.svg +4 -0
  36. package/cjs/components/Tag.d.ts +14 -0
  37. package/cjs/components/Tag.js +52 -0
  38. package/cjs/components/accordion/Accordion.d.ts +7 -7
  39. package/cjs/components/autocomplete/Autocomplete.d.ts +13 -13
  40. package/cjs/components/autocomplete/style/dnb-autocomplete.css +0 -2
  41. package/cjs/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  42. package/cjs/components/breadcrumb/Breadcrumb.js +5 -3
  43. package/cjs/components/breadcrumb/style/_breadcrumb.scss +7 -4
  44. package/cjs/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  45. package/cjs/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  46. package/cjs/components/button/Button.d.ts +7 -7
  47. package/cjs/components/button/Button.js +7 -5
  48. package/cjs/components/button/style/_button.scss +0 -4
  49. package/cjs/components/button/style/dnb-button.css +0 -2
  50. package/cjs/components/button/style/dnb-button.min.css +1 -1
  51. package/cjs/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  52. package/cjs/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  53. package/cjs/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  54. package/cjs/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  55. package/cjs/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  56. package/cjs/components/checkbox/Checkbox.d.ts +3 -3
  57. package/cjs/components/date-picker/DatePicker.d.ts +14 -14
  58. package/cjs/components/date-picker/DatePickerAddon.d.ts +1 -1
  59. package/cjs/components/date-picker/DatePickerCalendar.d.ts +1 -1
  60. package/cjs/components/date-picker/DatePickerInput.d.ts +1 -1
  61. package/cjs/components/date-picker/style/dnb-date-picker.css +0 -6
  62. package/cjs/components/date-picker/style/dnb-date-picker.min.css +1 -1
  63. package/cjs/components/dropdown/Dropdown.d.ts +9 -9
  64. package/cjs/components/dropdown/style/dnb-dropdown.css +0 -2
  65. package/cjs/components/dropdown/style/dnb-dropdown.min.css +1 -1
  66. package/cjs/components/form-row/FormRow.d.ts +4 -4
  67. package/cjs/components/form-set/FormSet.d.ts +6 -6
  68. package/cjs/components/global-error/GlobalError.d.ts +1 -1
  69. package/cjs/components/global-error/style/dnb-global-error.css +0 -2
  70. package/cjs/components/global-error/style/dnb-global-error.min.css +1 -1
  71. package/cjs/components/global-status/GlobalStatus.d.ts +5 -5
  72. package/cjs/components/global-status/GlobalStatus.js +21 -73
  73. package/cjs/components/global-status/style/_global-status.scss +14 -12
  74. package/cjs/components/global-status/style/dnb-global-status.css +13 -17
  75. package/cjs/components/global-status/style/dnb-global-status.min.css +1 -1
  76. package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  77. package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  78. package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  79. package/cjs/components/heading/Heading.d.ts +2 -2
  80. package/cjs/components/heading/HeadingProvider.d.ts +2 -2
  81. package/cjs/components/help-button/HelpButton.d.ts +200 -0
  82. package/cjs/components/icon/Icon.d.ts +1 -1
  83. package/cjs/components/icon-primary/IconPrimary.d.ts +1 -1
  84. package/cjs/components/index.d.ts +2 -0
  85. package/cjs/components/index.js +8 -0
  86. package/cjs/components/input/Input.d.ts +9 -9
  87. package/cjs/components/input/style/dnb-input.css +0 -2
  88. package/cjs/components/input/style/dnb-input.min.css +1 -1
  89. package/cjs/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  90. package/cjs/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  91. package/cjs/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  92. package/cjs/components/input-masked/InputMasked.d.ts +11 -11
  93. package/cjs/components/input-masked/InputMasked.js +6 -3
  94. package/cjs/components/input-masked/InputMaskedElement.js +1 -4
  95. package/cjs/components/input-masked/InputMaskedHooks.js +68 -54
  96. package/cjs/components/input-masked/InputMaskedUtils.js +17 -22
  97. package/cjs/components/input-masked/style/dnb-input-masked.css +0 -2
  98. package/cjs/components/input-masked/style/dnb-input-masked.min.css +1 -1
  99. package/cjs/components/lib.js +9 -0
  100. package/cjs/components/modal/Modal.js +158 -300
  101. package/cjs/components/modal/ModalContent.js +183 -272
  102. package/cjs/components/modal/ModalRoot.js +194 -0
  103. package/cjs/components/modal/components/CloseButton.js +125 -0
  104. package/cjs/components/modal/components/ModalHeader.js +124 -0
  105. package/cjs/components/modal/{ModalHeader.js → components/ModalHeaderBar.js} +50 -162
  106. package/cjs/components/modal/{ModalInner.js → components/ModalInner.js} +11 -19
  107. package/cjs/components/modal/helpers.js +80 -0
  108. package/cjs/components/modal/style/_modal-mixins.scss +4 -4
  109. package/cjs/components/modal/style/_modal.scss +13 -30
  110. package/cjs/components/modal/style/dnb-modal.css +27 -47
  111. package/cjs/components/modal/style/dnb-modal.min.css +1 -1
  112. package/cjs/components/modal/types.js +1 -0
  113. package/cjs/components/number-format/NumberFormat.d.ts +8 -8
  114. package/cjs/components/pagination/Pagination.d.ts +30 -30
  115. package/cjs/components/pagination/PaginationProvider.d.ts +2 -2
  116. package/cjs/components/pagination/style/dnb-pagination.css +0 -2
  117. package/cjs/components/pagination/style/dnb-pagination.min.css +1 -1
  118. package/cjs/components/radio/Radio.d.ts +4 -4
  119. package/cjs/components/radio/RadioGroup.d.ts +3 -3
  120. package/cjs/components/section/Section.d.ts +3 -2
  121. package/cjs/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  122. package/cjs/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  123. package/cjs/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  124. package/cjs/components/skeleton/Skeleton.d.ts +2 -2
  125. package/cjs/components/slider/Slider.d.ts +4 -4
  126. package/cjs/components/slider/style/dnb-slider.css +0 -2
  127. package/cjs/components/slider/style/dnb-slider.min.css +1 -1
  128. package/cjs/components/step-indicator/StepIndicator.d.ts +6 -6
  129. package/cjs/components/step-indicator/StepIndicator.js +4 -98
  130. package/cjs/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  131. package/cjs/components/step-indicator/StepIndicatorContext.js +221 -19
  132. package/cjs/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  133. package/cjs/components/step-indicator/StepIndicatorItem.js +4 -6
  134. package/cjs/components/step-indicator/StepIndicatorModal.js +40 -49
  135. package/cjs/components/step-indicator/StepIndicatorProps.js +1 -1
  136. package/cjs/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  137. package/cjs/components/step-indicator/StepIndicatorSidebar.js +57 -54
  138. package/cjs/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  139. package/cjs/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  140. package/cjs/components/step-indicator/style/_step-indicator.scss +17 -4
  141. package/cjs/components/step-indicator/style/dnb-step-indicator.css +14 -6
  142. package/cjs/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  143. package/cjs/components/switch/Switch.d.ts +5 -5
  144. package/cjs/components/tabs/Tabs.d.ts +4 -4
  145. package/cjs/components/tabs/TabsContentWrapper.d.ts +1 -1
  146. package/cjs/components/tag/Tag.js +97 -0
  147. package/cjs/components/tag/index.d.ts +8 -0
  148. package/cjs/components/tag/index.js +52 -0
  149. package/cjs/components/tag/style/_tag.scss +26 -0
  150. package/cjs/components/tag/style/dnb-tag.css +109 -0
  151. package/cjs/components/tag/style/dnb-tag.min.css +1 -0
  152. package/cjs/components/tag/style/dnb-tag.scss +12 -0
  153. package/cjs/components/tag/style/index.d.ts +6 -0
  154. package/cjs/components/tag/style/index.js +3 -0
  155. package/cjs/components/tag/style.js +3 -0
  156. package/cjs/components/textarea/Textarea.d.ts +4 -4
  157. package/cjs/components/textarea/style/_textarea.scss +4 -0
  158. package/cjs/components/textarea/style/dnb-textarea.css +3 -0
  159. package/cjs/components/textarea/style/dnb-textarea.min.css +1 -1
  160. package/cjs/components/toggle-button/ToggleButton.d.ts +6 -6
  161. package/cjs/components/toggle-button/ToggleButton.js +6 -2
  162. package/cjs/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  163. package/cjs/components/toggle-button/style/dnb-toggle-button.css +0 -2
  164. package/cjs/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  165. package/cjs/components/tooltip/Tooltip.d.ts +5 -5
  166. package/cjs/components/tooltip/TooltipContainer.d.ts +3 -3
  167. package/cjs/components/tooltip/TooltipPortal.d.ts +1 -1
  168. package/cjs/components/tooltip/TooltipWithEvents.d.ts +1 -1
  169. package/cjs/fragments/scroll-view/ScrollView.js +7 -16
  170. package/cjs/icons/above_the_line.js +1 -1
  171. package/cjs/icons/facebook.js +35 -0
  172. package/cjs/icons/facebook_medium.js +35 -0
  173. package/cjs/icons/fridge.js +1 -1
  174. package/cjs/icons/icons-meta.json +24 -0
  175. package/cjs/icons/icons-pdf.lock +1 -1
  176. package/cjs/icons/icons-svg.lock +1 -1
  177. package/cjs/icons/index.d.ts +16 -0
  178. package/cjs/icons/index.js +64 -0
  179. package/cjs/icons/information_circled.js +11 -4
  180. package/cjs/icons/information_circled_medium.js +10 -4
  181. package/cjs/icons/instagram.js +47 -0
  182. package/cjs/icons/instagram_medium.js +54 -0
  183. package/cjs/icons/linkedin.js +32 -0
  184. package/cjs/icons/linkedin_medium.js +32 -0
  185. package/cjs/icons/motorcycle_medium.js +2 -2
  186. package/cjs/icons/paragraph.js +1 -1
  187. package/cjs/icons/scooter_medium.js +2 -2
  188. package/cjs/icons/secondary_icons.js +32 -0
  189. package/cjs/icons/secondary_icons_medium.js +32 -0
  190. package/cjs/icons/tag.js +41 -0
  191. package/cjs/icons/tag_medium.js +41 -0
  192. package/cjs/index.d.ts +2 -0
  193. package/cjs/index.js +8 -0
  194. package/cjs/shared/Context.js +2 -1
  195. package/cjs/shared/EventEmitter.js +6 -8
  196. package/cjs/shared/component-helper.js +108 -76
  197. package/cjs/shared/helpers.js +36 -11
  198. package/cjs/style/core/helper-classes/skip-link.scss +1 -1
  199. package/cjs/style/dnb-ui-components.css +107 -76
  200. package/cjs/style/dnb-ui-components.min.css +5 -5
  201. package/cjs/style/dnb-ui-components.scss +1 -0
  202. package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  203. package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  204. package/cjs/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  205. package/cjs/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  206. package/components/Tag.d.ts +14 -0
  207. package/components/Tag.js +3 -0
  208. package/components/accordion/Accordion.d.ts +7 -7
  209. package/components/autocomplete/Autocomplete.d.ts +13 -13
  210. package/components/autocomplete/style/dnb-autocomplete.css +0 -2
  211. package/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  212. package/components/breadcrumb/Breadcrumb.js +5 -3
  213. package/components/breadcrumb/Breadcrumb.tsx +9 -0
  214. package/components/breadcrumb/style/_breadcrumb.scss +7 -4
  215. package/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  216. package/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  217. package/components/button/Button.d.ts +7 -7
  218. package/components/button/Button.js +7 -5
  219. package/components/button/style/_button.scss +0 -4
  220. package/components/button/style/dnb-button.css +0 -2
  221. package/components/button/style/dnb-button.min.css +1 -1
  222. package/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  223. package/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  224. package/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  225. package/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  226. package/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  227. package/components/checkbox/Checkbox.d.ts +3 -3
  228. package/components/date-picker/DatePicker.d.ts +14 -14
  229. package/components/date-picker/DatePickerAddon.d.ts +1 -1
  230. package/components/date-picker/DatePickerCalendar.d.ts +1 -1
  231. package/components/date-picker/DatePickerInput.d.ts +1 -1
  232. package/components/date-picker/style/dnb-date-picker.css +0 -6
  233. package/components/date-picker/style/dnb-date-picker.min.css +1 -1
  234. package/components/dropdown/Dropdown.d.ts +9 -9
  235. package/components/dropdown/style/dnb-dropdown.css +0 -2
  236. package/components/dropdown/style/dnb-dropdown.min.css +1 -1
  237. package/components/form-row/FormRow.d.ts +4 -4
  238. package/components/form-set/FormSet.d.ts +6 -6
  239. package/components/global-error/GlobalError.d.ts +1 -1
  240. package/components/global-error/style/dnb-global-error.css +0 -2
  241. package/components/global-error/style/dnb-global-error.min.css +1 -1
  242. package/components/global-status/GlobalStatus.d.ts +5 -5
  243. package/components/global-status/GlobalStatus.js +18 -71
  244. package/components/global-status/style/_global-status.scss +14 -12
  245. package/components/global-status/style/dnb-global-status.css +13 -17
  246. package/components/global-status/style/dnb-global-status.min.css +1 -1
  247. package/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  248. package/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  249. package/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  250. package/components/heading/Heading.d.ts +2 -2
  251. package/components/heading/HeadingProvider.d.ts +2 -2
  252. package/components/help-button/HelpButton.d.ts +200 -0
  253. package/components/icon/Icon.d.ts +1 -1
  254. package/components/index.d.ts +2 -0
  255. package/components/index.js +2 -1
  256. package/components/input/Input.d.ts +9 -9
  257. package/components/input/style/dnb-input.css +0 -2
  258. package/components/input/style/dnb-input.min.css +1 -1
  259. package/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  260. package/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  261. package/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  262. package/components/input-masked/InputMasked.d.ts +11 -11
  263. package/components/input-masked/InputMasked.js +6 -4
  264. package/components/input-masked/InputMaskedElement.js +1 -4
  265. package/components/input-masked/InputMaskedHooks.js +66 -48
  266. package/components/input-masked/InputMaskedUtils.js +18 -23
  267. package/components/input-masked/style/dnb-input-masked.css +0 -2
  268. package/components/input-masked/style/dnb-input-masked.min.css +1 -1
  269. package/components/lib.js +3 -1
  270. package/components/modal/Modal.js +147 -279
  271. package/components/modal/Modal.tsx +524 -0
  272. package/components/modal/ModalContent.js +175 -253
  273. package/components/modal/ModalContent.tsx +515 -0
  274. package/components/modal/ModalContext.tsx +10 -0
  275. package/components/modal/ModalRoot.js +145 -0
  276. package/components/modal/ModalRoot.tsx +131 -0
  277. package/components/modal/components/CloseButton.js +72 -0
  278. package/components/modal/components/CloseButton.tsx +56 -0
  279. package/components/modal/components/ModalHeader.js +70 -0
  280. package/components/modal/components/ModalHeader.tsx +79 -0
  281. package/components/modal/components/ModalHeaderBar.js +122 -0
  282. package/components/modal/components/ModalHeaderBar.tsx +118 -0
  283. package/components/modal/{ModalInner.js → components/ModalInner.js} +11 -17
  284. package/components/modal/components/ModalInner.tsx +45 -0
  285. package/components/modal/helpers.js +64 -0
  286. package/components/modal/helpers.ts +63 -0
  287. package/components/modal/style/_modal-mixins.scss +4 -4
  288. package/components/modal/style/_modal.scss +13 -30
  289. package/components/modal/style/dnb-modal.css +27 -47
  290. package/components/modal/style/dnb-modal.min.css +1 -1
  291. package/components/modal/types.js +1 -0
  292. package/{cjs/components/modal/Modal.d.ts → components/modal/types.ts} +125 -179
  293. package/components/number-format/NumberFormat.d.ts +8 -8
  294. package/components/pagination/Pagination.d.ts +30 -30
  295. package/components/pagination/PaginationProvider.d.ts +2 -2
  296. package/components/pagination/style/dnb-pagination.css +0 -2
  297. package/components/pagination/style/dnb-pagination.min.css +1 -1
  298. package/components/radio/Radio.d.ts +4 -4
  299. package/components/radio/RadioGroup.d.ts +3 -3
  300. package/components/section/Section.d.ts +3 -1
  301. package/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  302. package/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  303. package/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  304. package/components/skeleton/Skeleton.d.ts +2 -2
  305. package/components/slider/Slider.d.ts +4 -4
  306. package/components/slider/style/dnb-slider.css +0 -2
  307. package/components/slider/style/dnb-slider.min.css +1 -1
  308. package/components/step-indicator/StepIndicator.d.ts +6 -6
  309. package/components/step-indicator/StepIndicator.js +4 -91
  310. package/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  311. package/components/step-indicator/StepIndicatorContext.js +196 -18
  312. package/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  313. package/components/step-indicator/StepIndicatorItem.js +3 -5
  314. package/components/step-indicator/StepIndicatorModal.js +33 -32
  315. package/components/step-indicator/StepIndicatorProps.js +1 -1
  316. package/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  317. package/components/step-indicator/StepIndicatorSidebar.js +54 -52
  318. package/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  319. package/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  320. package/components/step-indicator/style/_step-indicator.scss +17 -4
  321. package/components/step-indicator/style/dnb-step-indicator.css +14 -6
  322. package/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  323. package/components/switch/Switch.d.ts +5 -5
  324. package/components/tabs/Tabs.d.ts +4 -4
  325. package/components/tabs/TabsContentWrapper.d.ts +1 -1
  326. package/components/tag/Tag.js +63 -0
  327. package/components/tag/Tag.tsx +95 -0
  328. package/components/tag/index.d.ts +8 -0
  329. package/components/tag/index.js +3 -0
  330. package/components/tag/style/_tag.scss +26 -0
  331. package/components/tag/style/dnb-tag.css +109 -0
  332. package/components/tag/style/dnb-tag.min.css +1 -0
  333. package/components/tag/style/dnb-tag.scss +12 -0
  334. package/components/tag/style/index.d.ts +6 -0
  335. package/components/tag/style/index.js +1 -0
  336. package/components/tag/style.js +1 -0
  337. package/components/textarea/Textarea.d.ts +4 -4
  338. package/components/textarea/style/_textarea.scss +4 -0
  339. package/components/textarea/style/dnb-textarea.css +3 -0
  340. package/components/textarea/style/dnb-textarea.min.css +1 -1
  341. package/components/toggle-button/ToggleButton.d.ts +6 -6
  342. package/components/toggle-button/ToggleButton.js +6 -2
  343. package/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  344. package/components/toggle-button/style/dnb-toggle-button.css +0 -2
  345. package/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  346. package/components/tooltip/Tooltip.d.ts +5 -5
  347. package/components/tooltip/TooltipContainer.d.ts +3 -3
  348. package/components/tooltip/TooltipPortal.d.ts +1 -1
  349. package/components/tooltip/TooltipWithEvents.d.ts +1 -1
  350. package/es/components/Tag.d.ts +14 -0
  351. package/es/components/Tag.js +3 -0
  352. package/es/components/accordion/Accordion.d.ts +7 -7
  353. package/es/components/autocomplete/Autocomplete.d.ts +13 -13
  354. package/es/components/autocomplete/style/dnb-autocomplete.css +0 -2
  355. package/es/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  356. package/es/components/breadcrumb/Breadcrumb.js +5 -3
  357. package/es/components/breadcrumb/Breadcrumb.tsx +9 -0
  358. package/es/components/breadcrumb/style/_breadcrumb.scss +7 -4
  359. package/es/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  360. package/es/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  361. package/es/components/button/Button.d.ts +7 -7
  362. package/es/components/button/Button.js +8 -5
  363. package/es/components/button/style/_button.scss +0 -4
  364. package/es/components/button/style/dnb-button.css +0 -2
  365. package/es/components/button/style/dnb-button.min.css +1 -1
  366. package/es/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  367. package/es/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  368. package/es/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  369. package/es/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  370. package/es/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  371. package/es/components/checkbox/Checkbox.d.ts +3 -3
  372. package/es/components/date-picker/DatePicker.d.ts +14 -14
  373. package/es/components/date-picker/DatePickerAddon.d.ts +1 -1
  374. package/es/components/date-picker/DatePickerCalendar.d.ts +1 -1
  375. package/es/components/date-picker/DatePickerInput.d.ts +1 -1
  376. package/es/components/date-picker/style/dnb-date-picker.css +0 -6
  377. package/es/components/date-picker/style/dnb-date-picker.min.css +1 -1
  378. package/es/components/dropdown/Dropdown.d.ts +9 -9
  379. package/es/components/dropdown/style/dnb-dropdown.css +0 -2
  380. package/es/components/dropdown/style/dnb-dropdown.min.css +1 -1
  381. package/es/components/form-row/FormRow.d.ts +4 -4
  382. package/es/components/form-set/FormSet.d.ts +6 -6
  383. package/es/components/global-error/GlobalError.d.ts +1 -1
  384. package/es/components/global-error/style/dnb-global-error.css +0 -2
  385. package/es/components/global-error/style/dnb-global-error.min.css +1 -1
  386. package/es/components/global-status/GlobalStatus.d.ts +5 -5
  387. package/es/components/global-status/GlobalStatus.js +18 -67
  388. package/es/components/global-status/style/_global-status.scss +14 -12
  389. package/es/components/global-status/style/dnb-global-status.css +13 -17
  390. package/es/components/global-status/style/dnb-global-status.min.css +1 -1
  391. package/es/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  392. package/es/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  393. package/es/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  394. package/es/components/heading/Heading.d.ts +2 -2
  395. package/es/components/heading/HeadingProvider.d.ts +2 -2
  396. package/es/components/help-button/HelpButton.d.ts +200 -0
  397. package/es/components/icon/Icon.d.ts +1 -1
  398. package/es/components/icon-primary/IconPrimary.d.ts +1 -1
  399. package/es/components/index.d.ts +2 -0
  400. package/es/components/index.js +2 -1
  401. package/es/components/input/Input.d.ts +9 -9
  402. package/es/components/input/style/dnb-input.css +0 -2
  403. package/es/components/input/style/dnb-input.min.css +1 -1
  404. package/es/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  405. package/es/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  406. package/es/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  407. package/es/components/input-masked/InputMasked.d.ts +11 -11
  408. package/es/components/input-masked/InputMasked.js +6 -4
  409. package/es/components/input-masked/InputMaskedElement.js +1 -4
  410. package/es/components/input-masked/InputMaskedHooks.js +50 -34
  411. package/es/components/input-masked/InputMaskedUtils.js +16 -21
  412. package/es/components/input-masked/style/dnb-input-masked.css +0 -2
  413. package/es/components/input-masked/style/dnb-input-masked.min.css +1 -1
  414. package/es/components/lib.js +3 -1
  415. package/es/components/modal/Modal.js +128 -252
  416. package/es/components/modal/Modal.tsx +524 -0
  417. package/es/components/modal/ModalContent.js +131 -211
  418. package/es/components/modal/ModalContent.tsx +515 -0
  419. package/es/components/modal/ModalContext.tsx +10 -0
  420. package/es/components/modal/ModalRoot.js +108 -0
  421. package/es/components/modal/ModalRoot.tsx +131 -0
  422. package/es/components/modal/components/CloseButton.js +41 -0
  423. package/es/components/modal/components/CloseButton.tsx +56 -0
  424. package/es/components/modal/components/ModalHeader.js +40 -0
  425. package/es/components/modal/components/ModalHeader.tsx +79 -0
  426. package/es/components/modal/components/ModalHeaderBar.js +88 -0
  427. package/es/components/modal/components/ModalHeaderBar.tsx +118 -0
  428. package/es/components/modal/{ModalInner.js → components/ModalInner.js} +8 -18
  429. package/es/components/modal/components/ModalInner.tsx +45 -0
  430. package/es/components/modal/helpers.js +60 -0
  431. package/es/components/modal/helpers.ts +63 -0
  432. package/es/components/modal/style/_modal-mixins.scss +4 -4
  433. package/es/components/modal/style/_modal.scss +13 -30
  434. package/es/components/modal/style/dnb-modal.css +27 -47
  435. package/es/components/modal/style/dnb-modal.min.css +1 -1
  436. package/es/components/modal/types.js +1 -0
  437. package/es/components/modal/{Modal.d.ts → types.ts} +125 -179
  438. package/es/components/number-format/NumberFormat.d.ts +8 -8
  439. package/es/components/pagination/Pagination.d.ts +30 -30
  440. package/es/components/pagination/PaginationProvider.d.ts +2 -2
  441. package/es/components/pagination/style/dnb-pagination.css +0 -2
  442. package/es/components/pagination/style/dnb-pagination.min.css +1 -1
  443. package/es/components/radio/Radio.d.ts +4 -4
  444. package/es/components/radio/RadioGroup.d.ts +3 -3
  445. package/es/components/section/Section.d.ts +3 -2
  446. package/es/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  447. package/es/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  448. package/es/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  449. package/es/components/skeleton/Skeleton.d.ts +2 -2
  450. package/es/components/slider/Slider.d.ts +4 -4
  451. package/es/components/slider/style/dnb-slider.css +0 -2
  452. package/es/components/slider/style/dnb-slider.min.css +1 -1
  453. package/es/components/step-indicator/StepIndicator.d.ts +6 -6
  454. package/es/components/step-indicator/StepIndicator.js +3 -79
  455. package/es/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  456. package/es/components/step-indicator/StepIndicatorContext.js +165 -17
  457. package/es/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  458. package/es/components/step-indicator/StepIndicatorItem.js +2 -5
  459. package/es/components/step-indicator/StepIndicatorModal.js +31 -34
  460. package/es/components/step-indicator/StepIndicatorProps.js +1 -1
  461. package/es/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  462. package/es/components/step-indicator/StepIndicatorSidebar.js +44 -46
  463. package/es/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  464. package/es/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  465. package/es/components/step-indicator/style/_step-indicator.scss +17 -4
  466. package/es/components/step-indicator/style/dnb-step-indicator.css +14 -6
  467. package/es/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  468. package/es/components/switch/Switch.d.ts +5 -5
  469. package/es/components/tabs/Tabs.d.ts +4 -4
  470. package/es/components/tabs/TabsContentWrapper.d.ts +1 -1
  471. package/es/components/tag/Tag.js +58 -0
  472. package/es/components/tag/Tag.tsx +95 -0
  473. package/es/components/tag/index.d.ts +8 -0
  474. package/es/components/tag/index.js +3 -0
  475. package/es/components/tag/style/_tag.scss +26 -0
  476. package/es/components/tag/style/dnb-tag.css +109 -0
  477. package/es/components/tag/style/dnb-tag.min.css +1 -0
  478. package/es/components/tag/style/dnb-tag.scss +12 -0
  479. package/es/components/tag/style/index.d.ts +6 -0
  480. package/es/components/tag/style/index.js +1 -0
  481. package/es/components/tag/style.js +1 -0
  482. package/es/components/textarea/Textarea.d.ts +4 -4
  483. package/es/components/textarea/style/_textarea.scss +4 -0
  484. package/es/components/textarea/style/dnb-textarea.css +3 -0
  485. package/es/components/textarea/style/dnb-textarea.min.css +1 -1
  486. package/es/components/toggle-button/ToggleButton.d.ts +6 -6
  487. package/es/components/toggle-button/ToggleButton.js +6 -2
  488. package/es/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  489. package/es/components/toggle-button/style/dnb-toggle-button.css +0 -2
  490. package/es/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  491. package/es/components/tooltip/Tooltip.d.ts +5 -5
  492. package/es/components/tooltip/TooltipContainer.d.ts +3 -3
  493. package/es/components/tooltip/TooltipPortal.d.ts +1 -1
  494. package/es/components/tooltip/TooltipWithEvents.d.ts +1 -1
  495. package/es/fragments/scroll-view/ScrollView.js +7 -15
  496. package/es/fragments/scroll-view/ScrollView.tsx +92 -0
  497. package/es/icons/above_the_line.js +1 -1
  498. package/es/icons/facebook.js +23 -0
  499. package/es/icons/facebook_medium.js +23 -0
  500. package/es/icons/fridge.js +1 -1
  501. package/es/icons/icons-meta.json +24 -0
  502. package/es/icons/icons-pdf.lock +1 -1
  503. package/es/icons/icons-svg.lock +1 -1
  504. package/es/icons/index.d.ts +16 -0
  505. package/es/icons/index.js +9 -1
  506. package/es/icons/information_circled.js +11 -4
  507. package/es/icons/information_circled_medium.js +10 -4
  508. package/es/icons/instagram.js +35 -0
  509. package/es/icons/instagram_medium.js +42 -0
  510. package/es/icons/linkedin.js +20 -0
  511. package/es/icons/linkedin_medium.js +20 -0
  512. package/es/icons/motorcycle_medium.js +2 -2
  513. package/es/icons/paragraph.js +1 -1
  514. package/es/icons/scooter_medium.js +2 -2
  515. package/es/icons/secondary_icons.js +5 -1
  516. package/es/icons/secondary_icons_medium.js +5 -1
  517. package/es/icons/tag.js +29 -0
  518. package/es/icons/tag_medium.js +29 -0
  519. package/es/index.d.ts +2 -0
  520. package/es/index.js +2 -1
  521. package/es/shared/Context.js +2 -1
  522. package/es/shared/EventEmitter.js +5 -8
  523. package/es/shared/component-helper.js +58 -50
  524. package/es/shared/helpers.js +11 -2
  525. package/es/style/core/helper-classes/skip-link.scss +1 -1
  526. package/es/style/dnb-ui-components.css +107 -76
  527. package/es/style/dnb-ui-components.min.css +5 -5
  528. package/es/style/dnb-ui-components.scss +1 -0
  529. package/es/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  530. package/es/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  531. package/es/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  532. package/es/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  533. package/esm/components/Tag.d.ts +14 -0
  534. package/esm/components/Tag.js +3 -0
  535. package/esm/components/accordion/Accordion.d.ts +7 -7
  536. package/esm/components/autocomplete/Autocomplete.d.ts +13 -13
  537. package/esm/components/autocomplete/style/dnb-autocomplete.css +0 -2
  538. package/esm/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  539. package/esm/components/breadcrumb/Breadcrumb.js +5 -3
  540. package/esm/components/breadcrumb/Breadcrumb.tsx +9 -0
  541. package/esm/components/breadcrumb/style/_breadcrumb.scss +7 -4
  542. package/esm/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  543. package/esm/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  544. package/esm/components/button/Button.d.ts +7 -7
  545. package/esm/components/button/Button.js +7 -5
  546. package/esm/components/button/style/_button.scss +0 -4
  547. package/esm/components/button/style/dnb-button.css +0 -2
  548. package/esm/components/button/style/dnb-button.min.css +1 -1
  549. package/esm/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  550. package/esm/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  551. package/esm/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  552. package/esm/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  553. package/esm/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  554. package/esm/components/checkbox/Checkbox.d.ts +3 -3
  555. package/esm/components/date-picker/DatePicker.d.ts +14 -14
  556. package/esm/components/date-picker/DatePickerAddon.d.ts +1 -1
  557. package/esm/components/date-picker/DatePickerCalendar.d.ts +1 -1
  558. package/esm/components/date-picker/DatePickerInput.d.ts +1 -1
  559. package/esm/components/date-picker/style/dnb-date-picker.css +0 -6
  560. package/esm/components/date-picker/style/dnb-date-picker.min.css +1 -1
  561. package/esm/components/dropdown/Dropdown.d.ts +9 -9
  562. package/esm/components/dropdown/style/dnb-dropdown.css +0 -2
  563. package/esm/components/dropdown/style/dnb-dropdown.min.css +1 -1
  564. package/esm/components/form-row/FormRow.d.ts +4 -4
  565. package/esm/components/form-set/FormSet.d.ts +6 -6
  566. package/esm/components/global-error/GlobalError.d.ts +1 -1
  567. package/esm/components/global-error/style/dnb-global-error.css +0 -2
  568. package/esm/components/global-error/style/dnb-global-error.min.css +1 -1
  569. package/esm/components/global-status/GlobalStatus.d.ts +5 -5
  570. package/esm/components/global-status/GlobalStatus.js +18 -71
  571. package/esm/components/global-status/style/_global-status.scss +14 -12
  572. package/esm/components/global-status/style/dnb-global-status.css +13 -17
  573. package/esm/components/global-status/style/dnb-global-status.min.css +1 -1
  574. package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  575. package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  576. package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  577. package/esm/components/heading/Heading.d.ts +2 -2
  578. package/esm/components/heading/HeadingProvider.d.ts +2 -2
  579. package/esm/components/help-button/HelpButton.d.ts +200 -0
  580. package/esm/components/icon/Icon.d.ts +1 -1
  581. package/esm/components/index.d.ts +2 -0
  582. package/esm/components/index.js +2 -1
  583. package/esm/components/input/Input.d.ts +9 -9
  584. package/esm/components/input/style/dnb-input.css +0 -2
  585. package/esm/components/input/style/dnb-input.min.css +1 -1
  586. package/esm/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  587. package/esm/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  588. package/esm/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  589. package/esm/components/input-masked/InputMasked.d.ts +11 -11
  590. package/esm/components/input-masked/InputMasked.js +6 -4
  591. package/esm/components/input-masked/InputMaskedElement.js +1 -4
  592. package/esm/components/input-masked/InputMaskedHooks.js +66 -48
  593. package/esm/components/input-masked/InputMaskedUtils.js +18 -23
  594. package/esm/components/input-masked/style/dnb-input-masked.css +0 -2
  595. package/esm/components/input-masked/style/dnb-input-masked.min.css +1 -1
  596. package/esm/components/lib.js +3 -1
  597. package/esm/components/modal/Modal.js +147 -279
  598. package/esm/components/modal/Modal.tsx +524 -0
  599. package/esm/components/modal/ModalContent.js +175 -253
  600. package/esm/components/modal/ModalContent.tsx +515 -0
  601. package/esm/components/modal/ModalContext.tsx +10 -0
  602. package/esm/components/modal/ModalRoot.js +145 -0
  603. package/esm/components/modal/ModalRoot.tsx +131 -0
  604. package/esm/components/modal/components/CloseButton.js +72 -0
  605. package/esm/components/modal/components/CloseButton.tsx +56 -0
  606. package/esm/components/modal/components/ModalHeader.js +70 -0
  607. package/esm/components/modal/components/ModalHeader.tsx +79 -0
  608. package/esm/components/modal/components/ModalHeaderBar.js +122 -0
  609. package/esm/components/modal/components/ModalHeaderBar.tsx +118 -0
  610. package/esm/components/modal/{ModalInner.js → components/ModalInner.js} +11 -17
  611. package/esm/components/modal/components/ModalInner.tsx +45 -0
  612. package/esm/components/modal/helpers.js +64 -0
  613. package/esm/components/modal/helpers.ts +63 -0
  614. package/esm/components/modal/style/_modal-mixins.scss +4 -4
  615. package/esm/components/modal/style/_modal.scss +13 -30
  616. package/esm/components/modal/style/dnb-modal.css +27 -47
  617. package/esm/components/modal/style/dnb-modal.min.css +1 -1
  618. package/esm/components/modal/types.js +1 -0
  619. package/esm/components/modal/{Modal.d.ts → types.ts} +125 -179
  620. package/esm/components/number-format/NumberFormat.d.ts +8 -8
  621. package/esm/components/pagination/Pagination.d.ts +30 -30
  622. package/esm/components/pagination/PaginationProvider.d.ts +2 -2
  623. package/esm/components/pagination/style/dnb-pagination.css +0 -2
  624. package/esm/components/pagination/style/dnb-pagination.min.css +1 -1
  625. package/esm/components/radio/Radio.d.ts +4 -4
  626. package/esm/components/radio/RadioGroup.d.ts +3 -3
  627. package/esm/components/section/Section.d.ts +3 -1
  628. package/esm/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  629. package/esm/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  630. package/esm/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  631. package/esm/components/skeleton/Skeleton.d.ts +2 -2
  632. package/esm/components/slider/Slider.d.ts +4 -4
  633. package/esm/components/slider/style/dnb-slider.css +0 -2
  634. package/esm/components/slider/style/dnb-slider.min.css +1 -1
  635. package/esm/components/step-indicator/StepIndicator.d.ts +6 -6
  636. package/esm/components/step-indicator/StepIndicator.js +4 -91
  637. package/esm/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  638. package/esm/components/step-indicator/StepIndicatorContext.js +196 -18
  639. package/esm/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  640. package/esm/components/step-indicator/StepIndicatorItem.js +3 -5
  641. package/esm/components/step-indicator/StepIndicatorModal.js +33 -32
  642. package/esm/components/step-indicator/StepIndicatorProps.js +1 -1
  643. package/esm/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  644. package/esm/components/step-indicator/StepIndicatorSidebar.js +54 -52
  645. package/esm/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  646. package/esm/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  647. package/esm/components/step-indicator/style/_step-indicator.scss +17 -4
  648. package/esm/components/step-indicator/style/dnb-step-indicator.css +14 -6
  649. package/esm/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  650. package/esm/components/switch/Switch.d.ts +5 -5
  651. package/esm/components/tabs/Tabs.d.ts +4 -4
  652. package/esm/components/tabs/TabsContentWrapper.d.ts +1 -1
  653. package/esm/components/tag/Tag.js +63 -0
  654. package/esm/components/tag/Tag.tsx +95 -0
  655. package/esm/components/tag/index.d.ts +8 -0
  656. package/esm/components/tag/index.js +3 -0
  657. package/esm/components/tag/style/_tag.scss +26 -0
  658. package/esm/components/tag/style/dnb-tag.css +109 -0
  659. package/esm/components/tag/style/dnb-tag.min.css +1 -0
  660. package/esm/components/tag/style/dnb-tag.scss +12 -0
  661. package/esm/components/tag/style/index.d.ts +6 -0
  662. package/esm/components/tag/style/index.js +1 -0
  663. package/esm/components/tag/style.js +1 -0
  664. package/esm/components/textarea/Textarea.d.ts +4 -4
  665. package/esm/components/textarea/style/_textarea.scss +4 -0
  666. package/esm/components/textarea/style/dnb-textarea.css +3 -0
  667. package/esm/components/textarea/style/dnb-textarea.min.css +1 -1
  668. package/esm/components/toggle-button/ToggleButton.d.ts +6 -6
  669. package/esm/components/toggle-button/ToggleButton.js +6 -2
  670. package/esm/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  671. package/esm/components/toggle-button/style/dnb-toggle-button.css +0 -2
  672. package/esm/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  673. package/esm/components/tooltip/Tooltip.d.ts +5 -5
  674. package/esm/components/tooltip/TooltipContainer.d.ts +3 -3
  675. package/esm/components/tooltip/TooltipPortal.d.ts +1 -1
  676. package/esm/components/tooltip/TooltipWithEvents.d.ts +1 -1
  677. package/esm/dnb-ui-basis.min.mjs +2 -2
  678. package/esm/dnb-ui-components.min.mjs +3 -3
  679. package/esm/dnb-ui-elements.min.mjs +4 -4
  680. package/esm/dnb-ui-extensions.min.mjs +4 -4
  681. package/esm/dnb-ui-lib.min.mjs +4 -4
  682. package/esm/dnb-ui-web-components.min.mjs +4 -4
  683. package/esm/fragments/scroll-view/ScrollView.js +10 -16
  684. package/esm/fragments/scroll-view/ScrollView.tsx +92 -0
  685. package/esm/icons/above_the_line.js +1 -1
  686. package/esm/icons/facebook.js +23 -0
  687. package/esm/icons/facebook_medium.js +23 -0
  688. package/esm/icons/fridge.js +1 -1
  689. package/esm/icons/icons-meta.json +24 -0
  690. package/esm/icons/icons-pdf.lock +1 -1
  691. package/esm/icons/icons-svg.lock +1 -1
  692. package/esm/icons/index.d.ts +16 -0
  693. package/esm/icons/index.js +9 -1
  694. package/esm/icons/information_circled.js +11 -4
  695. package/esm/icons/information_circled_medium.js +10 -4
  696. package/esm/icons/instagram.js +35 -0
  697. package/esm/icons/instagram_medium.js +42 -0
  698. package/esm/icons/linkedin.js +20 -0
  699. package/esm/icons/linkedin_medium.js +20 -0
  700. package/esm/icons/motorcycle_medium.js +2 -2
  701. package/esm/icons/paragraph.js +1 -1
  702. package/esm/icons/scooter_medium.js +2 -2
  703. package/esm/icons/secondary_icons.js +5 -1
  704. package/esm/icons/secondary_icons_medium.js +5 -1
  705. package/esm/icons/tag.js +29 -0
  706. package/esm/icons/tag_medium.js +29 -0
  707. package/esm/index.d.ts +2 -0
  708. package/esm/index.js +2 -1
  709. package/esm/shared/Context.js +2 -1
  710. package/esm/shared/EventEmitter.js +6 -8
  711. package/esm/shared/component-helper.js +94 -59
  712. package/esm/shared/helpers.js +19 -2
  713. package/esm/style/core/helper-classes/skip-link.scss +1 -1
  714. package/esm/style/dnb-ui-components.css +107 -76
  715. package/esm/style/dnb-ui-components.min.css +5 -5
  716. package/esm/style/dnb-ui-components.scss +1 -0
  717. package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  718. package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  719. package/esm/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  720. package/esm/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  721. package/fragments/scroll-view/ScrollView.js +10 -16
  722. package/fragments/scroll-view/ScrollView.tsx +92 -0
  723. package/icons/above_the_line.js +1 -1
  724. package/icons/facebook.js +23 -0
  725. package/icons/facebook_medium.js +23 -0
  726. package/icons/fridge.js +1 -1
  727. package/icons/icons-meta.json +24 -0
  728. package/icons/icons-pdf.lock +1 -1
  729. package/icons/icons-svg.lock +1 -1
  730. package/icons/index.d.ts +16 -0
  731. package/icons/index.js +9 -1
  732. package/icons/information_circled.js +11 -4
  733. package/icons/information_circled_medium.js +10 -4
  734. package/icons/instagram.js +35 -0
  735. package/icons/instagram_medium.js +42 -0
  736. package/icons/linkedin.js +20 -0
  737. package/icons/linkedin_medium.js +20 -0
  738. package/icons/motorcycle_medium.js +2 -2
  739. package/icons/paragraph.js +1 -1
  740. package/icons/scooter_medium.js +2 -2
  741. package/icons/secondary_icons.js +5 -1
  742. package/icons/secondary_icons_medium.js +5 -1
  743. package/icons/tag.js +29 -0
  744. package/icons/tag_medium.js +29 -0
  745. package/index.d.ts +2 -0
  746. package/index.js +2 -1
  747. package/package.json +1 -1
  748. package/shared/Context.js +2 -1
  749. package/shared/EventEmitter.js +6 -8
  750. package/shared/component-helper.js +94 -59
  751. package/shared/helpers.js +19 -2
  752. package/style/core/helper-classes/skip-link.scss +1 -1
  753. package/style/dnb-ui-components.css +107 -76
  754. package/style/dnb-ui-components.min.css +5 -5
  755. package/style/dnb-ui-components.scss +1 -0
  756. package/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  757. package/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  758. package/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  759. package/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  760. package/umd/dnb-ui-basis.min.js +3 -3
  761. package/umd/dnb-ui-components.min.js +4 -4
  762. package/umd/dnb-ui-elements.min.js +5 -5
  763. package/umd/dnb-ui-extensions.min.js +5 -5
  764. package/umd/dnb-ui-lib.min.js +5 -5
  765. package/umd/dnb-ui-web-components.min.js +5 -5
  766. package/cjs/components/modal/ModalContent.d.ts +0 -168
  767. package/cjs/components/modal/ModalHeader.d.ts +0 -73
  768. package/cjs/components/modal/ModalInner.d.ts +0 -20
  769. package/cjs/fragments/scroll-view/ScrollView.d.ts +0 -1
  770. package/components/modal/Modal.d.ts +0 -325
  771. package/components/modal/ModalContent.d.ts +0 -168
  772. package/components/modal/ModalHeader.d.ts +0 -73
  773. package/components/modal/ModalHeader.js +0 -224
  774. package/components/modal/ModalInner.d.ts +0 -20
  775. package/es/components/modal/ModalContent.d.ts +0 -168
  776. package/es/components/modal/ModalHeader.d.ts +0 -73
  777. package/es/components/modal/ModalHeader.js +0 -166
  778. package/es/components/modal/ModalInner.d.ts +0 -20
  779. package/es/fragments/scroll-view/ScrollView.d.ts +0 -1
  780. package/esm/components/modal/ModalContent.d.ts +0 -168
  781. package/esm/components/modal/ModalHeader.d.ts +0 -73
  782. package/esm/components/modal/ModalHeader.js +0 -224
  783. package/esm/components/modal/ModalInner.d.ts +0 -20
  784. package/esm/fragments/scroll-view/ScrollView.d.ts +0 -1
  785. package/fragments/scroll-view/ScrollView.d.ts +0 -1
@@ -45,7 +45,7 @@ export type SkeletonChildren =
45
45
  */
46
46
  export interface SkeletonProps extends React.HTMLProps<HTMLElement> {
47
47
  /**
48
- * Use `true` to enable/show the skeleton for ever component used inside. Defaults to `false`.
48
+ * Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`.
49
49
  */
50
50
  show?: SkeletonShow;
51
51
 
@@ -65,7 +65,7 @@ export interface SkeletonProps extends React.HTMLProps<HTMLElement> {
65
65
  figure?: SkeletonFigure;
66
66
 
67
67
  /**
68
- * Set what ever HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div`
68
+ * Set any HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div`
69
69
  */
70
70
  element?: React.ReactNode;
71
71
 
@@ -85,7 +85,7 @@ export interface SliderProps extends React.HTMLProps<HTMLElement> {
85
85
  status?: SliderStatus;
86
86
 
87
87
  /**
88
- * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
88
+ * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
89
89
  */
90
90
  status_state?: string;
91
91
 
@@ -106,17 +106,17 @@ export interface SliderProps extends React.HTMLProps<HTMLElement> {
106
106
  suffix?: SliderSuffix;
107
107
 
108
108
  /**
109
- * Give the slider thump button a title for accessibility reason. Defaults to `null`.
109
+ * Give the slider thump button a title for accessibility reasons. Defaults to `null`.
110
110
  */
111
111
  thump_title?: string;
112
112
 
113
113
  /**
114
- * Give the add button a title for accessibility reason. Defaults to `+`.
114
+ * Give the add button a title for accessibility reasons. Defaults to `+`.
115
115
  */
116
116
  add_title?: string;
117
117
 
118
118
  /**
119
- * Give the subtract button a title for accessibility reason. Defaults to `−`.
119
+ * Give the subtract button a title for accessibility reasons. Defaults to `−`.
120
120
  */
121
121
  subtract_title?: string;
122
122
 
@@ -489,8 +489,6 @@
489
489
  padding-left: 1rem; }
490
490
  .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large {
491
491
  padding-right: 1rem; }
492
- .dnb-button--tertiary .dnb-button__text {
493
- margin: 0; }
494
492
  .dnb-button--has-text {
495
493
  width: auto; }
496
494
  .dnb-button--has-text .dnb-button__icon {
@@ -1 +1 @@
1
- .dnb-icon{color:inherit;display:inline-block;font-size:1rem;height:1em;line-height:1rem;vertical-align:middle;width:1em}.dnb-icon img,.dnb-icon svg{shape-rendering:geometricPrecision;height:inherit;vertical-align:top;width:inherit}.dnb-icon svg[width="100%"]{width:inherit}.dnb-icon svg[height="100%"]{height:inherit}.dnb-icon--inherit-color svg:not([fill]),.dnb-icon--inherit-color svg [fill]{fill:currentColor}.dnb-icon--inherit-color svg [stroke]{stroke:currentColor}.dnb-icon--small{font-size:.75rem}.dnb-icon--default{font-size:1rem}.dnb-icon--medium{font-size:1.5rem}.dnb-icon--large{font-size:2rem}.dnb-icon--x-large{font-size:2.5rem}.dnb-icon--xx-large{font-size:3rem}.dnb-icon--custom-size{height:auto;width:auto}.dnb-icon--auto{font-size:1em}.dnb-icon--auto>.dnb-icon--wrapper{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center}h1 .dnb-icon,h2 .dnb-icon,h3 .dnb-icon,h4 .dnb-icon,h5 .dnb-icon,h6 .dnb-icon{vertical-align:middle}.dnb-icon.dnb-skeleton{color:#ebebeb!important;color:var(--skeleton-color)!important}.dnb-icon.dnb-skeleton:after,.dnb-icon.dnb-skeleton:before{content:none!important}@media screen and (-ms-high-contrast:none){.dnb-icon{-webkit-box-flex:0;-ms-flex:none;flex:none}}.dnb-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-button *,.dnb-button :after,.dnb-button :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-button :after,.dnb-button :before{text-decoration:inherit;vertical-align:inherit}:root{--button-font-size:var(--font-size-basis);--button-font-size-small:var(--font-size-small);--button-width:2.5rem;--button-height:2.5rem;--button-width--small:1.5rem;--button-height--small:1.5rem;--button-width--medium:2rem;--button-height--medium:2rem;--button-width--large:3rem;--button-height--large:3rem;--button-icon-size:1rem;--button-border-width:0.0625rem;--button-border-width--hover:0.1875rem;--button-border-radius:calc(var(--button-height)/2);--button-border-radius--small:calc(var(--button-height--small)/2);--button-border-radius--medium:calc(var(--button-height--medium)/2);--button-border-radius--large:calc(var(--button-height--large)/2)}.dnb-button{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:.0625rem solid transparent;border:var(--button-border-width) solid transparent;border-radius:1.25rem;border-radius:var(--button-border-radius);cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;font-size:var(--font-size-small);height:auto;justify-content:center;padding:0;position:relative;text-decoration:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap;width:2.5rem;width:var(--button-width)}.dnb-button--wrap{word-wrap:break-word;white-space:normal}.dnb-button,.dnb-core-style .dnb-button{line-height:2.5rem;line-height:var(--button-height)}.dnb-button__text{color:inherit;font-size:1.125rem;font-size:var(--button-font-size);line-height:1.5rem;line-height:var(--line-height-basis);margin:.5rem 0;-webkit-transform:translateY(-.03125rem);transform:translateY(-.03125rem)}.dnb-button__text [data-os=linux]{-webkit-transform:translateY(-.035rem);transform:translateY(-.035rem)}.dnb-button__alignment{display:inline-block;width:0}.dnb-button__bounding{background-color:transparent;border-radius:1.25rem;border-radius:var(--button-border-radius);bottom:0;left:0;position:absolute;right:0;top:0;-webkit-transform:scale(1.1,1.4);transform:scale(1.1,1.4)}.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-button--size-small{border-radius:.75rem;border-radius:var(--button-border-radius--small);font-size:1rem;font-size:var(--button-font-size-small);width:1.5rem;width:var(--button-width--small)}.dnb-button--size-small,.dnb-core-style .dnb-button--size-small{line-height:1.5rem;line-height:var(--button-height--small)}.dnb-button--size-small .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-small{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small{padding-right:.5rem}.dnb-button--size-medium{border-radius:1rem;border-radius:var(--button-border-radius--medium);width:2rem;width:var(--button-width--medium)}.dnb-button--size-medium,.dnb-core-style .dnb-button--size-medium{line-height:2rem;line-height:var(--button-height--medium)}.dnb-button--size-medium .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-medium{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium{padding-right:.5rem}.dnb-button--size-large{border-radius:1.5rem;border-radius:var(--button-border-radius--large);width:3rem;width:var(--button-width--large)}.dnb-button--size-large,.dnb-core-style .dnb-button--size-large{line-height:3rem;line-height:var(--button-height--large)}.dnb-button--has-text.dnb-button--size-large{padding-left:2rem;padding-right:2rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large{padding-left:1rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large{padding-right:1rem}.dnb-button--tertiary .dnb-button__text{margin:0}.dnb-button--has-text{width:auto}.dnb-button--has-text .dnb-button__icon{margin:0 .5rem;margin:0 calc(var(--button-icon-size)/2)}.dnb-button--has-text.dnb-button--icon-position-left{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right{padding-right:.5rem}.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.dnb-button--has-text.dnb-button--has-icon .dnb-button__text{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-button:not(.dnb-button--has-text) .dnb-button__icon{width:inherit}.dnb-button__icon.dnb-icon svg:not([width]):not([height]){height:1rem;height:var(--button-icon-size);width:1rem;width:var(--button-icon-size)}[href]>.dnb-button__icon.dnb-icon{line-height:1.125rem;line-height:var(--button-font-size)}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left>*,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top>*{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.dnb-button--stretch{width:100%}.dnb-button--reset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:inherit;font:inherit;height:auto;line-height:inherit;margin:0;overflow:visible;padding:0;text-align:inherit;width:auto}html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]){border:none;-webkit-box-shadow:none;box-shadow:none}.dnb-button--reset:not([disabled]):active,.dnb-button--reset:not([disabled]):focus{outline:none}html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active,html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus{border:none;-webkit-box-shadow:none;box-shadow:none;color:inherit}.dnb-button[type=button],.dnb-button[type=reset],.dnb-button[type=submit]{appearance:none;-moz-appearance:none;-webkit-appearance:none}.dnb-button[disabled]{cursor:not-allowed}.dnb-form-row--vertical .dnb-form-row__content>.dnb-button{-ms-flex-item-align:start;align-self:flex-start}.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text{white-space:nowrap}.dnb-button+.dnb-form-status{margin-top:.5rem}@media screen and (-ms-high-contrast:none){.dnb-button{-webkit-box-flex:0;-ms-flex:none;flex:none}.dnb-button__icon,.dnb-button__text{-webkit-transform:translateY(-.0625rem);transform:translateY(-.0625rem)}}button.dnb-button::-moz-focus-inner{border:none}.dnb-form-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-form-label *,.dnb-form-label :after,.dnb-form-label :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-form-label :after,.dnb-form-label :before{text-decoration:inherit;vertical-align:inherit}.dnb-form-label{color:inherit;display:inline-block;font-size:1.125rem;font-size:var(--font-size-basis);margin-right:1rem;padding:0;text-align:left;vertical-align:baseline;white-space:pre-wrap;width:auto;word-break:normal}.dnb-form-label--vertical{display:block;margin-bottom:.5rem;margin-right:0}.dnb-form-label--sr-only{margin:0 0 0 -1px!important;overflow:hidden!important;padding:0!important;white-space:nowrap!important;width:1px!important}.dnb-form-label[for]:not([disabled]){cursor:pointer;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.dnb-form-label[disabled]{cursor:not-allowed}@media screen and (-ms-high-contrast:none){.dnb-form-label{max-width:60vw}}legend.dnb-form-label{display:inline-block}.dnb-form-status{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-form-status *,.dnb-form-status :after,.dnb-form-status :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-form-status :after,.dnb-form-status :before{text-decoration:inherit;vertical-align:inherit}:root{--form-status-radius:0.25rem}.dnb-form-status{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transition:height .4s cubic-bezier(.42,0,0,1),opacity .4s cubic-bezier(.42,0,0,1),margin .4s cubic-bezier(.42,0,0,1),padding .4s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1),opacity .4s cubic-bezier(.42,0,0,1),margin .4s cubic-bezier(.42,0,0,1),padding .4s cubic-bezier(.42,0,0,1)}.dnb-form-status--hidden{height:0;opacity:0;width:0;will-change:height,opacity,margin,padding}.dnb-form-status--is-animating{overflow:hidden;width:auto}.dnb-form-status--disappear,.dnb-form-status--hidden{margin:0!important;padding:0!important}.dnb-form-status__shell{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-radius:.25rem;border-radius:var(--form-status-radius);display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:flex-start;min-width:inherit}.dnb-form-status__text{color:inherit;cursor:text;font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);padding:.625rem 1rem;white-space:normal}button .dnb-form-status__text{cursor:inherit}.dnb-form-status__text .dnb-anchor{font-size:inherit}.dnb-icon+.dnb-form-status__text{padding-left:.5rem}.dnb-form-status__shell>.dnb-icon{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;margin:.3333333em .3333333em .3333333em .6666666em}.dnb-form-status__size--large .dnb-form-status__text{padding-bottom:1.125rem;padding-top:1.125rem}.dnb-form-status__size--large .dnb-form-status__shell>.dnb-icon{margin-bottom:.6666666em;margin-top:.6666666em}.dnb-form-status--stretch{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.dnb-form-status--stretch .dnb-form-status__shell{width:100%}.dnb-form-status--stretch .dnb-form-status__text{max-width:47rem}.dnb-form-status[hidden]{display:none}.dnb-form-status--no-animation,html[data-visual-test] .dnb-form-status{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}@media screen and (-ms-high-contrast:none){.dnb-form-status__shell>.dnb-icon{border-width:1px}}.dnb-slider{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-slider *,.dnb-slider :after,.dnb-slider :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-slider :after,.dnb-slider :before{text-decoration:inherit;vertical-align:inherit}:root{--slider-track-height:0.25rem;--slider-thumb-size:2rem;--slider-button-size:1.5rem;--slider-space:1rem}.dnb-slider{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1rem;font-size:var(--font-size-small);line-height:2rem;line-height:var(--slider-thumb-size);-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.dnb-slider--stretch{width:100%}.dnb-slider--vertical{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;min-height:inherit;min-width:inherit;width:auto}.dnb-slider__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-flex:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;width:100%}.dnb-slider--vertical .dnb-slider__wrapper{-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:auto}.dnb-slider__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:2rem;height:var(--slider-thumb-size)}.dnb-slider__suffix{-ms-flex-item-align:center;align-self:center}.dnb-slider--vertical .dnb-slider__suffix{padding-left:0;padding-top:.5rem}.dnb-slider__track{-webkit-box-flex:1;cursor:pointer;-ms-flex:1;flex:1;margin:0 1.5rem;margin:0 calc(var(--slider-space)*1.5);min-width:2rem;position:relative;-ms-touch-action:none;touch-action:none}.dnb-slider__track:after,.dnb-slider__track:before{background-color:inherit;border-radius:.125rem;border-radius:calc(var(--slider-track-height)/2);content:"";height:.25rem;height:var(--slider-track-height);left:0;position:absolute;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);width:2rem;width:var(--slider-thumb-size);z-index:2}.dnb-slider__track:before{background-color:red;left:-1rem;left:calc(0px - var(--slider-space));right:auto}.dnb-slider__track:after{background-color:blue;left:auto;right:-1rem;right:calc(0px - var(--slider-space))}.dnb-slider--vertical .dnb-slider__track{margin:1.5rem 0;margin:calc(var(--slider-space)*1.5) 0;min-height:2rem;min-width:auto}.dnb-slider--vertical .dnb-slider__track:after,.dnb-slider--vertical .dnb-slider__track:before{height:2rem;height:var(--slider-thumb-size);left:50%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);width:.25rem;width:var(--slider-track-height)}.dnb-slider--vertical .dnb-slider__track:before{bottom:auto;top:-1rem;top:calc(0px - var(--slider-space))}.dnb-slider--vertical .dnb-slider__track:after{bottom:-1rem;bottom:calc(0px - var(--slider-space));top:auto}.dnb-slider--vertical .dnb-slider__inner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:inherit;min-height:inherit;min-width:inherit;width:2rem;width:var(--slider-thumb-size)}.dnb-slider--reverse .dnb-slider__track{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.dnb-slider--reverse.dnb-slider--vertical .dnb-slider__track{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.dnb-slider__line{background-color:grey;height:.25rem;height:var(--slider-track-height);left:0;position:absolute;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.dnb-slider--vertical .dnb-slider__line{height:auto;left:50%;top:0;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);width:.25rem;width:var(--slider-track-height)}.dnb-slider__line__before{z-index:2}.dnb-slider__line__after{background-color:#ddd;right:0;z-index:1}.dnb-slider--vertical .dnb-slider__line__before{top:0}.dnb-slider--vertical .dnb-slider__line__after{bottom:0}.dnb-slider__button-helper,.dnb-slider__thumb{border-radius:50%;display:block;left:0;position:absolute;top:0;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);z-index:3}.dnb-slider__button-helper,.dnb-slider__button-helper .dnb-button,.dnb-slider__thumb,.dnb-slider__thumb .dnb-button{height:2rem;height:var(--slider-thumb-size);width:2rem;width:var(--slider-thumb-size)}.dnb-slider--vertical .dnb-slider__thumb{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.dnb-slider__button.dnb-button--size-small{height:1.5rem;height:var(--slider-button-size);line-height:1.5rem;line-height:var(--slider-button-size);-webkit-transform:translateY(.25rem);transform:translateY(.25rem);width:1.5rem;width:var(--slider-button-size)}.dnb-slider--vertical .dnb-slider__button.dnb-button--size-small{-webkit-transform:translateX(.25rem);transform:translateX(.25rem)}.dnb-slider__state--jumped .dnb-slider__line,.dnb-slider__state--jumped .dnb-slider__thumb{-webkit-transition:width .25s ease 0ms,height .25s ease 0ms,left .25s ease 0ms,top .25s ease 0ms,-webkit-box-shadow .25s ease 0ms;transition:width .25s ease 0ms,height .25s ease 0ms,left .25s ease 0ms,top .25s ease 0ms,-webkit-box-shadow .25s ease 0ms;transition:width .25s ease 0ms,height .25s ease 0ms,left .25s ease 0ms,top .25s ease 0ms,box-shadow .25s ease 0ms;transition:width .25s ease 0ms,height .25s ease 0ms,left .25s ease 0ms,top .25s ease 0ms,box-shadow .25s ease 0ms,-webkit-box-shadow .25s ease 0ms}.dnb-slider__state--disabled .dnb-slider__thumb,.dnb-slider__state--disabled.dnb-slider__track{cursor:not-allowed}.dnb-slider__button-helper{opacity:0;pointer-events:none;-webkit-transform:translate3d(.0625rem,0,0);transform:translate3d(.0625rem,0,0);z-index:2}.dnb-slider__button-helper:not(:disabled):focus~.dnb-button{outline:none}html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus~.dnb-button{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus~.dnb-button{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-slider>.dnb-form-label{-ms-flex-item-align:start;align-self:flex-start;line-height:2rem;line-height:var(--slider-thumb-size);margin-right:1rem}.dnb-slider>.dnb-form-label--vertical{line-height:1.5rem;line-height:var(--line-height-basis);margin-right:0}.dnb-slider__label--vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.dnb-slider__label--vertical.dnb-slider--vertical{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.dnb-slider__label--vertical.dnb-slider--vertical .dnb-form-label{margin-bottom:.5rem;margin-right:0;text-align:center;width:100%}.dnb-slider .dnb-form-status{-webkit-box-ordinal-group:3;-ms-flex-order:2;margin-top:.5rem;order:2}.dnb-slider--vertical .dnb-form-status{margin-top:1rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-slider{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-slider>.dnb-form-label{margin-bottom:.5rem}}.dnb-slider.dnb-skeleton .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:before,.dnb-slider.dnb-skeleton .dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__track:before{background-color:#ebebeb;background-color:var(--skeleton-color)}@media screen and (-ms-high-contrast:none){.dnb-slider__wrapper{-webkit-box-flex:0;-ms-flex:none;flex:none}}
1
+ .dnb-icon{color:inherit;display:inline-block;font-size:1rem;height:1em;line-height:1rem;vertical-align:middle;width:1em}.dnb-icon img,.dnb-icon svg{shape-rendering:geometricPrecision;height:inherit;vertical-align:top;width:inherit}.dnb-icon svg[width="100%"]{width:inherit}.dnb-icon svg[height="100%"]{height:inherit}.dnb-icon--inherit-color svg:not([fill]),.dnb-icon--inherit-color svg [fill]{fill:currentColor}.dnb-icon--inherit-color svg [stroke]{stroke:currentColor}.dnb-icon--small{font-size:.75rem}.dnb-icon--default{font-size:1rem}.dnb-icon--medium{font-size:1.5rem}.dnb-icon--large{font-size:2rem}.dnb-icon--x-large{font-size:2.5rem}.dnb-icon--xx-large{font-size:3rem}.dnb-icon--custom-size{height:auto;width:auto}.dnb-icon--auto{font-size:1em}.dnb-icon--auto>.dnb-icon--wrapper{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center}h1 .dnb-icon,h2 .dnb-icon,h3 .dnb-icon,h4 .dnb-icon,h5 .dnb-icon,h6 .dnb-icon{vertical-align:middle}.dnb-icon.dnb-skeleton{color:#ebebeb!important;color:var(--skeleton-color)!important}.dnb-icon.dnb-skeleton:after,.dnb-icon.dnb-skeleton:before{content:none!important}@media screen and (-ms-high-contrast:none){.dnb-icon{-webkit-box-flex:0;-ms-flex:none;flex:none}}.dnb-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-button *,.dnb-button :after,.dnb-button :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-button :after,.dnb-button :before{text-decoration:inherit;vertical-align:inherit}:root{--button-font-size:var(--font-size-basis);--button-font-size-small:var(--font-size-small);--button-width:2.5rem;--button-height:2.5rem;--button-width--small:1.5rem;--button-height--small:1.5rem;--button-width--medium:2rem;--button-height--medium:2rem;--button-width--large:3rem;--button-height--large:3rem;--button-icon-size:1rem;--button-border-width:0.0625rem;--button-border-width--hover:0.1875rem;--button-border-radius:calc(var(--button-height)/2);--button-border-radius--small:calc(var(--button-height--small)/2);--button-border-radius--medium:calc(var(--button-height--medium)/2);--button-border-radius--large:calc(var(--button-height--large)/2)}.dnb-button{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:.0625rem solid transparent;border:var(--button-border-width) solid transparent;border-radius:1.25rem;border-radius:var(--button-border-radius);cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;font-size:var(--font-size-small);height:auto;justify-content:center;padding:0;position:relative;text-decoration:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap;width:2.5rem;width:var(--button-width)}.dnb-button--wrap{word-wrap:break-word;white-space:normal}.dnb-button,.dnb-core-style .dnb-button{line-height:2.5rem;line-height:var(--button-height)}.dnb-button__text{color:inherit;font-size:1.125rem;font-size:var(--button-font-size);line-height:1.5rem;line-height:var(--line-height-basis);margin:.5rem 0;-webkit-transform:translateY(-.03125rem);transform:translateY(-.03125rem)}.dnb-button__text [data-os=linux]{-webkit-transform:translateY(-.035rem);transform:translateY(-.035rem)}.dnb-button__alignment{display:inline-block;width:0}.dnb-button__bounding{background-color:transparent;border-radius:1.25rem;border-radius:var(--button-border-radius);bottom:0;left:0;position:absolute;right:0;top:0;-webkit-transform:scale(1.1,1.4);transform:scale(1.1,1.4)}.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-button--size-small{border-radius:.75rem;border-radius:var(--button-border-radius--small);font-size:1rem;font-size:var(--button-font-size-small);width:1.5rem;width:var(--button-width--small)}.dnb-button--size-small,.dnb-core-style .dnb-button--size-small{line-height:1.5rem;line-height:var(--button-height--small)}.dnb-button--size-small .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-small{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small{padding-right:.5rem}.dnb-button--size-medium{border-radius:1rem;border-radius:var(--button-border-radius--medium);width:2rem;width:var(--button-width--medium)}.dnb-button--size-medium,.dnb-core-style .dnb-button--size-medium{line-height:2rem;line-height:var(--button-height--medium)}.dnb-button--size-medium .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-medium{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium{padding-right:.5rem}.dnb-button--size-large{border-radius:1.5rem;border-radius:var(--button-border-radius--large);width:3rem;width:var(--button-width--large)}.dnb-button--size-large,.dnb-core-style .dnb-button--size-large{line-height:3rem;line-height:var(--button-height--large)}.dnb-button--has-text.dnb-button--size-large{padding-left:2rem;padding-right:2rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large{padding-left:1rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large{padding-right:1rem}.dnb-button--has-text{width:auto}.dnb-button--has-text .dnb-button__icon{margin:0 .5rem;margin:0 calc(var(--button-icon-size)/2)}.dnb-button--has-text.dnb-button--icon-position-left{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right{padding-right:.5rem}.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.dnb-button--has-text.dnb-button--has-icon .dnb-button__text{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-button:not(.dnb-button--has-text) .dnb-button__icon{width:inherit}.dnb-button__icon.dnb-icon svg:not([width]):not([height]){height:1rem;height:var(--button-icon-size);width:1rem;width:var(--button-icon-size)}[href]>.dnb-button__icon.dnb-icon{line-height:1.125rem;line-height:var(--button-font-size)}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left>*,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top>*{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.dnb-button--stretch{width:100%}.dnb-button--reset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:inherit;font:inherit;height:auto;line-height:inherit;margin:0;overflow:visible;padding:0;text-align:inherit;width:auto}html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]){border:none;-webkit-box-shadow:none;box-shadow:none}.dnb-button--reset:not([disabled]):active,.dnb-button--reset:not([disabled]):focus{outline:none}html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active,html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus{border:none;-webkit-box-shadow:none;box-shadow:none;color:inherit}.dnb-button[type=button],.dnb-button[type=reset],.dnb-button[type=submit]{appearance:none;-moz-appearance:none;-webkit-appearance:none}.dnb-button[disabled]{cursor:not-allowed}.dnb-form-row--vertical .dnb-form-row__content>.dnb-button{-ms-flex-item-align:start;align-self:flex-start}.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text{white-space:nowrap}.dnb-button+.dnb-form-status{margin-top:.5rem}@media screen and (-ms-high-contrast:none){.dnb-button{-webkit-box-flex:0;-ms-flex:none;flex:none}.dnb-button__icon,.dnb-button__text{-webkit-transform:translateY(-.0625rem);transform:translateY(-.0625rem)}}button.dnb-button::-moz-focus-inner{border:none}.dnb-form-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-form-label *,.dnb-form-label :after,.dnb-form-label :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-form-label :after,.dnb-form-label :before{text-decoration:inherit;vertical-align:inherit}.dnb-form-label{color:inherit;display:inline-block;font-size:1.125rem;font-size:var(--font-size-basis);margin-right:1rem;padding:0;text-align:left;vertical-align:baseline;white-space:pre-wrap;width:auto;word-break:normal}.dnb-form-label--vertical{display:block;margin-bottom:.5rem;margin-right:0}.dnb-form-label--sr-only{margin:0 0 0 -1px!important;overflow:hidden!important;padding:0!important;white-space:nowrap!important;width:1px!important}.dnb-form-label[for]:not([disabled]){cursor:pointer;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.dnb-form-label[disabled]{cursor:not-allowed}@media screen and (-ms-high-contrast:none){.dnb-form-label{max-width:60vw}}legend.dnb-form-label{display:inline-block}.dnb-form-status{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-form-status *,.dnb-form-status :after,.dnb-form-status :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-form-status :after,.dnb-form-status :before{text-decoration:inherit;vertical-align:inherit}:root{--form-status-radius:0.25rem}.dnb-form-status{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transition:height .4s cubic-bezier(.42,0,0,1),opacity .4s cubic-bezier(.42,0,0,1),margin .4s cubic-bezier(.42,0,0,1),padding .4s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1),opacity .4s cubic-bezier(.42,0,0,1),margin .4s cubic-bezier(.42,0,0,1),padding .4s cubic-bezier(.42,0,0,1)}.dnb-form-status--hidden{height:0;opacity:0;width:0;will-change:height,opacity,margin,padding}.dnb-form-status--is-animating{overflow:hidden;width:auto}.dnb-form-status--disappear,.dnb-form-status--hidden{margin:0!important;padding:0!important}.dnb-form-status__shell{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-radius:.25rem;border-radius:var(--form-status-radius);display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:flex-start;min-width:inherit}.dnb-form-status__text{color:inherit;cursor:text;font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);padding:.625rem 1rem;white-space:normal}button .dnb-form-status__text{cursor:inherit}.dnb-form-status__text .dnb-anchor{font-size:inherit}.dnb-icon+.dnb-form-status__text{padding-left:.5rem}.dnb-form-status__shell>.dnb-icon{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;margin:.3333333em .3333333em .3333333em .6666666em}.dnb-form-status__size--large .dnb-form-status__text{padding-bottom:1.125rem;padding-top:1.125rem}.dnb-form-status__size--large .dnb-form-status__shell>.dnb-icon{margin-bottom:.6666666em;margin-top:.6666666em}.dnb-form-status--stretch{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.dnb-form-status--stretch .dnb-form-status__shell{width:100%}.dnb-form-status--stretch .dnb-form-status__text{max-width:47rem}.dnb-form-status[hidden]{display:none}.dnb-form-status--no-animation,html[data-visual-test] .dnb-form-status{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}@media screen and (-ms-high-contrast:none){.dnb-form-status__shell>.dnb-icon{border-width:1px}}.dnb-slider{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-slider *,.dnb-slider :after,.dnb-slider :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-slider :after,.dnb-slider :before{text-decoration:inherit;vertical-align:inherit}:root{--slider-track-height:0.25rem;--slider-thumb-size:2rem;--slider-button-size:1.5rem;--slider-space:1rem}.dnb-slider{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1rem;font-size:var(--font-size-small);line-height:2rem;line-height:var(--slider-thumb-size);-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.dnb-slider--stretch{width:100%}.dnb-slider--vertical{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;min-height:inherit;min-width:inherit;width:auto}.dnb-slider__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-flex:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;width:100%}.dnb-slider--vertical .dnb-slider__wrapper{-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:auto}.dnb-slider__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:2rem;height:var(--slider-thumb-size)}.dnb-slider__suffix{-ms-flex-item-align:center;align-self:center}.dnb-slider--vertical .dnb-slider__suffix{padding-left:0;padding-top:.5rem}.dnb-slider__track{-webkit-box-flex:1;cursor:pointer;-ms-flex:1;flex:1;margin:0 1.5rem;margin:0 calc(var(--slider-space)*1.5);min-width:2rem;position:relative;-ms-touch-action:none;touch-action:none}.dnb-slider__track:after,.dnb-slider__track:before{background-color:inherit;border-radius:.125rem;border-radius:calc(var(--slider-track-height)/2);content:"";height:.25rem;height:var(--slider-track-height);left:0;position:absolute;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);width:2rem;width:var(--slider-thumb-size);z-index:2}.dnb-slider__track:before{background-color:red;left:-1rem;left:calc(0px - var(--slider-space));right:auto}.dnb-slider__track:after{background-color:blue;left:auto;right:-1rem;right:calc(0px - var(--slider-space))}.dnb-slider--vertical .dnb-slider__track{margin:1.5rem 0;margin:calc(var(--slider-space)*1.5) 0;min-height:2rem;min-width:auto}.dnb-slider--vertical .dnb-slider__track:after,.dnb-slider--vertical .dnb-slider__track:before{height:2rem;height:var(--slider-thumb-size);left:50%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);width:.25rem;width:var(--slider-track-height)}.dnb-slider--vertical .dnb-slider__track:before{bottom:auto;top:-1rem;top:calc(0px - var(--slider-space))}.dnb-slider--vertical .dnb-slider__track:after{bottom:-1rem;bottom:calc(0px - var(--slider-space));top:auto}.dnb-slider--vertical .dnb-slider__inner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:inherit;min-height:inherit;min-width:inherit;width:2rem;width:var(--slider-thumb-size)}.dnb-slider--reverse .dnb-slider__track{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.dnb-slider--reverse.dnb-slider--vertical .dnb-slider__track{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.dnb-slider__line{background-color:grey;height:.25rem;height:var(--slider-track-height);left:0;position:absolute;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.dnb-slider--vertical .dnb-slider__line{height:auto;left:50%;top:0;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);width:.25rem;width:var(--slider-track-height)}.dnb-slider__line__before{z-index:2}.dnb-slider__line__after{background-color:#ddd;right:0;z-index:1}.dnb-slider--vertical .dnb-slider__line__before{top:0}.dnb-slider--vertical .dnb-slider__line__after{bottom:0}.dnb-slider__button-helper,.dnb-slider__thumb{border-radius:50%;display:block;left:0;position:absolute;top:0;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);z-index:3}.dnb-slider__button-helper,.dnb-slider__button-helper .dnb-button,.dnb-slider__thumb,.dnb-slider__thumb .dnb-button{height:2rem;height:var(--slider-thumb-size);width:2rem;width:var(--slider-thumb-size)}.dnb-slider--vertical .dnb-slider__thumb{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.dnb-slider__button.dnb-button--size-small{height:1.5rem;height:var(--slider-button-size);line-height:1.5rem;line-height:var(--slider-button-size);-webkit-transform:translateY(.25rem);transform:translateY(.25rem);width:1.5rem;width:var(--slider-button-size)}.dnb-slider--vertical .dnb-slider__button.dnb-button--size-small{-webkit-transform:translateX(.25rem);transform:translateX(.25rem)}.dnb-slider__state--jumped .dnb-slider__line,.dnb-slider__state--jumped .dnb-slider__thumb{-webkit-transition:width .25s ease 0ms,height .25s ease 0ms,left .25s ease 0ms,top .25s ease 0ms,-webkit-box-shadow .25s ease 0ms;transition:width .25s ease 0ms,height .25s ease 0ms,left .25s ease 0ms,top .25s ease 0ms,-webkit-box-shadow .25s ease 0ms;transition:width .25s ease 0ms,height .25s ease 0ms,left .25s ease 0ms,top .25s ease 0ms,box-shadow .25s ease 0ms;transition:width .25s ease 0ms,height .25s ease 0ms,left .25s ease 0ms,top .25s ease 0ms,box-shadow .25s ease 0ms,-webkit-box-shadow .25s ease 0ms}.dnb-slider__state--disabled .dnb-slider__thumb,.dnb-slider__state--disabled.dnb-slider__track{cursor:not-allowed}.dnb-slider__button-helper{opacity:0;pointer-events:none;-webkit-transform:translate3d(.0625rem,0,0);transform:translate3d(.0625rem,0,0);z-index:2}.dnb-slider__button-helper:not(:disabled):focus~.dnb-button{outline:none}html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus~.dnb-button{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus~.dnb-button{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-slider>.dnb-form-label{-ms-flex-item-align:start;align-self:flex-start;line-height:2rem;line-height:var(--slider-thumb-size);margin-right:1rem}.dnb-slider>.dnb-form-label--vertical{line-height:1.5rem;line-height:var(--line-height-basis);margin-right:0}.dnb-slider__label--vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.dnb-slider__label--vertical.dnb-slider--vertical{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.dnb-slider__label--vertical.dnb-slider--vertical .dnb-form-label{margin-bottom:.5rem;margin-right:0;text-align:center;width:100%}.dnb-slider .dnb-form-status{-webkit-box-ordinal-group:3;-ms-flex-order:2;margin-top:.5rem;order:2}.dnb-slider--vertical .dnb-form-status{margin-top:1rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-slider{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-slider>.dnb-form-label{margin-bottom:.5rem}}.dnb-slider.dnb-skeleton .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:before,.dnb-slider.dnb-skeleton .dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__track:before{background-color:#ebebeb;background-color:var(--skeleton-color)}@media screen and (-ms-high-contrast:none){.dnb-slider__wrapper{-webkit-box-flex:0;-ms-flex:none;flex:none}}
@@ -13,7 +13,7 @@ export type StepIndicatorData =
13
13
  status_state?: 'warn' | 'info' | 'error';
14
14
 
15
15
  /**
16
- * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
16
+ * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
17
17
  */
18
18
  on_click?: (...args: any[]) => any;
19
19
  on_render?: (...args: any[]) => any;
@@ -70,7 +70,7 @@ export type StepIndicatorChildren =
70
70
  */
71
71
  export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
72
72
  /**
73
- * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
73
+ * A unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
74
74
  */
75
75
  sidebar_id?: string;
76
76
 
@@ -80,9 +80,9 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
80
80
  mode?: StepIndicatorMode;
81
81
 
82
82
  /**
83
- * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and example above.
83
+ * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
84
84
  */
85
- data: StepIndicatorData;
85
+ data?: StepIndicatorData;
86
86
  title: StepIndicatorTitle;
87
87
  is_current?: boolean;
88
88
  inactive?: boolean;
@@ -91,7 +91,7 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
91
91
  status_state?: StepIndicatorStatusState;
92
92
 
93
93
  /**
94
- * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
94
+ * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
95
95
  */
96
96
  on_click?: (...args: any[]) => any;
97
97
  on_render?: (...args: any[]) => any;
@@ -156,7 +156,7 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
156
156
  children?: StepIndicatorChildren;
157
157
 
158
158
  /**
159
- * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
159
+ * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
160
160
  */
161
161
  on_change?: (...args: any[]) => any;
162
162
  }
@@ -9,9 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
9
9
 
10
10
  import React from 'react';
11
11
  import PropTypes from 'prop-types';
12
- import Context from '../../shared/Context';
13
- import { makeUniqueId, warn, registerElement, processChildren, extendPropsWithContext } from '../../shared/component-helper';
14
- import EventEmitter from '../../shared/EventEmitter';
12
+ import { makeUniqueId, warn, registerElement } from '../../shared/component-helper';
15
13
  import StepIndicatorSidebar from './StepIndicatorSidebar';
16
14
  import StepIndicatorModal from './StepIndicatorModal';
17
15
  import StepIndicatorList from './StepIndicatorList';
@@ -22,54 +20,11 @@ export default class StepIndicator extends React.PureComponent {
22
20
  registerElement(StepIndicator === null || StepIndicator === void 0 ? void 0 : StepIndicator.tagName, StepIndicator, StepIndicator.defaultProps);
23
21
  }
24
22
 
25
- static getData(props) {
26
- let res = [];
27
- if (props.data) res = props.data;else res = processChildren(props);
28
- if (typeof res === 'string') return res[0] === '[' ? JSON.parse(res) : [];
29
- return res || [];
30
- }
31
-
32
- static getDerivedStateFromProps(props, state) {
33
- state.data = StepIndicator.getData(props);
34
- state.countSteps = state.data.length;
35
-
36
- if (props.current_step !== null && props.current_step !== state._current_step) {
37
- state.activeStep = parseFloat(props.current_step) || 0;
38
- }
39
-
40
- if (props.active_item !== null && props.active_item !== state._active_item) {
41
- state.activeStep = parseFloat(props.active_item) || 0;
42
- }
43
-
44
- if (props.active_url && state.data.length > 0) {
45
- state.activeStep = state.data.reduce((acc, {
46
- url
47
- }, i) => {
48
- return url && (url === state.current_step || url === props.active_url) ? i : acc;
49
- }, parseFloat(state.current_step) || 0);
50
- }
51
-
52
- if (!state.listOfReachedSteps.includes(state.activeStep)) {
53
- state.listOfReachedSteps.push(state.activeStep);
54
- }
55
-
56
- state._current_step = props.current_step;
57
- state._active_item = props.active_item;
58
- state._active_url = props.active_url;
59
- return state;
60
- }
61
-
62
23
  constructor(props) {
63
24
  super(props);
64
25
 
65
26
  _defineProperty(this, "canWarn", () => typeof process !== 'undefined' && process.env.NODE_ENV === 'development');
66
27
 
67
- _defineProperty(this, "setActiveStep", activeStep => {
68
- this.setState({
69
- activeStep
70
- });
71
- });
72
-
73
28
  this.state = {
74
29
  isV1: !props.mode,
75
30
  sidebar_id: props.internalId || props.sidebar_id || makeUniqueId()
@@ -94,40 +49,12 @@ export default class StepIndicator extends React.PureComponent {
94
49
  if (typeof props[sn] !== 'undefined') {
95
50
  warn('StepIndicator: `show_numbers` is deprecated. Use `hide_numbers` instead.');
96
51
  }
97
-
98
- this._eventEmitter = EventEmitter.createInstance(this.state.sidebar_id);
99
-
100
- if (!this.state.listOfReachedSteps) {
101
- this.state.listOfReachedSteps = [];
102
- }
103
- }
104
-
105
- componentWillUnmount() {
106
- if (this._eventEmitter) {
107
- this._eventEmitter.remove();
108
-
109
- this._eventEmitter = null;
110
- }
111
- }
112
-
113
- getContextData(context = this.context) {
114
- var _data$step_title, _data$step_title_exte;
115
-
116
- const data = extendPropsWithContext(this.props, StepIndicator.defaultProps, {
117
- skeleton: context === null || context === void 0 ? void 0 : context.skeleton
118
- }, context.getTranslation(this.props).StepIndicator, context.FormRow, context.StepIndicator);
119
- data.stepsLabel = (_data$step_title = data.step_title) === null || _data$step_title === void 0 ? void 0 : _data$step_title.replace('%step', this.state.activeStep + 1).replace('%count', this.state.countSteps);
120
- data.stepsLabelExtended = (_data$step_title_exte = data.step_title_extended) === null || _data$step_title_exte === void 0 ? void 0 : _data$step_title_exte.replace('%step', this.state.activeStep + 1).replace('%count', this.state.countSteps);
121
- return data;
122
52
  }
123
53
 
124
54
  render() {
125
- const contextData = this.getContextData(this.context);
126
-
127
55
  if (this.state.isV1) {
128
- return React.createElement(StepIndicatorProvider, _extends({}, this.state, contextData, {
56
+ return React.createElement(StepIndicatorProvider, _extends({}, this.props, {
129
57
  sidebar_id: this.state.sidebar_id,
130
- setActiveStep: this.setActiveStep,
131
58
  listAttributes: this.props,
132
59
  isV1: this.state.isV1
133
60
  }), _div || (_div = React.createElement("div", {
@@ -139,9 +66,8 @@ export default class StepIndicator extends React.PureComponent {
139
66
  warn('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
140
67
  }
141
68
 
142
- return React.createElement(StepIndicatorProvider, _extends({}, this.state, contextData, {
69
+ return React.createElement(StepIndicatorProvider, _extends({}, this.props, {
143
70
  sidebar_id: this.state.sidebar_id,
144
- setActiveStep: this.setActiveStep,
145
71
  isV1: this.state.isV1
146
72
  }), _div2 || (_div2 = React.createElement("div", {
147
73
  className: "dnb-step-indicator-v2"
@@ -152,8 +78,6 @@ export default class StepIndicator extends React.PureComponent {
152
78
 
153
79
  _defineProperty(StepIndicator, "tagName", 'dnb-step-indicator');
154
80
 
155
- _defineProperty(StepIndicator, "contextType", Context);
156
-
157
81
  _defineProperty(StepIndicator, "Sidebar", StepIndicatorSidebar);
158
82
 
159
83
  _defineProperty(StepIndicator, "defaultProps", _objectSpread({
@@ -5,10 +5,11 @@ import * as React from 'react';
5
5
  */
6
6
  export interface StepIndicatorProviderProps {
7
7
  /**
8
- * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
8
+ * A unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
9
9
  */
10
10
  sidebar_id: string;
11
11
  children: React.ReactNode;
12
+ isSidebar?: boolean;
12
13
  }
13
14
  export class StepIndicatorProvider extends React.Component<
14
15
  StepIndicatorProviderProps,
@@ -6,42 +6,160 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
6
6
 
7
7
  import React from 'react';
8
8
  import PropTypes from 'prop-types';
9
- import EventEmitter from '../../shared/EventEmitter';
9
+ import Context from '../../shared/Context';
10
10
  import { stepIndicatorDefaultProps } from './StepIndicatorProps';
11
+ import { processChildren, extendPropsWithContext } from '../../shared/component-helper';
12
+ import { onMediaQueryChange } from '../../shared/MediaQueryUtils';
11
13
  const filterAttributes = Object.keys(stepIndicatorDefaultProps).filter(item => {
12
14
  return !['class', 'className'].includes(item);
13
- }).concat(['internalId', 'hasSidebar', 'hideSidebar', 'mainTitle', 'stepsLabel', 'stepsLabelExtended', 'listOfReachedSteps', 'setActiveStep', 'activeStep', 'countSteps', 'innerRef', 'filterAttributes', 'listAttributes', 'onChangeState', 'isV1', 'activeUrl']);
15
+ }).concat(['internalId', 'isSidebar', 'hasSidebar', 'hideSidebar', 'sidebarIsVisible', 'mainTitle', 'stepsLabel', 'stepsLabelExtended', 'listOfReachedSteps', 'setActiveStep', 'activeStep', 'countSteps', 'openState', 'onChangeState', 'openHandler', 'closeHandler', 'innerRef', 'hasSkeletonData', 'filterAttributes', 'listAttributes', 'onChangeState', 'isV1', 'activeUrl']);
14
16
  const StepIndicatorContext = React.createContext(null);
15
17
  export default StepIndicatorContext;
16
18
  export class StepIndicatorProvider extends React.PureComponent {
19
+ static getData(props) {
20
+ let res = [];
21
+ if (props.data) res = props.data;else res = processChildren(props);
22
+ if (typeof res === 'string') return res[0] === '[' ? JSON.parse(res) : [];
23
+ return res || [];
24
+ }
25
+
26
+ static getDerivedStateFromProps(props, state) {
27
+ var _state$data, _state$step_title, _state$data2, _state$step_title_ext, _state$data3;
28
+
29
+ if (props.data) {
30
+ state.data = StepIndicatorProvider.getData(props);
31
+ }
32
+
33
+ state.countSteps = (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.length;
34
+
35
+ if (parseFloat(props.current_step) > -1 && props.current_step !== state._current_step) {
36
+ state.activeStep = parseFloat(props.current_step) || 0;
37
+ }
38
+
39
+ if (props.active_item !== null && props.active_item !== state._active_item) {
40
+ state.activeStep = parseFloat(props.active_item) || 0;
41
+ }
42
+
43
+ if (props.active_url && state.data.length > 0) {
44
+ state.activeStep = state.data.reduce((acc, {
45
+ url
46
+ }, i) => {
47
+ return url && (url === state.current_step || url === props.active_url) ? i : acc;
48
+ }, parseFloat(state.current_step) || 0);
49
+ }
50
+
51
+ if (!state.listOfReachedSteps.includes(state.activeStep)) {
52
+ state.listOfReachedSteps.push(state.activeStep);
53
+ }
54
+
55
+ state.stepsLabel = (_state$step_title = state.step_title) === null || _state$step_title === void 0 ? void 0 : _state$step_title.replace('%step', (state.activeStep || 0) + 1).replace('%count', ((_state$data2 = state.data) === null || _state$data2 === void 0 ? void 0 : _state$data2.length) || 1);
56
+ state.stepsLabelExtended = (_state$step_title_ext = state.step_title_extended) === null || _state$step_title_ext === void 0 ? void 0 : _state$step_title_ext.replace('%step', (state.activeStep || 0) + 1).replace('%count', ((_state$data3 = state.data) === null || _state$data3 === void 0 ? void 0 : _state$data3.length) || 1);
57
+ state._current_step = props.current_step;
58
+ state._active_item = props.active_item;
59
+ state._active_url = props.active_url;
60
+ return state;
61
+ }
62
+
17
63
  constructor(props) {
18
64
  super(props);
19
- this._eventEmitter = EventEmitter.createInstance(props.sidebar_id);
20
- this.state = this._eventEmitter.get();
65
+
66
+ _defineProperty(this, "setActiveStep", activeStep => {
67
+ this.setState({
68
+ activeStep
69
+ });
70
+ });
71
+
72
+ _defineProperty(this, "onChangeState", () => {
73
+ this.setState({
74
+ openState: false
75
+ });
76
+ });
77
+
78
+ _defineProperty(this, "openHandler", () => {
79
+ this.setState({
80
+ openState: true
81
+ });
82
+ });
83
+
84
+ _defineProperty(this, "closeHandler", () => {
85
+ this.setState({
86
+ openState: false
87
+ });
88
+ });
89
+
90
+ this.state = {
91
+ hasSidebar: true,
92
+ hideSidebar: false,
93
+ activeStep: undefined,
94
+ setActiveStep: this.setActiveStep,
95
+ onChangeState: this.onChangeState,
96
+ openHandler: this.openHandler,
97
+ closeHandler: this.closeHandler
98
+ };
99
+
100
+ if (!this.state.listOfReachedSteps) {
101
+ this.state.listOfReachedSteps = [];
102
+ }
21
103
  }
22
104
 
23
105
  componentDidMount() {
24
- this._eventEmitter.listen(state => {
25
- this.setState(state);
26
- });
106
+ this._isMounted = true;
107
+
108
+ if (!this.props.isV1) {
109
+ var _document;
110
+
111
+ this._mediaQueryListener = onMediaQueryChange({
112
+ min: '0',
113
+ max: 'medium'
114
+ }, hideSidebar => {
115
+ this.setState({
116
+ hideSidebar
117
+ });
118
+ }, {
119
+ runOnInit: true
120
+ });
121
+ const container = (_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('sidebar__' + this.props.sidebar_id);
122
+ this.setState({
123
+ hasSidebar: Boolean(container)
124
+ });
125
+ }
27
126
  }
28
127
 
29
128
  componentWillUnmount() {
30
- if (this._eventEmitter) {
31
- this._eventEmitter.remove();
32
-
33
- this._eventEmitter = null;
129
+ if (this._mediaQueryListener) {
130
+ this._mediaQueryListener();
34
131
  }
35
132
  }
36
133
 
37
134
  componentDidUpdate() {
38
- this._eventEmitter.update(_objectSpread({}, this.props));
135
+ this.setState(this.makeContextValue());
39
136
  }
40
137
 
41
- render() {
42
- const value = _objectSpread(_objectSpread({
138
+ getGlobalContext(context = this.context) {
139
+ const data = extendPropsWithContext(this.props, stepIndicatorDefaultProps, {
140
+ skeleton: context === null || context === void 0 ? void 0 : context.skeleton
141
+ }, context.getTranslation(context).StepIndicator, context.FormRow, context.StepIndicator);
142
+ return data;
143
+ }
144
+
145
+ makeContextValue({
146
+ state = _objectSpread({}, this.state),
147
+ props = this.props,
148
+ context = this.context
149
+ } = {}) {
150
+ const globalContext = this.getGlobalContext(context);
151
+ const value = extendSafe({
43
152
  filterAttributes
44
- }, this.props), this.state);
153
+ }, globalContext, {
154
+ defaultProps: stepIndicatorDefaultProps,
155
+ props
156
+ }, state);
157
+ value.sidebarIsVisible = value.hasSidebar && !value.hideSidebar;
158
+ return value;
159
+ }
160
+
161
+ render() {
162
+ const value = this.makeContextValue();
45
163
 
46
164
  if (typeof window !== 'undefined' && window.IS_TEST) {
47
165
  value.no_animation = true;
@@ -58,7 +176,37 @@ export class StepIndicatorProvider extends React.PureComponent {
58
176
  }
59
177
 
60
178
  }
179
+
180
+ _defineProperty(StepIndicatorProvider, "contextType", Context);
181
+
182
+ _defineProperty(StepIndicatorProvider, "defaultProps", {
183
+ isSidebar: false
184
+ });
185
+
61
186
  process.env.NODE_ENV !== "production" ? StepIndicatorProvider.propTypes = {
62
187
  sidebar_id: PropTypes.string.isRequired,
63
- children: PropTypes.node.isRequired
64
- } : void 0;
188
+ children: PropTypes.node.isRequired,
189
+ isSidebar: PropTypes.bool
190
+ } : void 0;
191
+
192
+ function extendSafe(...objects) {
193
+ const obj = {};
194
+ objects.forEach(itm => {
195
+ if (itm.defaultProps && itm.props) {
196
+ itm = Object.entries(itm.props).reduce((acc, [k, v]) => {
197
+ if (itm.defaultProps[k] !== v) {
198
+ acc[k] = v;
199
+ }
200
+
201
+ return acc;
202
+ }, {});
203
+ }
204
+
205
+ Object.entries(itm).forEach(([k, v]) => {
206
+ if (!obj[k] || obj[k] && v) {
207
+ obj[k] = v;
208
+ }
209
+ });
210
+ });
211
+ return obj;
212
+ }
@@ -29,13 +29,13 @@ export interface StepIndicatorItemProps
29
29
  on_item_render?: (...args: any[]) => any;
30
30
 
31
31
  /**
32
- * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
32
+ * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
33
33
  */
34
34
  on_change?: (...args: any[]) => any;
35
35
  on_render?: (...args: any[]) => any;
36
36
 
37
37
  /**
38
- * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
38
+ * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
39
39
  */
40
40
  on_click?: (...args: any[]) => any;
41
41
  is_current?: boolean;
@@ -11,7 +11,6 @@ import AnimateHeight from '../../shared/AnimateHeight';
11
11
  import Button from '../button/Button';
12
12
  import Icon from '../icon/Icon';
13
13
  import { WarnIcon, InfoIcon, ErrorIcon } from '../../components/form-status/FormStatus';
14
- import EventEmitter from '../../shared/EventEmitter';
15
14
  import StepIndicatorContext from './StepIndicatorContext';
16
15
  import { deprecated_v1 } from './StepIndicatorItem-v1';
17
16
  export default class StepIndicatorItem extends React.PureComponent {
@@ -50,7 +49,6 @@ export default class StepIndicatorItem extends React.PureComponent {
50
49
 
51
50
  _defineProperty(this, "canWarn", () => typeof process !== 'undefined' && process.env.NODE_ENV === 'development');
52
51
 
53
- this._eventEmitter = EventEmitter.createInstance(context.sidebar_id);
54
52
  this._heightAnim = new AnimateHeight({
55
53
  animate: !isTrue(context.no_animation)
56
54
  });
@@ -65,8 +63,6 @@ export default class StepIndicatorItem extends React.PureComponent {
65
63
 
66
64
  componentWillUnmount() {
67
65
  this._heightAnim.remove();
68
-
69
- this._eventEmitter.remove();
70
66
  }
71
67
 
72
68
  getSnapshotBeforeUpdate() {
@@ -129,7 +125,7 @@ export default class StepIndicatorItem extends React.PureComponent {
129
125
  let isVisited = currentItemNum < activeStep;
130
126
  const id = `${sidebar_id || makeUniqueId()}-${currentItemNum}`;
131
127
  const ariaLabel = step_title === null || step_title === void 0 ? void 0 : step_title.replace('%step', currentItemNum + 1).replace('%count', countSteps);
132
- const isCurrent = currentItemNum === activeStep || isTrue(is_current);
128
+ const isCurrent = currentItemNum === activeStep || isTrue(is_current) && isNaN(parseFloat(activeStep));
133
129
  let element = React.createElement(StepItemWrapper, {
134
130
  number: currentItemNum + 1,
135
131
  hide_numbers: hide_numbers,
@@ -179,6 +175,7 @@ export default class StepIndicatorItem extends React.PureComponent {
179
175
  if (!buttonParams.onClick) {
180
176
  buttonParams.element = 'span';
181
177
  buttonParams.type = '';
178
+ buttonParams.on_click = undefined;
182
179
  isInactive = true;
183
180
  }
184
181