@dnb/eufemia 9.31.0 → 9.32.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.32.1](https://github.com/dnbexperience/eufemia/compare/v9.32.0...v9.32.1) (2022-10-09)
+
+
+### Bug Fixes
+
+* **Tooltip:** make skipPortal properly inline and accessible to screen readers ([#1613](https://github.com/dnbexperience/eufemia/issues/1613)) ([0d32910](https://github.com/dnbexperience/eufemia/commit/0d32910fe64a541b6b6b99bc04f01bacdf558b0f))
+* **Tooltip:** remove left over DOM elements when component unmounts ([#1612](https://github.com/dnbexperience/eufemia/issues/1612)) ([ddd26ed](https://github.com/dnbexperience/eufemia/commit/ddd26ed9dd5ab3c858c843def8598a486d3212ea))
+
+# [9.32.0](https://github.com/dnbexperience/eufemia/compare/v9.31.0...v9.32.0) (2022-10-06)
+
+
+### Bug Fixes
+
+* **Accordion:** change icon color from emerald-green to sea-green ([#1600](https://github.com/dnbexperience/eufemia/issues/1600)) ([4206dfa](https://github.com/dnbexperience/eufemia/commit/4206dfa9628f993e775169d311ef908131ae342b))
+* **Breadcrumb:** ensure correct spacing when collapsed ([#1606](https://github.com/dnbexperience/eufemia/issues/1606)) ([39d53f6](https://github.com/dnbexperience/eufemia/commit/39d53f68c8a956011aad5e012c97bd50f1067f79))
+* **Breadcrumb:** make animation work when declarative declared ([#1605](https://github.com/dnbexperience/eufemia/issues/1605)) ([ab1d8eb](https://github.com/dnbexperience/eufemia/commit/ab1d8ebe791d1ddb49a201c2710ccd5772d6fb7a))
+* **Interfaces:** refactor /shared/interfaces and move to /shared/types ([#1601](https://github.com/dnbexperience/eufemia/issues/1601)) ([e10ac34](https://github.com/dnbexperience/eufemia/commit/e10ac3468a441786c87c93135263174c3b63659c))
+* **Lists:** rewrite Dl, Ol and Ul (and Li) to TypeScript ([#1610](https://github.com/dnbexperience/eufemia/issues/1610)) ([4646775](https://github.com/dnbexperience/eufemia/commit/464677598809e6a601214eeadf6c916dd6de64a7))
+
+
+### Features
+
+* **HeightAnimation:** add --hidden class when closed and keepInDOM is true ([#1607](https://github.com/dnbexperience/eufemia/issues/1607)) ([3d9313e](https://github.com/dnbexperience/eufemia/commit/3d9313e258fc00692d94e3c17bff27174d17b7d6))
+
 # [9.31.0](https://github.com/dnbexperience/eufemia/compare/v9.30.0...v9.31.0) (2022-10-03)
 
 

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

@@ -17,12 +17,11 @@
 .dnb-accordion__header {
   border: none; }
 
-> .dnb-accordion__header .dnb-accordion__header__icon,
-> .dnb-accordion__header .dnb-accordion__header__container {
-  color: #14555a;
-  color: var(--color-emerald-green); }
+.dnb-accordion__header__icon, .dnb-accordion__header__container {
+  color: #007272;
+  color: var(--color-sea-green); }
 
-> .dnb-accordion__header .dnb-accordion__header__description {
+.dnb-accordion__header__description {
   color: #737373;
   color: var(--color-black-55); }
 
@@ -135,7 +134,7 @@
         -webkit-box-shadow: 0 0 0 0.0625rem var(--color-emerald-green);
                 box-shadow: 0 0 0 0.0625rem var(--color-emerald-green); } }
 
-.dnb-accordion__variant--outlined > .dnb-accordion__header .dnb-accordion__header[disabled] {
+.dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] {
   background-color: #fff;
   background-color: var(--color-white);
   --border-color: var(--color-sea-green-30);
@@ -143,12 +142,12 @@
           box-shadow: 0 0 0 0.0625rem var(--border-color);
   border-color: transparent; }
   @media screen and (-ms-high-contrast: none) {
-    .dnb-accordion__variant--outlined > .dnb-accordion__header .dnb-accordion__header[disabled] {
+    .dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] {
       -webkit-box-shadow: 0 0 0 0.0625rem #b3dada;
               box-shadow: 0 0 0 0.0625rem #b3dada;
       -webkit-box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30);
               box-shadow: 0 0 0 0.0625rem var(--color-sea-green-30); } }
-  .dnb-accordion__variant--outlined > .dnb-accordion__header .dnb-accordion__header[disabled] * {
+  .dnb-accordion__variant--outlined > .dnb-accordion__header[disabled] * {
     color: #b3dada;
     color: var(--color-sea-green-30); }
 
@@ -166,25 +165,25 @@
       -webkit-box-shadow: 0 0 0 0.0625rem transparent;
               box-shadow: 0 0 0 0.0625rem transparent; } }
 
-.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header .dnb-accordion__header[disabled] {
+.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 .dnb-accordion__header[disabled] * {
+  .dnb-accordion__variant--outlined.dnb-accordion--expanded > .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 {
+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); }
-  .dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header html[data-whatinput='keyboard']
-.dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus * {
+  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 .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
+.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 .dnb-accordion__header:not([disabled]):not(:active):not(:hover):focus {
+  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);
     -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
             box-shadow: inset 0 0 0 0.125rem var(--border-color);
@@ -192,22 +191,22 @@
     /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
     border-color: transparent; }
     @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 {
+      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 0.125rem var(--border-color);
                 box-shadow: 0 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 {
+        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 0.125rem var(--border-color);
                   box-shadow: 0 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 {
+      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 0.125rem #14555a;
                 box-shadow: inset 0 0 0 0.125rem #14555a;
         -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
                 box-shadow: inset 0 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]) * {
+.dnb-accordion__variant--outlined.dnb-accordion--expanded > .dnb-accordion__header:not(:hover):not([disabled]) * {
   color: #fff;
   color: var(--color-white); }
 

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/breadcrumb/Breadcrumb.js

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

package/cjs/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/cjs/components/breadcrumb/BreadcrumbItem.js

@@ -27,7 +27,7 @@ var _Context = _interopRequireDefault(require("../../shared/Context"));
 
 var _componentHelper = require("../../shared/component-helper");
 
-var _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton", "style"];
+var _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton", "itemNr"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -58,12 +58,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' && _home.default || 'chevron_left';
   var currentText = text || variant === 'home' && homeText || '';
   var isInteractive = (href || onClick) && variant !== 'current';
+  var style = {
+    '--delay': String(itemNr)
+  };
   return _react.default.createElement("li", {
     className: "dnb-breadcrumb__item",
     "data-testid": "breadcrumb-item",

package/cjs/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/cjs/components/breadcrumb/BreadcrumbMultiple.js

@@ -36,15 +36,17 @@ 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.default.createElement(_BreadcrumbItem.default, _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.default.cloneElement(item, {
+      key: i,
+      itemNr: i
+    });
+  })));
 };
 
 exports.BreadcrumbMultiple = BreadcrumbMultiple;

package/cjs/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/cjs/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/cjs/components/height-animation/HeightAnimation.js

@@ -79,7 +79,7 @@ function HeightAnimation(_ref) {
   return _react.default.createElement(_Space.default, _extends({
     innerRef: innerRef || ref,
     element: element || 'div',
-    className: (0, _classnames.default)('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: (0, _classnames.default)('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/cjs/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/cjs/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/cjs/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/cjs/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;