@dnb/eufemia 9.26.1 → 9.27.0

package/components/table/style/themes/table-basis.scss

@@ -0,0 +1,161 @@
+@import '../../../button/style/themes/button-mixins.scss';
+
+@mixin tableFocusRing() {
+  &::before {
+    content: '';
+    position: absolute;
+    top: -0.5rem;
+    bottom: -0.5rem;
+    left: -1rem;
+    right: 0.5rem;
+  }
+}
+
+@mixin basisTableSortable {
+  // sortable
+  & > thead > tr > th#{&}--sortable,
+  & &__th#{&}--sortable {
+    color: var(--color-emerald-green);
+
+    .dnb-anchor,
+    .dnb-button {
+      > .dnb-icon {
+        opacity: 0;
+        transition: opacity 200ms ease-out, transform 500ms ease-out;
+        [data-visual-test-wrapper] & {
+          transition: none;
+        }
+      }
+
+      position: relative;
+      z-index: 1;
+      align-items: flex-end;
+
+      // reset anchor
+      box-shadow: none;
+
+      line-height: var(--line-height-basis);
+
+      margin: 0;
+      padding: 0;
+      padding-right: 0.5rem;
+
+      color: inherit;
+      font-weight: var(--font-weight-medium);
+      text-align: inherit;
+      font-size: inherit;
+
+      .dnb-button__text {
+        margin: 0;
+        font-size: inherit;
+
+        // underline
+        &::after {
+          right: 1rem;
+        }
+      }
+
+      .dnb-button__icon {
+        align-self: flex-end;
+        margin-top: auto;
+        margin-bottom: 0.25rem;
+      }
+
+      // underline
+      &:not(:focus) .dnb-button__text::after {
+        opacity: 1;
+        color: var(--color-emerald-green);
+      }
+
+      @include hover() {
+        color: var(--color-sea-green);
+
+        &:not(:focus) .dnb-icon {
+          opacity: 1;
+        }
+
+        // hide underline
+        .dnb-button__text::after {
+          opacity: 0;
+        }
+      }
+
+      @include focus() {
+        @include tableFocusRing();
+
+        // focus ring
+        &::before {
+          right: -0.5rem;
+        }
+        .dnb-icon {
+          opacity: 1;
+        }
+      }
+
+      @include active() {
+        @include buttonFocusRing('mouse'); // also, make a mouse ring
+        @include buttonFocusRing('touch'); // also, make a touch ring
+
+        @include tableFocusRing();
+
+        // focus ring
+        &::before {
+          right: -0.5rem;
+        }
+
+        color: var(--color-emerald-green);
+      }
+
+      // webkit fix
+      &:hover:focus:not(:active) .dnb-button__text::after {
+        visibility: hidden;
+      }
+    }
+  }
+  & > thead > tr > th#{&}--active,
+  & &__th#{&}--active {
+    .dnb-anchor,
+    .dnb-button {
+      // hide underline
+      &:not(:hover) .dnb-button__text::after {
+        opacity: 0;
+      }
+      .dnb-icon {
+        opacity: 1;
+      }
+
+      // and underline on hover
+      @include hover() {
+        .dnb-button__text::after {
+          color: var(--color-sea-green);
+          opacity: 1;
+        }
+      }
+
+      // webkit fix
+      &:hover:focus:not(:active) .dnb-button__text::after {
+        visibility: visible;
+      }
+      html[data-whatinput='keyboard']
+        &:hover:focus
+        .dnb-button__text::after {
+        visibility: hidden;
+      }
+    }
+  }
+  & > thead > tr > th#{&}--reversed,
+  & &__th#{&}--reversed {
+    .dnb-anchor,
+    .dnb-button {
+      .dnb-icon {
+        transform: rotate(180deg);
+        transform-origin: 50% 50%;
+      }
+    }
+  }
+  & > thead > tr > th#{&}--no-wrap,
+  & > tbody > tr > th#{&}--no-wrap,
+  & &__th#{&}--no-wrap {
+    white-space: nowrap;
+  }
+}

package/components/table/style/themes/ui.d.ts

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

package/components/table/style/themes/ui.js

@@ -0,0 +1 @@
+import "./dnb-table-theme-ui.min.css";

package/components/table/style.d.ts

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

package/components/table/style.js

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

package/components/tag/Tag.js

@@ -13,6 +13,7 @@ import { warn } from '../../shared/component-helper';
 import { usePropsWithContext } from '../../shared/hooks';
 import TagGroup from './TagGroup';
 import { TagGroupContext } from './TagContext';
+import { createSpacingClasses } from '../space/SpacingHelper';
 export var defaultProps = {
   skeleton: null,
   omitOnKeyUpDeleteEvent: false
@@ -23,23 +24,25 @@ var Tag = function Tag(localProps) {
 
   var context = React.useContext(Context);
   var tagGroupContext = React.useContext(TagGroupContext);
+  var allProps = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag, tagGroupContext);
 
-  var _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag, tagGroupContext),
-      className = _usePropsWithContext.className,
-      skeleton = _usePropsWithContext.skeleton,
-      children = _usePropsWithContext.children,
-      text = _usePropsWithContext.text,
-      hasLabel = _usePropsWithContext.hasLabel,
-      onClick = _usePropsWithContext.onClick,
-      onDelete = _usePropsWithContext.onDelete,
-      omitOnKeyUpDeleteEvent = _usePropsWithContext.omitOnKeyUpDeleteEvent,
-      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  var className = allProps.className,
+      skeleton = allProps.skeleton,
+      children = allProps.children,
+      text = allProps.text,
+      hasLabel = allProps.hasLabel,
+      onClick = allProps.onClick,
+      onDelete = allProps.onDelete,
+      omitOnKeyUpDeleteEvent = allProps.omitOnKeyUpDeleteEvent,
+      props = _objectWithoutProperties(allProps, _excluded);
 
   var content = text || children;
   var isClickable = !!onClick;
   var isRemovable = !!onDelete && !isClickable;
   var isInteractive = isClickable || isRemovable;
-  var tagClassNames = classnames('dnb-tag', className, isInteractive && 'dnb-tag--interactive', isRemovable && 'dnb-tag--removable');
+  var spacingClasses = createSpacingClasses(props);
+  var tagClassNames = classnames('dnb-tag', className, spacingClasses, isInteractive && 'dnb-tag--interactive', isRemovable && 'dnb-tag--removable');
+  var buttonAttr = props;
 
   var isDeleteKeyboardEvent = function isDeleteKeyboardEvent(keyboardEvent) {
     return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
@@ -51,8 +54,6 @@ var Tag = function Tag(localProps) {
     }
   };
 
-  var buttonAttr = props;
-
   if (!isInteractive) {
     buttonAttr.element = 'span';
     buttonAttr.type = '';

package/components/timeline/Timeline.js

@@ -8,6 +8,7 @@ import { createSpacingClasses } from '../space/SpacingHelper';
 import Context from '../../shared/Context';
 import { usePropsWithContext } from '../../shared/hooks';
 import TimelineItem from './TimelineItem';
+import { validateDOMAttributes } from '../../shared/component-helper';
 export var defaultProps = {
   className: null,
   skeleton: false,
@@ -17,15 +18,15 @@ export var defaultProps = {
 
 var Timeline = function Timeline(localProps) {
   var context = React.useContext(Context);
-
-  var _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Timeline, {
+  var allProps = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Timeline, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }),
-      className = _usePropsWithContext.className,
-      skeleton = _usePropsWithContext.skeleton,
-      data = _usePropsWithContext.data,
-      childrenProp = _usePropsWithContext.children,
-      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  });
+
+  var className = allProps.className,
+      skeleton = allProps.skeleton,
+      data = allProps.data,
+      childrenProp = allProps.children,
+      props = _objectWithoutProperties(allProps, _excluded);
 
   var spacingClasses = createSpacingClasses(props);
   var children = childrenProp;
@@ -39,6 +40,7 @@ var Timeline = function Timeline(localProps) {
     });
   }
 
+  validateDOMAttributes(allProps, props);
   return React.createElement("div", _extends({
     className: classnames('dnb-timeline', spacingClasses, className),
     "data-testid": "timeline"

package/components/timeline/TimelineItem.d.ts

@@ -13,13 +13,13 @@ export interface TimelineItemProps {
      */
     iconAlt?: string;
     /**
-     * Text displaying the name of the timeline item.
+     * Text displaying the title of the timeline item.
      */
-    name: React.ReactNode & string;
+    title: React.ReactNode | string;
     /**
-     * Text displaying the date of the timeline item.
+     * Text displaying the subtitle of the timeline item.
      */
-    date?: React.ReactNode;
+    subtitle?: React.ReactNode | React.ReactNode[] | string | string[];
     /**
      * Text displaying info message of the timeline item.
      */
@@ -34,6 +34,14 @@ export interface TimelineItemProps {
      * Default: null
      */
     skeleton?: SkeletonShow;
+    /**
+     * @deprecated Please use `title`
+     */
+    name?: unknown;
+    /**
+     * @deprecated Please use `subtitle`
+     */
+    date?: unknown;
 }
 declare const TimelineItem: (localProps: TimelineItemProps) => JSX.Element;
 export default TimelineItem;

package/components/timeline/TimelineItem.js

@@ -3,8 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 
 var _span;
 
-var _excluded = ["icon", "iconAlt", "name", "date", "infoMessage", "state", "skeleton"];
+var _excluded = ["icon", "iconAlt", "title", "subtitle", "infoMessage", "state", "skeleton"];
 import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.map.js";
 import React from 'react';
 import classnames from 'classnames';
 import FormStatus from '../form-status/FormStatus';
@@ -18,33 +19,43 @@ import { usePropsWithContext } from '../../shared/hooks';
 var defaultProps = {
   icon: null,
   iconAlt: null,
-  name: null,
-  date: null,
+  title: null,
+  subtitle: null,
   infoMessage: null,
   state: null,
   skeleton: false
 };
 
 var TimelineItem = function TimelineItem(localProps) {
-  var _span2, _span3, _span4, _FormStatus;
+  var _span2, _span3, _FormStatus;
 
   var context = React.useContext(Context);
   var _context$translation$ = context.translation.TimelineItem,
       alt_label_completed = _context$translation$.alt_label_completed,
       alt_label_current = _context$translation$.alt_label_current,
       alt_label_upcoming = _context$translation$.alt_label_upcoming;
-
-  var _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem, {
+  var allProps = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }),
-      icon = _usePropsWithContext.icon,
-      iconAlt = _usePropsWithContext.iconAlt,
-      name = _usePropsWithContext.name,
-      date = _usePropsWithContext.date,
-      infoMessage = _usePropsWithContext.infoMessage,
-      state = _usePropsWithContext.state,
-      skeleton = _usePropsWithContext.skeleton,
-      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  });
+
+  if (allProps.name) {
+    delete allProps.name;
+    allProps.title = allProps.name;
+  }
+
+  if (allProps.date) {
+    delete allProps.date;
+    allProps.subtitle = allProps.date;
+  }
+
+  var icon = allProps.icon,
+      iconAlt = allProps.iconAlt,
+      title = allProps.title,
+      subtitle = allProps.subtitle,
+      infoMessage = allProps.infoMessage,
+      state = allProps.state,
+      skeleton = allProps.skeleton,
+      props = _objectWithoutProperties(allProps, _excluded);
 
   var stateIsCompleted = state === 'completed';
   var stateIsCurrent = state === 'current';
@@ -68,26 +79,50 @@ var TimelineItem = function TimelineItem(localProps) {
     }));
   };
 
-  var TimelineItemName = function TimelineItemName() {
+  var TimelineItemTitle = function TimelineItemTitle() {
     return _span2 || (_span2 = React.createElement("span", {
-      className: "dnb-timeline__item__label__name",
-      "data-testid": "timeline-item-label-name"
-    }, name));
+      className: "dnb-timeline__item__label__title",
+      "data-testid": "timeline-item-label-title"
+    }, title));
   };
 
   var TimelineItemLabel = function TimelineItemLabel() {
     return _span3 || (_span3 = React.createElement("span", {
       className: "dnb-timeline__item__label"
-    }, React.createElement(TimelineItemIcon, null), React.createElement(TimelineItemName, null)));
+    }, React.createElement(TimelineItemIcon, null), React.createElement(TimelineItemTitle, null)));
+  };
+
+  var getSubtitle = function getSubtitle() {
+    var TimelineItemSubtitle = function TimelineItemSubtitle(_ref) {
+      var subtitle = _ref.subtitle;
+      return React.createElement("div", {
+        className: "dnb-timeline__item__content__subtitle",
+        "data-testid": "timeline-item-content-subtitle"
+      }, subtitle);
+    };
+
+    if (!subtitle) {
+      return null;
+    }
+
+    if (Array.isArray(subtitle)) {
+      return subtitle.map(function (subtitle, i) {
+        return React.createElement(TimelineItemSubtitle, {
+          key: i,
+          subtitle: subtitle
+        });
+      });
+    }
+
+    return React.createElement(TimelineItemSubtitle, {
+      subtitle: subtitle
+    });
   };
 
   var TimelineItemContent = function TimelineItemContent() {
     return React.createElement("div", {
       className: "dnb-timeline__item__content"
-    }, date && (_span4 || (_span4 = React.createElement("span", {
-      className: "dnb-timeline__item__content__date",
-      "data-testid": "timeline-item-content-date"
-    }, date))), infoMessage && (_FormStatus || (_FormStatus = React.createElement(FormStatus, {
+    }, getSubtitle(), infoMessage && (_FormStatus || (_FormStatus = React.createElement(FormStatus, {
       text: infoMessage,
       state: "info",
       className: "dnb-timeline__item__content__info",

package/components/timeline/style/_timeline.scss

@@ -22,13 +22,13 @@
         justify-content: center;
         padding: 0;
       }
-      &__name {
+      &__title {
         cursor: text;
       }
     }
     &__content {
       padding-bottom: var(--spacing-small);
-      &__date {
+      &__subtitle {
         cursor: text;
         font-size: var(--font-size-x-small);
         font-weight: var(--font-weight-basis);

package/components/timeline/style/dnb-timeline.css

@@ -157,7 +157,7 @@
                 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); } }
-  .dnb-timeline__item__label__name {
+  .dnb-timeline__item__label__title {
     margin-left: 1.25rem;
     margin-left: calc(
     calc(
@@ -189,7 +189,7 @@
   .dnb-timeline__item--completed .dnb-timeline__item__content {
     border-left: 1px solid #333;
     border-left: 1px solid var(--color-black-80); }
-  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+  .dnb-timeline__item--completed .dnb-timeline__item__label__title {
     color: #333;
     color: var(--color-black-80); }
   .dnb-timeline__item--current .dnb-timeline__item__content {
@@ -201,7 +201,7 @@
     padding-left: calc(2rem / 2 + 1rem);
     padding-left: calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing));
     padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
-  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+  .dnb-timeline__item--current .dnb-timeline__item__label__title {
     margin-left: 1rem;
     margin-left: var(--timeline-border-spacing);
     font-weight: 500;
@@ -222,7 +222,7 @@
     border-radius: var(--timeline-icon-border-radius--medium); }
   .dnb-timeline__item--current {
     margin-left: 0; }
-  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__title {
     font-weight: normal;
     font-weight: var(--font-weight-basis);
     color: #737373;
@@ -289,12 +289,12 @@
           -ms-flex-pack: center;
               justify-content: center;
       padding: 0; }
-    .dnb-timeline__item__label__name {
+    .dnb-timeline__item__label__title {
       cursor: text; }
   .dnb-timeline__item__content {
     padding-bottom: 1rem;
     padding-bottom: var(--spacing-small); }
-    .dnb-timeline__item__content__date {
+    .dnb-timeline__item__content__subtitle {
       cursor: text;
       font-size: 0.875rem;
       font-size: var(--font-size-x-small);

package/components/timeline/style/dnb-timeline.min.css

@@ -1 +1 @@
-.dnb-timeline{-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-timeline *,.dnb-timeline :after,.dnb-timeline :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-timeline :after,.dnb-timeline :before{text-decoration:inherit;vertical-align:inherit}:root{--timeline-icon-height--small:var(--button-height--small);--timeline-icon-width--small:var(--button-width--small);--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:var(--button-height--medium);--timeline-icon-width--medium:var(--button-width--medium);--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);--timeline-border-spacing:var(--spacing-small);--timeline-border-spacing--icon-adjusted:calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing))}.dnb-timeline__item{margin-left:.25rem;margin-left:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);background-color:#fff;background-color:var(--color-white);border-color:transparent;border-radius:.75rem;border-radius:var(--timeline-icon-border-radius--small);-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);line-height:1.5rem;line-height:var(--timeline-icon-height--small);width:1.5rem;width:var(--timeline-icon-width--small)}@supports (-webkit-touch-callout:none){.dnb-timeline__item__label__icon{-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-timeline__item__label__icon{-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-timeline__item__label__icon{-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)}}.dnb-timeline__item__label__name{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin-left:1.25rem;margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed #737373;border-left:1px dashed var(--color-black-55);margin-left:.75rem;margin-left:calc(var(--timeline-icon-width--small)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted))}.dnb-timeline__item--completed .dnb-timeline__item__content{border-left:1px solid #333;border-left:1px solid var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__name{color:#333;color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:1rem;margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__name{font-size:1.125rem;font-size:var(--font-size-basis);font-weight:500;font-weight:var(--font-weight-medium);line-height:1.5rem;line-height:var(--line-height-basis);margin-left:1rem;margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:1rem;border-radius:var(--timeline-icon-border-radius--medium);line-height:2rem;line-height:var(--timeline-icon-height--medium);width:2rem;width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__name{color:#737373;color:var(--color-black-55);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);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);color:#737373;color:var(--color-black-55)}@supports (-webkit-touch-callout:none){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #f8f8f8;box-shadow:inset 0 0 0 1px #f8f8f8;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-3);box-shadow:inset 0 0 0 1px var(--color-black-3)}}.dnb-timeline__item:only-child{margin-left:0}.dnb-timeline__item:last-child .dnb-timeline__item__content{border-left:none}.dnb-timeline{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.dnb-timeline__item__label{text-align:left}.dnb-timeline__item__label,.dnb-timeline__item__label__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0}.dnb-timeline__item__label__icon{-ms-flex-negative:0;-webkit-box-pack:center;-ms-flex-pack:center;flex-shrink:0;height:auto;justify-content:center}.dnb-timeline__item__label__name{cursor:text}.dnb-timeline__item__content{padding-bottom:1rem;padding-bottom:var(--spacing-small)}.dnb-timeline__item__content__date{color:#737373;color:var(--color-black-55);cursor:text;font-size:.875rem;font-size:var(--font-size-x-small);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item__content__info{padding-top:.5rem;padding-top:var(--spacing-x-small)}
+.dnb-timeline{-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-timeline *,.dnb-timeline :after,.dnb-timeline :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-timeline :after,.dnb-timeline :before{text-decoration:inherit;vertical-align:inherit}:root{--timeline-icon-height--small:var(--button-height--small);--timeline-icon-width--small:var(--button-width--small);--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:var(--button-height--medium);--timeline-icon-width--medium:var(--button-width--medium);--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);--timeline-border-spacing:var(--spacing-small);--timeline-border-spacing--icon-adjusted:calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing))}.dnb-timeline__item{margin-left:.25rem;margin-left:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);background-color:#fff;background-color:var(--color-white);border-color:transparent;border-radius:.75rem;border-radius:var(--timeline-icon-border-radius--small);-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);line-height:1.5rem;line-height:var(--timeline-icon-height--small);width:1.5rem;width:var(--timeline-icon-width--small)}@supports (-webkit-touch-callout:none){.dnb-timeline__item__label__icon{-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-timeline__item__label__icon{-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-timeline__item__label__icon{-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)}}.dnb-timeline__item__label__title{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin-left:1.25rem;margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed #737373;border-left:1px dashed var(--color-black-55);margin-left:.75rem;margin-left:calc(var(--timeline-icon-width--small)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted))}.dnb-timeline__item--completed .dnb-timeline__item__content{border-left:1px solid #333;border-left:1px solid var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__title{color:#333;color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:1rem;margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__title{font-size:1.125rem;font-size:var(--font-size-basis);font-weight:500;font-weight:var(--font-weight-medium);line-height:1.5rem;line-height:var(--line-height-basis);margin-left:1rem;margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:1rem;border-radius:var(--timeline-icon-border-radius--medium);line-height:2rem;line-height:var(--timeline-icon-height--medium);width:2rem;width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__title{color:#737373;color:var(--color-black-55);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);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);color:#737373;color:var(--color-black-55)}@supports (-webkit-touch-callout:none){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #f8f8f8;box-shadow:inset 0 0 0 1px #f8f8f8;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-3);box-shadow:inset 0 0 0 1px var(--color-black-3)}}.dnb-timeline__item:only-child{margin-left:0}.dnb-timeline__item:last-child .dnb-timeline__item__content{border-left:none}.dnb-timeline{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.dnb-timeline__item__label{text-align:left}.dnb-timeline__item__label,.dnb-timeline__item__label__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0}.dnb-timeline__item__label__icon{-ms-flex-negative:0;-webkit-box-pack:center;-ms-flex-pack:center;flex-shrink:0;height:auto;justify-content:center}.dnb-timeline__item__label__title{cursor:text}.dnb-timeline__item__content{padding-bottom:1rem;padding-bottom:var(--spacing-small)}.dnb-timeline__item__content__subtitle{color:#737373;color:var(--color-black-55);cursor:text;font-size:.875rem;font-size:var(--font-size-x-small);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item__content__info{padding-top:.5rem;padding-top:var(--spacing-x-small)}

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

@@ -83,7 +83,7 @@
                 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); } }
-  .dnb-timeline__item__label__name {
+  .dnb-timeline__item__label__title {
     margin-left: 1.25rem;
     margin-left: calc(
     calc(
@@ -115,7 +115,7 @@
   .dnb-timeline__item--completed .dnb-timeline__item__content {
     border-left: 1px solid #333;
     border-left: 1px solid var(--color-black-80); }
-  .dnb-timeline__item--completed .dnb-timeline__item__label__name {
+  .dnb-timeline__item--completed .dnb-timeline__item__label__title {
     color: #333;
     color: var(--color-black-80); }
   .dnb-timeline__item--current .dnb-timeline__item__content {
@@ -127,7 +127,7 @@
     padding-left: calc(2rem / 2 + 1rem);
     padding-left: calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing));
     padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing)); }
-  .dnb-timeline__item--current .dnb-timeline__item__label__name {
+  .dnb-timeline__item--current .dnb-timeline__item__label__title {
     margin-left: 1rem;
     margin-left: var(--timeline-border-spacing);
     font-weight: 500;
@@ -148,7 +148,7 @@
     border-radius: var(--timeline-icon-border-radius--medium); }
   .dnb-timeline__item--current {
     margin-left: 0; }
-  .dnb-timeline__item--upcoming .dnb-timeline__item__label__name {
+  .dnb-timeline__item--upcoming .dnb-timeline__item__label__title {
     font-weight: normal;
     font-weight: var(--font-weight-basis);
     color: #737373;

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

@@ -1 +1 @@
-:root{--timeline-icon-height--small:var(--button-height--small);--timeline-icon-width--small:var(--button-width--small);--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:var(--button-height--medium);--timeline-icon-width--medium:var(--button-width--medium);--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);--timeline-border-spacing:var(--spacing-small);--timeline-border-spacing--icon-adjusted:calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing))}.dnb-timeline__item{margin-left:.25rem;margin-left:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);background-color:#fff;background-color:var(--color-white);border-color:transparent;border-radius:.75rem;border-radius:var(--timeline-icon-border-radius--small);-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);line-height:1.5rem;line-height:var(--timeline-icon-height--small);width:1.5rem;width:var(--timeline-icon-width--small)}@supports (-webkit-touch-callout:none){.dnb-timeline__item__label__icon{-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-timeline__item__label__icon{-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-timeline__item__label__icon{-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)}}.dnb-timeline__item__label__name{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin-left:1.25rem;margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed #737373;border-left:1px dashed var(--color-black-55);margin-left:.75rem;margin-left:calc(var(--timeline-icon-width--small)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted))}.dnb-timeline__item--completed .dnb-timeline__item__content{border-left:1px solid #333;border-left:1px solid var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__name{color:#333;color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:1rem;margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__name{font-size:1.125rem;font-size:var(--font-size-basis);font-weight:500;font-weight:var(--font-weight-medium);line-height:1.5rem;line-height:var(--line-height-basis);margin-left:1rem;margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:1rem;border-radius:var(--timeline-icon-border-radius--medium);line-height:2rem;line-height:var(--timeline-icon-height--medium);width:2rem;width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__name{color:#737373;color:var(--color-black-55);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);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);color:#737373;color:var(--color-black-55)}@supports (-webkit-touch-callout:none){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #f8f8f8;box-shadow:inset 0 0 0 1px #f8f8f8;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-3);box-shadow:inset 0 0 0 1px var(--color-black-3)}}.dnb-timeline__item:only-child{margin-left:0}.dnb-timeline__item:last-child .dnb-timeline__item__content{border-left:none}
+:root{--timeline-icon-height--small:var(--button-height--small);--timeline-icon-width--small:var(--button-width--small);--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:var(--button-height--medium);--timeline-icon-width--medium:var(--button-width--medium);--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc(var(--timeline-icon-width--medium)/2 - var(--timeline-icon-width--small)/2);--timeline-border-spacing:var(--spacing-small);--timeline-border-spacing--icon-adjusted:calc(var(--timeline-icon-width-diff) + var(--timeline-border-spacing))}.dnb-timeline__item{margin-left:.25rem;margin-left:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);background-color:#fff;background-color:var(--color-white);border-color:transparent;border-radius:.75rem;border-radius:var(--timeline-icon-border-radius--small);-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);line-height:1.5rem;line-height:var(--timeline-icon-height--small);width:1.5rem;width:var(--timeline-icon-width--small)}@supports (-webkit-touch-callout:none){.dnb-timeline__item__label__icon{-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-timeline__item__label__icon{-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-timeline__item__label__icon{-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)}}.dnb-timeline__item__label__title{font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin-left:1.25rem;margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed #737373;border-left:1px dashed var(--color-black-55);margin-left:.75rem;margin-left:calc(var(--timeline-icon-width--small)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--small)/2 + var(--timeline-border-spacing--icon-adjusted))}.dnb-timeline__item--completed .dnb-timeline__item__content{border-left:1px solid #333;border-left:1px solid var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__title{color:#333;color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:1rem;margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:2rem;padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__title{font-size:1.125rem;font-size:var(--font-size-basis);font-weight:500;font-weight:var(--font-weight-medium);line-height:1.5rem;line-height:var(--line-height-basis);margin-left:1rem;margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:1rem;border-radius:var(--timeline-icon-border-radius--medium);line-height:2rem;line-height:var(--timeline-icon-height--medium);width:2rem;width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__title{color:#737373;color:var(--color-black-55);font-weight:400;font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);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);color:#737373;color:var(--color-black-55)}@supports (-webkit-touch-callout:none){.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-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-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{-webkit-box-shadow:inset 0 0 0 1px #f8f8f8;box-shadow:inset 0 0 0 1px #f8f8f8;-webkit-box-shadow:inset 0 0 0 1px var(--color-black-3);box-shadow:inset 0 0 0 1px var(--color-black-3)}}.dnb-timeline__item:only-child{margin-left:0}.dnb-timeline__item:last-child .dnb-timeline__item__content{border-left:none}

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

@@ -49,7 +49,7 @@
         background-color: var(--color-white);
         @include fakeBorder(var(--color-black-80), 0.0625rem, inset, true);
       }
-      &__name {
+      &__title {
         margin-left: var(--timeline-border-spacing--icon-adjusted);
         font-size: var(--font-size-small);
         line-height: var(--line-height-small);
@@ -63,7 +63,7 @@
     &--completed &__content {
       border-left: 1px solid var(--color-black-80);
     }
-    &--completed &__label__name {
+    &--completed &__label__title {
       color: var(--color-black-80);
     }
     &--current &__content {
@@ -72,7 +72,7 @@
         var(--timeline-border-spacing)
       );
     }
-    &--current &__label__name {
+    &--current &__label__title {
       margin-left: var(--timeline-border-spacing);
       font-weight: var(--font-weight-medium);
       font-size: var(--font-size-basis);
@@ -86,7 +86,7 @@
     &--current {
       margin-left: 0;
     }
-    &--upcoming &__label__name {
+    &--upcoming &__label__title {
       font-weight: var(--font-weight-basis);
       color: var(--color-black-55);
     }

package/elements/Table.d.ts

@@ -1,35 +1,3 @@
-import * as React from 'react';
-export type TableSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type TableTop = string | number | boolean;
-export type TableRight = string | number | boolean;
-export type TableBottom = string | number | boolean;
-export type TableLeft = string | number | boolean;
-export type TableSticky = string | boolean;
-export type TableStickyOffset = string | number;
-
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-export interface TableProps extends React.HTMLProps<HTMLElement> {
-  space?: TableSpace;
-  top?: TableTop;
-  right?: TableRight;
-  bottom?: TableBottom;
-  left?: TableLeft;
-  sticky?: TableSticky;
-  sticky_offset?: TableStickyOffset;
-  children?: React.ReactNode;
-}
-export default class Table extends React.Component<TableProps, any> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
+export * from "../components/table/Table";
+export default Table;
+import Table from "../components/table/Table";