@dnb/eufemia 9.37.0 → 9.38.0

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

@@ -34,13 +34,12 @@
                 box-shadow: 0 0 0 0.0625rem var(--border-color);
         -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
                 box-shadow: 0 0 0 var(--input-border-width) 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-input__shell {
-          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
-                  box-shadow: 0 0 0 0.0625rem var(--border-color);
-          -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
-                  box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } }
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+      .dnb-input__shell {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color);
+        -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+                box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } }
     @media screen and (-ms-high-contrast: none) {
       .dnb-input__shell {
         -webkit-box-shadow: inset 0 0 0 1px #007272;
@@ -72,13 +71,12 @@
                 box-shadow: 0 0 0 0.0625rem var(--border-color);
         -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
                 box-shadow: 0 0 0 var(--input-border-width) 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-input[data-input-state='disabled'] .dnb-input__shell {
-          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
-                  box-shadow: 0 0 0 0.0625rem var(--border-color);
-          -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
-                  box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } }
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+      .dnb-input[data-input-state='disabled'] .dnb-input__shell {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color);
+        -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+                box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } }
     @media screen and (-ms-high-contrast: none) {
       .dnb-input[data-input-state='disabled'] .dnb-input__shell {
         -webkit-box-shadow: inset 0 0 0 1px #737373;

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

@@ -1,4 +1,4 @@
-.dnb-input{color:#000;color:var(--color-black)}.dnb-input__inner{color:inherit}.dnb-input__shell{--border-color:var(--color-sea-green);background-color:#fff;background-color:var(--color-white);border:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);-webkit-box-shadow:inset 0 0 0 var(--input-border-width) var(--border-color);box-shadow:inset 0 0 0 var(--input-border-width) var(--border-color);color:inherit}@supports (-webkit-touch-callout:none){.dnb-input__shell{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);-webkit-box-shadow:0 0 0 var(--input-border-width) var(--border-color);box-shadow:0 0 0 var(--input-border-width) 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-input__shell{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);-webkit-box-shadow:0 0 0 var(--input-border-width) var(--border-color);box-shadow:0 0 0 var(--input-border-width) var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-input__shell{-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)}}.dnb-input__icon{color:#007272;color:var(--color-sea-green)}.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-text-fill-color:currentColor;--border-color:var(--color-black-55);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);-webkit-box-shadow:inset 0 0 0 var(--input-border-width) var(--border-color);box-shadow:inset 0 0 0 var(--input-border-width) var(--border-color)}.dnb-input[data-input-state=disabled] .dnb-input__shell,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon{color:#737373;color:var(--color-black-55)}@supports (-webkit-touch-callout:none){.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);-webkit-box-shadow:0 0 0 var(--input-border-width) var(--border-color);box-shadow:0 0 0 var(--input-border-width) 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-input[data-input-state=disabled] .dnb-input__shell{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);-webkit-box-shadow:0 0 0 var(--input-border-width) var(--border-color);box-shadow:0 0 0 var(--input-border-width) var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-box-shadow:inset 0 0 0 1px #737373;box-shadow:inset 0 0 0 1px #737373;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-55);box-shadow:inset 0 0 0 1px var(--color-black-55)}}.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell{--border-color:var(--color-sea-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){.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell{-webkit-box-shadow:0 0 0 .125rem #007272;box-shadow:0 0 0 .125rem #007272;-webkit-box-shadow:0 0 0 .125rem var(--color-sea-green);box-shadow:0 0 0 .125rem var(--color-sea-green)}}.dnb-input[data-input-state=focus]:not([data-input-state=disabled]) .dnb-input__shell{--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){.dnb-input[data-input-state=focus]:not([data-input-state=disabled]) .dnb-input__shell{-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-input__status--error.dnb-input:not([data-input-state=focus]) .dnb-input__shell{color:#dc2a2a;color:var(--color-fire-red)}.dnb-input__status--error.dnb-input:not([data-input-state=focus]):not(:hover) .dnb-input__shell{--border-color:var(--color-fire-red);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-input__status--error.dnb-input:not([data-input-state=focus]):not(:hover) .dnb-input__shell{-webkit-box-shadow:0 0 0 .0625rem #dc2a2a;box-shadow:0 0 0 .0625rem #dc2a2a;-webkit-box-shadow:0 0 0 .0625rem var(--color-fire-red);box-shadow:0 0 0 .0625rem var(--color-fire-red)}}.dnb-input__status--error.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input__status--error.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell,.dnb-input__status--error.dnb-input[data-input-state=focus] .dnb-input__shell{--border-color:var(--color-fire-red);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){.dnb-input__status--error.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input__status--error.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell,.dnb-input__status--error.dnb-input[data-input-state=focus] .dnb-input__shell{-webkit-box-shadow:0 0 0 .125rem #dc2a2a;box-shadow:0 0 0 .125rem #dc2a2a;-webkit-box-shadow:0 0 0 .125rem var(--color-fire-red);box-shadow:0 0 0 .125rem var(--color-fire-red)}}html:not([data-whatintent=touch])
+.dnb-input{color:#000;color:var(--color-black)}.dnb-input__inner{color:inherit}.dnb-input__shell{--border-color:var(--color-sea-green);background-color:#fff;background-color:var(--color-white);border:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);-webkit-box-shadow:inset 0 0 0 var(--input-border-width) var(--border-color);box-shadow:inset 0 0 0 var(--input-border-width) var(--border-color);color:inherit}@supports (-webkit-touch-callout:none){.dnb-input__shell{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);-webkit-box-shadow:0 0 0 var(--input-border-width) var(--border-color);box-shadow:0 0 0 var(--input-border-width) var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-input__shell{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);-webkit-box-shadow:0 0 0 var(--input-border-width) var(--border-color);box-shadow:0 0 0 var(--input-border-width) var(--border-color)}}@media screen and (-ms-high-contrast:none){.dnb-input__shell{-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)}}.dnb-input__icon{color:#007272;color:var(--color-sea-green)}.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-text-fill-color:currentColor;--border-color:var(--color-black-55);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);-webkit-box-shadow:inset 0 0 0 var(--input-border-width) var(--border-color);box-shadow:inset 0 0 0 var(--input-border-width) var(--border-color)}.dnb-input[data-input-state=disabled] .dnb-input__shell,.dnb-input[data-input-state=disabled] .dnb-input__shell .dnb-icon{color:#737373;color:var(--color-black-55)}@supports (-webkit-touch-callout:none){.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);-webkit-box-shadow:0 0 0 var(--input-border-width) var(--border-color);box-shadow:0 0 0 var(--input-border-width) var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);-webkit-box-shadow:0 0 0 var(--input-border-width) var(--border-color);box-shadow:0 0 0 var(--input-border-width) var(--border-color)}}@media screen and (-ms-high-contrast:none){.dnb-input[data-input-state=disabled] .dnb-input__shell{-webkit-box-shadow:inset 0 0 0 1px #737373;box-shadow:inset 0 0 0 1px #737373;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-55);box-shadow:inset 0 0 0 1px var(--color-black-55)}}.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell{--border-color:var(--color-sea-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){.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell{-webkit-box-shadow:0 0 0 .125rem #007272;box-shadow:0 0 0 .125rem #007272;-webkit-box-shadow:0 0 0 .125rem var(--color-sea-green);box-shadow:0 0 0 .125rem var(--color-sea-green)}}.dnb-input[data-input-state=focus]:not([data-input-state=disabled]) .dnb-input__shell{--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){.dnb-input[data-input-state=focus]:not([data-input-state=disabled]) .dnb-input__shell{-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-input__status--error.dnb-input:not([data-input-state=focus]) .dnb-input__shell{color:#dc2a2a;color:var(--color-fire-red)}.dnb-input__status--error.dnb-input:not([data-input-state=focus]):not(:hover) .dnb-input__shell{--border-color:var(--color-fire-red);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-input__status--error.dnb-input:not([data-input-state=focus]):not(:hover) .dnb-input__shell{-webkit-box-shadow:0 0 0 .0625rem #dc2a2a;box-shadow:0 0 0 .0625rem #dc2a2a;-webkit-box-shadow:0 0 0 .0625rem var(--color-fire-red);box-shadow:0 0 0 .0625rem var(--color-fire-red)}}.dnb-input__status--error.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input__status--error.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell,.dnb-input__status--error.dnb-input[data-input-state=focus] .dnb-input__shell{--border-color:var(--color-fire-red);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){.dnb-input__status--error.dnb-input:not([data-input-state=disabled]) .dnb-input__shell:hover,.dnb-input__status--error.dnb-input:not([data-input-state=disabled]):hover .dnb-input__shell,.dnb-input__status--error.dnb-input[data-input-state=focus] .dnb-input__shell{-webkit-box-shadow:0 0 0 .125rem #dc2a2a;box-shadow:0 0 0 .125rem #dc2a2a;-webkit-box-shadow:0 0 0 .125rem var(--color-fire-red);box-shadow:0 0 0 .125rem var(--color-fire-red)}}html:not([data-whatintent=touch])
 .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not([disabled]):focus,html:not([data-whatintent=touch])
 .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not([disabled]):focus:after,html:not([data-whatintent=touch])
 .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not([disabled]):hover,html:not([data-whatintent=touch])

package/es/components/lib.d.ts

@@ -51,10 +51,9 @@ export function getComponents(): {
     StepIndicator: typeof StepIndicator;
     Switch: typeof Switch;
     Table: {
-        (componentProps: import("./table/Table").TableProps & import("react").TableHTMLAttributes<HTMLTableElement> & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceTypes | import("./space/types").SpacingElementProps;
-        }): JSX.Element;
+        (componentProps: import("./table/Table").TableAllProps): JSX.Element;
         StickyHelper: () => JSX.Element;
+        ScrollView: typeof import("./table/TableScrollView").default;
     };
     Tabs: typeof Tabs;
     Tag: {

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

@@ -69,11 +69,10 @@
     .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color); } }
-  @media not all and (min-resolution: 0.001dpcm) {
-    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
-      .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
-        -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
-                box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+    .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color); } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button {
       -webkit-box-shadow: inset 0 0 0 1px #007272;
@@ -107,11 +106,10 @@
       .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
         -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
                 box-shadow: 0 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-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
-          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
-                  box-shadow: 0 0 0 0.0625rem var(--border-color); } } }
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+      .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color); } }
     @media screen and (-ms-high-contrast: none) {
       .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active {
         -webkit-box-shadow: inset 0 0 0 1px #ccc;
@@ -130,11 +128,10 @@
     .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color); } }
-  @media not all and (min-resolution: 0.001dpcm) {
-    @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
-      .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
-        -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
-                box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
+    .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color); } }
   @media screen and (-ms-high-contrast: none) {
     .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus, .dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active {
       -webkit-box-shadow: inset 0 0 0 1px #333;

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

@@ -1,2 +1,2 @@
-.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static{color:#14555a;color:var(--color-emerald-green)}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link{color:#007272;color:var(--color-sea-green)}.dnb-step-indicator-v1 .dnb-step-indicator__item{margin-left:4.5rem}.dnb-step-indicator-v1 .dnb-step-indicator__item:first-child{margin-left:0}@media screen and (max-width:50em){.dnb-step-indicator-v1 .dnb-step-indicator__item{margin-left:2rem}}.dnb-step-indicator-v1 .dnb-step-indicator:after{color:#a5e1d2;color:var(--color-mint-green)}.dnb-step-indicator-v1 .dnb-step-indicator--active.dnb-step-indicator-v1 .dnb-step-indicator__item:after,.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content:after{background-color:#007272;background-color:var(--color-sea-green)}.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content,.dnb-step-indicator-v1 .dnb-step-indicator span[hidden]{font-weight:500;font-weight:var(--font-weight-medium)}.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content:not(:hover),.dnb-step-indicator-v1 .dnb-step-indicator span[hidden]:not(:hover){color:#14555a;color:var(--color-emerald-green)}.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button{--border-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);font-weight:500;font-weight:var(--font-weight-medium)}@supports (-webkit-touch-callout:none){.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button{-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)){.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button{-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){.dnb-step-indicator-v2 .dnb-step-indicator__item--current .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)}}.dnb-step-indicator-v2 .dnb-step-indicator__item--visited .dnb-button{background-color:#f2f4ec;background-color:var(--color-pistachio)}.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button{cursor:text;pointer-events:auto;-webkit-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:initial}.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-20);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#333;color:var(--color-black-80)}@supports (-webkit-touch-callout:none){.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{-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-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{-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-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-20);box-shadow:inset 0 0 0 1px var(--color-black-20)}}.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-80);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color)}@supports (-webkit-touch-callout:none){.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{-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)){.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{-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){.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{-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)}}html[data-whatinput=keyboard]
+.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static{color:#14555a;color:var(--color-emerald-green)}.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link{color:#007272;color:var(--color-sea-green)}.dnb-step-indicator-v1 .dnb-step-indicator__item{margin-left:4.5rem}.dnb-step-indicator-v1 .dnb-step-indicator__item:first-child{margin-left:0}@media screen and (max-width:50em){.dnb-step-indicator-v1 .dnb-step-indicator__item{margin-left:2rem}}.dnb-step-indicator-v1 .dnb-step-indicator:after{color:#a5e1d2;color:var(--color-mint-green)}.dnb-step-indicator-v1 .dnb-step-indicator--active.dnb-step-indicator-v1 .dnb-step-indicator__item:after,.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content:after{background-color:#007272;background-color:var(--color-sea-green)}.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content,.dnb-step-indicator-v1 .dnb-step-indicator span[hidden]{font-weight:500;font-weight:var(--font-weight-medium)}.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content:not(:hover),.dnb-step-indicator-v1 .dnb-step-indicator span[hidden]:not(:hover){color:#14555a;color:var(--color-emerald-green)}.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button{--border-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);font-weight:500;font-weight:var(--font-weight-medium)}@supports (-webkit-touch-callout:none){.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button{-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button{-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){.dnb-step-indicator-v2 .dnb-step-indicator__item--current .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)}}.dnb-step-indicator-v2 .dnb-step-indicator__item--visited .dnb-button{background-color:#f2f4ec;background-color:var(--color-pistachio)}.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button{cursor:text;pointer-events:auto;-webkit-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:initial}.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-20);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#333;color:var(--color-black-80)}@supports (-webkit-touch-callout:none){.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{-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-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive .dnb-button.dnb-button--secondary:hover{-webkit-box-shadow:inset 0 0 0 1px #ccc;box-shadow:inset 0 0 0 1px #ccc;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-20);box-shadow:inset 0 0 0 1px var(--color-black-20)}}.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{--border-color:var(--color-black-80);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color)}@supports (-webkit-touch-callout:none){.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{-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){.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:active,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:focus,.dnb-step-indicator-v2 .dnb-step-indicator__item--inactive.dnb-step-indicator__item--current .dnb-button.dnb-button--secondary:hover{-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)}}html[data-whatinput=keyboard]
 .dnb-step-indicator-v2 .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus{background-color:#a5e1d2;background-color:var(--color-mint-green);color:#14555a;color:var(--color-emerald-green)}.dnb-step-indicator-v2 .dnb-step-indicator__label,.dnb-step-indicator-v2 .dnb-step-indicator__label.dnb-p{font-size:1rem;font-size:var(--font-size-small);margin-bottom:.5rem}.dnb-step-indicator-v2 .dnb-step-indicator__button__status.dnb-button--secondary{background-color:#fbf6ec;background-color:var(--color-sand-yellow)}.dnb-step-indicator-v2 .dnb-step-indicator__button__status--error.dnb-button--secondary{background-color:#fdeeee;background-color:var(--color-fire-red-8)}.dnb-step-indicator-v2 .dnb-step-indicator__button__status--info.dnb-button--secondary{background-color:#f2f4ec;background-color:var(--color-pistachio)}.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-button__icon{-ms-flex-item-align:start;align-self:flex-start;margin-right:.75rem;margin-top:1rem}.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__number,.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{font-weight:400;font-weight:var(--font-weight-basis)}.dnb-step-indicator-v2 .dnb-step-indicator__button__status .dnb-step-indicator__item-content__status{color:#333;color:var(--color-black-80);font-size:.875rem;font-size:var(--font-size-x-small);line-height:1.125rem;line-height:var(--font-size-basis);margin-top:.5rem}

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

@@ -1,11 +1,14 @@
 import React from 'react';
-import { SkeletonShow } from '../skeleton/Skeleton';
-import { SpacingProps } from '../../shared/types';
-import { StickyHelper, StickyTableHeaderProps } from './TableStickyHeader';
+import ScrollView from './TableScrollView';
+import { StickyHelper } from './TableStickyHeader';
+import type { StickyTableHeaderProps } from './TableStickyHeader';
+import type { SkeletonShow } from '../skeleton/Skeleton';
+import type { SpacingProps } from '../../shared/types';
 export declare type TableSizes = 'large' | 'medium';
 export declare type TableVariants = 'generic';
 export { StickyHelper };
-export interface TableProps extends StickyTableHeaderProps {
+export { ScrollView };
+export declare type TableProps = {
     /**
      * The content of the component.
      */
@@ -28,13 +31,30 @@ export interface TableProps extends StickyTableHeaderProps {
      * Default: generic.
      */
     variant?: TableVariants;
-}
+    /**
+     * Use `true` to show borders between table data cell
+     * Default: false
+     */
+    border?: boolean;
+    /**
+     * Use `true` to show a outline border around the table
+     * Default: false
+     */
+    outline?: boolean;
+    /**
+     * Defines if the table should behave with a fixed table layout, using: "table-layout: fixed;"
+     * Default: null.
+     */
+    fixed?: boolean;
+} & StickyTableHeaderProps;
+export declare type TableAllProps = TableProps & React.TableHTMLAttributes<HTMLTableElement> & SpacingProps;
 export declare const defaultProps: {
     size: string;
     variant: string;
 };
 declare const Table: {
-    (componentProps: TableProps & React.TableHTMLAttributes<HTMLTableElement> & SpacingProps): JSX.Element;
+    (componentProps: TableAllProps): JSX.Element;
     StickyHelper: () => JSX.Element;
+    ScrollView: typeof ScrollView;
 };
 export default Table;

package/es/components/table/Table.js

@@ -1,6 +1,12 @@
 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", "children", "size", "skeleton", "variant", "sticky", "stickyOffset"];
+const _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed", "border", "outline"];
+
+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 Context from '../../shared/Context';
@@ -8,9 +14,11 @@ import Provider from '../../shared/Provider';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
 import { extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
+import ScrollView from './TableScrollView';
 import TableContext from './TableContext';
 import { useStickyHeader, StickyHelper } from './TableStickyHeader';
 export { StickyHelper };
+export { ScrollView };
 export const defaultProps = {
   size: 'large',
   variant: 'generic'
@@ -29,7 +37,10 @@ const Table = componentProps => {
     skeleton,
     variant,
     sticky,
-    stickyOffset
+    stickyOffset,
+    fixed,
+    border,
+    outline
   } = allProps,
         props = _objectWithoutProperties(allProps, _excluded);
 
@@ -38,24 +49,31 @@ const Table = componentProps => {
   const {
     elementRef
   } = useStickyHeader(allProps);
-  const trTmpRef = React.useRef({
+  const trCountRef = React.useRef({
     count: 0
   });
-  React.useLayoutEffect(() => {
-    trTmpRef.current.count = 0;
-  });
+  const [rerenderAlias, setRerenderAlias] = React.useState({});
   validateDOMAttributes(allProps, props);
   return React.createElement(Provider, {
     skeleton: Boolean(skeleton)
   }, React.createElement(TableContext.Provider, {
     value: {
-      trTmpRef
+      trCountRef,
+      rerenderAlias,
+      forceRerender,
+      allProps: _objectSpread(_objectSpread({}, context.getTranslation(componentProps).Table), allProps)
     }
   }, React.createElement("table", _extends({
-    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && `dnb-table__variant--${variant}`, size && `dnb-table__size--${size}`, sticky && `dnb-table--sticky`),
+    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && `dnb-table__variant--${variant}`, size && `dnb-table__size--${size}`, sticky && `dnb-table--sticky`, fixed && `dnb-table--fixed`, border && `dnb-table--border`, outline && `dnb-table--outline`),
     ref: elementRef
   }, props), children)));
+
+  function forceRerender() {
+    trCountRef.current.count = 0;
+    setRerenderAlias({});
+  }
 };
 
 export default Table;
-Table.StickyHelper = StickyHelper;
+Table.StickyHelper = StickyHelper;
+Table.ScrollView = ScrollView;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { TableProps } from './Table';
+import type { SpacingProps } from '../space/types';
+export declare type TableContainerProps = {
+    /**
+     * The content of the component.
+     */
+    children: [
+        React.ReactElement<TableContainerHeadProps>,
+        React.ReactElement<TableContainerBodyProps>,
+        React.ReactElement<TableContainerFootProps>
+    ];
+};
+export declare type TableContainerAllProps = TableContainerProps & React.TableHTMLAttributes<HTMLTableRowElement> & SpacingProps;
+declare function TableContainer(props: TableContainerAllProps): JSX.Element;
+declare namespace TableContainer {
+    var Body: typeof TableContainerBody;
+    var Head: typeof TableContainerHead;
+    var Foot: typeof TableContainerFoot;
+}
+export default TableContainer;
+export declare type TableContainerBodyProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactElement<TableProps> | Array<React.ReactElement<TableProps>>;
+};
+export declare function TableContainerBody(props: TableContainerBodyProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare type TableContainerHeadProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+};
+export declare function TableContainerHead(props: TableContainerHeadProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare type TableContainerFootProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+};
+export declare function TableContainerFoot(props: TableContainerFootProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;

package/es/components/table/TableContainer.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children", "className"],
+      _excluded2 = ["children", "className"],
+      _excluded3 = ["children", "className"],
+      _excluded4 = ["children", "className"];
+import React from 'react';
+import classnames from 'classnames';
+import ScrollView from '../../fragments/scroll-view/ScrollView';
+import { createSpacingClasses } from '../space/SpacingUtils';
+import { validateDOMAttributes } from '../../shared/component-helper';
+export default function TableContainer(props) {
+  const {
+    children,
+    className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded);
+
+  const spacingClasses = createSpacingClasses(props);
+  validateDOMAttributes(props, rest);
+  return React.createElement("section", _extends({
+    className: classnames('dnb-table__container', className, spacingClasses)
+  }, rest), React.createElement(ScrollView, null, children));
+}
+export function TableContainerBody(props) {
+  const {
+    children,
+    className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded2);
+
+  return React.createElement("div", _extends({
+    className: classnames('dnb-table__container__body', className)
+  }, rest), children);
+}
+export function TableContainerHead(props) {
+  const {
+    children,
+    className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded3);
+
+  return React.createElement("div", _extends({
+    className: classnames('dnb-table__container__head', className)
+  }, rest), children);
+}
+export function TableContainerFoot(props) {
+  const {
+    children,
+    className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded4);
+
+  return React.createElement("div", _extends({
+    className: classnames('dnb-table__container__foot', className)
+  }, rest), children);
+}
+TableContainer.Body = TableContainerBody;
+TableContainer.Head = TableContainerHead;
+TableContainer.Foot = TableContainerFoot;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function TableHelpButton({ className, ...props }: {
+    [x: string]: any;
+    className?: any;
+}): JSX.Element;

package/es/components/table/TableHelpButton.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className"];
+import React from 'react';
+import classnames from 'classnames';
+import HelpButton from '../help-button/HelpButton';
+export default function TableHelpButton(_ref) {
+  let {
+    className = null
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return React.createElement(HelpButton, _extends({
+    className: classnames('dnb-table__help-button', className),
+    size: "small"
+  }, props));
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SpacingProps } from '../../shared/types';
+export declare type TableScrollViewProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactElement<HTMLTableElement>;
+};
+export declare type TableScrollViewAllProps = TableScrollViewProps & Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> & SpacingProps;
+export default function TableScrollView(props: TableScrollViewAllProps): JSX.Element;

package/es/components/table/TableScrollView.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+import ScrollView from '../../fragments/scroll-view/ScrollView';
+export default function TableScrollView(props) {
+  const {
+    className,
+    children
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded);
+
+  return React.createElement(ScrollView, _extends({
+    className: classnames('dnb-table__scroll-view', className)
+  }, rest), children);
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function TableSortButton({ className, ...props }: {
+    [x: string]: any;
+    className?: any;
+}): JSX.Element;

package/es/components/table/TableSortButton.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className"];
+import React from 'react';
+import classnames from 'classnames';
+import Button from '../button/Button';
+export default function TableSortButton(_ref) {
+  let {
+    className = null
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return React.createElement(Button, _extends({
+    className: classnames('dnb-table__sort-button', className),
+    variant: "tertiary",
+    icon: "arrow-down",
+    wrap: true
+  }, props));
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface StickyTableHeaderProps {
+export declare type StickyTableHeaderProps = {
     /**
      * Makes the Table header sticky
      * Default: false
@@ -14,7 +14,7 @@ export interface StickyTableHeaderProps {
      * @deprecated Please use `stickyOffset`
      */
     sticky_offset?: string | number;
-}
+};
 export declare const useStickyHeader: ({ sticky, stickyOffset, sticky_offset, }: StickyTableHeaderProps) => {
     elementRef: React.MutableRefObject<HTMLTableElement>;
 };

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

@@ -1,15 +1,19 @@
 import React from 'react';
 export declare type TableTdProps = {
     /**
-     * The content of the component.
-     * Default: null
+     * if set to `true`, no padding will be added
+     * Default: false
      */
-    children?: React.ReactNode;
+    noSpacing?: boolean;
     /**
-     * Custom className on the component root
+     * Set to `horizontal` for padding on left and right side
+     * Default: false
+     */
+    spacing?: 'horizontal';
+    /**
+     * The content of the component.
      * Default: null
      */
-    className?: string;
+    children?: React.ReactNode;
 };
-declare const Td: (componentProps: TableTdProps & React.TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
-export default Td;
+export default function Td(componentProps: TableTdProps & React.TdHTMLAttributes<HTMLTableCellElement>): JSX.Element;

package/es/components/table/TableTd.js

@@ -1,20 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children"];
+const _excluded = ["className", "children", "noSpacing", "spacing"];
 import React from 'react';
 import classnames from 'classnames';
-
-const Td = componentProps => {
+export default function Td(componentProps) {
   const {
     className,
-    children
+    children,
+    noSpacing,
+    spacing
   } = componentProps,
         props = _objectWithoutProperties(componentProps, _excluded);
 
   return React.createElement("td", _extends({
     role: "cell",
-    className: classnames('dnb-table__td', className)
+    className: classnames('dnb-table__td', className, noSpacing && 'dnb-table__td--no-spacing', spacing && `dnb-table__td--spacing-${spacing}`)
   }, props), children);
-};
-
-export default Td;
+}

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

@@ -1,14 +1,37 @@
 import React from 'react';
+import TableSortButton from './TableSortButton';
+import TableHelpButton from './TableHelpButton';
+export declare type TableThChildren = React.ReactNode | ReturnType<typeof TableSortButton> | ReturnType<typeof TableHelpButton>;
 export declare type TableThProps = {
     /**
-     * The content of the table header given as Tr.
+     * Defines the table header as sortable
+     * Default: false
+     */
+    sortable?: boolean;
+    /**
+     * Defines the sortable column as the current active
+     * Default: false
+     */
+    active?: boolean;
+    /**
+     * Defines the sortable column as in reversed order
+     * Default: false
+     */
+    reversed?: boolean;
+    /**
+     * If set to true, the header text will not wrap to new lines
+     * Default: false
      */
-    children: React.ReactNode;
+    noWrap?: boolean;
     /**
-     * Custom className on the component root
-     * Default: null
+     * The content of the table header given as Tr.
      */
-    className?: string;
+    children: TableThChildren | Array<TableThChildren>;
 };
-declare const Th: (componentProps: TableThProps & React.ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+declare function Th(componentProps: TableThProps & React.ThHTMLAttributes<HTMLTableCellElement>): JSX.Element;
+declare namespace Th {
+    var SortButton: typeof TableSortButton;
+    var HelpButton: typeof TableHelpButton;
+    var Horizontal: ({ className, ...rest }: React.ThHTMLAttributes<HTMLDivElement>) => JSX.Element;
+}
 export default Th;