@dnb/eufemia 9.26.1 → 9.27.0

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

@@ -0,0 +1,2 @@
+.dnb-table>tbody>tr>td,.dnb-table>thead>tr>th,.dnb-table>tr>td,.dnb-table>tr>th,.dnb-table__td,.dnb-table__th{border-spacing:0;font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis);word-break:keep-all}.dnb-table>thead>tr>th,.dnb-table>tr>th,.dnb-table__th{background-color:#fff;background-color:var(--color-white);color:#000;color:var(--color-black);font-weight:500;font-weight:var(--font-weight-medium);padding:3rem 1rem .5rem;padding:var(--spacing-x-large) var(--spacing-small) var(--spacing-x-small);vertical-align:bottom}.dnb-table>thead>tr>th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center),.dnb-table>tr>th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center),.dnb-table__th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center){text-align:inherit}@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal){.dnb-table>thead>tr>th,.dnb-table>tr>th,.dnb-table__th{padding-bottom:calc(.5rem - .5px);padding-bottom:calc(var(--spacing-x-small) - .5px)}}.dnb-table>tbody>tr>td,.dnb-table>tr>td,.dnb-table>tr>th[scope=row],.dnb-table__td{color:currentColor;color:var(--theme-color-black-80,currentColor);padding:1rem;padding:var(--spacing-small);padding-bottom:1.188rem;padding-bottom:calc(var(--spacing-small)*1.188);padding-top:1.25rem;padding-top:calc(var(--spacing-small)*1.25)}.dnb-table .dnb-table__tr,.dnb-table .dnb-table__tr--odd,.dnb-table>tbody>tr{background-color:#fff;background-color:var(--color-white)}.dnb-table .dnb-table__tr--even,.dnb-table .dnb-table__tr:not(.dnb-table__tr--odd):nth-of-type(2n),.dnb-table>tbody>tr:not(.dnb-table__tr--odd):nth-of-type(2n){background-color:#f2f2f5;background-color:var(--color-lavender)}.dnb-table .dnb-table__tr,.dnb-table>tbody>tr,.dnb-table>thead>tr{position:relative}.dnb-table>.dnb-table__tr:last-of-type:after,.dnb-table>tbody>tr:last-of-type:after,.dnb-table>thead>tr:last-of-type:after{background-color:#ebebeb;background-color:var(--color-black-8);bottom:-1px;content:"";height:1px;left:0;position:absolute;right:0;z-index:1}.dnb-table .dnb-table__th.dnb-table--sortable,.dnb-table>thead>tr>th.dnb-table--sortable{color:#14555a;color:var(--color-emerald-green)}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-shadow:none;box-shadow:none;color:inherit;font-size:inherit;font-weight:500;font-weight:var(--font-weight-medium);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0 .5rem 0 0;position:relative;text-align:inherit;z-index:1}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor>.dnb-icon,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button>.dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor>.dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button>.dnb-icon{opacity:0;-webkit-transition:opacity .2s ease-out,-webkit-transform .5s ease-out;transition:opacity .2s ease-out,-webkit-transform .5s ease-out;transition:opacity .2s ease-out,transform .5s ease-out;transition:opacity .2s ease-out,transform .5s ease-out,-webkit-transform .5s ease-out}[data-visual-test-wrapper] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor>.dnb-icon,[data-visual-test-wrapper] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button>.dnb-icon,[data-visual-test-wrapper] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor>.dnb-icon,[data-visual-test-wrapper] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button>.dnb-icon{-webkit-transition:none;transition:none}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor .dnb-button__text,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button .dnb-button__text{font-size:inherit;margin:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text:after,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button .dnb-button__text:after{right:1rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__icon,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor .dnb-button__icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button .dnb-button__icon{-ms-flex-item-align:end;align-self:flex-end;margin-bottom:.25rem;margin-top:auto}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text:after,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text:after{color:#14555a;color:var(--color-emerald-green);opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:hover:not([disabled]){color:#007272;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon{opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text:after{opacity:0}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]):before,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus:not([disabled]):before{bottom:-.5rem;content:"";left:-1rem;position:absolute;right:.5rem;right:-.5rem;top:-.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon{opacity:1}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active[disabled],.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active[disabled]{cursor:not-allowed}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]),.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]){color:#14555a;color:var(--color-emerald-green)}html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{border-radius:inherit;bottom:0;height:inherit;left:-.5rem;outline:none;top:0;z-index:1}html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:active:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:active:not([disabled]):before{bottom:-.5rem;content:"";left:-1rem;position:absolute;right:.5rem;right:-.5rem;top:-.5rem}.dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text:after,.dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text:after{visibility:hidden}.dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text:after,.dnb-table .dnb-table__th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text:after{opacity:0}.dnb-table .dnb-table__th.dnb-table--active .dnb-anchor .dnb-icon,.dnb-table .dnb-table__th.dnb-table--active .dnb-button .dnb-icon,.dnb-table>thead>tr>th.dnb-table--active .dnb-anchor .dnb-icon,.dnb-table>thead>tr>th.dnb-table--active .dnb-button .dnb-icon{opacity:1}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover[disabled],html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-anchor:hover[disabled],html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-table>thead>tr>th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text:after{color:#007272;color:var(--color-sea-green);opacity:1}.dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text:after,.dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text:after,.dnb-table>thead>tr>th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text:after{visibility:visible}html[data-whatinput=keyboard] .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text:after,html[data-whatinput=keyboard] .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus .dnb-button__text:after,html[data-whatinput=keyboard]
+.dnb-table>thead>tr>th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text:after,html[data-whatinput=keyboard] .dnb-table>thead>tr>th.dnb-table--active .dnb-button:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-table .dnb-table__th.dnb-table--reversed .dnb-anchor .dnb-icon,.dnb-table .dnb-table__th.dnb-table--reversed .dnb-button .dnb-icon,.dnb-table>thead>tr>th.dnb-table--reversed .dnb-anchor .dnb-icon,.dnb-table>thead>tr>th.dnb-table--reversed .dnb-button .dnb-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}.dnb-table .dnb-table__th.dnb-table--no-wrap,.dnb-table>tbody>tr>th.dnb-table--no-wrap,.dnb-table>thead>tr>th.dnb-table--no-wrap{white-space:nowrap}

package/es/components/table/style/themes/dnb-table-theme-ui.scss

@@ -0,0 +1,97 @@
+/*
+* Table theme
+*
+*/
+
+@import '../../../../style/themes/imports.scss';
+@import '../../../button/style/themes/button-mixins.scss';
+@import './table-basis.scss';
+
+.dnb-table {
+  // Header part
+  & > tr > th,
+  & > tr > td,
+  & > thead > tr > th,
+  & > tbody > tr > td,
+  &__th,
+  &__td {
+    font-size: var(--font-size-basis);
+    line-height: var(--line-height-basis);
+    border-spacing: 0;
+
+    word-break: keep-all;
+  }
+  /* stylelint-disable-next-line */
+  & > tr > th,
+  & > thead > tr > th,
+  &__th {
+    padding: var(--spacing-x-large) var(--spacing-small)
+      var(--spacing-x-small);
+
+    font-weight: var(--font-weight-medium);
+    color: var(--color-black);
+
+    vertical-align: bottom;
+
+    &:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center) {
+      text-align: inherit;
+    }
+
+    @include IS_FF {
+      // to get the perfect height of pixles, to this:
+      padding-bottom: calc(var(--spacing-x-small) - 0.5px);
+    }
+
+    background-color: var(--color-white);
+  }
+
+  // Body part
+  /* stylelint-disable-next-line */
+  & > tr > td,
+  & > tbody > tr > td,
+  &__td,
+  & > tr > th[scope='row'] {
+    padding: var(--spacing-small);
+    padding-top: calc(var(--spacing-small) * 1.25);
+    padding-bottom: calc(var(--spacing-small) * 1.188); /* 19/16 */
+
+    color: var(--theme-color-black-80, currentColor);
+  }
+
+  // Needs a double & & for specificity
+  & > tbody > tr,
+  & &__tr,
+  & &__tr--odd {
+    background-color: var(--color-white);
+  }
+
+  // Needs a double & & for specificity
+  & > tbody > tr:not(#{&}__tr--odd):nth-of-type(2n),
+  & &__tr:not(#{&}__tr--odd):nth-of-type(2n),
+  & &__tr--even {
+    background-color: var(--color-lavender);
+  }
+
+  & > thead > tr,
+  & > tbody > tr,
+  & &__tr {
+    position: relative;
+  }
+
+  // Border
+  & > thead > tr:last-of-type::after,
+  & > tbody > tr:last-of-type::after,
+  & > &__tr:last-of-type::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    z-index: 1; // lower than "tr.sticky"
+
+    height: 1px;
+    background-color: var(--color-black-8);
+  }
+
+  @include basisTableSortable();
+}

package/es/components/table/style/themes/table-basis.scss

@@ -0,0 +1,161 @@
+@import '../../../button/style/themes/button-mixins.scss';
+
+@mixin tableFocusRing() {
+  &::before {
+    content: '';
+    position: absolute;
+    top: -0.5rem;
+    bottom: -0.5rem;
+    left: -1rem;
+    right: 0.5rem;
+  }
+}
+
+@mixin basisTableSortable {
+  // sortable
+  & > thead > tr > th#{&}--sortable,
+  & &__th#{&}--sortable {
+    color: var(--color-emerald-green);
+
+    .dnb-anchor,
+    .dnb-button {
+      > .dnb-icon {
+        opacity: 0;
+        transition: opacity 200ms ease-out, transform 500ms ease-out;
+        [data-visual-test-wrapper] & {
+          transition: none;
+        }
+      }
+
+      position: relative;
+      z-index: 1;
+      align-items: flex-end;
+
+      // reset anchor
+      box-shadow: none;
+
+      line-height: var(--line-height-basis);
+
+      margin: 0;
+      padding: 0;
+      padding-right: 0.5rem;
+
+      color: inherit;
+      font-weight: var(--font-weight-medium);
+      text-align: inherit;
+      font-size: inherit;
+
+      .dnb-button__text {
+        margin: 0;
+        font-size: inherit;
+
+        // underline
+        &::after {
+          right: 1rem;
+        }
+      }
+
+      .dnb-button__icon {
+        align-self: flex-end;
+        margin-top: auto;
+        margin-bottom: 0.25rem;
+      }
+
+      // underline
+      &:not(:focus) .dnb-button__text::after {
+        opacity: 1;
+        color: var(--color-emerald-green);
+      }
+
+      @include hover() {
+        color: var(--color-sea-green);
+
+        &:not(:focus) .dnb-icon {
+          opacity: 1;
+        }
+
+        // hide underline
+        .dnb-button__text::after {
+          opacity: 0;
+        }
+      }
+
+      @include focus() {
+        @include tableFocusRing();
+
+        // focus ring
+        &::before {
+          right: -0.5rem;
+        }
+        .dnb-icon {
+          opacity: 1;
+        }
+      }
+
+      @include active() {
+        @include buttonFocusRing('mouse'); // also, make a mouse ring
+        @include buttonFocusRing('touch'); // also, make a touch ring
+
+        @include tableFocusRing();
+
+        // focus ring
+        &::before {
+          right: -0.5rem;
+        }
+
+        color: var(--color-emerald-green);
+      }
+
+      // webkit fix
+      &:hover:focus:not(:active) .dnb-button__text::after {
+        visibility: hidden;
+      }
+    }
+  }
+  & > thead > tr > th#{&}--active,
+  & &__th#{&}--active {
+    .dnb-anchor,
+    .dnb-button {
+      // hide underline
+      &:not(:hover) .dnb-button__text::after {
+        opacity: 0;
+      }
+      .dnb-icon {
+        opacity: 1;
+      }
+
+      // and underline on hover
+      @include hover() {
+        .dnb-button__text::after {
+          color: var(--color-sea-green);
+          opacity: 1;
+        }
+      }
+
+      // webkit fix
+      &:hover:focus:not(:active) .dnb-button__text::after {
+        visibility: visible;
+      }
+      html[data-whatinput='keyboard']
+        &:hover:focus
+        .dnb-button__text::after {
+        visibility: hidden;
+      }
+    }
+  }
+  & > thead > tr > th#{&}--reversed,
+  & &__th#{&}--reversed {
+    .dnb-anchor,
+    .dnb-button {
+      .dnb-icon {
+        transform: rotate(180deg);
+        transform-origin: 50% 50%;
+      }
+    }
+  }
+  & > thead > tr > th#{&}--no-wrap,
+  & > tbody > tr > th#{&}--no-wrap,
+  & &__th#{&}--no-wrap {
+    white-space: nowrap;
+  }
+}

package/es/components/table/style/themes/ui.d.ts

@@ -0,0 +1 @@
+export {};

package/es/components/table/style/themes/ui.js

@@ -0,0 +1 @@
+import "./dnb-table-theme-ui.min.css";

package/es/components/table/style.d.ts

@@ -0,0 +1 @@
+export {};

package/es/components/table/style.js

@@ -0,0 +1 @@
+import "./style/dnb-table.min.css";

package/es/components/tag/Tag.js

@@ -13,6 +13,7 @@ import { warn } from '../../shared/component-helper';
 import { usePropsWithContext } from '../../shared/hooks';
 import TagGroup from './TagGroup';
 import { TagGroupContext } from './TagContext';
+import { createSpacingClasses } from '../space/SpacingHelper';
 export const defaultProps = {
   skeleton: null,
   omitOnKeyUpDeleteEvent: false
@@ -23,9 +24,9 @@ const Tag = localProps => {
 
   const context = React.useContext(Context);
   const tagGroupContext = React.useContext(TagGroupContext);
+  const allProps = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag, tagGroupContext);
 
-  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag, tagGroupContext),
-        {
+  const {
     className,
     skeleton,
     children,
@@ -34,14 +35,16 @@ const Tag = localProps => {
     onClick,
     onDelete,
     omitOnKeyUpDeleteEvent
-  } = _usePropsWithContext,
-        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  } = allProps,
+        props = _objectWithoutProperties(allProps, _excluded);
 
   const content = text || children;
   const isClickable = !!onClick;
   const isRemovable = !!onDelete && !isClickable;
   const isInteractive = isClickable || isRemovable;
-  const tagClassNames = classnames('dnb-tag', className, isInteractive && 'dnb-tag--interactive', isRemovable && 'dnb-tag--removable');
+  const spacingClasses = createSpacingClasses(props);
+  const tagClassNames = classnames('dnb-tag', className, spacingClasses, isInteractive && 'dnb-tag--interactive', isRemovable && 'dnb-tag--removable');
+  const buttonAttr = props;
 
   const isDeleteKeyboardEvent = keyboardEvent => {
     return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
@@ -53,8 +56,6 @@ const Tag = localProps => {
     }
   };
 
-  const buttonAttr = props;
-
   if (!isInteractive) {
     buttonAttr.element = 'span';
     buttonAttr.type = '';

package/es/components/timeline/Timeline.js

@@ -7,6 +7,7 @@ import { createSpacingClasses } from '../space/SpacingHelper';
 import Context from '../../shared/Context';
 import { usePropsWithContext } from '../../shared/hooks';
 import TimelineItem from './TimelineItem';
+import { validateDOMAttributes } from '../../shared/component-helper';
 export const defaultProps = {
   className: null,
   skeleton: false,
@@ -16,17 +17,17 @@ export const defaultProps = {
 
 const Timeline = localProps => {
   const context = React.useContext(Context);
-
-  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Timeline, {
+  const allProps = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Timeline, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }),
-        {
+  });
+
+  const {
     className,
     skeleton,
     data,
     children: childrenProp
-  } = _usePropsWithContext,
-        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  } = allProps,
+        props = _objectWithoutProperties(allProps, _excluded);
 
   const spacingClasses = createSpacingClasses(props);
   let children = childrenProp;
@@ -40,6 +41,7 @@ const Timeline = localProps => {
     });
   }
 
+  validateDOMAttributes(allProps, props);
   return React.createElement("div", _extends({
     className: classnames('dnb-timeline', spacingClasses, className),
     "data-testid": "timeline"

package/es/components/timeline/TimelineItem.d.ts

@@ -13,13 +13,13 @@ export interface TimelineItemProps {
      */
     iconAlt?: string;
     /**
-     * Text displaying the name of the timeline item.
+     * Text displaying the title of the timeline item.
      */
-    name: React.ReactNode & string;
+    title: React.ReactNode | string;
     /**
-     * Text displaying the date of the timeline item.
+     * Text displaying the subtitle of the timeline item.
      */
-    date?: React.ReactNode;
+    subtitle?: React.ReactNode | React.ReactNode[] | string | string[];
     /**
      * Text displaying info message of the timeline item.
      */
@@ -34,6 +34,14 @@ export interface TimelineItemProps {
      * Default: null
      */
     skeleton?: SkeletonShow;
+    /**
+     * @deprecated Please use `title`
+     */
+    name?: unknown;
+    /**
+     * @deprecated Please use `subtitle`
+     */
+    date?: unknown;
 }
 declare const TimelineItem: (localProps: TimelineItemProps) => JSX.Element;
 export default TimelineItem;

package/es/components/timeline/TimelineItem.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 
 var _span;
 
-const _excluded = ["icon", "iconAlt", "name", "date", "infoMessage", "state", "skeleton"];
+const _excluded = ["icon", "iconAlt", "title", "subtitle", "infoMessage", "state", "skeleton"];
 import React from 'react';
 import classnames from 'classnames';
 import FormStatus from '../form-status/FormStatus';
@@ -17,15 +17,15 @@ import { usePropsWithContext } from '../../shared/hooks';
 const defaultProps = {
   icon: null,
   iconAlt: null,
-  name: null,
-  date: null,
+  title: null,
+  subtitle: null,
   infoMessage: null,
   state: null,
   skeleton: false
 };
 
 const TimelineItem = localProps => {
-  var _span2, _span3, _span4, _FormStatus;
+  var _span2, _span3, _FormStatus;
 
   const context = React.useContext(Context);
   const {
@@ -37,20 +37,30 @@ const TimelineItem = localProps => {
       }
     }
   } = context;
-
-  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem, {
+  const allProps = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }),
-        {
+  });
+
+  if (allProps.name) {
+    delete allProps.name;
+    allProps.title = allProps.name;
+  }
+
+  if (allProps.date) {
+    delete allProps.date;
+    allProps.subtitle = allProps.date;
+  }
+
+  const {
     icon,
     iconAlt,
-    name,
-    date,
+    title,
+    subtitle,
     infoMessage,
     state,
     skeleton
-  } = _usePropsWithContext,
-        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  } = allProps,
+        props = _objectWithoutProperties(allProps, _excluded);
 
   const stateIsCompleted = state === 'completed';
   const stateIsCurrent = state === 'current';
@@ -74,26 +84,47 @@ const TimelineItem = localProps => {
     }));
   };
 
-  const TimelineItemName = () => {
+  const TimelineItemTitle = () => {
     return _span2 || (_span2 = React.createElement("span", {
-      className: "dnb-timeline__item__label__name",
-      "data-testid": "timeline-item-label-name"
-    }, name));
+      className: "dnb-timeline__item__label__title",
+      "data-testid": "timeline-item-label-title"
+    }, title));
   };
 
   const TimelineItemLabel = () => {
     return _span3 || (_span3 = React.createElement("span", {
       className: "dnb-timeline__item__label"
-    }, React.createElement(TimelineItemIcon, null), React.createElement(TimelineItemName, null)));
+    }, React.createElement(TimelineItemIcon, null), React.createElement(TimelineItemTitle, null)));
+  };
+
+  const getSubtitle = () => {
+    const TimelineItemSubtitle = ({
+      subtitle
+    }) => React.createElement("div", {
+      className: "dnb-timeline__item__content__subtitle",
+      "data-testid": "timeline-item-content-subtitle"
+    }, subtitle);
+
+    if (!subtitle) {
+      return null;
+    }
+
+    if (Array.isArray(subtitle)) {
+      return subtitle.map((subtitle, i) => React.createElement(TimelineItemSubtitle, {
+        key: i,
+        subtitle: subtitle
+      }));
+    }
+
+    return React.createElement(TimelineItemSubtitle, {
+      subtitle: subtitle
+    });
   };
 
   const TimelineItemContent = () => {
     return React.createElement("div", {
       className: "dnb-timeline__item__content"
-    }, date && (_span4 || (_span4 = React.createElement("span", {
-      className: "dnb-timeline__item__content__date",
-      "data-testid": "timeline-item-content-date"
-    }, date))), infoMessage && (_FormStatus || (_FormStatus = React.createElement(FormStatus, {
+    }, getSubtitle(), infoMessage && (_FormStatus || (_FormStatus = React.createElement(FormStatus, {
       text: infoMessage,
       state: "info",
       className: "dnb-timeline__item__content__info",

package/es/components/timeline/style/_timeline.scss

@@ -22,13 +22,13 @@
         justify-content: center;
         padding: 0;
       }
-      &__name {
+      &__title {
         cursor: text;
       }
     }
     &__content {
       padding-bottom: var(--spacing-small);
-      &__date {
+      &__subtitle {
         cursor: text;
         font-size: var(--font-size-x-small);
         font-weight: var(--font-weight-basis);

package/es/components/timeline/style/dnb-timeline.css

@@ -157,7 +157,7 @@
                 box-shadow: inset 0 0 0 1px #333;
         -webkit-box-shadow: inset 0 0 0 1px var(--color-black-80);
                 box-shadow: inset 0 0 0 1px var(--color-black-80); } }
-  .dnb-timeline__item__label__name {
+  .dnb-timeline__item__label__title {
     margin-left: 1.25rem;
     margin-left: calc(
     calc(
@@ -189,7 +189,7 @@
   .dnb-timeline__item--completed .dnb-timeline__item__content {
     border-left: 1px solid #333;
     border-left: 1px solid var(--color-black-80); }
-  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+  .dnb-timeline__item--completed .dnb-timeline__item__label__title {
     color: #333;
     color: var(--color-black-80); }
   .dnb-timeline__item--current .dnb-timeline__item__content {
@@ -201,7 +201,7 @@
     padding-left: calc(2rem / 2 + 1rem);
     padding-left: calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing));
     padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
-  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+  .dnb-timeline__item--current .dnb-timeline__item__label__title {
     margin-left: 1rem;
     margin-left: var(--timeline-border-spacing);
     font-weight: 500;
@@ -222,7 +222,7 @@
     border-radius: var(--timeline-icon-border-radius--medium); }
   .dnb-timeline__item--current {
     margin-left: 0; }
-  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__title {
     font-weight: normal;
     font-weight: var(--font-weight-basis);
     color: #737373;
@@ -289,12 +289,12 @@
           -ms-flex-pack: center;
               justify-content: center;
       padding: 0; }
-    .dnb-timeline__item__label__name {
+    .dnb-timeline__item__label__title {
       cursor: text; }
   .dnb-timeline__item__content {
     padding-bottom: 1rem;
     padding-bottom: var(--spacing-small); }
-    .dnb-timeline__item__content__date {
+    .dnb-timeline__item__content__subtitle {
       cursor: text;
       font-size: 0.875rem;
       font-size: var(--font-size-x-small);

package/es/components/timeline/style/dnb-timeline.min.css

@@ -1 +1 @@
-.dnb-timeline{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-timeline *,.dnb-timeline :after,.dnb-timeline :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-timeline :after,.dnb-timeline :before{text-decoration:inherit;vertical-align:inherit}:root{--timeline-icon-height--small:var(--button-height--small);--timeline-icon-width--small:var(--button-width--small);--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:var(--button-height--medium);--timeline-icon-width--medium:var(--button-width--medium);--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);--timeline-border-spacing:var(--spacing-small);--timeline-border-spacing--icon-adjusted:calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing))}.dnb-timeline__item{margin-left:.25rem;margin-left:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);background-color:#fff;background-color:var(--color-white);border-color:transparent;border-radius:.75rem;border-radius:var(--timeline-icon-border-radius--small);-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);line-height:1.5rem;line-height:var(--timeline-icon-height--small);width:1.5rem;width:var(--timeline-icon-width--small)}@supports (-webkit-touch-callout:none){.dnb-timeline__item__label__icon{-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-timeline__item__label__icon{-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-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #333;box-shadow:inset 0 0 0 1px #333;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-80);box-shadow:inset 0 0 0 1px var(--color-black-80)}}.dnb-timeline__item__label__name{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin-left:1.25rem;margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed #737373;border-left:1px dashed var(--color-black-55);margin-left:.75rem;margin-left:calc(var(--timeline-icon-width--small)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted))}.dnb-timeline__item--completed .dnb-timeline__item__content{border-left:1px solid #333;border-left:1px solid var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__name{color:#333;color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:1rem;margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__name{font-size:1.125rem;font-size:var(--font-size-basis);font-weight:500;font-weight:var(--font-weight-medium);line-height:1.5rem;line-height:var(--line-height-basis);margin-left:1rem;margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:1rem;border-radius:var(--timeline-icon-border-radius--medium);line-height:2rem;line-height:var(--timeline-icon-height--medium);width:2rem;width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__name{color:#737373;color:var(--color-black-55);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);background-color:#f8f8f8;background-color:var(--color-black-3);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:#737373;color:var(--color-black-55)}@supports (-webkit-touch-callout:none){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #f8f8f8;box-shadow:inset 0 0 0 1px #f8f8f8;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-3);box-shadow:inset 0 0 0 1px var(--color-black-3)}}.dnb-timeline__item:only-child{margin-left:0}.dnb-timeline__item:last-child .dnb-timeline__item__content{border-left:none}.dnb-timeline{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.dnb-timeline__item__label{text-align:left}.dnb-timeline__item__label,.dnb-timeline__item__label__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0}.dnb-timeline__item__label__icon{-ms-flex-negative:0;-webkit-box-pack:center;-ms-flex-pack:center;flex-shrink:0;height:auto;justify-content:center}.dnb-timeline__item__label__name{cursor:text}.dnb-timeline__item__content{padding-bottom:1rem;padding-bottom:var(--spacing-small)}.dnb-timeline__item__content__date{color:#737373;color:var(--color-black-55);cursor:text;font-size:.875rem;font-size:var(--font-size-x-small);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item__content__info{padding-top:.5rem;padding-top:var(--spacing-x-small)}
+.dnb-timeline{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-timeline *,.dnb-timeline :after,.dnb-timeline :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-timeline :after,.dnb-timeline :before{text-decoration:inherit;vertical-align:inherit}:root{--timeline-icon-height--small:var(--button-height--small);--timeline-icon-width--small:var(--button-width--small);--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:var(--button-height--medium);--timeline-icon-width--medium:var(--button-width--medium);--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);--timeline-border-spacing:var(--spacing-small);--timeline-border-spacing--icon-adjusted:calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing))}.dnb-timeline__item{margin-left:.25rem;margin-left:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);background-color:#fff;background-color:var(--color-white);border-color:transparent;border-radius:.75rem;border-radius:var(--timeline-icon-border-radius--small);-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);line-height:1.5rem;line-height:var(--timeline-icon-height--small);width:1.5rem;width:var(--timeline-icon-width--small)}@supports (-webkit-touch-callout:none){.dnb-timeline__item__label__icon{-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-timeline__item__label__icon{-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-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #333;box-shadow:inset 0 0 0 1px #333;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-80);box-shadow:inset 0 0 0 1px var(--color-black-80)}}.dnb-timeline__item__label__title{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin-left:1.25rem;margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed #737373;border-left:1px dashed var(--color-black-55);margin-left:.75rem;margin-left:calc(var(--timeline-icon-width--small)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted))}.dnb-timeline__item--completed .dnb-timeline__item__content{border-left:1px solid #333;border-left:1px solid var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__title{color:#333;color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:1rem;margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__title{font-size:1.125rem;font-size:var(--font-size-basis);font-weight:500;font-weight:var(--font-weight-medium);line-height:1.5rem;line-height:var(--line-height-basis);margin-left:1rem;margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:1rem;border-radius:var(--timeline-icon-border-radius--medium);line-height:2rem;line-height:var(--timeline-icon-height--medium);width:2rem;width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__title{color:#737373;color:var(--color-black-55);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);background-color:#f8f8f8;background-color:var(--color-black-3);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:#737373;color:var(--color-black-55)}@supports (-webkit-touch-callout:none){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #f8f8f8;box-shadow:inset 0 0 0 1px #f8f8f8;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-3);box-shadow:inset 0 0 0 1px var(--color-black-3)}}.dnb-timeline__item:only-child{margin-left:0}.dnb-timeline__item:last-child .dnb-timeline__item__content{border-left:none}.dnb-timeline{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.dnb-timeline__item__label{text-align:left}.dnb-timeline__item__label,.dnb-timeline__item__label__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0}.dnb-timeline__item__label__icon{-ms-flex-negative:0;-webkit-box-pack:center;-ms-flex-pack:center;flex-shrink:0;height:auto;justify-content:center}.dnb-timeline__item__label__title{cursor:text}.dnb-timeline__item__content{padding-bottom:1rem;padding-bottom:var(--spacing-small)}.dnb-timeline__item__content__subtitle{color:#737373;color:var(--color-black-55);cursor:text;font-size:.875rem;font-size:var(--font-size-x-small);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item__content__info{padding-top:.5rem;padding-top:var(--spacing-x-small)}