@dnb/eufemia 9.18.0 → 9.19.0

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

@@ -1 +1 @@
-.dnb-tag{-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-tag *,.dnb-tag :after,.dnb-tag :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tag :after,.dnb-tag :before{text-decoration:inherit;vertical-align:inherit}:root{--tag-border-radius:2.5rem}.dnb-tag{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;background-color:#ebebeb;background-color:var(--color-black-8);border-radius:2.5rem;border-radius:var(--tag-border-radius);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;font-size:.875rem;font-size:var(--font-size-x-small);justify-content:center;padding:.25rem .5rem;padding:var(--spacing-xx-small) var(--spacing-x-small)}.dnb-tag,.dnb-tag__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.dnb-tag__icon{display:-webkit-box;display:-ms-flexbox;display:flex}.dnb-tag__text{color:#333;color:var(--color-black-80)}
+.dnb-icon{color:inherit;display:inline-block;font-size:1rem;height:1em;line-height:1rem;vertical-align:middle;width:1em}.dnb-icon img,.dnb-icon svg{shape-rendering:geometricPrecision;height:inherit;vertical-align:top;width:inherit}.dnb-icon svg[width="100%"]{width:inherit}.dnb-icon svg[height="100%"]{height:inherit}.dnb-icon--inherit-color svg:not([fill]),.dnb-icon--inherit-color svg [fill]{fill:currentColor}.dnb-icon--inherit-color svg [stroke]{stroke:currentColor}.dnb-icon--small{font-size:.75rem}.dnb-icon--default{font-size:1rem}.dnb-icon--medium{font-size:1.5rem}.dnb-icon--large{font-size:2rem}.dnb-icon--x-large{font-size:2.5rem}.dnb-icon--xx-large{font-size:3rem}.dnb-icon--custom-size{height:auto;width:auto}.dnb-icon--auto{font-size:1em}.dnb-icon--auto>.dnb-icon--wrapper{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center}h1 .dnb-icon,h2 .dnb-icon,h3 .dnb-icon,h4 .dnb-icon,h5 .dnb-icon,h6 .dnb-icon{vertical-align:middle}.dnb-icon.dnb-skeleton{color:#ebebeb!important;color:var(--skeleton-color)!important}.dnb-icon.dnb-skeleton:after,.dnb-icon.dnb-skeleton:before{content:none!important}@media screen and (-ms-high-contrast:none){.dnb-icon{-webkit-box-flex:0;-ms-flex:none;flex:none}}.dnb-form-status{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-form-status *,.dnb-form-status :after,.dnb-form-status :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-form-status :after,.dnb-form-status :before{text-decoration:inherit;vertical-align:inherit}:root{--form-status-radius:0.25rem}.dnb-form-status{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transition:height .4s cubic-bezier(.42,0,0,1),opacity .4s cubic-bezier(.42,0,0,1),margin .4s cubic-bezier(.42,0,0,1),padding .4s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1),opacity .4s cubic-bezier(.42,0,0,1),margin .4s cubic-bezier(.42,0,0,1),padding .4s cubic-bezier(.42,0,0,1)}.dnb-form-status--hidden{height:0;opacity:0;width:0;will-change:height,opacity,margin,padding}.dnb-form-status--is-animating{overflow:hidden;width:auto}.dnb-form-status--disappear,.dnb-form-status--hidden{margin:0!important;padding:0!important}.dnb-form-status__shell{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-radius:.25rem;border-radius:var(--form-status-radius);display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:flex-start;min-width:inherit}.dnb-form-status__text{color:inherit;cursor:text;font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);padding:.625rem 1rem;white-space:normal}button .dnb-form-status__text{cursor:inherit}.dnb-form-status__text .dnb-anchor{font-size:inherit}.dnb-icon+.dnb-form-status__text{padding-left:.5rem}.dnb-form-status__shell>.dnb-icon{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;margin:.3333333em .3333333em .3333333em .6666666em}.dnb-form-status__size--large .dnb-form-status__text{padding-bottom:1.125rem;padding-top:1.125rem}.dnb-form-status__size--large .dnb-form-status__shell>.dnb-icon{margin-bottom:.6666666em;margin-top:.6666666em}.dnb-form-status--stretch{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.dnb-form-status--stretch .dnb-form-status__shell{width:100%}.dnb-form-status--stretch .dnb-form-status__text{max-width:47rem}.dnb-form-status[hidden]{display:none}.dnb-form-status--no-animation,html[data-visual-test] .dnb-form-status{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}@media screen and (-ms-high-contrast:none){.dnb-form-status__shell>.dnb-icon{border-width:1px}}.dnb-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-button *,.dnb-button :after,.dnb-button :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-button :after,.dnb-button :before{text-decoration:inherit;vertical-align:inherit}:root{--button-font-size:var(--font-size-basis);--button-font-size-small:var(--font-size-small);--button-width:2.5rem;--button-height:2.5rem;--button-width--small:1.5rem;--button-height--small:1.5rem;--button-width--medium:2rem;--button-height--medium:2rem;--button-width--large:3rem;--button-height--large:3rem;--button-icon-size:1rem;--button-border-width:0.0625rem;--button-border-width--hover:0.1875rem;--button-border-radius:calc(var(--button-height)/2);--button-border-radius--small:calc(var(--button-height--small)/2);--button-border-radius--medium:calc(var(--button-height--medium)/2);--button-border-radius--large:calc(var(--button-height--large)/2)}.dnb-button{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:.0625rem solid transparent;border:var(--button-border-width) solid transparent;border-radius:1.25rem;border-radius:var(--button-border-radius);cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;font-size:var(--font-size-small);height:auto;justify-content:center;padding:0;position:relative;text-decoration:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap;width:2.5rem;width:var(--button-width)}.dnb-button--wrap{word-wrap:break-word;white-space:normal}.dnb-button,.dnb-core-style .dnb-button{line-height:2.5rem;line-height:var(--button-height)}.dnb-button__text{color:inherit;font-size:1.125rem;font-size:var(--button-font-size);line-height:1.5rem;line-height:var(--line-height-basis);margin:.5rem 0;-webkit-transform:translateY(-.03125rem);transform:translateY(-.03125rem)}.dnb-button__text [data-os=linux]{-webkit-transform:translateY(-.035rem);transform:translateY(-.035rem)}.dnb-button__alignment{display:inline-block;width:0}.dnb-button__bounding{background-color:transparent;border-radius:1.25rem;border-radius:var(--button-border-radius);bottom:0;left:0;position:absolute;right:0;top:0;-webkit-transform:scale(1.1,1.4);transform:scale(1.1,1.4)}.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-button--size-small{border-radius:.75rem;border-radius:var(--button-border-radius--small);font-size:1rem;font-size:var(--button-font-size-small);width:1.5rem;width:var(--button-width--small)}.dnb-button--size-small,.dnb-core-style .dnb-button--size-small{line-height:1.5rem;line-height:var(--button-height--small)}.dnb-button--size-small .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-small{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-small{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-small{padding-right:.5rem}.dnb-button--size-medium{border-radius:1rem;border-radius:var(--button-border-radius--medium);width:2rem;width:var(--button-width--medium)}.dnb-button--size-medium,.dnb-core-style .dnb-button--size-medium{line-height:2rem;line-height:var(--button-height--medium)}.dnb-button--size-medium .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-medium{padding-left:1rem;padding-right:1rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-medium{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium{padding-right:.5rem}.dnb-button--size-large{border-radius:1.5rem;border-radius:var(--button-border-radius--large);width:3rem;width:var(--button-width--large)}.dnb-button--size-large,.dnb-core-style .dnb-button--size-large{line-height:3rem;line-height:var(--button-height--large)}.dnb-button--has-text.dnb-button--size-large{padding-left:2rem;padding-right:2rem}.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--size-large{padding-left:1rem}.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-large{padding-right:1rem}.dnb-button--has-text{width:auto}.dnb-button--has-text .dnb-button__icon{margin:0 .5rem;margin:0 calc(var(--button-icon-size)/2)}.dnb-button--has-text.dnb-button--icon-position-left{padding-left:.5rem}.dnb-button--has-text.dnb-button--icon-position-right{padding-right:.5rem}.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.dnb-button--has-text.dnb-button--has-icon .dnb-button__text{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-button:not(.dnb-button--has-text) .dnb-button__icon{width:inherit}.dnb-button__icon.dnb-icon svg:not([width]):not([height]){height:1rem;height:var(--button-icon-size);width:1rem;width:var(--button-icon-size)}[href]>.dnb-button__icon.dnb-icon{line-height:1.125rem;line-height:var(--button-font-size)}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left>*,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top>*{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.dnb-button--stretch{width:100%}.dnb-button--reset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:inherit;font:inherit;height:auto;line-height:inherit;margin:0;overflow:visible;padding:0;text-align:inherit;width:auto}html:not([data-whatintent=touch]) .dnb-button--reset:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--reset:hover:not([disabled]){border:none;-webkit-box-shadow:none;box-shadow:none}.dnb-button--reset:not([disabled]):active,.dnb-button--reset:not([disabled]):focus{outline:none}html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):active,html[data-whatinput=keyboard] .dnb-button--reset:not([disabled]):focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):active,html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus{border:none;-webkit-box-shadow:none;box-shadow:none;color:inherit}.dnb-button[type=button],.dnb-button[type=reset],.dnb-button[type=submit]{appearance:none;-moz-appearance:none;-webkit-appearance:none}.dnb-button[disabled]{cursor:not-allowed}.dnb-form-row--vertical .dnb-form-row__content>.dnb-button{-ms-flex-item-align:start;align-self:flex-start}.dnb-form-row--horizontal .dnb-form-row__content .dnb-button__text{white-space:nowrap}.dnb-button+.dnb-form-status{margin-top:.5rem}@media screen and (-ms-high-contrast:none){.dnb-button{-webkit-box-flex:0;-ms-flex:none;flex:none}.dnb-button__icon,.dnb-button__text{-webkit-transform:translateY(-.0625rem);transform:translateY(-.0625rem)}}button.dnb-button::-moz-focus-inner{border:none}.dnb-tag{-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-tag *,.dnb-tag :after,.dnb-tag :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tag :after,.dnb-tag :before{text-decoration:inherit;vertical-align:inherit}.dnb-tag.dnb-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#ebebeb;background-color:var(--color-black-8)}.dnb-tag.dnb-button.dnb-button--size-small{padding-left:.5rem;padding-right:.5rem}.dnb-tag.dnb-button.dnb-button--size-small.dnb-button--has-icon{padding-left:0}.dnb-tag.dnb-button .dnb-button__text{font-size:.875rem;font-size:var(--font-size-x-small);-webkit-transform:none;transform:none}.dnb-tag:not(.dnb-tag--interactive){cursor:unset;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset}.dnb-tag:not(.dnb-tag--interactive) .dnb-button__text{cursor:text}.dnb-tag--interactive.dnb-button{--border-color:var(--color-sea-green);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:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){.dnb-tag--interactive.dnb-button{-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-tag--interactive.dnb-button{-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-tag--interactive.dnb-button{-webkit-box-shadow:inset 0 0 0 1px #007272;box-shadow:inset 0 0 0 1px #007272;-webkit-box-shadow:inset 0 0 0 1px var(--color-sea-green);box-shadow:inset 0 0 0 1px var(--color-sea-green)}}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#ebebeb;background-color:var(--color-black-8);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button: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-tag--interactive.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-tag--interactive.dnb-button:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#ebebeb;background-color:var(--color-black-8);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button: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-tag--interactive.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button: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-tag--interactive.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-tag--interactive.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled]{cursor:not-allowed}.dnb-tag--interactive.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]){--border-color:transparent;background-color:#d2f0e9;background-color:var(--color-mint-green-50);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){.dnb-tag--interactive.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-tag--interactive.dnb-button[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);color:#b3dada;color:var(--color-sea-green-30)}@media screen and (-ms-high-contrast:none){.dnb-tag--interactive.dnb-button[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-tag--removable.dnb-button{background-color:#007272;background-color:var(--color-sea-green);color:#fff;color:var(--color-white)}.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path{fill:#fff;fill:var(--color-white)}.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path{stroke:#007272;stroke:var(--color-sea-green)}.dnb-tag--removable.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-tag--removable.dnb-button:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button: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-tag--removable.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button: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-tag--removable.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path{fill:#007272;fill:var(--color-sea-green)}.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path{stroke:#fff;stroke:var(--color-white)}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button: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}}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path{fill:#007272;fill:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path{stroke:#fff;stroke:var(--color-white)}.dnb-tag--removable.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled]{cursor:not-allowed}.dnb-tag--removable.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]){--border-color:transparent;background-color:#d2f0e9;background-color:var(--color-mint-green-50);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){.dnb-tag--removable.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path{fill:#007272;fill:var(--color-sea-green)}.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path{stroke:#fff;stroke:var(--color-white)}.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-circle-path{fill:#d2f0e9;fill:var(--color-mint-green-50)}.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-cross-path{stroke:#b3dada;stroke:var(--color-sea-green-30)}.dnb-tag--removable.dnb-button .dnb-button__text{padding-left:.5rem}.dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon{padding-right:0}

package/es/components/tag/style/dnb-tag.scss

@@ -5,6 +5,9 @@
 
 @import '../../../style/components/imports.scss';
 
+// import dependencies
+@import '../../button/style/dnb-button.scss';
+
 .dnb-tag {
   @include componentReset();
 }

package/es/components/tag/style/themes/_tag-mixins.scss

@@ -0,0 +1,18 @@
+/*
+* Tag mixins
+*
+*/
+
+@mixin deleteIcon(
+  $fillColor: var(--color-sea-green),
+  $strokeColor: var(--color-white)
+) {
+  svg {
+    .dnb-icon-close-circle-path {
+      fill: $fillColor;
+    }
+    .dnb-icon-close-cross-path {
+      stroke: $strokeColor;
+    }
+  }
+}

package/es/components/timeline/Timeline.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "skeleton", "data", "children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import classnames from 'classnames';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import Context from '../../shared/Context';
+import { extendPropsWithContext } from '../../shared/component-helper';
+import TimelineItem from './TimelineItem';
+export * from './TimelineItem';
+export const defaultProps = {
+  className: null,
+  skeleton: false,
+  data: null,
+  children: null
+};
+
+function Timeline(localProps) {
+  const context = React.useContext(Context);
+
+  const _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.Timeline),
+        {
+    className,
+    skeleton,
+    data,
+    children: childrenItems
+  } = _extendPropsWithConte,
+        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+
+  const spacingClasses = createSpacingClasses(props);
+  return React.createElement("div", _extends({
+    className: classnames('dnb-timeline', spacingClasses, className),
+    "data-testid": "timeline"
+  }, props), data === null || data === void 0 ? void 0 : data.map(timelineItem => React.createElement(TimelineItem, _extends({
+    key: timelineItem.name,
+    skeleton: skeleton
+  }, timelineItem))), childrenItems);
+}
+
+Timeline.Item = TimelineItem;
+export { TimelineItem };
+export default Timeline;

package/es/components/timeline/Timeline.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import classnames from 'classnames'
+
+// Components
+import { createSpacingClasses } from '../space/SpacingHelper'
+
+// Shared
+import Context from '../../shared/Context'
+import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
+import { extendPropsWithContext } from '../../shared/component-helper'
+
+// Internal
+import TimelineItem, { TimelineItemProps } from './TimelineItem'
+
+export * from './TimelineItem'
+
+export interface TimelineProps {
+  /**
+   * Custom className on the component root
+   * Default: null
+   */
+  className?: string
+
+  /**
+   * Skeleton should be applied when loading content
+   * Default: null
+   */
+  skeleton?: SkeletonTypes
+
+  /**
+   * Pass in a list of your events as objects of timelineitem, to render them as timelineitems.
+   * Default: null
+   */
+  data?: TimelineItemProps[]
+
+  /**
+   * The content of the component. Can be used instead of prop "data".
+   * Default: null
+   */
+  children?: TimelineItemProps[]
+}
+
+export const defaultProps = {
+  className: null,
+  skeleton: false,
+  data: null,
+  children: null,
+}
+
+function Timeline(localProps: TimelineProps & ISpacingProps) {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  // Extract additional props from global context
+  const {
+    className,
+    skeleton,
+    data,
+    children: childrenItems,
+    ...props
+  } = extendPropsWithContext(
+    { ...defaultProps, ...localProps },
+    defaultProps,
+    context?.Timeline
+  )
+
+  const spacingClasses = createSpacingClasses(props)
+
+  return (
+    <div
+      className={classnames('dnb-timeline', spacingClasses, className)}
+      data-testid="timeline"
+      {...props}
+    >
+      {data?.map((timelineItem: TimelineItemProps) => (
+        <TimelineItem
+          key={timelineItem.name}
+          skeleton={skeleton}
+          {...timelineItem}
+        />
+      ))}
+
+      {childrenItems}
+    </div>
+  )
+}
+
+Timeline.Item = TimelineItem
+
+export { TimelineItem }
+
+export default Timeline

package/es/components/timeline/TimelineItem.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+
+var _span;
+
+const _excluded = ["icon", "iconAlt", "name", "date", "infoMessage", "state", "skeleton"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import classnames from 'classnames';
+import FormStatus from '../form-status/FormStatus';
+import Icon from '../icon-primary/IconPrimary';
+import { createSkeletonClass } from '../skeleton/SkeletonHelper';
+import checkIcon from '../../icons/check';
+import calendarIcon from '../../icons/calendar';
+import pinIcon from '../../icons/pin';
+import Context from '../../shared/Context';
+import { extendPropsWithContext } from '../../shared/component-helper';
+const defaultProps = {
+  icon: null,
+  iconAlt: null,
+  name: null,
+  date: null,
+  infoMessage: null,
+  state: null,
+  skeleton: false
+};
+export default function TimelineItem(localProps) {
+  var _span2, _span3, _span4, _FormStatus;
+
+  const context = React.useContext(Context);
+  const {
+    translation: {
+      TimelineItem: {
+        alt_label_completed,
+        alt_label_current,
+        alt_label_upcoming
+      }
+    }
+  } = context;
+
+  const _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem),
+        {
+    icon,
+    iconAlt,
+    name,
+    date,
+    infoMessage,
+    state,
+    skeleton
+  } = _extendPropsWithConte,
+        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+
+  const stateIsCompleted = state === 'completed';
+  const stateIsCurrent = state === 'current';
+  const stateIsUpcoming = state === 'upcoming';
+  const skeletonClasses = createSkeletonClass('font', skeleton, context);
+  const classes = classnames(`dnb-timeline__item dnb-timeline__item--${state}`, skeletonClasses);
+
+  const TimelineItemIcon = () => {
+    const currentIcon = icon || stateIsCompleted && checkIcon || stateIsCurrent && pinIcon || stateIsUpcoming && calendarIcon;
+    const currentAltLabel = iconAlt || stateIsCompleted && alt_label_completed || stateIsCurrent && alt_label_current || stateIsUpcoming && alt_label_upcoming;
+    return React.createElement("span", {
+      className: "dnb-timeline__item__label__icon",
+      "data-testid": "timeline-item-label-icon"
+    }, _span || (_span = React.createElement("span", {
+      key: "icon-alignment"
+    }, "\u200C")), !skeleton && currentIcon && React.createElement(Icon, {
+      icon: currentIcon,
+      alt: currentAltLabel,
+      size: stateIsCurrent ? undefined : 'small'
+    }));
+  };
+
+  const TimelineItemName = () => {
+    return _span2 || (_span2 = React.createElement("span", {
+      className: "dnb-timeline__item__label__name",
+      "data-testid": "timeline-item-label-name"
+    }, name));
+  };
+
+  const TimelineItemLabel = () => {
+    return _span3 || (_span3 = React.createElement("span", {
+      className: "dnb-timeline__item__label"
+    }, React.createElement(TimelineItemIcon, null), React.createElement(TimelineItemName, null)));
+  };
+
+  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, {
+      text: infoMessage,
+      state: "info",
+      className: "dnb-timeline__item__content__info",
+      "data-testid": "timeline-item-content-info"
+    }))));
+  };
+
+  return React.createElement("div", _extends({
+    className: classes,
+    "data-testid": "timeline-item",
+    "aria-current": stateIsCurrent ? 'step' : undefined
+  }, props), React.createElement(TimelineItemLabel, null), React.createElement(TimelineItemContent, null));
+}

package/es/components/timeline/TimelineItem.tsx

@@ -0,0 +1,193 @@
+import React from 'react'
+import classnames from 'classnames'
+
+// Components
+import FormStatus from '../form-status/FormStatus'
+import Icon, { IconPrimaryIcon } from '../icon-primary/IconPrimary'
+import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+
+// Icons
+import checkIcon from '../../icons/check'
+import calendarIcon from '../../icons/calendar'
+import pinIcon from '../../icons/pin'
+
+// Shared
+import Context from '../../shared/Context'
+import { SkeletonTypes } from '../../shared/interfaces'
+import { extendPropsWithContext } from '../../shared/component-helper'
+
+export interface TimelineItemProps {
+  /**
+   * Icon displaying on the left side.
+   * Default: `check` for state `completed`, `pin` for state `current`, and `calendar` for state `upcoming` .
+   */
+  icon?: IconPrimaryIcon
+
+  /**
+   * Text displaying the title of the item's corresponding page.
+   * Default: translations based on the icon.
+   */
+  iconAlt?: string
+
+  /**
+   * Text displaying the name of the timeline item.
+   */
+  name: React.ReactNode
+
+  /**
+   * Text displaying the date of the timeline item.
+   */
+  date?: React.ReactNode
+
+  /**
+   * Text displaying info message of the timeline item.
+   */
+  infoMessage?: React.ReactNode
+
+  /**
+   * The component state. State 'completed' or 'current' or 'upcoming'.
+   * Default: null
+   */
+  state: 'completed' | 'current' | 'upcoming'
+
+  /**
+   * Skeleton should be applied when loading content
+   * Default: null
+   */
+  skeleton?: SkeletonTypes
+}
+
+const defaultProps = {
+  icon: null,
+  iconAlt: null,
+  name: null,
+  date: null,
+  infoMessage: null,
+  state: null,
+  skeleton: false,
+}
+
+export default function TimelineItem(localProps: TimelineItemProps) {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  const {
+    translation: {
+      TimelineItem: {
+        alt_label_completed,
+        alt_label_current,
+        alt_label_upcoming,
+      },
+    },
+  } = context
+
+  // Extract additional props from global context
+  const {
+    icon,
+    iconAlt,
+    name,
+    date,
+    infoMessage,
+    state,
+    skeleton,
+    ...props
+  } = extendPropsWithContext(
+    { ...defaultProps, ...localProps },
+    defaultProps,
+    context?.TimelineItem
+  )
+
+  const stateIsCompleted = state === 'completed'
+  const stateIsCurrent = state === 'current'
+  const stateIsUpcoming = state === 'upcoming'
+
+  const skeletonClasses = createSkeletonClass('font', skeleton, context)
+  const classes = classnames(
+    'dnb-timeline__item',
+    skeletonClasses,
+    `dnb-timeline__item--${state}`
+  )
+
+  const TimelineItemIcon = () => {
+    const currentIcon =
+      icon ||
+      (stateIsCompleted && checkIcon) ||
+      (stateIsCurrent && pinIcon) ||
+      (stateIsUpcoming && calendarIcon)
+
+    const currentAltLabel =
+      iconAlt ||
+      (stateIsCompleted && alt_label_completed) ||
+      (stateIsCurrent && alt_label_current) ||
+      (stateIsUpcoming && alt_label_upcoming)
+    return (
+      <span
+        className="dnb-timeline__item__label__icon"
+        data-testid="timeline-item-label-icon"
+      >
+        <span key="icon-alignment">&zwnj;</span>
+        {!skeleton && currentIcon && (
+          <Icon
+            icon={currentIcon}
+            alt={currentAltLabel}
+            size={stateIsCurrent ? undefined : 'small'}
+          />
+        )}
+      </span>
+    )
+  }
+
+  const TimelineItemName = () => {
+    return (
+      <span
+        className="dnb-timeline__item__label__name"
+        data-testid="timeline-item-label-name"
+      >
+        {name}
+      </span>
+    )
+  }
+
+  const TimelineItemLabel = () => {
+    return (
+      <span className="dnb-timeline__item__label">
+        <TimelineItemIcon />
+        <TimelineItemName />
+      </span>
+    )
+  }
+
+  const TimelineItemContent = () => {
+    return (
+      <div className="dnb-timeline__item__content">
+        {date && (
+          <span
+            className="dnb-timeline__item__content__date"
+            data-testid="timeline-item-content-date"
+          >
+            {date}
+          </span>
+        )}
+        {infoMessage && (
+          <FormStatus
+            text={infoMessage}
+            state="info"
+            className="dnb-timeline__item__content__info"
+            data-testid="timeline-item-content-info"
+          />
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={classes}
+      data-testid="timeline-item"
+      aria-current={stateIsCurrent ? 'step' : undefined}
+      {...props}
+    >
+      <TimelineItemLabel />
+      <TimelineItemContent />
+    </div>
+  )
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Component Entry
+ *
+ */
+
+import Timeline from './Timeline'
+export default Timeline
+export * from './Timeline'

package/es/components/timeline/index.js

@@ -0,0 +1,3 @@
+import Timeline from './Timeline';
+export default Timeline;
+export * from './Timeline';

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

@@ -0,0 +1,42 @@
+/*
+* Timeline component
+*
+*/
+
+@import './themes/dnb-timeline-theme-ui.scss';
+
+.dnb-timeline {
+  display: flex;
+  flex-direction: column;
+  &__item {
+    &__label {
+      display: flex;
+      align-items: center;
+      text-align: left;
+      padding: 0;
+      &__icon {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        height: auto;
+        justify-content: center;
+        padding: 0;
+      }
+      &__name {
+        cursor: text;
+      }
+    }
+    &__content {
+      padding-bottom: var(--spacing-small);
+      &__date {
+        cursor: text;
+        font-size: var(--font-size-x-small);
+        font-weight: var(--font-weight-basis);
+        color: var(--color-black-55);
+      }
+      &__info {
+        padding-top: var(--spacing-x-small);
+      }
+    }
+  }
+}