@dnb/eufemia 9.46.2 → 9.47.1

package/cjs/components/upload/UploadFileInput.js

@@ -23,8 +23,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-require("core-js/modules/es.array.join.js");
-
 require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.array.from.js");
@@ -71,15 +69,10 @@ var UploadFileInput = function UploadFileInput() {
   };
 
   var sharedId = id || (0, _componentHelper.makeUniqueId)();
-  var accept = (0, _UploadVerify.extendWithAbbreviation)(acceptedFileTypes).map(function (type) {
-    return ".".concat(type);
-  }).join(',');
-  return _react.default.createElement("div", {
-    "data-testid": "upload-file-input"
-  }, _react.default.createElement(_Button.default, {
+  var accept = (0, _UploadVerify.getAcceptedFileTypes)(acceptedFileTypes);
+  return _react.default.createElement("div", null, _react.default.createElement(_Button.default, {
     top: "medium",
     id: "".concat(sharedId, "-input"),
-    "data-testid": "upload-file-input-button",
     className: "dnb-upload__file-input-button",
     icon: _icons.folder,
     icon_position: "left",
@@ -88,7 +81,6 @@ var UploadFileInput = function UploadFileInput() {
     onClick: openFileDialog
   }, buttonText), _UploadStatus || (_UploadStatus = _react.default.createElement(_UploadStatus2.default, null)), _react.default.createElement("input", {
     "aria-labelledby": "".concat(sharedId, "-input"),
-    "data-testid": "upload-file-input-input",
     ref: fileInput,
     accept: accept,
     className: "dnb-upload__file-input",

package/cjs/components/upload/UploadFileList.js

@@ -41,7 +41,6 @@ function UploadFileList() {
   }
 
   return _react.default.createElement("ul", {
-    "data-testid": "upload-file-list",
     className: "dnb-upload__file-list",
     "aria-label": fileListAriaLabel
   }, files.map(function (uploadFile, index) {

package/cjs/components/upload/UploadFileListCell.js

@@ -21,12 +21,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-require("core-js/modules/es.function.name.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.split.js");
-
 require("core-js/modules/es.array.iterator.js");
 
 require("core-js/modules/es.object.to-string.js");
@@ -39,6 +33,12 @@ require("core-js/modules/web.url.js");
 
 require("core-js/modules/web.url-search-params.js");
 
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.split.js");
+
+require("core-js/modules/es.function.name.js");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -51,7 +51,7 @@ var _FormStatus2 = _interopRequireDefault(require("../../components/FormStatus")
 
 var _progressIndicator = _interopRequireDefault(require("../../components/progress-indicator"));
 
-var _P = _interopRequireDefault(require("../../elements/P"));
+var _P2 = _interopRequireDefault(require("../../elements/P"));
 
 var _icons = require("../../icons");
 
@@ -59,6 +59,8 @@ var _componentHelper = require("../../shared/component-helper");
 
 var _useUpload2 = _interopRequireDefault(require("./useUpload"));
 
+var _UploadVerify = require("./UploadVerify");
+
 var _ProgressIndicator, _Icon;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -90,7 +92,7 @@ var images = {
 };
 
 var UploadFileListCell = function UploadFileListCell(_ref) {
-  var _div, _a, _FormStatus;
+  var _div, _P, _FormStatus;
 
   var id = _ref.id,
       uploadFile = _ref.uploadFile,
@@ -100,10 +102,9 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   var file = uploadFile.file,
       errorMessage = uploadFile.errorMessage,
       isLoading = uploadFile.isLoading;
-  var name = file.name,
-      type = file.type;
-  var fileType = type.split('/')[1] || '';
   var hasWarning = errorMessage != null;
+  var fileType = (0, _UploadVerify.getFileTypeFromExtension)(file);
+  var humanFileType = fileType.toUpperCase();
   var imageUrl = URL.createObjectURL(file);
   var cellRef = (0, _react.useRef)();
   var exists = useExistsHighlight(id, file);
@@ -124,7 +125,6 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   };
 
   return _react.default.createElement("li", {
-    "data-testid": "upload-file-list-cell",
     className: (0, _classnames.default)('dnb-upload__file-cell', hasWarning && 'dnb-upload__file-cell--warning', exists && 'dnb-upload__file-cell--highlight'),
     ref: cellRef
   }, _react.default.createElement("div", {
@@ -132,7 +132,6 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
   }, _react.default.createElement("div", {
     className: "dnb-upload__file-cell__content__left"
   }, getIcon(), getTitle()), _react.default.createElement("div", null, _react.default.createElement(_Button.default, {
-    "data-testid": "upload-delete-button",
     icon: _icons.trash,
     variant: "tertiary",
     onClick: onDeleteHandler,
@@ -141,9 +140,7 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
 
   function getIcon() {
     if (isLoading) {
-      return _ProgressIndicator || (_ProgressIndicator = _react.default.createElement(_progressIndicator.default, {
-        "data-testid": "upload-progress-indicator"
-      }));
+      return _ProgressIndicator || (_ProgressIndicator = _react.default.createElement(_progressIndicator.default, null));
     }
 
     if (hasWarning) return _Icon || (_Icon = _react.default.createElement(_Icon2.default, {
@@ -151,7 +148,12 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
     }));
     var iconFileType = fileType;
 
-    if (!Object.prototype.hasOwnProperty.call(images, fileType)) {
+    if (!iconFileType) {
+      var mimeParts = file.type.split('/');
+      iconFileType = images[mimeParts[0]] || images[mimeParts[1]];
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(images, iconFileType)) {
       iconFileType = 'file';
     }
 
@@ -165,23 +167,20 @@ var UploadFileListCell = function UploadFileListCell(_ref) {
       className: "dnb-upload__file-cell__text-container dnb-upload__file-cell__text-container--loading"
     }, loadingText)) : _react.default.createElement("div", {
       className: "dnb-upload__file-cell__text-container"
-    }, _a || (_a = _react.default.createElement("a", {
-      "data-testid": "upload-file-anchor",
+    }, _react.default.createElement("a", {
       target: "_blank",
       href: imageUrl,
       className: "dnb-anchor dnb-upload__file-cell__title",
       rel: "noopener noreferrer"
-    }, name)), _react.default.createElement(_P.default, {
-      "data-testid": "upload-subtitle",
+    }, file.name), _P || (_P = _react.default.createElement(_P2.default, {
       className: "dnb-upload__file-cell__subtitle",
       size: "x-small",
       top: "xx-small"
-    }, fileType.toUpperCase()));
+    }, humanFileType)));
   }
 
   function getWarning() {
     return hasWarning ? _FormStatus || (_FormStatus = _react.default.createElement(_FormStatus2.default, {
-      "data-testid": "upload-warning",
       top: "small",
       text: errorMessage,
       stretch: true

package/cjs/components/upload/UploadInfo.js

@@ -47,10 +47,8 @@ var UploadInfo = function UploadInfo() {
       fileMaxSize = context.fileMaxSize;
   var prettyfiedAcceptedFileFormats = acceptedFileTypes.join(', ').toUpperCase();
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Lead.default, {
-    "data-testid": "upload-title",
     space: "0"
   }, title), _react.default.createElement(_P.default, {
-    "data-testid": "upload-text",
     top: "xx-small",
     className: "dnb-upload__text"
   }, text), _react.default.createElement(_Dl.default, {
@@ -58,13 +56,7 @@ var UploadInfo = function UploadInfo() {
     bottom: 0,
     direction: "horizontal",
     className: "dnb-upload__condition-list"
-  }, _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, {
-    "data-testid": "upload-accepted-formats"
-  }, fileTypeDescription), _react.default.createElement(_Dd.default, null, prettyfiedAcceptedFileFormats)), _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, {
-    "data-testid": "upload-file-size"
-  }, fileSizeDescription), _react.default.createElement(_Dd.default, null, String(fileSizeContent).replace('%size', (0, _NumberUtils.format)(fileMaxSize).toString()))), filesAmountLimit < _UploadContext.defaultProps.filesAmountLimit && _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, {
-    "data-testid": "upload-file-amount-limit"
-  }, fileAmountDescription), _react.default.createElement(_Dd.default, null, filesAmountLimit))));
+  }, prettyfiedAcceptedFileFormats && _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, null, fileTypeDescription), _react.default.createElement(_Dd.default, null, prettyfiedAcceptedFileFormats)), _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, null, fileSizeDescription), _react.default.createElement(_Dd.default, null, String(fileSizeContent).replace('%size', (0, _NumberUtils.format)(fileMaxSize).toString()))), filesAmountLimit < _UploadContext.defaultProps.filesAmountLimit && _react.default.createElement(_Dl.default.Item, null, _react.default.createElement(_Dt.default, null, fileAmountDescription), _react.default.createElement(_Dd.default, null, filesAmountLimit))));
 };
 
 var _default = UploadInfo;

package/cjs/components/upload/UploadVerify.d.ts

@@ -1,5 +1,8 @@
 import { UploadFile, UploadContextProps, UploadAcceptedFileTypes } from './types';
 export declare function verifyFiles(files: UploadFile[], context: Pick<UploadContextProps, 'errorUnsupportedFile' | 'errorLargeFile' | 'acceptedFileTypes' | 'fileMaxSize'>): UploadFile[];
+export declare function getFileTypeFromExtension(file: File): string;
+export declare function getAcceptedFileTypes(acceptedFileTypes: UploadAcceptedFileTypes): string;
+export declare function hasPreferredMimeType(acceptedFileTypes: UploadAcceptedFileTypes, file: File): boolean;
 export declare function extendWithAbbreviation(acceptedFileTypes: UploadAcceptedFileTypes, abbreviations?: {
     jpg: string;
 }): string[];

package/cjs/components/upload/UploadVerify.js

@@ -16,12 +16,13 @@ require("core-js/modules/es.array.from.js");
 
 require("core-js/modules/es.array.slice.js");
 
-require("core-js/modules/es.function.name.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extendWithAbbreviation = extendWithAbbreviation;
+exports.getAcceptedFileTypes = getAcceptedFileTypes;
+exports.getFileTypeFromExtension = getFileTypeFromExtension;
+exports.hasPreferredMimeType = hasPreferredMimeType;
 exports.verifyFiles = verifyFiles;
 
 require("core-js/modules/es.regexp.exec.js");
@@ -38,6 +39,12 @@ require("core-js/modules/es.string.includes.js");
 
 require("core-js/modules/es.array.map.js");
 
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.join.js");
+
+require("core-js/modules/es.string.split.js");
+
 require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.object.entries.js");
@@ -81,8 +88,9 @@ function verifyFiles(files, context) {
       return false;
     }
 
+    var fileType = hasPreferredMimeType(acceptedFileTypes, file) ? file.type : getFileTypeFromExtension(file) || file.type;
     var foundType = extendWithAbbreviation(acceptedFileTypes).some(function (type) {
-      return file.type.includes(type);
+      return fileType.includes(type);
     });
     return !foundType ? errorUnsupportedFile : null;
   };
@@ -100,6 +108,22 @@ function verifyFiles(files, context) {
   return cleanedFiles;
 }
 
+function getFileTypeFromExtension(file) {
+  return file.name.includes('.') && file.name.replace(/.*\.([^.]+)$/, '$1') || null;
+}
+
+function getAcceptedFileTypes(acceptedFileTypes) {
+  return extendWithAbbreviation(acceptedFileTypes).map(function (type) {
+    return type.includes('/') ? type : ".".concat(type);
+  }).join(',');
+}
+
+function hasPreferredMimeType(acceptedFileTypes, file) {
+  return file.type.split('/')[1] && (!(acceptedFileTypes !== null && acceptedFileTypes !== void 0 && acceptedFileTypes.length) || (acceptedFileTypes === null || acceptedFileTypes === void 0 ? void 0 : acceptedFileTypes.some(function (type) {
+    return type.toLowerCase() === file.type.toLowerCase();
+  })));
+}
+
 function extendWithAbbreviation(acceptedFileTypes) {
   var abbreviations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     jpg: 'jpeg'

package/cjs/shared/Eufemia.js

@@ -21,7 +21,7 @@ function init() {
       _createClass(Eufemia, [{
         key: "version",
         get: function get() {
-          return '9.46.2';
+          return '9.47.1';
         }
       }]);
 

package/cjs/style/dnb-ui-components.css

@@ -7302,9 +7302,25 @@ span.dnb-space--no-collapse > span {
     white-space: nowrap; }
   .dnb-table > caption {
     caption-side: bottom;
-    margin-top: 0.5rem;
+    padding: 0.5rem 0 0.5rem 1rem;
     font-size: 1.125rem;
-    font-size: var(--font-size-basis); }
+    font-size: var(--font-size-basis);
+    background-color: #fff;
+    background-color: var(--color-white);
+    text-align: left; }
+  .dnb-table--border > caption:not(.dnb-sr-only) {
+    position: relative; }
+    .dnb-table--border > caption:not(.dnb-sr-only)::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      pointer-events: none;
+      top: -0.0625rem;
+      border-top: var(--border); }
   .dnb-table.dnb-skeleton > * {
     -webkit-text-fill-color: #ebebeb;
     -webkit-text-fill-color: var(--skeleton-color); }
@@ -7600,41 +7616,7 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
       -ms-flex-align: end;
           align-items: flex-end; }
 
-.dnb-table--outline thead .dnb-table__th::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  border-top: var(--outline); }
-
-.dnb-table--outline thead .dnb-table__th:first-of-type::after {
-  border-left: var(--outline); }
-
-.dnb-table--outline thead .dnb-table__th:last-of-type::after {
-  border-right: var(--outline); }
-
-.dnb-table--outline thead .dnb-table__th:first-of-type, .dnb-table--outline thead .dnb-table__th:first-of-type::after {
-  border-radius: 0.5rem 0 0 0; }
-
-.dnb-table--outline thead .dnb-table__th:last-of-type, .dnb-table--outline thead .dnb-table__th:last-of-type::after {
-  border-radius: 0 0.5rem 0 0; }
-
-.dnb-table--outline tbody .dnb-table__th:first-of-type::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  border-left: var(--outline); }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th::after {
+.dnb-table--border tbody .dnb-table__th::after {
   content: '';
   position: absolute;
   top: 0;
@@ -7643,37 +7625,16 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   bottom: 0;
   z-index: 1;
   pointer-events: none;
-  border-bottom: var(--outline); }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th:first-of-type::after {
-  border-radius: 0 0 0 0.5rem; }
+  border-top: var(--border); }
 
 /*
 * Table component
 *
 */
-.dnb-table--border tbody .dnb-table__td::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  border: var(--border);
-  border-right: none;
-  border-bottom: none; }
-
-.dnb-table:not(.dnb-table--outline) tbody .dnb-table__tr:last-of-type .dnb-table__td::after,
-.dnb-table:not(.dnb-table--outline) tbody .dnb-table__tr .dnb-table__td[rowspan]::after {
-  bottom: -0.0625rem;
-  border-bottom: var(--border); }
-
-.dnb-table--outline tbody .dnb-table__td {
+.dnb-table {
   /* stylelint-disable */
   /* stylelint-enable */ }
-  .dnb-table--outline tbody .dnb-table__td:first-of-type::after, .dnb-table--outline tbody .dnb-table__td:last-of-type::after {
+  .dnb-table--border tbody .dnb-table__td::after {
     content: '';
     position: absolute;
     top: 0;
@@ -7681,72 +7642,55 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
     right: 0;
     bottom: 0;
     z-index: 1;
-    pointer-events: none; }
-  .dnb-table--outline tbody .dnb-table__td:first-of-type::after {
-    border-left: var(--outline); }
-  .dnb-table--outline tbody .dnb-table__td:last-of-type::after {
-    border-right: var(--outline); }
-  .dnb-table--outline tbody .dnb-table__td, .dnb-table--outline tbody .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__td::after {
-    -webkit-transition: border-radius 400ms cubic-bezier(0.42, 0, 0, 1);
-    transition: border-radius 400ms cubic-bezier(0.42, 0, 0, 1);
-    -webkit-transition: border-radius 400ms var(--easing-default);
-    transition: border-radius 400ms var(--easing-default); }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  border-bottom: var(--outline); }
-
-.dnb-table--outline thead .dnb-table__th:first-of-type, .dnb-table--outline thead .dnb-table__th:first-of-type::after {
-  border-radius: 0.5rem 0 0 0; }
-
-.dnb-table--outline thead .dnb-table__th:last-of-type, .dnb-table--outline thead .dnb-table__th:last-of-type::after {
-  border-radius: 0 0.5rem 0 0; }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:first-of-type::after,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::before,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::after {
-  border-radius: 0 0 0 0.5rem; }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::before,
-.dnb-table--outline tbody
-.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::after {
-  border-radius: 0 0 0.5rem 0; }
-
-.dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::after {
-  border-radius: 0 0 0.5rem 0.5rem; }
-
-.dnb-table--outline tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
-  border-left: none; }
-
-.dnb-table--border tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
-  border-left: var(--border); }
-
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::after {
-  border-radius: 0 0 0 0; }
-
-.dnb-table__td--no-spacing,
-.dnb-table td.dnb-table__td--no-spacing {
-  padding: 0; }
-
-.dnb-table__td--spacing-horizontal,
-.dnb-table td.dnb-table__td--spacing-horizontal {
-  padding-top: 0;
-  padding-bottom: 0; }
+    pointer-events: none;
+    border: var(--border);
+    border-right: none;
+    border-bottom: none; }
+  .dnb-table--outline {
+    position: relative; }
+    .dnb-table--outline, .dnb-table--outline::after {
+      border-radius: 0.5rem; }
+    .dnb-table--outline::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      pointer-events: none;
+      z-index: 3;
+      border: var(--outline); }
+  .dnb-table--outline tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
+    border-left: none; }
+  .dnb-table--border tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
+    border-left: var(--border); }
+  .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::after {
+    border-radius: 0 0 0 0; }
+  .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after {
+    border-top: var(--outline); }
+  .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type, .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after {
+    border-radius: 0.5rem 0 0 0; }
+  .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after {
+    border-top: var(--outline); }
+  .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type, .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type,
+  .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after {
+    border-radius: 0 0.5rem 0 0; }
+  .dnb-table:not(.dnb-table--outline).dnb-table--border > tbody:first-child .dnb-table__td:last-of-type::after,
+  .dnb-table:not(.dnb-table--outline).dnb-table--border > :not(thead) + tbody .dnb-table__td:last-of-type::after {
+    border-right: var(--border); }
+  .dnb-table__td--no-spacing,
+  .dnb-table td.dnb-table__td--no-spacing {
+    padding: 0; }
+  .dnb-table__td--spacing-horizontal,
+  .dnb-table td.dnb-table__td--spacing-horizontal {
+    padding-top: 0;
+    padding-bottom: 0; }
 
 /*
 * Table component
@@ -7851,21 +7795,42 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column; }
-  .dnb-table__container__body .dnb-table:not([class*='space__bottom']) {
-    margin-bottom: 0; }
-  .dnb-table__container__body .dnb-table__size--large .dnb-table__th {
-    padding-top: 1.5rem; }
+  .dnb-table__container__body .dnb-table {
+    position: relative;
+    /* stylelint-disable */
+    /* stylelint-enable */ }
+    .dnb-table__container__body .dnb-table:not([class*='space__bottom']) {
+      margin-bottom: 0; }
+    .dnb-table__container__body .dnb-table__size--large .dnb-table__th {
+      padding-top: 1.5rem; }
+    .dnb-table__container__body .dnb-table::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      pointer-events: none;
+      border-bottom: var(--border); }
+    .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after,
+    .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after,
+    .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after,
+    .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after {
+      border-top: none; }
   .dnb-table__container__head {
     padding: 2rem 1rem 0; }
     .dnb-table__container__head--empty {
-      padding: 0.5rem 0 0; }
+      padding: 0;
+      min-height: 1.5rem; }
     .dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*='space__top']) {
       margin: 0; }
   .dnb-table__container__foot {
     padding: 1rem;
     padding-bottom: 1.25rem; }
     .dnb-table__container__foot--empty {
-      padding-bottom: 1.5rem; }
+      padding: 0;
+      min-height: 1rem; }
   .dnb-table__container .dnb-table__scroll-view {
     -webkit-clip-path: inset(0 round 0 0 0.5rem 0.5rem);
             clip-path: inset(0 round 0 0 0.5rem 0.5rem); }
@@ -7981,8 +7946,11 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   .dnb-table__tr--has-accordion-content, .dnb-table__tr__accordion_content {
     position: relative;
     z-index: 2; }
-  .dnb-table__tr--has-accordion-content:hover, .dnb-table__tr--has-accordion-content:active, .dnb-table__tr--has-accordion-content:focus, .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion_content {
+  .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion_content {
     z-index: 3; }
+  .dnb-table__tr--has-accordion-content:hover, .dnb-table__tr--has-accordion-content:active,
+  html[data-whatinput='keyboard'] .dnb-table__tr--has-accordion-content:focus {
+    z-index: 5; }
   .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded .dnb-table__toggle-button .dnb-icon {
     -webkit-transform: rotate(180deg);
             transform: rotate(180deg); }
@@ -8015,6 +7983,9 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
     html:not([data-whatintent='touch']) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__accordion-icon .dnb-icon {
       color: #14555a;
       color: var(--color-emerald-green); }
+  .dnb-table--outline tbody
+.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(:nth-last-child(2)) .dnb-table__td::before {
+    bottom: -0.0625rem; }
   .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td {
     background-color: #fff;
     background-color: var(--color-white); }
@@ -8054,11 +8025,12 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
   @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
     .dnb-table__tr__accordion_content[hidden] {
       /**
-          * By reverting the display from "none" to "block",
-          * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount).
-          */
+        * By reverting the display from "none" to "block",
+        * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount).
+        */
       display: block; } }
   .dnb-table__tr__accordion_content td {
+    padding: 0 !important;
     width: calc(100% - 3.5rem); }
     .dnb-table__size--medium .dnb-table__tr__accordion_content td {
       width: calc(100% - 3rem); }
@@ -8119,6 +8091,21 @@ thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus
       * But we do not need baseline in this tr > td, so we reset it.
       */
     vertical-align: top; }
+  .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type, .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::before, .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::after {
+    border-radius: 0 0 0 0.5rem; }
+  .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after,
+  .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type,
+  .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::before,
+  .dnb-table--outline tbody
+.dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::after {
+    border-radius: 0 0 0.5rem 0; }
+  .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::after {
+    border-radius: 0 0 0.5rem 0.5rem; }
   .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--disabled) {
     cursor: pointer; }
   .dnb-table__td-wrapper {