@dnb/eufemia 9.32.1 → 9.34.0

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

@@ -0,0 +1 @@
+.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-tooltip{-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-tooltip *,.dnb-tooltip :after,.dnb-tooltip :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tooltip :after,.dnb-tooltip :before{text-decoration:inherit;vertical-align:inherit}.dnb-tooltip{-webkit-box-orient:vertical;-webkit-box-direction:normal;-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;-ms-flex-direction:column;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;-webkit-transition:opacity .2s cubic-bezier(.42,0,0,1);transition:opacity .2s cubic-bezier(.42,0,0,1);-webkit-transition:opacity .2s var(--easing-default);transition:opacity .2s var(--easing-default);visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--animate_position{-webkit-transition:all .2s cubic-bezier(.42,0,0,1),opacity .2s cubic-bezier(.42,0,0,1);transition:all .2s cubic-bezier(.42,0,0,1),opacity .2s cubic-bezier(.42,0,0,1);-webkit-transition:all .2s var(--easing-default),opacity .2s var(--easing-default);transition:all .2s var(--easing-default),opacity .2s var(--easing-default)}.dnb-tooltip--active{-webkit-animation:show-tooltip .2s cubic-bezier(.42,0,0,1) forwards;animation:show-tooltip .2s cubic-bezier(.42,0,0,1) forwards;-webkit-animation:show-tooltip .2s var(--easing-default) forwards;animation:show-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{-webkit-animation:show-tooltip 1ms cubic-bezier(.42,0,0,1) forwards;animation:show-tooltip 1ms cubic-bezier(.42,0,0,1) forwards;-webkit-animation:show-tooltip 1ms var(--easing-default) forwards;animation:show-tooltip 1ms var(--easing-default) forwards}.dnb-tooltip--hide{-webkit-animation:hide-tooltip .2s cubic-bezier(.42,0,0,1) forwards;animation:hide-tooltip .2s cubic-bezier(.42,0,0,1) forwards;-webkit-animation:hide-tooltip .2s var(--easing-default) forwards;animation:hide-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{-webkit-animation:hide-tooltip 1ms linear forwards;animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{-webkit-animation:hide-tooltip 1ms linear 1s forwards;animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{bottom:0;content:"";height:1rem;left:0;position:absolute;-webkit-transform:translateY(70%) rotate(45deg);transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{-ms-flex-item-align:start;align-self:flex-start}.dnb-tooltip__arrow__arrow--right{-ms-flex-item-align:end;align-self:flex-end}@-webkit-keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}.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;outline:none}.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-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);-webkit-transition:height .4s var(--easing-default),opacity .4s var(--easing-default),margin .4s var(--easing-default),padding .4s var(--easing-default);transition:height .4s var(--easing-default),opacity .4s var(--easing-default),margin .4s var(--easing-default),padding .4s var(--easing-default)}.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-upload{-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-upload *,.dnb-upload :after,.dnb-upload :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-upload :after,.dnb-upload :before{text-decoration:inherit;vertical-align:inherit}.dnb-upload{-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:#fff;background-color:var(--color-white);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:1.5rem;padding:var(--spacing-medium);position:relative}@media screen and (max-width:40em){.dnb-upload{padding:1.5rem 1rem;padding:var(--spacing-medium) var(--spacing-small)}}.dnb-upload__outline{bottom:0;content:"";height:100%;inset:0;left:0;pointer-events:none;position:absolute;right:0;top:0;width:100%}.dnb-upload__file-input{position:absolute;visibility:hidden}.dnb-upload__file-list{list-style:none;margin-bottom:0;margin-top:1.5rem;margin-top:var(--spacing-medium);padding:0;position:relative}.dnb-upload__file-cell:after,.dnb-upload__file-list:before{background-color:#ebebeb;background-color:var(--color-black-8);bottom:0;content:"";height:1px;inset:0;left:0;position:absolute;right:0;top:0}.dnb-upload__file-cell{padding:1rem 0;padding:var(--spacing-small) 0;position:relative}.dnb-upload__file-cell:after{top:auto}.dnb-upload__file-cell__content{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.dnb-upload__file-cell__content,.dnb-upload__file-cell__content__left{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.dnb-upload__file-cell__text-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:1rem;margin-left:var(--spacing-small)}.dnb-upload__file-cell__text-container--loading{font-size:1.125rem;font-size:var(--font-size-basis)}

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

@@ -0,0 +1,16 @@
+/*
+* DNB Upload
+*
+*/
+
+// import dependencies
+@import '../../../style/components/imports.scss';
+@import '../../icon/style/dnb-icon.scss';
+@import '../../button/style/dnb-button.scss';
+@import '../../form-status/style/dnb-form-status.scss';
+
+.dnb-upload {
+  @include componentReset();
+}
+
+@import './_upload.scss';

package/es/components/upload/style/index.d.ts

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

package/es/components/upload/style/index.js

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

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

@@ -0,0 +1,38 @@
+/*
+ * Upload theme
+ *
+ */
+.dnb-upload {
+  background-color: #fff;
+  background-color: var(--color-white);
+  border-radius: 0.5rem; }
+  .dnb-upload__outline {
+    stroke: #007272;
+    stroke: var(--color-sea-green);
+    border-radius: 0.5rem;
+    stroke-width: 0.1875rem; }
+  .dnb-upload--active .dnb-upload__outline {
+    stroke: #14555a;
+    stroke: var(--color-emerald-green);
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px;
+    inset: -1px;
+    width: calc(100% + 2px);
+    height: calc(100% + 2px); }
+    .dnb-upload--active .dnb-upload__outline rect {
+      stroke-width: 0.25rem;
+      stroke-dasharray: 0; }
+  .dnb-upload--active {
+    background-color: #f2f4ec;
+    background-color: var(--color-pistachio); }
+  .dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon {
+    color: #dc2a2a;
+    color: var(--color-fire-red); }
+  .dnb-upload__text.dnb-p {
+    color: #737373;
+    color: var(--color-black-55); }
+  .dnb-upload__subtitle.dnb-p {
+    color: #737373;
+    color: var(--color-black-55); }

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

@@ -0,0 +1 @@
+.dnb-upload{background-color:#fff;background-color:var(--color-white);border-radius:.5rem}.dnb-upload__outline{stroke:#007272;stroke:var(--color-sea-green);stroke-width:.1875rem;border-radius:.5rem}.dnb-upload--active .dnb-upload__outline{stroke:#14555a;stroke:var(--color-emerald-green);bottom:-1px;height:calc(100% + 2px);inset:-1px;left:-1px;right:-1px;top:-1px;width:calc(100% + 2px)}.dnb-upload--active .dnb-upload__outline rect{stroke-width:.25rem;stroke-dasharray:0}.dnb-upload--active{background-color:#f2f4ec;background-color:var(--color-pistachio)}.dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon{color:#dc2a2a;color:var(--color-fire-red)}.dnb-upload__subtitle.dnb-p,.dnb-upload__text.dnb-p{color:#737373;color:var(--color-black-55)}

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

@@ -0,0 +1,46 @@
+/*
+ * Upload theme
+ *
+ */
+
+.dnb-upload {
+  background-color: var(--color-white);
+
+  border-radius: 0.5rem;
+
+  // svg element
+  &__outline {
+    stroke: var(--color-sea-green);
+    border-radius: 0.5rem;
+    stroke-width: 0.1875rem;
+  }
+
+  &--active &__outline {
+    stroke: var(--color-emerald-green);
+
+    inset: -1px;
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+
+    rect {
+      stroke-width: 0.25rem;
+      stroke-dasharray: 0;
+    }
+  }
+  &--active {
+    background-color: var(--color-pistachio);
+  }
+
+  &__file-cell {
+    &--warning &__content__left .dnb-icon {
+      color: var(--color-fire-red);
+    }
+  }
+
+  &__text.dnb-p {
+    color: var(--color-black-55);
+  }
+  &__subtitle.dnb-p {
+    color: var(--color-black-55);
+  }
+}

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

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

package/es/components/upload/style.js

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

package/es/components/upload/types.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { SkeletonShow } from '../skeleton/Skeleton';
+import { LocaleProps, SpacingProps } from '../../shared/types';
+export declare type UploadProps = {
+    /**
+     * unique id used with the useUpload hook to manage the files
+     */
+    id: string;
+    /**
+     * list of accepted file types.
+     */
+    acceptedFileTypes: string[];
+    /**
+     * Skeleton should be applied when loading content
+     * Default: null
+     */
+    skeleton?: SkeletonShow;
+    /**
+     * Defines the amount of files the user can select and upload
+     * Default: 100
+     */
+    filesAmountLimit?: number;
+    /**
+     * fileMaxSize is max size of each file in MB
+     * Default: 5 MB
+     */
+    fileMaxSize?: number;
+    /**
+     * will be called on `files` changes made by the user. Access the files with `{ files }`.
+     */
+    onChange?: ({ files }: {
+        files: UploadFile[];
+    }) => void;
+    /**
+     * will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.
+     */
+    onFileDelete?: ({ fileItem }: {
+        fileItem: UploadFile;
+    }) => void;
+    /**
+     * Custom text properties
+     */
+    title?: React.ReactNode;
+    text?: React.ReactNode;
+    fileTypeDescription?: React.ReactNode;
+    fileSizeDescription?: React.ReactNode;
+    fileAmountDescription?: React.ReactNode;
+    fileSizeContent?: React.ReactNode;
+    buttonText?: React.ReactNode;
+    errorLargeFile?: React.ReactNode;
+    errorUnsupportedFile?: React.ReactNode;
+    errorAmountLimit?: React.ReactNode;
+    loadingText?: React.ReactNode;
+    deleteButton?: React.ReactNode;
+    fileListAriaLabel?: string;
+};
+export declare type UploadAllProps = UploadProps & SpacingProps & LocaleProps & React.HTMLProps<HTMLElement>;
+export declare type UploadContextProps = {
+    id?: string;
+    onInputUpload: (files: UploadFile[]) => void;
+} & Partial<UploadProps>;
+export declare type UploadFile = {
+    file: File;
+    errorMessage?: React.ReactNode;
+    isLoading?: boolean;
+    id?: string;
+};

package/es/components/upload/types.js

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

package/es/components/upload/useUpload.d.ts

@@ -0,0 +1,14 @@
+import type { UploadFile } from './types';
+export declare type useUploadReturn = {
+    files: UploadFile[];
+    setFiles: (files: UploadFile[]) => void;
+    internalFiles: UploadFile[];
+    setInternalFiles: (files: UploadFile[]) => void;
+};
+/**
+ * Use together with Upload with the same id to manage the files from outside the component.
+ * @param id string, must match the id of the Upload component
+ * @returns { files: UploadFile[], setFiles: (file: UploadFile[]) => void }
+ */
+declare function useUpload(id: string): useUploadReturn;
+export default useUpload;

package/es/components/upload/useUpload.js

@@ -0,0 +1,29 @@
+import { useEventEmitter } from '../../shared/component-helper';
+
+function useUpload(id) {
+  const {
+    data,
+    update
+  } = useEventEmitter(id);
+
+  const setFiles = files => {
+    update({
+      files
+    });
+  };
+
+  const setInternalFiles = internalFiles => {
+    update({
+      internalFiles
+    });
+  };
+
+  return {
+    files: (data === null || data === void 0 ? void 0 : data.files) || [],
+    setFiles,
+    internalFiles: (data === null || data === void 0 ? void 0 : data.internalFiles) || [],
+    setInternalFiles
+  };
+}
+
+export default useUpload;

package/es/elements/Anchor.d.ts

@@ -3,9 +3,10 @@
  *
  */
 import React from 'react';
+import { ElementIsType } from './Element';
 import { SpacingProps } from '../shared/types';
 export declare type AnchorProps = {
-    element?: React.ReactNode;
+    element?: ElementIsType;
     href?: string;
     to?: string;
     targetBlankTitle?: string;
@@ -25,7 +26,7 @@ export declare type AnchorProps = {
     target_blank_title?: string;
 } & Partial<Omit<HTMLAnchorElement, 'children'>> & SpacingProps;
 declare const Anchor: React.ForwardRefExoticComponent<{
-    element?: React.ReactNode;
+    element?: ElementIsType;
     href?: string;
     to?: string;
     targetBlankTitle?: string;

package/es/elements/Anchor.js

@@ -39,12 +39,14 @@ function AnchorInstance(localProps) {
     innerRef,
     targetBlankTitle
   } = allProps,
-        attributes = _objectWithoutProperties(allProps, _excluded);
+        rest = _objectWithoutProperties(allProps, _excluded);
 
+  const attributes = rest;
   const internalId = id || 'id' + makeUniqueId();
   const showTooltip = allProps.target === '_blank' && !allProps.title;
+  const as = element || 'a';
   return React.createElement(React.Fragment, null, React.createElement(E, _extends({
-    is: element || 'a',
+    as: as,
     className: classnames(className, omitClass !== true && 'dnb-anchor', allProps.target === '_blank' && typeof children !== 'string' && 'dnb-anchor--no-icon')
   }, attributes, {
     innerRef: innerRef

package/es/elements/Blockquote.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { spacingPropTypes } from '../components/space/SpacingHelper';
 import E from './Element';
 const Blockquote = React.forwardRef((props, ref) => React.createElement(E, _extends({
-  is: "blockquote",
+  as: "blockquote",
   skeleton_method: "font-only",
   inner_ref: ref
 }, props)));

package/es/elements/Code.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { spacingPropTypes } from '../components/space/SpacingHelper';
 import E from './Element';
 const Code = React.forwardRef((props, ref) => React.createElement(E, _extends({
-  is: "code",
+  as: "code",
   inner_ref: ref
 }, props)));
 Code.tagName = 'dnb-code';

package/es/elements/Dd.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import E from './Element';
 const Dd = React.forwardRef((props, ref) => React.createElement(E, _extends({
-  is: "dd",
+  as: "dd",
   inner_ref: ref
 }, props)));
 export default Dd;

package/es/elements/Div.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { spacingPropTypes } from '../components/space/SpacingHelper';
 import E from './Element';
 const Div = React.forwardRef((props, ref) => React.createElement(E, _extends({
-  is: "div",
+  as: "div",
   skeleton_method: "shape",
   inner_ref: ref
 }, props)));

package/es/elements/Dl.d.ts

@@ -4,16 +4,16 @@
  */
 import React from 'react';
 import { ElementProps } from './Element';
+import { SpacingProps } from '../shared/types';
 export declare type DlProps = {
     /**
      * Use "true" to horizontallly align both the term and the description
      */
     direction?: 'vertical' | 'horizontal';
 };
-export declare type DlAllProps = DlProps & React.AllHTMLAttributes<Omit<HTMLDListElement, 'children'>> & ElementProps;
+export declare type DlAllProps = DlProps & React.AllHTMLAttributes<HTMLDListElement> & ElementProps;
 declare const Dl: {
     ({ direction, ...props }: DlAllProps): JSX.Element;
-    Item({ className, children, }: DlItemProps & React.AllHTMLAttributes<HTMLSpanElement>): JSX.Element;
+    Item({ className, children, ...props }: React.AllHTMLAttributes<HTMLSpanElement> & SpacingProps): JSX.Element;
 };
-export declare type DlItemProps = {};
 export default Dl;

package/es/elements/Dl.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["direction"];
+const _excluded = ["direction"],
+      _excluded2 = ["className", "children"];
 import React from 'react';
 import classnames from 'classnames';
 import E from './Element';
@@ -16,19 +17,24 @@ const Dl = _ref => {
   }
 
   return React.createElement(E, _extends({
-    is: "dl"
+    as: "dl"
   }, props, {
     skeleton: false
   }));
 };
 
-Dl.Item = ({
-  className,
-  children
-}) => {
-  return React.createElement("span", {
+Dl.Item = _ref2 => {
+  let {
+    className,
+    children
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  return React.createElement(React.Fragment, null, children, React.createElement(E, _extends({
+    as: "dd",
+    "aria-hidden": true,
     className: classnames(className, 'dnb-dl__item')
-  }, children);
+  }, props)));
 };
 
 export default Dl;

package/es/elements/Dt.d.ts

@@ -3,10 +3,7 @@
  *
  */
 import React from 'react';
-export declare type DtProps = {
-    className?: string;
-    children: React.ReactNode;
-};
+export declare type DtProps = React.AllHTMLAttributes<HTMLDListElement>;
 declare const Dt: React.ForwardRefExoticComponent<DtProps & import("../shared/types").SpacingElementProps & {
     space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
 } & React.RefAttributes<unknown>>;

package/es/elements/Dt.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import E from './Element';
 const Dt = React.forwardRef((props, ref) => React.createElement(E, _extends({
-  is: "dt",
-  inner_ref: ref
+  as: "dt",
+  innerRef: ref
 }, props)));
 export default Dt;

package/es/elements/Element.d.ts

@@ -4,25 +4,50 @@
  */
 import React from 'react';
 import { SkeletonMethods } from '../components/skeleton/SkeletonHelper';
+import type { SpacingProps } from '../shared/types';
+export declare type ElementIsType = string | React.ReactNode;
 export declare type ElementInternalProps = {
-    is: React.ReactNode;
+    /**
+     * Defines the Element Type, like "div"
+     */
+    as: ElementIsType;
+    /** @deprecated use as instead */
+    is?: ElementIsType;
 };
 export declare type ElementProps = {
     skeleton?: boolean;
     skeletonMethod?: SkeletonMethods;
-    class?: string;
-    className?: string;
     internalClass?: string;
-    css?: string;
+    innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
     children?: React.ReactNode;
-    innerRef?: React.ForwardedRef<unknown>;
+    /** @deprecated use className instead */
+    css?: string;
+    /** @deprecated use className instead */
+    class?: string;
     /** @deprecated use innerRef instead */
-    inner_ref?: React.ForwardedRef<unknown>;
+    inner_ref?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
     /** @deprecated use skeletonMethod instead */
     skeleton_method?: SkeletonMethods;
-};
+} & SpacingProps;
+export declare type ElementAllProps = ElementProps & ElementInternalProps & React.HTMLProps<HTMLElement>;
 export declare const defaultProps: {
     skeletonMethod: string;
 };
-declare const Element: React.ForwardRefExoticComponent<ElementInternalProps & ElementProps & React.RefAttributes<unknown>>;
+declare const Element: React.ForwardRefExoticComponent<Pick<{
+    skeleton?: boolean;
+    skeletonMethod?: SkeletonMethods;
+    internalClass?: string;
+    innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
+    children?: React.ReactNode;
+    /** @deprecated use className instead */
+    css?: string;
+    /** @deprecated use className instead */
+    class?: string;
+    /** @deprecated use innerRef instead */
+    inner_ref?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
+    /** @deprecated use skeletonMethod instead */
+    skeleton_method?: SkeletonMethods;
+} & import("../shared/types").SpacingElementProps & {
+    space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
+} & ElementInternalProps & React.HTMLProps<HTMLElement>, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "top" | "right" | "bottom" | "left" | "width" | "height" | "size" | "children" | "className" | "skeleton" | "space" | "alt" | "src" | "shape" | "list" | "step" | "content" | "inner_ref" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "class" | "innerRef" | "skeletonMethod" | "internalClass" | "css" | "skeleton_method"> & React.RefAttributes<unknown>>;
 export default Element;

package/es/elements/Element.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "class", "internalClass", "css", "is", "innerRef", "skeleton", "skeletonMethod"];
+const _excluded = ["className", "class", "internalClass", "css", "as", "is", "innerRef", "skeleton", "skeletonMethod"];
 import React from 'react';
 import classnames from 'classnames';
 import Context from '../shared/Context';
@@ -38,14 +38,16 @@ function ElementInstance(localProps) {
     class: _className,
     internalClass,
     css,
+    as,
     is,
     innerRef,
     skeleton,
     skeletonMethod
   } = props,
-        attributes = _objectWithoutProperties(props, _excluded);
+        rest = _objectWithoutProperties(props, _excluded);
 
-  const Tag = is;
+  const Tag = as || is;
+  const attributes = rest;
   const tagClass = internalClass || (typeof Tag === 'string' ? `dnb-${Tag}` : '');
   const internalClassName = classnames(className, _className, css, createSkeletonClass(skeletonMethod, skeleton, context), createSpacingClasses(attributes, typeof Tag === 'string' ? `dnb-${Tag}` : null), !new RegExp(`${tagClass}(\\s|$)`).test(String(className)) && tagClass);
   validateDOMAttributes(null, attributes);

package/es/elements/H.d.ts

@@ -32,6 +32,7 @@ export interface HProps extends React.HTMLProps<HTMLElement> {
   bottom?: HBottom;
   left?: HLeft;
   className?: string;
+  as?: string;
   is?: string;
   level?: string;
   size?: HSize;

package/es/elements/H.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["is", "level", "style_type", "size", "className"];
+const _excluded = ["as", "is", "level", "style_type", "size", "className"];
 
 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; }
 
@@ -18,13 +18,14 @@ export default class H extends React.PureComponent {
     super(props);
 
     if (props.level === 'use') {
-      setNextLevel(parseFloat(props.is.substr(1)));
+      setNextLevel(parseFloat(String(props.as || props.is).substr(1)));
     }
   }
 
   render() {
     let _this$props = this.props,
         {
+      as,
       is,
       level,
       style_type,
@@ -38,7 +39,7 @@ export default class H extends React.PureComponent {
     }
 
     return React.createElement(E, _extends({
-      is: is,
+      as: as || is,
       internalClass: classnames(className, size && `dnb-h--${size}`)
     }, props));
   }
@@ -48,7 +49,7 @@ export default class H extends React.PureComponent {
 _defineProperty(H, "defaultProps", {
   className: null,
   level: null,
-  is: 'h1',
+  as: 'h1',
   size: 'xx-large',
   style_type: null,
   children: null
@@ -56,6 +57,7 @@ _defineProperty(H, "defaultProps", {
 
 process.env.NODE_ENV !== "production" ? H.propTypes = _objectSpread(_objectSpread({}, spacingPropTypes), {}, {
   className: PropTypes.string,
+  as: PropTypes.string,
   is: PropTypes.string,
   level: PropTypes.string,
   size: PropTypes.oneOf(['xx-large', 'x-large', 'large', 'medium', 'basis', 'small', 'x-small']),

package/es/elements/H1.js

@@ -11,7 +11,7 @@ import { spacingPropTypes } from '../components/space/SpacingHelper';
 import H from './H';
 
 const H1 = props => React.createElement(H, _extends({
-  is: "h1"
+  as: "h1"
 }, props));
 
 H1.tagName = 'dnb-h1';

package/es/elements/H2.js

@@ -11,7 +11,7 @@ import { spacingPropTypes } from '../components/space/SpacingHelper';
 import H from './H';
 
 const H2 = props => React.createElement(H, _extends({
-  is: "h2"
+  as: "h2"
 }, props));
 
 H2.tagName = 'dnb-h2';

package/es/elements/H3.js

@@ -11,7 +11,7 @@ import { spacingPropTypes } from '../components/space/SpacingHelper';
 import H from './H';
 
 const H3 = props => React.createElement(H, _extends({
-  is: "h3"
+  as: "h3"
 }, props));
 
 H3.tagName = 'dnb-h3';