@dnb/eufemia 9.39.1 → 9.40.0

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

@@ -10,75 +10,90 @@
 /*
  * Utilities
  */
-.dnb-table > tr > th,
-.dnb-table > thead > tr > th, .dnb-table__th {
-  padding: 2rem 1rem 1rem;
-  font-weight: 500;
-  font-weight: var(--font-weight-medium);
-  color: currentColor;
-  color: var(--theme-color-black-80, currentColor);
-  font-size: 1.125rem;
-  font-size: var(--font-size-basis);
-  line-height: 1.5rem;
-  line-height: var(--line-height-basis);
-  vertical-align: bottom;
-  background-color: #fff;
-  background-color: var(--color-white); }
-
-.dnb-table > tr > td,
-.dnb-table > tbody > tr > td, .dnb-table__td,
-.dnb-table > tr > th[scope='row'] {
-  padding: 1rem;
-  color: currentColor;
-  color: var(--theme-color-black-80, currentColor);
-  font-size: 1.125rem;
-  font-size: var(--font-size-basis);
-  line-height: 1.5rem;
-  line-height: var(--line-height-basis);
-  vertical-align: baseline; }
-
-.dnb-table__size--medium .dnb-table__th {
-  padding: 1.375rem 1rem 0.875rem;
-  font-size: 1rem;
-  font-size: var(--font-size-small);
-  line-height: 1.25rem;
-  line-height: var(--line-height-small); }
-
-.dnb-table__size--small .dnb-table__th {
-  padding: 1.25rem 1rem 0.5rem;
-  font-size: 1rem;
-  font-size: var(--font-size-small);
-  line-height: 1.25rem;
-  line-height: var(--line-height-small); }
-
-.dnb-table__size--medium .dnb-table__td {
-  padding: 0.875rem 1rem; }
-  .dnb-table__size--medium .dnb-table__td,
-  .dnb-table__size--medium .dnb-table__td .dnb-p {
+.dnb-table {
+  text-align: left; }
+  .dnb-table > tr > th,
+  .dnb-table > thead > tr > th, .dnb-table__th {
+    padding: 2rem 1rem 1rem;
+    font-weight: 500;
+    font-weight: var(--font-weight-medium);
+    color: currentColor;
+    color: var(--theme-color-black-80, currentColor);
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis);
+    vertical-align: bottom;
+    background-color: #fff;
+    background-color: var(--color-white); }
+  .dnb-table > tr > td,
+  .dnb-table > tbody > tr > td, .dnb-table__td,
+  tbody > tr > .dnb-table__th,
+  .dnb-table > tr > th[scope='row'] {
+    padding: 1rem;
+    color: currentColor;
+    color: var(--theme-color-black-80, currentColor);
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis);
+    vertical-align: baseline; }
+  .dnb-table__size--medium .dnb-table__th {
+    padding: 1.375rem 1rem 0.875rem;
     font-size: 1rem;
     font-size: var(--font-size-small);
     line-height: 1.25rem;
     line-height: var(--line-height-small); }
-
-.dnb-table__size--small .dnb-table__td {
-  padding: 0.625rem 1rem; }
-  .dnb-table__size--small .dnb-table__td,
-  .dnb-table__size--small .dnb-table__td .dnb-p {
+  .dnb-table__size--small .dnb-table__th {
+    padding: 1.25rem 1rem 0.5rem;
     font-size: 1rem;
     font-size: var(--font-size-small);
     line-height: 1.25rem;
     line-height: var(--line-height-small); }
+  tbody > tr > .dnb-table__th {
+    padding: 1rem;
+    vertical-align: baseline; }
+  .dnb-table__size--medium tbody > tr > .dnb-table__th, .dnb-table__size--medium
+  tbody > tr > .dnb-table__td {
+    padding: 0.875rem 1rem; }
+    .dnb-table__size--medium tbody > tr > .dnb-table__th,
+    .dnb-table__size--medium tbody > tr > .dnb-table__th .dnb-p, .dnb-table__size--medium
+    tbody > tr > .dnb-table__td,
+    .dnb-table__size--medium
+    tbody > tr > .dnb-table__td .dnb-p {
+      font-size: 1rem;
+      font-size: var(--font-size-small);
+      line-height: 1.25rem;
+      line-height: var(--line-height-small); }
+  .dnb-table__size--small tbody > tr > .dnb-table__th, .dnb-table__size--small
+  tbody > tr > .dnb-table__td {
+    padding: 0.625rem 1rem; }
+    .dnb-table__size--small tbody > tr > .dnb-table__th,
+    .dnb-table__size--small tbody > tr > .dnb-table__th .dnb-p, .dnb-table__size--small
+    tbody > tr > .dnb-table__td,
+    .dnb-table__size--small
+    tbody > tr > .dnb-table__td .dnb-p {
+      font-size: 1rem;
+      font-size: var(--font-size-small);
+      line-height: 1.25rem;
+      line-height: var(--line-height-small); }
+  .dnb-table > tbody > .dnb-table__tr:last-of-type > .dnb-table__td::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: var(--outline); }
+
+.dnb-table__container {
+  background-color: #fff;
+  background-color: var(--color-white); }
 
-.dnb-table:not(.dnb-table--border):not(.dnb-table--outline) > tbody
-> tr:last-of-type
-> td::after,
-.dnb-table:not(.dnb-table--border):not(.dnb-table--outline) > tbody
-> .dnb-table__tr:last-of-type > .dnb-table__td::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -0.0625rem;
-  height: 0.0625rem;
-  background-color: #ebebeb;
-  background-color: var(--color-black-8); }
+.dnb-table,
+.dnb-table__container {
+  --border: 0.0625rem solid var(--color-black-8);
+  --outline: 0.0625rem solid var(--color-black-8); }
+  html[data-visual-test] .dnb-table, html[data-visual-test]
+  .dnb-table__container {
+    --border: 0.0625rem solid blue;
+    --outline: 0.0625rem solid red; }

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

@@ -1 +1 @@
-.dnb-table>thead>tr>th,.dnb-table>tr>th,.dnb-table__th{background-color:#fff;background-color:var(--color-white);font-weight:500;font-weight:var(--font-weight-medium);padding:2rem 1rem 1rem;vertical-align:bottom}.dnb-table>tbody>tr>td,.dnb-table>thead>tr>th,.dnb-table>tr>td,.dnb-table>tr>th,.dnb-table>tr>th[scope=row],.dnb-table__td,.dnb-table__th{color:currentColor;color:var(--theme-color-black-80,currentColor);font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-table>tbody>tr>td,.dnb-table>tr>td,.dnb-table>tr>th[scope=row],.dnb-table__td{padding:1rem;vertical-align:baseline}.dnb-table__size--medium .dnb-table__th{padding:1.375rem 1rem .875rem}.dnb-table__size--medium .dnb-table__th,.dnb-table__size--small .dnb-table__th{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-table__size--small .dnb-table__th{padding:1.25rem 1rem .5rem}.dnb-table__size--medium .dnb-table__td{padding:.875rem 1rem}.dnb-table__size--medium .dnb-table__td,.dnb-table__size--medium .dnb-table__td .dnb-p{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-table__size--small .dnb-table__td{padding:.625rem 1rem}.dnb-table__size--small .dnb-table__td,.dnb-table__size--small .dnb-table__td .dnb-p{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-table:not(.dnb-table--border):not(.dnb-table--outline)>tbody>.dnb-table__tr:last-of-type>.dnb-table__td:after,.dnb-table:not(.dnb-table--border):not(.dnb-table--outline)>tbody>tr:last-of-type>td:after{background-color:#ebebeb;background-color:var(--color-black-8);bottom:-.0625rem;content:"";height:.0625rem;left:0;position:absolute;right:0}
+.dnb-table{text-align:left}.dnb-table>thead>tr>th,.dnb-table>tr>th,.dnb-table__th{background-color:#fff;background-color:var(--color-white);font-weight:500;font-weight:var(--font-weight-medium);padding:2rem 1rem 1rem;vertical-align:bottom}.dnb-table>tbody>tr>td,.dnb-table>thead>tr>th,.dnb-table>tr>td,.dnb-table>tr>th,.dnb-table>tr>th[scope=row],.dnb-table__td,.dnb-table__th,tbody>tr>.dnb-table__th{color:currentColor;color:var(--theme-color-black-80,currentColor);font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-table>tbody>tr>td,.dnb-table>tr>td,.dnb-table>tr>th[scope=row],.dnb-table__td,tbody>tr>.dnb-table__th{padding:1rem;vertical-align:baseline}.dnb-table__size--medium .dnb-table__th{padding:1.375rem 1rem .875rem}.dnb-table__size--medium .dnb-table__th,.dnb-table__size--small .dnb-table__th{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-table__size--small .dnb-table__th{padding:1.25rem 1rem .5rem}tbody>tr>.dnb-table__th{padding:1rem;vertical-align:baseline}.dnb-table__size--medium tbody>tr>.dnb-table__td,.dnb-table__size--medium tbody>tr>.dnb-table__th{padding:.875rem 1rem}.dnb-table__size--medium tbody>tr>.dnb-table__td,.dnb-table__size--medium tbody>tr>.dnb-table__td .dnb-p,.dnb-table__size--medium tbody>tr>.dnb-table__th,.dnb-table__size--medium tbody>tr>.dnb-table__th .dnb-p{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-table__size--small tbody>tr>.dnb-table__td,.dnb-table__size--small tbody>tr>.dnb-table__th{padding:.625rem 1rem}.dnb-table__size--small tbody>tr>.dnb-table__td,.dnb-table__size--small tbody>tr>.dnb-table__td .dnb-p,.dnb-table__size--small tbody>tr>.dnb-table__th,.dnb-table__size--small tbody>tr>.dnb-table__th .dnb-p{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-table>tbody>.dnb-table__tr:last-of-type>.dnb-table__td:after{border-bottom:var(--outline);bottom:0;content:"";left:0;position:absolute;right:0}.dnb-table__container{background-color:#fff;background-color:var(--color-white)}.dnb-table,.dnb-table__container{--border:0.0625rem solid var(--color-black-8);--outline:0.0625rem solid var(--color-black-8)}html[data-visual-test] .dnb-table,html[data-visual-test] .dnb-table__container{--border:0.0625rem solid blue;--outline:0.0625rem solid red}

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

@@ -6,9 +6,11 @@
 @import '../../../../style/themes/imports.scss';
 
 .dnb-table {
+  text-align: left;
+
   // head
-  & > tr > th,
-  & > thead > tr > th,
+  & > tr > th,/* should be deprecated */
+  & > thead > tr > th,/* should be deprecated */
   &__th {
     // spacing
     padding: 2rem 1rem 1rem;
@@ -24,10 +26,11 @@
   }
 
   // body data
-  & > tr > td,
-  & > tbody > tr > td,
+  & > tr > td,/* should be deprecated */
+  & > tbody > tr > td,/* should be deprecated */
   &__td,
-  & > tr > th[scope='row'] {
+  tbody > tr > &__th,
+  & > tr > th[scope='row']/* should be deprecated */ {
     // spacing
     padding: 1rem;
 
@@ -38,6 +41,7 @@
     vertical-align: baseline;
   }
 
+  // stylelint-disable-next-line
   &__th {
     .dnb-table__size--medium & {
       // spacing
@@ -58,7 +62,18 @@
     }
   }
 
-  &__td {
+  // stylelint-disable-next-line
+  tbody > tr > &__th {
+    // spacing
+    padding: 1rem;
+
+    // typography
+    vertical-align: baseline;
+  }
+
+  // stylelint-disable-next-line
+  tbody > tr > &__th,
+  tbody > tr > &__td {
     .dnb-table__size--medium & {
       // spacing
       padding: 0.875rem 1rem;
@@ -89,21 +104,31 @@
   // &:not(#{&}--border):not(#{&}--outline) > thead > &__tr > &__th::after,
 
   // border
-  &:not(#{&}--border):not(#{&}--outline)
-    > tbody
-    > tr:last-of-type
-    > td::after,
-  &:not(#{&}--border):not(#{&}--outline)
-    > tbody
-    > &__tr:last-of-type
-    > &__td::after {
+  & > tbody > &__tr:last-of-type > &__td::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
-    bottom: -0.0625rem;
+    bottom: 0; // don't use negative value, else it will be hidden when accordion
+
+    border-bottom: var(--outline);
+  }
+}
+
+.dnb-table__container {
+  background-color: var(--color-white);
+}
+
+.dnb-table,
+.dnb-table__container {
+  // table border
+  --border: 0.0625rem solid var(--color-black-8);
+
+  // table outline
+  --outline: 0.0625rem solid var(--color-black-8);
 
-    height: 0.0625rem;
-    background-color: var(--color-black-8);
+  html[data-visual-test] & {
+    --border: 0.0625rem solid blue;
+    --outline: 0.0625rem solid red;
   }
 }

package/components/visually-hidden/VisuallyHidden.d.ts

@@ -1,16 +1,6 @@
 import React from 'react';
 import { DynamicElement } from '../../shared/types';
 export interface VisuallyHiddenProps {
-    /**
-     * The content of the visually hidden element, can be a string or a React Element
-     * Default: null
-     */
-    children?: string | React.ReactNode;
-    /**
-     * Custom className on the component root
-     * Default: null
-     */
-    className?: string;
     /**
      * Hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user)
      * Default: false
@@ -22,9 +12,10 @@ export interface VisuallyHiddenProps {
      */
     element?: DynamicElement;
 }
+export declare type VisuallyHiddenAllProps = VisuallyHiddenProps & React.HTMLProps<HTMLSpanElement>;
 export declare const defaultProps: {
     focusable: boolean;
     element: string;
 };
-declare const VisuallyHidden: (localProps: VisuallyHiddenProps) => JSX.Element;
+declare const VisuallyHidden: (localProps: VisuallyHiddenAllProps) => JSX.Element;
 export default VisuallyHidden;

package/components/visually-hidden/VisuallyHidden.js

@@ -11,21 +11,18 @@ export var defaultProps = {
 };
 
 var VisuallyHidden = function VisuallyHidden(localProps) {
-  var _context$translation;
-
   var context = React.useContext(Context);
 
-  var _extendPropsWithConte = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.VisuallyHidden, context === null || context === void 0 ? void 0 : context.VisuallyHidden),
+  var _extendPropsWithConte = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.VisuallyHidden),
       element = _extendPropsWithConte.element,
       children = _extendPropsWithConte.children,
       className = _extendPropsWithConte.className,
       focusable = _extendPropsWithConte.focusable,
       props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
 
-  var visuallyHiddenClassNames = classnames('dnb-visually-hidden', focusable ? 'dnb-visually-hidden--focusable' : 'dnb-visually-hidden--default', className);
+  var visuallyHiddenClassNames = classnames('dnb-visually-hidden', focusable ? 'dnb-visually-hidden--focusable' : 'dnb-sr-only', className);
   var Element = element || 'span';
   return React.createElement(Element, _extends({
-    "data-testid": "visually-hidden",
     className: visuallyHiddenClassNames
   }, props), children);
 };

package/components/visually-hidden/style/_visually-hidden.scss

@@ -4,14 +4,6 @@
 */
 
 .dnb-visually-hidden {
-  &--default {
-    @include srOnly();
-
-    &:not(:focus):not(:active) {
-      @include srOnly();
-    }
-  }
-
   &--focusable {
     &:not(:focus):not(:focus-within) {
       @include srOnly();

package/components/visually-hidden/style/dnb-visually-hidden.css

@@ -72,39 +72,6 @@
 * VisuallyHidden component
 *
 */
-.dnb-visually-hidden--default {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  -webkit-touch-callout: none;
-  pointer-events: none;
-  position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  white-space: nowrap;
-  height: 1px;
-  width: 1px;
-  margin: -1px 0 0 -1px;
-  padding: 0;
-  border: 0; }
-  .dnb-visually-hidden--default:not(:focus):not(:active) {
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    -webkit-touch-callout: none;
-    pointer-events: none;
-    position: absolute;
-    clip: rect(1px, 1px, 1px, 1px);
-    overflow: hidden;
-    white-space: nowrap;
-    height: 1px;
-    width: 1px;
-    margin: -1px 0 0 -1px;
-    padding: 0;
-    border: 0; }
-
 .dnb-visually-hidden--focusable:not(:focus):not([focus-within]) {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -113,15 +80,15 @@
   -webkit-touch-callout: none;
   pointer-events: none;
   position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+  max-width: 1px;
+  max-height: 1px;
   overflow: hidden;
   white-space: nowrap;
-  height: 1px;
-  width: 1px;
-  margin: -1px 0 0 -1px;
   padding: 0;
+  margin: 0;
   border: 0; }
-
 .dnb-visually-hidden--focusable:not(:focus):not(:focus-within) {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -130,11 +97,12 @@
   -webkit-touch-callout: none;
   pointer-events: none;
   position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+  max-width: 1px;
+  max-height: 1px;
   overflow: hidden;
   white-space: nowrap;
-  height: 1px;
-  width: 1px;
-  margin: -1px 0 0 -1px;
   padding: 0;
+  margin: 0;
   border: 0; }

package/components/visually-hidden/style/dnb-visually-hidden.min.css

@@ -1 +1 @@
-.dnb-visually-hidden{-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-visually-hidden *,.dnb-visually-hidden :after,.dnb-visually-hidden :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-visually-hidden :after,.dnb-visually-hidden :before{text-decoration:inherit;vertical-align:inherit}.dnb-visually-hidden--default,.dnb-visually-hidden--default:not(:focus):not(:active),.dnb-visually-hidden--focusable:not(:focus):not([focus-within]){-webkit-touch-callout:none;clip:rect(1px,1px,1px,1px);border:0;height:1px;margin:-1px 0 0 -1px;overflow:hidden;padding:0;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;width:1px}.dnb-visually-hidden--focusable:not(:focus):not(:focus-within){-webkit-touch-callout:none;clip:rect(1px,1px,1px,1px);border:0;height:1px;margin:-1px 0 0 -1px;overflow:hidden;padding:0;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;width:1px}
+.dnb-visually-hidden{-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-visually-hidden *,.dnb-visually-hidden :after,.dnb-visually-hidden :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-visually-hidden :after,.dnb-visually-hidden :before{text-decoration:inherit;vertical-align:inherit}.dnb-visually-hidden--focusable:not(:focus):not([focus-within]){-webkit-touch-callout:none;border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);margin:0;max-height:1px;max-width:1px;overflow:hidden;padding:0;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.dnb-visually-hidden--focusable:not(:focus):not(:focus-within){-webkit-touch-callout:none;border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);margin:0;max-height:1px;max-width:1px;overflow:hidden;padding:0;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}

package/es/components/accordion/style/_accordion.scss

@@ -209,8 +209,8 @@
 
   // stylelint-disable-next-line
   & > &__header--no-animation &__header__icon,
-  html[data-visual-test] & > &__header--no-animation &__header__icon {
-    transition-duration: 1ms !important;
+  html[data-visual-test] & &__header &__header__icon {
+    transition: none;
   }
 
   // IE fix

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

@@ -341,6 +341,6 @@
           right: 0;
           width: 60%; } }
   .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon,
-  html[data-visual-test] .dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon {
-    -webkit-transition-duration: 1ms !important;
-            transition-duration: 1ms !important; }
+  html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon {
+    -webkit-transition: none;
+    transition: none; }

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

@@ -1 +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-accordion{-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);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-accordion *,.dnb-accordion :after,.dnb-accordion :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-accordion :after,.dnb-accordion :before{text-decoration:inherit;vertical-align:inherit}:root{--accordion-border-width:0.0625rem;--accordion-border-radius:0.25rem;--accordion-easing:var(--easing-default)}.dnb-accordion{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:1rem;font-size:var(--font-size-small);line-height:1.5rem;line-height:var(--line-height-basis);position:relative}.dnb-accordion,.dnb-accordion__header{display:-webkit-box;display:-ms-flexbox;display:flex}.dnb-accordion__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:.0625rem solid transparent;border:var(--accordion-border-width) solid transparent;border-radius:.25rem;border-radius:var(--accordion-border-radius);cursor:pointer;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:1.5rem 0 1.5rem 2rem;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin:1rem 0 1rem 2rem}.dnb-accordion__header__icon+.dnb-accordion__header__wrapper{margin-left:0;margin-right:2rem}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{-ms-flex-item-align:start;align-self:flex-start;font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin:1.5rem 1rem;-webkit-transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1),-webkit-transform .4s cubic-bezier(.42,0,0,1);-webkit-transition:-webkit-transform .4s var(--accordion-easing);transition:-webkit-transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing),-webkit-transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:1rem}.dnb-accordion__header__icon--right{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.dnb-accordion__header__icon--right .dnb-accordion__header__icon{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.dnb-accordion__header__icon--right .dnb-accordion__header__container{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper{-webkit-box-ordinal-group:3;-ms-flex-order:2;margin-left:1rem;margin-right:1rem;order:2}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header__icon--right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header__title{font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:1rem;font-size:var(--font-size-small);font-weight:400;font-weight:var(--font-weight-basis);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.dnb-accordion__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);-webkit-transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner{display:none}.dnb-accordion-group--single-container{-webkit-transition:min-height 1s cubic-bezier(.42,0,0,1);transition:min-height 1s cubic-bezier(.42,0,0,1);-webkit-transition:min-height 1s var(--accordion-easing);transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;-webkit-transition:opacity 1s cubic-bezier(.42,0,0,1);transition:opacity 1s cubic-bezier(.42,0,0,1);-webkit-transition:opacity 1s var(--accordion-easing);transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}
+.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-accordion{-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);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-accordion *,.dnb-accordion :after,.dnb-accordion :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-accordion :after,.dnb-accordion :before{text-decoration:inherit;vertical-align:inherit}:root{--accordion-border-width:0.0625rem;--accordion-border-radius:0.25rem;--accordion-easing:var(--easing-default)}.dnb-accordion{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:1rem;font-size:var(--font-size-small);line-height:1.5rem;line-height:var(--line-height-basis);position:relative}.dnb-accordion,.dnb-accordion__header{display:-webkit-box;display:-ms-flexbox;display:flex}.dnb-accordion__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:.0625rem solid transparent;border:var(--accordion-border-width) solid transparent;border-radius:.25rem;border-radius:var(--accordion-border-radius);cursor:pointer;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:1.5rem 0 1.5rem 2rem;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin:1rem 0 1rem 2rem}.dnb-accordion__header__icon+.dnb-accordion__header__wrapper{margin-left:0;margin-right:2rem}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{-ms-flex-item-align:start;align-self:flex-start;font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin:1.5rem 1rem;-webkit-transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1),-webkit-transform .4s cubic-bezier(.42,0,0,1);-webkit-transition:-webkit-transform .4s var(--accordion-easing);transition:-webkit-transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing),-webkit-transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:1rem}.dnb-accordion__header__icon--right{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.dnb-accordion__header__icon--right .dnb-accordion__header__icon{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.dnb-accordion__header__icon--right .dnb-accordion__header__container{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper{-webkit-box-ordinal-group:3;-ms-flex-order:2;margin-left:1rem;margin-right:1rem;order:2}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header__icon--right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header__title{font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:1rem;font-size:var(--font-size-small);font-weight:400;font-weight:var(--font-weight-basis);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded>.dnb-accordion__header .dnb-accordion__header__icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.dnb-accordion__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);-webkit-transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);width:100%;will-change:height}.dnb-accordion__content__inner{margin-top:1rem;width:100%}.dnb-accordion__content.dnb-height-animation--hidden .dnb-accordion__content__inner{display:none}.dnb-accordion-group--single-container{-webkit-transition:min-height 1s cubic-bezier(.42,0,0,1);transition:min-height 1s cubic-bezier(.42,0,0,1);-webkit-transition:min-height 1s var(--accordion-easing);transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;-webkit-transition:opacity 1s cubic-bezier(.42,0,0,1);transition:opacity 1s cubic-bezier(.42,0,0,1);-webkit-transition:opacity 1s var(--accordion-easing);transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}.dnb-accordion-group--single-container .dnb-accordion>.dnb-accordion__header .dnb-accordion__header__icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}.dnb-accordion>.dnb-accordion__header--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion .dnb-accordion__header .dnb-accordion__header__icon{-webkit-transition:none;transition:none}

package/es/components/dialog/Dialog.d.ts

@@ -8,6 +8,6 @@ declare namespace Dialog {
     var Body: typeof DialogBody;
     var Header: typeof DialogHeader;
     var Navigation: typeof DialogNavigation;
-    var Action: ({ declineText, confirmText, hideDecline, onConfirm, onDecline, children, }: import("./parts/DialogAction").DialogActionProps) => JSX.Element;
+    var Action: ({ declineText, confirmText, hideDecline, onConfirm, onDecline, className, children, ...props }: import("./parts/DialogAction").DialogActionAllProps) => JSX.Element;
 }
 export default Dialog;

package/es/components/dialog/parts/DialogAction.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import type { SpacingProps } from '../../space/types';
 declare type extendedMouseEvent = {
     event: React.MouseEvent<HTMLElement>;
     close: () => void;
 };
-interface DialogActionProps {
+export declare type DialogActionProps = {
     /**
      * For dialog actions, give a custom text for the decline button.
      */
@@ -28,7 +29,7 @@ interface DialogActionProps {
      * Pass in custom confirm/decline buttons for action handling. Every child of type Button will be provided with a `close` function attribute.
      */
     children?: React.ReactElement | Array<React.ReactElement>;
-}
-declare const DialogAction: ({ declineText, confirmText, hideDecline, onConfirm, onDecline, children, }: DialogActionProps) => JSX.Element;
+};
+export declare type DialogActionAllProps = DialogActionProps & SpacingProps & Omit<React.HTMLAttributes<HTMLElement>, 'children'>;
+declare const DialogAction: ({ declineText, confirmText, hideDecline, onConfirm, onDecline, className, children, ...props }: DialogActionAllProps) => JSX.Element;
 export default DialogAction;
-export type { DialogActionProps };

package/es/components/dialog/parts/DialogAction.js

@@ -1,11 +1,16 @@
+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 = ["declineText", "confirmText", "hideDecline", "onConfirm", "onDecline", "className", "children"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React, { useContext } from 'react';
+import classNames from 'classnames';
 import Button from '../../button/Button';
+import Space from '../../space/Space';
 import { Context } from '../../../shared';
 import ModalContext from '../../modal/ModalContext';
 import { dispatchCustomElementEvent } from '../../../shared/component-helper';
@@ -14,16 +19,20 @@ const fallbackCloseAction = ({
   close
 }) => close();
 
-const DialogAction = ({
-  declineText = null,
-  confirmText = null,
-  hideDecline = false,
-  onConfirm = fallbackCloseAction,
-  onDecline = fallbackCloseAction,
-  children
-}) => {
+const DialogAction = _ref => {
   var _translation$Dialog, _translation$Dialog2;
 
+  let {
+    declineText = null,
+    confirmText = null,
+    hideDecline = false,
+    onConfirm = fallbackCloseAction,
+    onDecline = fallbackCloseAction,
+    className,
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   const {
     translation,
     Button: ButtonContext
@@ -50,9 +59,10 @@ const DialogAction = ({
     });
   }
 
-  return React.createElement("div", {
-    className: "dnb-dialog__actions"
-  }, childrenWithCloseFunc, !children && !hideDecline && React.createElement(Button, {
+  return React.createElement(Space, _extends({
+    element: "section",
+    className: classNames('dnb-dialog__actions', className)
+  }, props), childrenWithCloseFunc, !children && !hideDecline && React.createElement(Button, {
     text: declineText || (translation === null || translation === void 0 ? void 0 : (_translation$Dialog = translation.Dialog) === null || _translation$Dialog === void 0 ? void 0 : _translation$Dialog.declineText),
     variant: "secondary",
     onClick: event => {

package/es/components/dialog/style/_dialog.scss

@@ -41,8 +41,8 @@
   }
 
   &--information {
-    min-width: var(--dialog-min-width);
     width: var(--dialog-avg-width);
+    min-width: var(--dialog-min-width);
     max-width: var(--dialog-max-width);
   }
 
@@ -119,6 +119,9 @@
       margin-right: 1rem;
     }
   }
+  &--information &__actions {
+    justify-content: left;
+  }
 
   &__align--center &__content {
     align-items: center;
@@ -159,35 +162,6 @@
     justify-content: space-between;
   }
 
-  &__icon {
-    // Modify the border prop from the icon component
-    &__primary.dnb-icon--border::after {
-      left: -50%;
-      right: -50%;
-      top: -50%;
-      bottom: -50%;
-
-      border: none;
-      background-color: currentColor;
-      opacity: 0.1;
-    }
-
-    &__primary#{&}--warning {
-      color: var(--color-fire-red);
-
-      ::after {
-        background-color: var(--color-fire-red-8);
-      }
-    }
-    &__primary#{&}--info {
-      color: var(--color-emerald-green);
-
-      ::after {
-        background-color: var(--color-pistachio);
-      }
-    }
-  }
-
   // Animation in
   html:not([data-visual-test]) & {
     animation: show-modal var(--modal-animation-duration) ease-out;
@@ -236,6 +210,9 @@
     }
   }
 
+  &__icon {
+    display: flex;
+  }
   &__icon ~ &__header {
     margin-top: 1.5rem;
   }