@dnb/eufemia 9.29.0 → 9.30.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 (95) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/cjs/components/button/style/themes/dnb-button-theme-eiendom.css +20 -0
  3. package/cjs/components/button/style/themes/dnb-button-theme-eiendom.min.css +2 -2
  4. package/cjs/components/button/style/themes/dnb-button-theme-eiendom.scss +8 -0
  5. package/cjs/components/slider/Slider.d.ts +2 -2
  6. package/cjs/components/slider/Slider.js +21 -0
  7. package/cjs/components/slider/SliderHelpers.d.ts +2 -2
  8. package/cjs/components/slider/SliderHelpers.js +10 -4
  9. package/cjs/components/slider/SliderInstance.js +1 -1
  10. package/cjs/components/slider/SliderProvider.js +50 -13
  11. package/cjs/components/slider/SliderThumb.js +5 -0
  12. package/cjs/components/slider/SliderTrack.js +3 -2
  13. package/cjs/components/slider/hooks/useSliderEvents.js +5 -5
  14. package/cjs/components/slider/hooks/useSliderProps.d.ts +1 -1
  15. package/cjs/components/slider/style/_slider.scss +1 -7
  16. package/cjs/components/slider/style/dnb-slider.css +1 -7
  17. package/cjs/components/slider/style/dnb-slider.min.css +1 -1
  18. package/cjs/components/slider/types.d.ts +28 -3
  19. package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +148 -0
  20. package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -0
  21. package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.scss +14 -0
  22. package/cjs/shared/Eufemia.js +1 -1
  23. package/cjs/shared/helpers/withCamelCaseProps.js +7 -0
  24. package/cjs/style/dnb-ui-components.css +1 -7
  25. package/cjs/style/dnb-ui-components.min.css +1 -1
  26. package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.css +169 -0
  27. package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +3 -3
  28. package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.scss +1 -0
  29. package/components/button/style/themes/dnb-button-theme-eiendom.css +20 -0
  30. package/components/button/style/themes/dnb-button-theme-eiendom.min.css +2 -2
  31. package/components/button/style/themes/dnb-button-theme-eiendom.scss +8 -0
  32. package/components/slider/Slider.d.ts +2 -2
  33. package/components/slider/Slider.js +1 -0
  34. package/components/slider/SliderHelpers.d.ts +2 -2
  35. package/components/slider/SliderHelpers.js +10 -4
  36. package/components/slider/SliderInstance.js +1 -1
  37. package/components/slider/SliderProvider.js +50 -13
  38. package/components/slider/SliderThumb.js +5 -0
  39. package/components/slider/SliderTrack.js +3 -2
  40. package/components/slider/hooks/useSliderEvents.js +5 -5
  41. package/components/slider/hooks/useSliderProps.d.ts +1 -1
  42. package/components/slider/style/_slider.scss +1 -7
  43. package/components/slider/style/dnb-slider.css +1 -7
  44. package/components/slider/style/dnb-slider.min.css +1 -1
  45. package/components/slider/types.d.ts +28 -3
  46. package/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +148 -0
  47. package/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -0
  48. package/components/tabs/style/themes/dnb-tabs-theme-eiendom.scss +14 -0
  49. package/es/components/button/style/themes/dnb-button-theme-eiendom.css +20 -0
  50. package/es/components/button/style/themes/dnb-button-theme-eiendom.min.css +2 -2
  51. package/es/components/button/style/themes/dnb-button-theme-eiendom.scss +8 -0
  52. package/es/components/slider/Slider.d.ts +2 -2
  53. package/es/components/slider/Slider.js +1 -0
  54. package/es/components/slider/SliderHelpers.d.ts +2 -2
  55. package/es/components/slider/SliderHelpers.js +10 -4
  56. package/es/components/slider/SliderInstance.js +1 -1
  57. package/es/components/slider/SliderProvider.js +49 -13
  58. package/es/components/slider/SliderThumb.js +7 -1
  59. package/es/components/slider/SliderTrack.js +3 -2
  60. package/es/components/slider/hooks/useSliderEvents.js +5 -5
  61. package/es/components/slider/hooks/useSliderProps.d.ts +1 -1
  62. package/es/components/slider/style/_slider.scss +1 -7
  63. package/es/components/slider/style/dnb-slider.css +1 -7
  64. package/es/components/slider/style/dnb-slider.min.css +1 -1
  65. package/es/components/slider/types.d.ts +28 -3
  66. package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +148 -0
  67. package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -0
  68. package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.scss +14 -0
  69. package/es/shared/Eufemia.js +1 -1
  70. package/es/shared/helpers/withCamelCaseProps.js +7 -0
  71. package/es/style/dnb-ui-components.css +1 -7
  72. package/es/style/dnb-ui-components.min.css +1 -1
  73. package/es/style/themes/theme-eiendom/dnb-theme-eiendom.css +169 -0
  74. package/es/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +3 -3
  75. package/es/style/themes/theme-eiendom/dnb-theme-eiendom.scss +1 -0
  76. package/esm/dnb-ui-basis.min.mjs +1 -1
  77. package/esm/dnb-ui-components.min.mjs +1 -1
  78. package/esm/dnb-ui-elements.min.mjs +1 -1
  79. package/esm/dnb-ui-extensions.min.mjs +1 -1
  80. package/esm/dnb-ui-lib.min.mjs +2 -2
  81. package/esm/dnb-ui-web-components.min.mjs +2 -2
  82. package/package.json +1 -1
  83. package/shared/Eufemia.js +1 -1
  84. package/shared/helpers/withCamelCaseProps.js +7 -0
  85. package/style/dnb-ui-components.css +1 -7
  86. package/style/dnb-ui-components.min.css +1 -1
  87. package/style/themes/theme-eiendom/dnb-theme-eiendom.css +169 -0
  88. package/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +3 -3
  89. package/style/themes/theme-eiendom/dnb-theme-eiendom.scss +1 -0
  90. package/umd/dnb-ui-basis.min.js +1 -1
  91. package/umd/dnb-ui-components.min.js +1 -1
  92. package/umd/dnb-ui-elements.min.js +1 -1
  93. package/umd/dnb-ui-extensions.min.js +1 -1
  94. package/umd/dnb-ui-lib.min.js +2 -2
  95. package/umd/dnb-ui-web-components.min.js +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to @dnb/eufemia will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [9.30.0](https://github.com/dnbexperience/eufemia/compare/v9.29.0...v9.30.0) (2022-08-29)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **Slider:** fix reverse with min and max defiend ([#1533](https://github.com/dnbexperience/eufemia/issues/1533)) ([6c169b4](https://github.com/dnbexperience/eufemia/commit/6c169b4c557ace9662f634eef8c5d3259dfae9fe))
12
+ * **Slider:** prevent onChange being called with same value ([#1528](https://github.com/dnbexperience/eufemia/issues/1528)) ([115b056](https://github.com/dnbexperience/eufemia/commit/115b056e0564b526edeaf879d98a936b5eb20e58))
13
+ * **Slider:** use numbers instead of css reverse when reversing slider ([#1532](https://github.com/dnbexperience/eufemia/issues/1532)) ([e2e83a0](https://github.com/dnbexperience/eufemia/commit/e2e83a03ba4b99defd45b017ba7480b1f1dd647d))
14
+ * **Theme:** correct DNB Eiendom state colors mint-green-50 to pistachio ([#1527](https://github.com/dnbexperience/eufemia/issues/1527)) ([b7f532e](https://github.com/dnbexperience/eufemia/commit/b7f532e29a5a0a333024d466ea4a6dd9714b4d5e))
15
+ * **withCamelCaseProps:** make exception for className ([#1534](https://github.com/dnbexperience/eufemia/issues/1534)) ([a0a0082](https://github.com/dnbexperience/eufemia/commit/a0a0082d2ed32b3436baefdc7e4f2e3b967cbca8))
16
+
17
+
18
+ ### Features
19
+
20
+ * **Slider:** add multiThumbBehavior property ([#1526](https://github.com/dnbexperience/eufemia/issues/1526)) ([f835651](https://github.com/dnbexperience/eufemia/commit/f8356511cade71f0944a36dc13e24f67fb8ba154))
21
+
6
22
  # [9.29.0](https://github.com/dnbexperience/eufemia/compare/v9.28.0...v9.29.0) (2022-08-24)
7
23
 
8
24
 
@@ -842,6 +842,26 @@
842
842
  -webkit-box-shadow: 0 0 0 0.0625rem var(--color-black-55);
843
843
  box-shadow: 0 0 0 0.0625rem var(--color-black-55); } }
844
844
 
845
+ .dnb-button--secondary:not(.dnb-button--has-text):active[disabled],
846
+ html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] {
847
+ cursor: not-allowed; }
848
+
849
+ .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
850
+ html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
851
+ color: #14555a;
852
+ color: var(--color-emerald-green);
853
+ background-color: #f2f4ec;
854
+ background-color: var(--color-pistachio);
855
+ --border-color: transparent;
856
+ -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
857
+ box-shadow: 0 0 0 0.0625rem var(--border-color);
858
+ border-color: transparent; }
859
+ @media screen and (-ms-high-contrast: none) {
860
+ .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
861
+ html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
862
+ -webkit-box-shadow: 0 0 0 0.0625rem transparent;
863
+ box-shadow: 0 0 0 0.0625rem transparent; } }
864
+
845
865
  .dnb-button--tertiary {
846
866
  color: #14555a;
847
867
  color: var(--color-emerald-green); }
@@ -1,4 +1,4 @@
1
- .dnb-button{border:none;-webkit-box-shadow:none;box-shadow:none;text-align:left}.dnb-button--primary{background-color:#007272;background-color:var(--color-sea-green);color:#fff;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){-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-button--primary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-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--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50);color:#007272;color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:#b3dada;background-color:var(--color-sea-green-30);color:#fff;color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:#dc2a2a;background-color:var(--color-fire-red);color:#fff;color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);background-color:#fff;background-color:var(--color-white);-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button--secondary{-webkit-box-shadow:inset 0 0 0 1px #007272;box-shadow:inset 0 0 0 1px #007272;-webkit-box-shadow:inset 0 0 0 1px var(--color-sea-green);box-shadow:inset 0 0 0 1px var(--color-sea-green)}}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){-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);opacity:1}}.dnb-button--secondary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--secondary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-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--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50);color:#007272;color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#b3dada;color:var(--color-sea-green-30)}@supports (-webkit-touch-callout:none){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:inset 0 0 0 1px #b3dada;box-shadow:inset 0 0 0 1px #b3dada;-webkit-box-shadow:inset 0 0 0 1px var(--color-sea-green-30);box-shadow:inset 0 0 0 1px var(--color-sea-green-30)}}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#dc2a2a;color:var(--color-fire-red)}@supports (-webkit-touch-callout:none){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:inset 0 0 0 1px #dc2a2a;box-shadow:inset 0 0 0 1px #dc2a2a;-webkit-box-shadow:inset 0 0 0 1px var(--color-fire-red);box-shadow:inset 0 0 0 1px var(--color-fire-red)}}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){-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);opacity:1}}.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-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--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--secondary:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){--border-color:transparent;background-color:#d2f0e9;background-color:var(--color-mint-green-50);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--active{--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){.dnb-button--active{-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-button--tertiary{background-color:transparent;color:#007272;color:var(--color-sea-green);position:relative}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentColor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:#007272;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;-webkit-transition:color .25s ease-in-out;transition:color .25s ease-in-out;width:auto;z-index:1}@media screen and (-ms-high-contrast:none){.dnb-button--tertiary .dnb-button__text:after{border-radius:.5px;height:1px}}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{-webkit-transition:none;transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary.dnb-button--has-text{padding-left:.5rem;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text:after{left:-.5rem;right:-.5rem}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:medium none invert;outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){-webkit-box-shadow:none;box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--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--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{-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-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{color:#14555a;color:var(--color-emerald-green);visibility:visible}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:medium none invert;outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){-webkit-box-shadow:none;box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:#14555a;color:var(--color-emerald-green);opacity:1;-webkit-transition:none;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary .dnb-button__icon{-ms-flex-item-align:start;align-self:flex-start;margin-top:.75rem;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:1rem;margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:.5rem;margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon{margin-top:.25rem;margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:.5rem;-ms-flex-direction:column;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon{-ms-flex-item-align:center;align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:.875rem;font-size:var(--font-size-x-small);margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:1rem;font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{-webkit-box-ordinal-group:4;-ms-flex-order:3;height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left{padding-left:0;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right{padding-left:.5rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #007272;box-shadow:0 0 0 .0625rem #007272;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green);box-shadow:0 0 0 .0625rem var(--color-sea-green)}}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]){--border-color:var(--color-sea-green-30);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #b3dada;box-shadow:0 0 0 .0625rem #b3dada;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green-30);box-shadow:0 0 0 .0625rem var(--color-sea-green-30)}}html[data-whatinput=keyboard]
1
+ .dnb-button{border:none;-webkit-box-shadow:none;box-shadow:none;text-align:left}.dnb-button--primary{background-color:#007272;background-color:var(--color-sea-green);color:#fff;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){-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-button--primary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-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--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50);color:#007272;color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:#b3dada;background-color:var(--color-sea-green-30);color:#fff;color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:#dc2a2a;background-color:var(--color-fire-red);color:#fff;color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);background-color:#fff;background-color:var(--color-white);-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button--secondary{-webkit-box-shadow:inset 0 0 0 1px #007272;box-shadow:inset 0 0 0 1px #007272;-webkit-box-shadow:inset 0 0 0 1px var(--color-sea-green);box-shadow:inset 0 0 0 1px var(--color-sea-green)}}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){-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);opacity:1}}.dnb-button--secondary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--secondary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-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--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50);color:#007272;color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#b3dada;color:var(--color-sea-green-30)}@supports (-webkit-touch-callout:none){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:inset 0 0 0 1px #b3dada;box-shadow:inset 0 0 0 1px #b3dada;-webkit-box-shadow:inset 0 0 0 1px var(--color-sea-green-30);box-shadow:inset 0 0 0 1px var(--color-sea-green-30)}}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#dc2a2a;color:var(--color-fire-red)}@supports (-webkit-touch-callout:none){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:inset 0 0 0 1px #dc2a2a;box-shadow:inset 0 0 0 1px #dc2a2a;-webkit-box-shadow:inset 0 0 0 1px var(--color-fire-red);box-shadow:inset 0 0 0 1px var(--color-fire-red)}}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){-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);opacity:1}}.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-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--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50)}.dnb-button--active{--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){.dnb-button--active{-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-button--tertiary{background-color:transparent;color:#007272;color:var(--color-sea-green);position:relative}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentColor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:#007272;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;-webkit-transition:color .25s ease-in-out;transition:color .25s ease-in-out;width:auto;z-index:1}@media screen and (-ms-high-contrast:none){.dnb-button--tertiary .dnb-button__text:after{border-radius:.5px;height:1px}}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{-webkit-transition:none;transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary.dnb-button--has-text{padding-left:.5rem;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text:after{left:-.5rem;right:-.5rem}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:medium none invert;outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){-webkit-box-shadow:none;box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--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--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{-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-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{color:#14555a;color:var(--color-emerald-green);visibility:visible}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:medium none invert;outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){-webkit-box-shadow:none;box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:#14555a;color:var(--color-emerald-green);opacity:1;-webkit-transition:none;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary .dnb-button__icon{-ms-flex-item-align:start;align-self:flex-start;margin-top:.75rem;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:1rem;margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:.5rem;margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon{margin-top:.25rem;margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:.5rem;-ms-flex-direction:column;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon{-ms-flex-item-align:center;align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:.875rem;font-size:var(--font-size-x-small);margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:1rem;font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{-webkit-box-ordinal-group:4;-ms-flex-order:3;height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left{padding-left:0;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right{padding-left:.5rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #007272;box-shadow:0 0 0 .0625rem #007272;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green);box-shadow:0 0 0 .0625rem var(--color-sea-green)}}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]){--border-color:var(--color-sea-green-30);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #b3dada;box-shadow:0 0 0 .0625rem #b3dada;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green-30);box-shadow:0 0 0 .0625rem var(--color-sea-green-30)}}html[data-whatinput=keyboard]
2
2
  .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary[disabled]{color:#b3dada;color:var(--color-sea-green-30)}.dnb-button--signal{background-color:#fdbb31;background-color:var(--color-accent-yellow);color:#00343e;color:var(--color-ocean-green)}html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]){--border-color:var(--color-ocean-green);background-color:#fdbb31;background-color:var(--color-accent-yellow);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#00343e;color:var(--color-ocean-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #00343e;box-shadow:0 0 0 .125rem #00343e;-webkit-box-shadow:0 0 0 .125rem var(--color-ocean-green);box-shadow:0 0 0 .125rem var(--color-ocean-green);opacity:1}}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled],html[data-whatintent=touch] .dnb-button--signal:active[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]){--border-color:var(--color-ocean-green);background-color:#fdbb31;background-color:var(--color-accent-yellow);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#00343e;color:var(--color-ocean-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #00343e;box-shadow:0 0 0 .125rem #00343e;-webkit-box-shadow:0 0 0 .125rem var(--color-ocean-green);box-shadow:0 0 0 .125rem var(--color-ocean-green)}}.dnb-button--signal:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:focus[disabled]{cursor:not-allowed}.dnb-button--signal:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fdbb31;background-color:var(--color-accent-yellow);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#00343e;color:var(--color-ocean-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){-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--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--signal:active[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:active[disabled]{cursor:not-allowed}.dnb-button--signal:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]){--border-color:transparent;background-color:#fdbb31;background-color:var(--color-accent-yellow);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#00343e;color:var(--color-ocean-green)}@media screen and (-ms-high-contrast:none){.dnb-button--signal:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--signal[disabled]{background-color:#feebc1;background-color:var(--color-accent-yellow-30);color:#ccc;color:var(--color-black-20)}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text),.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):after,.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):after{background-color:currentColor;bottom:0;content:"";left:0;position:absolute;top:0;width:.0625rem}html:not([data-whatintent=touch])
3
3
  .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch])
4
4
  .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover{-webkit-box-shadow:none;box-shadow:none;color:#fff;color:var(--color-white)}html:not([data-whatintent=touch])
@@ -10,4 +10,4 @@
10
10
  .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active{-webkit-box-shadow:none;box-shadow:none;color:#007272;color:var(--color-sea-green)}html:not([data-whatintent=touch])
11
11
  .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active,html:not([data-whatintent=touch])
12
12
  .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active:after{background-color:#d2f0e9;background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch])
13
- .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:#f8f8f8;background-color:var(--color-black-3);color:#737373;color:var(--color-black-55)}.dnb-button--primary{background-color:#14555a;background-color:var(--color-emerald-green)}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-sea-green);background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #007272;box-shadow:0 0 0 .125rem #007272;-webkit-box-shadow:0 0 0 .125rem var(--color-sea-green);box-shadow:0 0 0 .125rem var(--color-sea-green);opacity:1}}.dnb-button--primary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled]{cursor:not-allowed}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){--border-color:transparent;background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--primary[disabled]{--border-color:var(--color-black-55);background-color:#ebebeb;background-color:var(--color-black-8);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#737373;color:var(--color-black-55)}@media screen and (-ms-high-contrast:none){.dnb-button--primary[disabled]{-webkit-box-shadow:0 0 0 .0625rem #737373;box-shadow:0 0 0 .0625rem #737373;-webkit-box-shadow:0 0 0 .0625rem var(--color-black-55);box-shadow:0 0 0 .0625rem var(--color-black-55)}}.dnb-button--secondary{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem #14555a;box-shadow:0 0 0 .0625rem #14555a;-webkit-box-shadow:0 0 0 .0625rem var(--color-emerald-green);box-shadow:0 0 0 .0625rem var(--color-emerald-green)}}.dnb-button--secondary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled]{cursor:not-allowed}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){--border-color:transparent;background-color:#f2f4ec;background-color:var(--color-pistachio);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--secondary[disabled]{--border-color:var(--color-black-55);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#737373;color:var(--color-black-55)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary[disabled]{-webkit-box-shadow:0 0 0 .0625rem #737373;box-shadow:0 0 0 .0625rem #737373;-webkit-box-shadow:0 0 0 .0625rem var(--color-black-55);box-shadow:0 0 0 .0625rem var(--color-black-55)}}.dnb-button--tertiary{color:#14555a;color:var(--color-emerald-green)}.dnb-button--tertiary[disabled]{color:#737373;color:var(--color-black-55)}
13
+ .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:#f8f8f8;background-color:var(--color-black-3);color:#737373;color:var(--color-black-55)}.dnb-button--primary{background-color:#14555a;background-color:var(--color-emerald-green)}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-sea-green);background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #007272;box-shadow:0 0 0 .125rem #007272;-webkit-box-shadow:0 0 0 .125rem var(--color-sea-green);box-shadow:0 0 0 .125rem var(--color-sea-green);opacity:1}}.dnb-button--primary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled]{cursor:not-allowed}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){--border-color:transparent;background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--primary[disabled]{--border-color:var(--color-black-55);background-color:#ebebeb;background-color:var(--color-black-8);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#737373;color:var(--color-black-55)}@media screen and (-ms-high-contrast:none){.dnb-button--primary[disabled]{-webkit-box-shadow:0 0 0 .0625rem #737373;box-shadow:0 0 0 .0625rem #737373;-webkit-box-shadow:0 0 0 .0625rem var(--color-black-55);box-shadow:0 0 0 .0625rem var(--color-black-55)}}.dnb-button--secondary{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem #14555a;box-shadow:0 0 0 .0625rem #14555a;-webkit-box-shadow:0 0 0 .0625rem var(--color-emerald-green);box-shadow:0 0 0 .0625rem var(--color-emerald-green)}}.dnb-button--secondary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled]{cursor:not-allowed}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){--border-color:transparent;background-color:#f2f4ec;background-color:var(--color-pistachio);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--secondary[disabled]{--border-color:var(--color-black-55);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#737373;color:var(--color-black-55)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary[disabled]{-webkit-box-shadow:0 0 0 .0625rem #737373;box-shadow:0 0 0 .0625rem #737373;-webkit-box-shadow:0 0 0 .0625rem var(--color-black-55);box-shadow:0 0 0 .0625rem var(--color-black-55)}}.dnb-button--secondary:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){--border-color:transparent;background-color:#f2f4ec;background-color:var(--color-pistachio);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--tertiary{color:#14555a;color:var(--color-emerald-green)}.dnb-button--tertiary[disabled]{color:#737373;color:var(--color-black-55)}
@@ -61,6 +61,14 @@
61
61
  }
62
62
  }
63
63
 
64
+ // Icon button
65
+ .dnb-button--secondary:not(.dnb-button--has-text) {
66
+ @include buttonActive(
67
+ var(--color-emerald-green),
68
+ var(--color-pistachio)
69
+ );
70
+ }
71
+
64
72
  .dnb-button--tertiary {
65
73
  color: var(--color-emerald-green);
66
74
 
@@ -3,8 +3,8 @@
3
3
  *
4
4
  */
5
5
  /// <reference types="react" />
6
- import type { SliderProps, ValueTypes } from './types';
7
6
  import { ISpacingProps } from '../../shared/interfaces';
8
- export type { SliderProps, ValueTypes };
7
+ import type { SliderProps } from './types';
8
+ export * from './types';
9
9
  declare function Slider(localProps: SliderProps & ISpacingProps): JSX.Element;
10
10
  export default Slider;
@@ -1,8 +1,15 @@
1
1
  "use strict";
2
2
 
3
+ require("core-js/modules/es.object.to-string.js");
4
+
5
+ require("core-js/modules/web.dom-collections.for-each.js");
6
+
7
+ require("core-js/modules/es.object.keys.js");
8
+
3
9
  Object.defineProperty(exports, "__esModule", {
4
10
  value: true
5
11
  });
12
+ var _exportNames = {};
6
13
  exports.default = void 0;
7
14
 
8
15
  var _react = _interopRequireDefault(require("react"));
@@ -11,6 +18,20 @@ var _SliderProvider = require("./SliderProvider");
11
18
 
12
19
  var _SliderInstance2 = require("./SliderInstance");
13
20
 
21
+ var _types = require("./types");
22
+
23
+ Object.keys(_types).forEach(function (key) {
24
+ if (key === "default" || key === "__esModule") return;
25
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
26
+ if (key in exports && exports[key] === _types[key]) return;
27
+ Object.defineProperty(exports, key, {
28
+ enumerable: true,
29
+ get: function get() {
30
+ return _types[key];
31
+ }
32
+ });
33
+ });
34
+
14
35
  var _SliderInstance;
15
36
 
16
37
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -1,6 +1,6 @@
1
1
  import { formatOptionParams, formatValue, formatReturnType } from '../number-format/NumberUtils';
2
2
  import type { ValueTypes } from './types';
3
- export declare const percentToValue: (percent: number, min: number, max: number) => number;
3
+ export declare const percentToValue: (percent: number, min: number, max: number, isReverse: boolean) => number;
4
4
  export declare const roundToStep: (number: number, step: number) => number;
5
5
  export declare const getOffset: (node: HTMLElement) => {
6
6
  top: number;
@@ -10,7 +10,7 @@ export declare const getMousePosition: (event: MouseEvent & TouchEvent) => {
10
10
  x: number;
11
11
  y: number;
12
12
  };
13
- export declare const calculatePercent: (node: HTMLElement, event: MouseEvent | TouchEvent, isVertical: boolean, isReverted: boolean) => number;
13
+ export declare const calculatePercent: (node: HTMLElement, event: MouseEvent | TouchEvent, isVertical: boolean) => number;
14
14
  export declare const clamp: (value: number, min?: number, max?: number) => number;
15
15
  export declare const roundValue: (value: number, step: number) => number;
16
16
  export declare const createMockDiv: ({ width, height }: {
@@ -71,7 +71,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
71
71
 
72
72
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
73
73
 
74
- var percentToValue = function percentToValue(percent, min, max) {
74
+ var percentToValue = function percentToValue(percent, min, max, isReverse) {
75
75
  if (typeof min === 'string') {
76
76
  min = parseFloat(min);
77
77
  }
@@ -80,7 +80,13 @@ var percentToValue = function percentToValue(percent, min, max) {
80
80
  max = parseFloat(max);
81
81
  }
82
82
 
83
- return (max - min) * percent / 100 + min;
83
+ var num = (max - min) * percent / 100 + min;
84
+
85
+ if (isReverse) {
86
+ num = max + min - num;
87
+ }
88
+
89
+ return num;
84
90
  };
85
91
 
86
92
  exports.percentToValue = percentToValue;
@@ -127,7 +133,7 @@ var getMousePosition = function getMousePosition(event) {
127
133
 
128
134
  exports.getMousePosition = getMousePosition;
129
135
 
130
- var calculatePercent = function calculatePercent(node, event, isVertical, isReverted) {
136
+ var calculatePercent = function calculatePercent(node, event, isVertical) {
131
137
  var _node$getBoundingClie2 = node.getBoundingClientRect(),
132
138
  width = _node$getBoundingClie2.width,
133
139
  height = _node$getBoundingClie2.height;
@@ -142,7 +148,7 @@ var calculatePercent = function calculatePercent(node, event, isVertical, isReve
142
148
 
143
149
  var value = isVertical ? y - top : x - left;
144
150
  var onePercent = (isVertical ? height : width) / 100;
145
- return Math.abs((isReverted ? 100 : 0) - clamp(value / onePercent));
151
+ return Math.abs(clamp(value / onePercent));
146
152
  };
147
153
 
148
154
  exports.calculatePercent = calculatePercent;
@@ -71,7 +71,7 @@ function SliderInstance() {
71
71
  disabled = allProps.disabled,
72
72
  className = allProps.className;
73
73
  var mainParams = {
74
- className: (0, _classnames.default)("dnb-slider dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(allProps), className, isReverse && 'dnb-slider--reverse', isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', !showButtons && 'dnb-slider--no-buttons', (0, _componentHelper.isTrue)(stretch) && 'dnb-slider--stretch', label && labelDirection && "dnb-slider__label--".concat(labelDirection), showStatus && 'dnb-slider__form-status', status && "dnb-slider__status--".concat(statusState))
74
+ className: (0, _classnames.default)("dnb-slider dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(allProps), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', !showButtons && 'dnb-slider--no-buttons', (0, _componentHelper.isTrue)(stretch) && 'dnb-slider--stretch', label && labelDirection && "dnb-slider__label--".concat(labelDirection), showStatus && 'dnb-slider__form-status', status && "dnb-slider__status--".concat(statusState))
75
75
  };
76
76
  var subtractButton = showButtons ? _SubtractButton || (_SubtractButton = _react.default.createElement(SubtractButton, null)) : null;
77
77
  var addButton = showButtons ? _AddButton || (_AddButton = _react.default.createElement(AddButton, null)) : null;
@@ -48,7 +48,7 @@ var _SliderHelpers = require("./SliderHelpers");
48
48
 
49
49
  var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps");
50
50
 
51
- var _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatusId", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "numberFormat", "skeleton", "max", "min", "disabled", "className", "id", "onInit", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
51
+ var _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatusId", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "skeleton", "max", "min", "disabled", "className", "id", "onInit", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
52
52
 
53
53
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
54
54
 
@@ -74,7 +74,8 @@ var defaultProps = {
74
74
  subtractTitle: '−',
75
75
  min: 0,
76
76
  max: 100,
77
- value: -1
77
+ value: -1,
78
+ multiThumbBehavior: 'swap'
78
79
  };
79
80
 
80
81
  var SliderContext = _react.default.createContext(null);
@@ -113,6 +114,7 @@ function SliderProvider(localProps) {
113
114
  subtractTitle = allProps.subtractTitle,
114
115
  addTitle = allProps.addTitle,
115
116
  hideButtons = allProps.hideButtons,
117
+ multiThumbBehavior = allProps.multiThumbBehavior,
116
118
  numberFormat = allProps.numberFormat,
117
119
  skeleton = allProps.skeleton,
118
120
  max = allProps.max,
@@ -135,6 +137,8 @@ function SliderProvider(localProps) {
135
137
  value = _React$useState4[0],
136
138
  setValue = _React$useState4[1];
137
139
 
140
+ var realtimeValue = _react.default.useRef(_value);
141
+
138
142
  var _React$useState5 = _react.default.useState('initial'),
139
143
  _React$useState6 = _slicedToArray(_React$useState5, 2),
140
144
  thumbState = _React$useState6[0],
@@ -175,24 +179,57 @@ function SliderProvider(localProps) {
175
179
  return currentIndex;
176
180
  };
177
181
 
182
+ var updateValue = function updateValue(value) {
183
+ setValue(value);
184
+ realtimeValue.current = value;
185
+ };
186
+
178
187
  var emitChange = function emitChange(event, rawValue) {
179
188
  if (disabled || (0, _componentHelper.isTrue)(skeleton)) {
180
189
  return;
181
190
  }
182
191
 
183
- var currentValue = (0, _SliderHelpers.roundValue)(rawValue, step);
184
-
185
- if (currentValue > -1 && rawValue !== value) {
186
- var newValue = currentValue;
192
+ var numberValue = (0, _SliderHelpers.roundValue)(rawValue, step);
193
+ var multiValues = numberValue;
187
194
 
195
+ if (numberValue > -1) {
188
196
  if (isMulti) {
189
- var currentIndex = getAndUpdateCurrentIndex(currentValue);
190
- newValue = (0, _SliderHelpers.getUpdatedValues)(value, currentIndex, currentValue);
197
+ var currentIndex = getAndUpdateCurrentIndex(numberValue);
198
+ var lower = realtimeValue.current[currentIndex - 1];
199
+ var upper = realtimeValue.current[currentIndex + 1];
200
+
201
+ if (multiThumbBehavior === 'omit') {
202
+ if (numberValue < lower) {
203
+ numberValue = lower;
204
+ }
205
+
206
+ if (numberValue > upper) {
207
+ numberValue = upper;
208
+ }
209
+ }
210
+
211
+ multiValues = (0, _SliderHelpers.getUpdatedValues)(multiThumbBehavior === 'push' ? realtimeValue.current : value, currentIndex, numberValue);
212
+
213
+ if (multiThumbBehavior === 'push') {
214
+ if (typeof lower !== 'undefined' && numberValue < lower) {
215
+ multiValues[currentIndex - 1] = numberValue;
216
+ }
217
+
218
+ if (typeof upper !== 'undefined' && numberValue >= upper) {
219
+ multiValues[currentIndex + 1] = numberValue;
220
+ }
221
+ }
222
+
223
+ if (numberValue === realtimeValue.current[currentIndex]) {
224
+ return;
225
+ }
226
+ } else if (numberValue === realtimeValue.current) {
227
+ return;
191
228
  }
192
229
 
193
230
  if (typeof onChange === 'function') {
194
231
  var obj = {
195
- value: newValue,
232
+ value: multiValues,
196
233
  rawValue: rawValue,
197
234
  raw_value: rawValue,
198
235
  event: event,
@@ -200,13 +237,13 @@ function SliderProvider(localProps) {
200
237
  };
201
238
 
202
239
  if (numberFormat) {
203
- obj.number = (0, _SliderHelpers.formatNumber)(currentValue, numberFormat);
240
+ obj.number = (0, _SliderHelpers.formatNumber)(numberValue, numberFormat);
204
241
  }
205
242
 
206
243
  (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onChange', obj);
207
244
  }
208
245
 
209
- setValue(newValue);
246
+ updateValue(multiValues);
210
247
  }
211
248
  };
212
249
 
@@ -217,10 +254,10 @@ function SliderProvider(localProps) {
217
254
  });
218
255
 
219
256
  if (hasChanged) {
220
- setValue(_value);
257
+ updateValue(_value);
221
258
  }
222
259
  } else {
223
- setValue(_value);
260
+ updateValue(_value);
224
261
  }
225
262
  }, [_value, isMulti]);
226
263
 
@@ -54,6 +54,7 @@ function SliderThumb() {
54
54
  values = _useSliderProps.values,
55
55
  thumbIndex = _useSliderProps.thumbIndex,
56
56
  isVertical = _useSliderProps.isVertical,
57
+ isReverse = _useSliderProps.isReverse,
57
58
  showStatus = _useSliderProps.showStatus,
58
59
  attributes = _useSliderProps.attributes,
59
60
  allProps = _useSliderProps.allProps;
@@ -97,6 +98,10 @@ function SliderThumb() {
97
98
  var index = thumbIndex.current;
98
99
  var percent = (0, _SliderHelpers.clamp)((value - min) * 100 / (max - min));
99
100
 
101
+ if (isReverse) {
102
+ percent = 100 - percent;
103
+ }
104
+
100
105
  var style = _defineProperty({
101
106
  zIndex: index === i ? 4 : 3
102
107
  }, "".concat(isVertical ? 'top' : 'left'), "".concat(percent, "%"));
@@ -95,6 +95,7 @@ function SliderTrackBefore() {
95
95
  var _useSliderProps2 = (0, _useSliderProps3.useSliderProps)(),
96
96
  origValues = _useSliderProps2.values,
97
97
  isVertical = _useSliderProps2.isVertical,
98
+ isReverse = _useSliderProps2.isReverse,
98
99
  thumbIndex = _useSliderProps2.thumbIndex,
99
100
  _useSliderProps2$allP = _useSliderProps2.allProps,
100
101
  min = _useSliderProps2$allP.min,
@@ -116,8 +117,8 @@ function SliderTrackBefore() {
116
117
  var lowerPercent = 100 - (0, _SliderHelpers.clamp)((lowerValue - min) * 100 / (max - min));
117
118
  var units = [trackObj[isVertical ? 1 : 0][0], trackObj[isVertical ? 1 : 0][1]];
118
119
  var style = {};
119
- style[units[0]] = "".concat(lowerPercent, "%");
120
- style[units[1]] = "".concat(upperPercent, "%");
120
+ style[units[isReverse ? 1 : 0]] = "".concat(lowerPercent, "%");
121
+ style[units[isReverse ? 0 : 1]] = "".concat(upperPercent, "%");
121
122
  return _react.default.createElement("span", {
122
123
  className: "dnb-slider__line dnb-slider__line__before",
123
124
  style: style
@@ -19,10 +19,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
19
19
 
20
20
  function useSliderEvents() {
21
21
  var _React$useContext = _react.default.useContext(_SliderProvider.SliderContext),
22
+ isReverse = _React$useContext.isReverse,
22
23
  emitChange = _React$useContext.emitChange,
23
24
  trackRef = _React$useContext.trackRef,
24
25
  isVertical = _React$useContext.isVertical,
25
- isReverse = _React$useContext.isReverse,
26
26
  setJumpedState = _React$useContext.setJumpedState,
27
27
  setThumbState = _React$useContext.setThumbState,
28
28
  setThumbIndex = _React$useContext.setThumbIndex,
@@ -34,8 +34,8 @@ function useSliderEvents() {
34
34
  onDragEnd = allProps.onDragEnd;
35
35
 
36
36
  var onTrackClickHandler = function onTrackClickHandler(event) {
37
- var percent = (0, _SliderHelpers.calculatePercent)(trackRef.current, event, isVertical, isReverse);
38
- emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max));
37
+ var percent = (0, _SliderHelpers.calculatePercent)(trackRef.current, event, isVertical);
38
+ emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max, isReverse));
39
39
  setJumpedState();
40
40
  };
41
41
 
@@ -110,8 +110,8 @@ function useSliderEvents() {
110
110
  }
111
111
 
112
112
  if (elem) {
113
- var percent = (0, _SliderHelpers.calculatePercent)(elem, event, isVertical, isReverse);
114
- emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max));
113
+ var percent = (0, _SliderHelpers.calculatePercent)(elem, event, isVertical);
114
+ emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max, isReverse));
115
115
  }
116
116
  };
117
117
 
@@ -1 +1 @@
1
- export declare function useSliderProps(): import("../types").SliderContextTypes;
1
+ export declare function useSliderProps(): import("..").SliderContextTypes;
@@ -101,12 +101,6 @@
101
101
  min-width: inherit;
102
102
  min-height: inherit;
103
103
  }
104
- &--reverse &__track {
105
- transform: scaleX(-1);
106
- }
107
- &--reverse#{&}--vertical &__track {
108
- transform: scaleY(-1);
109
- }
110
104
 
111
105
  &__line {
112
106
  position: absolute;
@@ -180,7 +174,7 @@
180
174
  line-height: var(--slider-button-size);
181
175
  transform: translateY(0.25rem);
182
176
 
183
- z-index: 5;
177
+ z-index: 2;
184
178
  }
185
179
  &--vertical &__button.dnb-button--size-small {
186
180
  transform: translateX(0.25rem);
@@ -1217,12 +1217,6 @@ legend.dnb-form-label {
1217
1217
  height: inherit;
1218
1218
  min-width: inherit;
1219
1219
  min-height: inherit; }
1220
- .dnb-slider--reverse .dnb-slider__track {
1221
- -webkit-transform: scaleX(-1);
1222
- transform: scaleX(-1); }
1223
- .dnb-slider--reverse.dnb-slider--vertical .dnb-slider__track {
1224
- -webkit-transform: scaleY(-1);
1225
- transform: scaleY(-1); }
1226
1220
  .dnb-slider__line {
1227
1221
  position: absolute;
1228
1222
  left: 0;
@@ -1289,7 +1283,7 @@ legend.dnb-form-label {
1289
1283
  line-height: var(--slider-button-size);
1290
1284
  -webkit-transform: translateY(0.25rem);
1291
1285
  transform: translateY(0.25rem);
1292
- z-index: 5; }
1286
+ z-index: 2; }
1293
1287
  .dnb-slider--vertical .dnb-slider__button.dnb-button--size-small {
1294
1288
  -webkit-transform: translateX(0.25rem);
1295
1289
  transform: translateX(0.25rem); }