@dnb/eufemia 9.31.0 → 9.32.1

package/components/accordion/style/themes/dnb-accordion-theme-ui.min.css

@@ -1,3 +1,3 @@
-.dnb-accordion__header{border:none}>.dnb-accordion__header .dnb-accordion__header__container,>.dnb-accordion__header .dnb-accordion__header__icon{color:#14555a;color:var(--color-emerald-green)}>.dnb-accordion__header .dnb-accordion__header__description{color:#737373;color:var(--color-black-55)}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__title{font-weight:500;font-weight:var(--font-weight-medium)}.dnb-accordion__variant--outlined>.dnb-accordion__header{--border-color:var(--color-black-8);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:#333;color:var(--color-black-80)}@supports (-webkit-touch-callout:none){.dnb-accordion__variant--outlined>.dnb-accordion__header{-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-accordion__variant--outlined>.dnb-accordion__header{-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-accordion__variant--outlined>.dnb-accordion__header{-webkit-box-shadow:inset 0 0 0 1px #ebebeb;box-shadow:inset 0 0 0 1px #ebebeb;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-8);box-shadow:inset 0 0 0 1px var(--color-black-8)}}.dnb-accordion__variant--outlined>.dnb-accordion__header:focus[disabled],html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:focus[disabled]{cursor:not-allowed}.dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header: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-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header: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-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header: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-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header: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)}}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header: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-accordion__variant--outlined>.dnb-accordion__header: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-accordion__variant--outlined>.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]){--border-color:var(--color-emerald-green);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-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]){-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-accordion__variant--outlined>.dnb-accordion__header .dnb-accordion__header[disabled]{--border-color:var(--color-sea-green-30);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)}@media screen and (-ms-high-contrast:none){.dnb-accordion__variant--outlined>.dnb-accordion__header .dnb-accordion__header[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)}}.dnb-accordion__variant--outlined>.dnb-accordion__header .dnb-accordion__header[disabled] *{color:#b3dada;color:var(--color-sea-green-30)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header{--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-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header{-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header[disabled]{background-color:#b3dada;background-color:var(--color-sea-green-30)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header[disabled] *{color:#fff;color:var(--color-white)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header html[data-whatinput=keyboard]
-.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{background-color:#a5e1d2;background-color:var(--color-mint-green)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header html[data-whatinput=keyboard]
-.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus *{color:#14555a;color:var(--color-emerald-green)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{outline:none}html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-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-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-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-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-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-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header:not(:hover):not([disabled]) *{color:#fff;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active):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 .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){html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active):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-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active) *{color:#fff;color:var(--color-white)}
+.dnb-accordion__header{border:none}.dnb-accordion__header__container,.dnb-accordion__header__icon{color:#007272;color:var(--color-sea-green)}.dnb-accordion__header__description{color:#737373;color:var(--color-black-55)}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__title{font-weight:500;font-weight:var(--font-weight-medium)}.dnb-accordion__variant--outlined>.dnb-accordion__header{--border-color:var(--color-black-8);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:#333;color:var(--color-black-80)}@supports (-webkit-touch-callout:none){.dnb-accordion__variant--outlined>.dnb-accordion__header{-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-accordion__variant--outlined>.dnb-accordion__header{-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-accordion__variant--outlined>.dnb-accordion__header{-webkit-box-shadow:inset 0 0 0 1px #ebebeb;box-shadow:inset 0 0 0 1px #ebebeb;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-8);box-shadow:inset 0 0 0 1px var(--color-black-8)}}.dnb-accordion__variant--outlined>.dnb-accordion__header:focus[disabled],html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:focus[disabled]{cursor:not-allowed}.dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header: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-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header: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-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header: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-accordion__variant--outlined>.dnb-accordion__header:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header: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)}}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header: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-accordion__variant--outlined>.dnb-accordion__header: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-accordion__variant--outlined>.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]){--border-color:var(--color-emerald-green);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-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined>.dnb-accordion__header:active:not([disabled]){-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-accordion__variant--outlined>.dnb-accordion__header[disabled]{--border-color:var(--color-sea-green-30);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)}@media screen and (-ms-high-contrast:none){.dnb-accordion__variant--outlined>.dnb-accordion__header[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)}}.dnb-accordion__variant--outlined>.dnb-accordion__header[disabled] *{color:#b3dada;color:var(--color-sea-green-30)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header{--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-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header{-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header[disabled]{background-color:#b3dada;background-color:var(--color-sea-green-30)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header[disabled] *{color:#fff;color:var(--color-white)}html[data-whatinput=keyboard]
+.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{background-color:#a5e1d2;background-color:var(--color-mint-green)}html[data-whatinput=keyboard]
+.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus *{color:#14555a;color:var(--color-emerald-green)}.dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{outline:none}html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-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-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-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-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus{-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-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header:not(:hover):not([disabled]) *{color:#fff;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active):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 .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){html:not([data-whatintent=touch]) .dnb-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active):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-accordion__variant--outlined.dnb-accordion--expanded>.dnb-accordion__header.dnb-accordion--hover:not(:active) *{color:#fff;color:var(--color-white)}

package/components/accordion/style/themes/dnb-accordion-theme-ui.scss

@@ -10,12 +10,12 @@
   &__header {
     border: none;
   }
-  > &__header &__header__icon,
-  > &__header &__header__container {
-    color: var(--color-emerald-green);
+  &__header__icon,
+  &__header__container {
+    color: var(--color-sea-green);
   }
 
-  > &__header &__header__description {
+  &__header__description {
     color: var(--color-black-55);
   }
 
@@ -42,7 +42,7 @@
       @include fakeBorder(var(--color-emerald-green), 0.0625rem);
     }
   }
-  &__variant--outlined > &__header &__header[disabled] {
+  &__variant--outlined > &__header[disabled] {
     background-color: var(--color-white);
     @include fakeBorder(var(--color-sea-green-30), 0.0625rem);
     * {
@@ -55,7 +55,7 @@
 
     @include fakeBorder(transparent);
   }
-  &__variant--outlined#{&}--expanded > &__header &__header[disabled] {
+  &__variant--outlined#{&}--expanded > &__header[disabled] {
     background-color: var(--color-sea-green-30);
     * {
       color: var(--color-white);
@@ -63,24 +63,21 @@
   }
 
   // Additional focus handling
-  &__variant--outlined#{&}--expanded
-    > &__header
-    html[data-whatinput='keyboard']
-    &__header:not([disabled]):not(:active):not(:hover):focus {
+  html[data-whatinput='keyboard']
+    &__variant--outlined#{&}--expanded
+    > &__header:not([disabled]):not(:active):not(:hover):focus {
     background-color: var(--color-mint-green);
     * {
       color: var(--color-emerald-green);
     }
   }
   &__variant--outlined#{&}--expanded
-    > &__header
-    &__header:not([disabled]):not(:active):not(:hover):focus {
+    > &__header:not([disabled]):not(:active):not(:hover):focus {
     @include fakeFocus(null, var(--color-emerald-green), inset);
   }
 
   &__variant--outlined#{&}--expanded
-    > &__header
-    &__header:not(:hover):not([disabled]) {
+    > &__header:not(:hover):not([disabled]) {
     * {
       color: var(--color-white);
     }

package/components/avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ImgProps } from '../../elements/Img';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 import { SkeletonShow } from '../skeleton/Skeleton';
 import AvatarGroup from './AvatarGroup';
 export declare type AvatarSizes = 'small' | 'medium' | 'large' | 'x-large';
@@ -59,9 +59,9 @@ export declare const defaultProps: {
     skeleton: boolean;
 };
 declare const Avatar: {
-    (localProps: AvatarProps & ISpacingProps): JSX.Element;
-    Group: (localProps: import("./AvatarGroup").AvatarGroupProps & import("../../shared/interfaces").ISpacingElementProps & {
-        space?: import("../../shared/interfaces").ISpacingElementProps | import("../../shared/interfaces").SpaceTypes;
+    (localProps: AvatarProps & SpacingProps): JSX.Element;
+    Group: (localProps: import("./AvatarGroup").AvatarGroupProps & import("../../shared/types").SpacingElementProps & {
+        space?: import("../../shared/types").SpaceTypes | import("../../shared/types").SpacingElementProps;
     }) => JSX.Element;
 };
 export { AvatarGroup };

package/components/avatar/AvatarGroup.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AvatarSizes, AvatarVariants } from './Avatar';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 import { SkeletonShow } from '../skeleton/Skeleton';
 export interface AvatarGroupProps {
     /**
@@ -49,7 +49,7 @@ export declare const defaultProps: {
     skeleton: boolean;
 };
 export declare const AvatarGroupContext: React.Context<any>;
-declare const AvatarGroup: (localProps: AvatarGroupProps & ISpacingProps) => JSX.Element;
+declare const AvatarGroup: (localProps: AvatarGroupProps & SpacingProps) => JSX.Element;
 export interface ElementsHiddenProps {
     /**
      * The avatars to group.

package/components/badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 import { SkeletonShow } from '../skeleton/Skeleton';
 export interface BadgeProps {
     /**
@@ -43,7 +43,7 @@ export interface BadgeProps {
      */
     variant?: 'information' | 'notification';
 }
-declare type BadgeAndISpacingProps = BadgeProps & ISpacingProps;
+declare type BadgeAndSpacingProps = BadgeProps & SpacingProps;
 export declare const defaultProps: {
     label: any;
     className: any;
@@ -54,5 +54,5 @@ export declare const defaultProps: {
     horizontal: any;
     variant: string;
 };
-declare function Badge(localProps: BadgeAndISpacingProps): JSX.Element;
+declare function Badge(localProps: BadgeAndSpacingProps): JSX.Element;
 export default Badge;

package/components/breadcrumb/Breadcrumb.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SectionSpacing, SectionStyleTypes } from '../section/Section';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 import { SkeletonShow } from '../skeleton/Skeleton';
 import BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem';
 export interface BreadcrumbProps {
@@ -18,12 +18,12 @@ export interface BreadcrumbProps {
      * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.
      * Default: null
      */
-    data?: BreadcrumbItemProps[];
+    data?: Array<BreadcrumbItemProps>;
     /**
      * The content of the component. Can be used instead of prop "data".
      * Default: null
      */
-    children?: React.ReactNode;
+    children?: Array<React.ReactElement<BreadcrumbItemProps>>;
     /**
      * The variant of the component.
      * Default: When children and data is not defined, it defaults to "single". If they are defined, the variant depends on the viewport.
@@ -97,7 +97,7 @@ export declare const defaultProps: {
     spacing: boolean;
 };
 declare const Breadcrumb: {
-    (localProps: BreadcrumbProps & ISpacingProps): JSX.Element;
+    (localProps: BreadcrumbProps & SpacingProps): JSX.Element;
     Item: (localProps: BreadcrumbItemProps) => JSX.Element;
 };
 export { BreadcrumbItem };

package/components/breadcrumb/Breadcrumb.js

@@ -87,7 +87,7 @@ var Breadcrumb = function Breadcrumb(localProps) {
   }, props), React.createElement(Section, {
     className: "dnb-breadcrumb__bar",
     style_type: styleType || 'transparent',
-    spacing: isSmallScreen ? innerSpacing : false
+    spacing: innerSpacing
   }, currentVariant === 'collapse' && React.createElement(Button, {
     text: backToText,
     variant: "tertiary",

package/components/breadcrumb/BreadcrumbItem.d.ts

@@ -32,7 +32,8 @@ export interface BreadcrumbItemProps {
      * Default: null
      */
     skeleton?: SkeletonShow;
-    style?: React.CSSProperties;
+    /** Internal */
+    itemNr?: number;
 }
 declare const BreadcrumbItem: (localProps: BreadcrumbItemProps) => JSX.Element;
 export default BreadcrumbItem;

package/components/breadcrumb/BreadcrumbItem.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton", "style"];
+var _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton", "itemNr"];
 import React from 'react';
 import Button from '../button/Button';
 import IconPrimary from '../icon-primary/IconPrimary';
@@ -28,12 +28,15 @@ var BreadcrumbItem = function BreadcrumbItem(localProps) {
       onClick = _extendPropsWithConte.onClick,
       variant = _extendPropsWithConte.variant,
       skeleton = _extendPropsWithConte.skeleton,
-      style = _extendPropsWithConte.style,
+      itemNr = _extendPropsWithConte.itemNr,
       props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
 
   var currentIcon = icon || variant === 'home' && homeIcon || 'chevron_left';
   var currentText = text || variant === 'home' && homeText || '';
   var isInteractive = (href || onClick) && variant !== 'current';
+  var style = {
+    '--delay': String(itemNr)
+  };
   return React.createElement("li", {
     className: "dnb-breadcrumb__item",
     "data-testid": "breadcrumb-item",

package/components/breadcrumb/BreadcrumbMultiple.d.ts

@@ -4,7 +4,7 @@ declare type BreadcrumbMultipleProps = {
     isCollapsed: boolean;
     noAnimation: boolean;
     data: Array<BreadcrumbItemProps>;
-    items: React.ReactNode;
+    items: Array<React.ReactElement<BreadcrumbItemProps>>;
 };
 export declare const BreadcrumbMultiple: ({ isCollapsed, items, noAnimation, data, }: BreadcrumbMultipleProps) => JSX.Element;
 export {};

package/components/breadcrumb/BreadcrumbMultiple.js

@@ -19,13 +19,15 @@ export var BreadcrumbMultiple = function BreadcrumbMultiple(_ref) {
     element: "ol",
     style_type: "transparent"
   }, data === null || data === void 0 ? void 0 : data.map(function (breadcrumbItem, i) {
-    var style = {
-      '--delay': String(i)
-    };
     return React.createElement(BreadcrumbItem, _extends({
       key: "".concat(breadcrumbItem.text),
       variant: i == 0 && 'home' || i == data.length - 1 && 'current' || null,
-      style: style
+      itemNr: i
     }, breadcrumbItem));
-  }), items));
+  }), items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+    return React.cloneElement(item, {
+      key: i,
+      itemNr: i
+    });
+  })));
 };

package/components/button/Button.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SkeletonShow } from '../skeleton/Skeleton';
 import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
-import { DataAttributeTypes } from '../../shared/interfaces';
+import { DataAttributeTypes } from '../../shared/types';
 export type ButtonText = string | React.ReactNode;
 export type ButtonVariant =
   | 'primary'

package/components/height-animation/HeightAnimation.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DynamicElement, ISpacingProps } from '../../shared/interfaces';
+import { DynamicElement, SpacingProps } from '../../shared/types';
 import { useHeightAnimationOptions } from './useHeightAnimation';
 export declare type HeightAnimationProps = {
     /**
@@ -24,4 +24,4 @@ export declare type HeightAnimationProps = {
     innerRef?: React.RefObject<HTMLElement>;
     className?: React.ReactNode;
 } & useHeightAnimationOptions;
-export default function HeightAnimation({ open, animate, keepInDOM, element, duration, className, innerRef, children, onInit, onOpen, onAnimationEnd, ...props }: HeightAnimationProps & ISpacingProps): JSX.Element;
+export default function HeightAnimation({ open, animate, keepInDOM, element, duration, className, innerRef, children, onInit, onOpen, onAnimationEnd, ...props }: HeightAnimationProps & SpacingProps): JSX.Element;

package/components/height-animation/HeightAnimation.js

@@ -53,7 +53,7 @@ export default function HeightAnimation(_ref) {
   return React.createElement(Space, _extends({
     innerRef: innerRef || ref,
     element: element || 'div',
-    className: classnames('dnb-height-animation', className, isInDOM && 'dnb-height-animation--is-in-dom', isVisible && 'dnb-height-animation--is-visible', isVisibleParallax && 'dnb-height-animation--parallax', isAnimating && 'dnb-height-animation--animating'),
+    className: classnames('dnb-height-animation', className, isVisible ? 'dnb-height-animation--is-visible' : !isAnimating && !open && 'dnb-height-animation--hidden', isInDOM && 'dnb-height-animation--is-in-dom', isVisibleParallax && 'dnb-height-animation--parallax', isAnimating && 'dnb-height-animation--animating'),
     style: style,
     "aria-hidden": keepInDOM ? !open : undefined
   }, props), children);

package/components/info-card/InfoCard.d.ts

@@ -3,7 +3,7 @@ import { ButtonProps } from '../button/Button';
 import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
 import { ImgProps } from '../../elements/Img';
 import { SkeletonShow } from '../skeleton/Skeleton';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 export interface InfoCardProps {
     /**
      * Used in combination with `src` to provide an alt attribute for the `img` element.
@@ -86,5 +86,5 @@ export declare const defaultProps: {
     skeleton: boolean;
     icon: (props: any) => JSX.Element;
 };
-declare const InfoCard: (localProps: InfoCardProps & ISpacingProps) => JSX.Element;
+declare const InfoCard: (localProps: InfoCardProps & SpacingProps) => JSX.Element;
 export default InfoCard;

package/components/lib.d.ts

@@ -2,17 +2,17 @@ export function getComponents(): {
     Accordion: typeof Accordion;
     Autocomplete: typeof Autocomplete;
     Avatar: {
-        (localProps: import("./avatar/Avatar").AvatarProps & import("../shared/interfaces").ISpacingElementProps & {
-            space?: import("../shared/interfaces").ISpacingElementProps | import("../shared/interfaces").SpaceTypes;
+        (localProps: import("./avatar/Avatar").AvatarProps & import("../shared/types").SpacingElementProps & {
+            space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
         }): JSX.Element;
-        Group: (localProps: import("./avatar/AvatarGroup").AvatarGroupProps & import("../shared/interfaces").ISpacingElementProps & {
-            space?: import("../shared/interfaces").ISpacingElementProps | import("../shared/interfaces").SpaceTypes;
+        Group: (localProps: import("./avatar/AvatarGroup").AvatarGroupProps & import("../shared/types").SpacingElementProps & {
+            space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
         }) => JSX.Element;
     };
     Badge: typeof Badge;
     Breadcrumb: {
-        (localProps: import("./breadcrumb/Breadcrumb").BreadcrumbProps & import("../shared/interfaces").ISpacingElementProps & {
-            space?: import("../shared/interfaces").ISpacingElementProps | import("../shared/interfaces").SpaceTypes;
+        (localProps: import("./breadcrumb/Breadcrumb").BreadcrumbProps & import("../shared/types").SpacingElementProps & {
+            space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
         }): JSX.Element;
         Item: (localProps: import("./breadcrumb/BreadcrumbItem").BreadcrumbItemProps) => JSX.Element;
     };
@@ -33,8 +33,8 @@ export function getComponents(): {
     HelpButton: typeof HelpButton;
     Icon: typeof Icon;
     IconPrimary: typeof IconPrimary;
-    InfoCard: (localProps: import("./info-card/InfoCard").InfoCardProps & import("../shared/interfaces").ISpacingElementProps & {
-        space?: import("../shared/interfaces").ISpacingElementProps | import("../shared/interfaces").SpaceTypes;
+    InfoCard: (localProps: import("./info-card/InfoCard").InfoCardProps & import("../shared/types").SpacingElementProps & {
+        space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
     }) => JSX.Element;
     Input: typeof Input;
     InputMasked: import("react").FC<import("./input-masked/InputMasked").InputMaskedProps>;
@@ -51,24 +51,24 @@ export function getComponents(): {
     StepIndicator: typeof StepIndicator;
     Switch: typeof Switch;
     Table: {
-        (componentProps: import("./table/Table").TableProps & import("react").TableHTMLAttributes<HTMLTableElement> & import("../shared/interfaces").ISpacingElementProps & {
-            space?: import("../shared/interfaces").ISpacingElementProps | import("../shared/interfaces").SpaceTypes;
+        (componentProps: import("./table/Table").TableProps & import("react").TableHTMLAttributes<HTMLTableElement> & import("../shared/types").SpacingElementProps & {
+            space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
         }): JSX.Element;
         StickyHelper: () => JSX.Element;
     };
     Tabs: typeof Tabs;
     Tag: {
-        (localProps: import("./tag/Tag").TagProps & import("../shared/interfaces").ISpacingElementProps & {
-            space?: import("../shared/interfaces").ISpacingElementProps | import("../shared/interfaces").SpaceTypes;
+        (localProps: import("./tag/Tag").TagProps & import("../shared/types").SpacingElementProps & {
+            space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
         }): JSX.Element;
-        Group: (localProps: import("./tag/TagGroup").TagGroupProps & import("../shared/interfaces").ISpacingElementProps & {
-            space?: import("../shared/interfaces").ISpacingElementProps | import("../shared/interfaces").SpaceTypes;
+        Group: (localProps: import("./tag/TagGroup").TagGroupProps & import("../shared/types").SpacingElementProps & {
+            space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
         }) => JSX.Element;
     };
     Textarea: typeof Textarea;
     Timeline: {
-        (localProps: import("./timeline/Timeline").TimelineProps & import("../shared/interfaces").ISpacingElementProps & {
-            space?: import("../shared/interfaces").ISpacingElementProps | import("../shared/interfaces").SpaceTypes;
+        (localProps: import("./timeline/Timeline").TimelineProps & import("../shared/types").SpacingElementProps & {
+            space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
         }): JSX.Element;
         Item: (localProps: import("./timeline/TimelineItem").TimelineItemProps) => JSX.Element;
     };

package/components/modal/Modal.d.ts

@@ -10,14 +10,14 @@ import ModalHeader from './parts/ModalHeader';
 import ModalHeaderBar from './parts/ModalHeaderBar';
 import { ScrollViewProps } from '../../fragments/scroll-view/ScrollView';
 import CloseButton from './parts/CloseButton';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 import { ToCamelCasePartial } from '../../shared/helpers/withCamelCaseProps';
 export declare const ANIMATION_DURATION = 300;
 interface ModalState {
     hide: boolean;
     modalActive: boolean;
 }
-export declare type ModalPropTypes = ModalProps & ISpacingProps & Omit<ScrollViewProps, 'title'>;
+export declare type ModalPropTypes = ModalProps & SpacingProps & Omit<ScrollViewProps, 'title'>;
 declare class Modal extends React.PureComponent<ModalPropTypes & ToCamelCasePartial<ModalPropTypes>, ModalState> {
     static contextType: React.Context<import("../../shared/Context").ContextProps>;
     static tagName: string;

package/components/section/Section.d.ts

@@ -3,7 +3,7 @@
  *
  */
 import React from 'react';
-import { DynamicElement, ISpacingProps } from '../../shared/interfaces';
+import { DynamicElement, SpacingProps } from '../../shared/types';
 export declare type SectionStyleTypes = 'divider' | 'white' | 'transparent' | 'lavender' | 'pistachio' | 'emerald-green' | 'sea-green' | 'fire-red' | 'fire-red-8' | 'sand-yellow' | 'black-3' | 'mint-green' | 'mint-green-12';
 export declare type SectionSpacing = boolean | 'x-small' | 'small' | 'medium' | 'large';
 export declare type SectionProps = {
@@ -22,7 +22,7 @@ export declare type SectionProps = {
     inner_ref?: React.RefObject<HTMLElement>;
     className?: string;
     children?: React.ReactNode;
-} & ISpacingProps & React.HTMLProps<HTMLElement>;
+} & SpacingProps & React.HTMLProps<HTMLElement>;
 declare function Section(localProps: SectionProps): JSX.Element;
 declare namespace Section {
     var tagName: string;

package/components/slider/SliderThumb.js

@@ -6,7 +6,7 @@ import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.map.js";
 import React from 'react';
-import { combineDescribedBy, combineLabelledBy, validateDOMAttributes } from '../../shared/component-helper';
+import { combineDescribedBy, combineLabelledBy, validateDOMAttributes, warn } from '../../shared/component-helper';
 import Button from '../button/Button';
 import Tooltip from '../tooltip/Tooltip';
 import { useSliderEvents } from './hooks/useSliderEvents';
@@ -75,6 +75,12 @@ function Thumb(_ref) {
 
   var onMouseLeaveHandler = function onMouseLeaveHandler() {
     setShowTooltip(false);
+
+    try {
+      elemRef.current.dispatchEvent(new Event('mouseleave'));
+    } catch (e) {
+      warn(e);
+    }
   };
 
   var _useSliderEvents = useSliderEvents(),
@@ -105,6 +111,12 @@ function Thumb(_ref) {
     helperParams.onFocus = function (event) {
       onHelperFocusHandler(event);
       onMouseEnterHandler();
+
+      try {
+        elemRef.current.dispatchEvent(new Event('mouseenter'));
+      } catch (e) {
+        warn(e);
+      }
     };
   }
 
@@ -112,8 +124,7 @@ function Thumb(_ref) {
   var elemRef = React.useRef();
   return React.createElement(React.Fragment, null, React.createElement("span", {
     className: "dnb-slider__thumb",
-    style: style,
-    ref: elemRef
+    style: style
   }, React.createElement("input", _extends({
     type: "range",
     className: "dnb-slider__button-helper",
@@ -137,12 +148,14 @@ function Thumb(_ref) {
     type: "",
     variant: "secondary",
     disabled: disabled,
-    skeleton: skeleton
+    skeleton: skeleton,
+    innerRef: elemRef
   }, thumbParams)), tooltip && React.createElement(Tooltip, {
     key: "group-".concat(currentIndex),
     targetElement: elemRef,
     animatePosition: shouldAnimate,
-    active: showTooltip || alwaysShowTooltip,
+    active: Boolean(showTooltip || alwaysShowTooltip),
+    showDelay: 1,
     hideDelay: 300
   }, number || value, shouldAnimate)));
 }

package/components/slider/SliderTrack.js

@@ -27,8 +27,7 @@ export function SliderMainTrack(_ref) {
       onInit = allProps.onInit;
 
   var _useSliderEvents = useSliderEvents(),
-      onTrackMouseUpHandler = _useSliderEvents.onTrackMouseUpHandler,
-      onThumbMouseDownHandler = _useSliderEvents.onThumbMouseDownHandler,
+      onTrackMouseDownHandler = _useSliderEvents.onTrackMouseDownHandler,
       removeEvents = _useSliderEvents.removeEvents;
 
   React.useEffect(function () {
@@ -51,10 +50,8 @@ export function SliderMainTrack(_ref) {
     };
   }, []);
   var trackParams = {
-    onTouchStart: onTrackMouseUpHandler,
-    onTouchStartCapture: onThumbMouseDownHandler,
-    onMouseDown: onTrackMouseUpHandler,
-    onMouseDownCapture: onThumbMouseDownHandler
+    onTouchStart: onTrackMouseDownHandler,
+    onMouseDown: onTrackMouseDownHandler
   };
   return React.createElement("span", _extends({
     id: id,

package/components/slider/hooks/useSliderEvents.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 export declare function useSliderEvents(): {
-    onThumbMouseDownHandler: (event: React.SyntheticEvent) => void;
+    onThumbMouseDownHandler: (event: MouseEvent | TouchEvent | React.SyntheticEvent) => void;
     onThumbMouseUpHandler: () => void;
-    onTrackMouseUpHandler: (event: MouseEvent | TouchEvent) => void;
+    onTrackMouseDownHandler: (event: MouseEvent | TouchEvent) => void;
     onHelperChangeHandler: (event: React.FormEvent<HTMLInputElement>) => void;
     onHelperFocusHandler: (event: React.FormEvent<HTMLInputElement>) => void;
     removeEvents: () => void;

package/components/slider/hooks/useSliderEvents.js

@@ -19,7 +19,8 @@ export function useSliderEvents() {
       onDragStart = allProps.onDragStart,
       onDragEnd = allProps.onDragEnd;
 
-  var onTrackMouseUpHandler = function onTrackMouseUpHandler(event) {
+  var onTrackMouseDownHandler = function onTrackMouseDownHandler(event) {
+    onThumbMouseDownHandler(event);
     var percent = calculatePercent(trackRef.current, event, isVertical);
     emitChange(event, percentToValue(percent, min, max, isReverse));
     setShouldAnimate(true);
@@ -107,7 +108,7 @@ export function useSliderEvents() {
   return {
     onThumbMouseDownHandler: onThumbMouseDownHandler,
     onThumbMouseUpHandler: onThumbMouseUpHandler,
-    onTrackMouseUpHandler: onTrackMouseUpHandler,
+    onTrackMouseDownHandler: onTrackMouseDownHandler,
     onHelperChangeHandler: onHelperChangeHandler,
     onHelperFocusHandler: onHelperFocusHandler,
     removeEvents: removeEvents

package/components/slider/types.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import type { SuffixChildren } from '../../shared/helpers/Suffix';
 import type { formatReturnType, formatOptionParams } from '../number-format/NumberUtils';
 import { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 export declare type ValueTypes = number | Array<number>;
 export declare type NumberFormatTypes = formatOptionParams | ((value: number) => unknown);
 export declare type onChangeEventProps = {
@@ -83,7 +83,7 @@ export declare type SliderProps = IncludeSnakeCase<{
     use_scrollwheel?: boolean;
     children?: React.ReactChild;
 }>;
-export declare type SliderAllProps = SliderProps & ISpacingProps & Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>;
+export declare type SliderAllProps = SliderProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>;
 export declare type ThumbStateEnums = 'initial' | 'normal' | 'activated' | 'released';
 export declare type SliderContextTypes = {
     isMulti: boolean;

package/components/table/Table.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SkeletonShow } from '../skeleton/Skeleton';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 import { StickyHelper, StickyTableHeaderProps } from './TableStickyHeader';
 export declare type TableSizes = 'medium' | 'large';
 export declare type TableVariants = 'basis' | 'not-defined-yet';
@@ -34,7 +34,7 @@ export declare const defaultProps: {
     variant: string;
 };
 declare const Table: {
-    (componentProps: TableProps & React.TableHTMLAttributes<HTMLTableElement> & ISpacingProps): JSX.Element;
+    (componentProps: TableProps & React.TableHTMLAttributes<HTMLTableElement> & SpacingProps): JSX.Element;
     StickyHelper: () => JSX.Element;
 };
 export default Table;

package/components/tag/Tag.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SpacingProps } from '../../shared/types';
 import { SkeletonShow } from '../skeleton/Skeleton';
 export interface TagProps {
     /**
@@ -59,9 +59,9 @@ export declare const defaultProps: {
     omitOnKeyUpDeleteEvent: boolean;
 };
 declare const Tag: {
-    (localProps: TagProps & ISpacingProps): JSX.Element;
-    Group: (localProps: import("./TagGroup").TagGroupProps & import("../../shared/interfaces").ISpacingElementProps & {
-        space?: import("../../shared/interfaces").ISpacingElementProps | import("../../shared/interfaces").SpaceTypes;
+    (localProps: TagProps & SpacingProps): JSX.Element;
+    Group: (localProps: import("./TagGroup").TagGroupProps & import("../../shared/types").SpacingElementProps & {
+        space?: import("../../shared/types").SpaceTypes | import("../../shared/types").SpacingElementProps;
     }) => JSX.Element;
 };
 export default Tag;