@dnb/eufemia 10.7.0 → 10.9.0

package/components/table/TableContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableContainer.js","names":["React","classnames","TableScrollView","createSpacingClasses","validateDOMAttributes","TableContainer","props","_content$","_content$2","children","className","rest","_objectWithoutProperties","_excluded","spacingClasses","ScrollView","isArray","Array","content","type","Head","unshift","_TableContainer$Head","createElement","key","Foot","push","_TableContainer$Foot","_extends","TableContainerBody","_excluded2","TableContainerHead","_excluded3","TableContainerFoot","_excluded4","Body"],"sources":["../../../../src/components/table/TableContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport TableScrollView, { TableScrollViewProps } from './TableScrollView'\nimport { createSpacingClasses } from '../space/SpacingUtils'\n\nimport type { TableProps } from './Table'\nimport type { SpacingProps } from '../space/types'\nimport { validateDOMAttributes } from '../../shared/component-helper'\n\nexport type TableContainerProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | [\n        React.ReactElement<TableContainerHeadProps>,\n        React.ReactElement<TableContainerBodyProps>,\n        React.ReactElement<TableContainerFootProps>\n      ]\n    | React.ReactElement<TableContainerBodyProps>\n}\n\nexport type TableContainerAllProps = TableContainerProps &\n  React.TableHTMLAttributes<HTMLTableRowElement> &\n  SpacingProps\n\ntype InternalTableContainerTableScrollView = Omit<\n  TableScrollViewProps,\n  'children'\n> & {\n  children: React.ReactNode\n}\n\nexport default function TableContainer(props: TableContainerAllProps) {\n  const { children, className, ...rest } = props\n  const spacingClasses = createSpacingClasses(props)\n\n  validateDOMAttributes(props, rest)\n\n  const ScrollView =\n    TableScrollView as React.FunctionComponent<InternalTableContainerTableScrollView>\n\n  const isArray = Array.isArray(children)\n  const content = isArray ? children : [children]\n\n  if (content[0]?.type !== TableContainer.Head) {\n    content.unshift(<TableContainer.Head key=\"head\" />)\n  }\n  if (content[2]?.type !== TableContainer.Foot) {\n    content.push(<TableContainer.Foot key=\"foot\" />)\n  }\n\n  return (\n    <section\n      className={classnames(\n        'dnb-table__container',\n        className,\n        spacingClasses\n      )}\n      {...rest}\n    >\n      <ScrollView>{content}</ScrollView>\n    </section>\n  )\n}\n\nexport type TableContainerBodyProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | React.ReactElement<TableProps>\n    | Array<React.ReactElement<TableProps>>\n}\n\nexport function TableContainerBody(\n  props: TableContainerBodyProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames('dnb-table__container__body', className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerHeadProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerHead(\n  props: TableContainerHeadProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__head',\n        !children && 'dnb-table__container__head--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerFootProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerFoot(\n  props: TableContainerFootProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__foot',\n        !children && 'dnb-table__container__foot--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nTableContainer.Body = TableContainerBody\nTableContainer.Head = TableContainerHead\nTableContainer.Foot = TableContainerFoot\n"],"mappings":"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"}
+{"version":3,"file":"TableContainer.js","names":["React","classnames","TableScrollView","createSpacingClasses","validateDOMAttributes","TableContainer","props","_content$","_content$2","children","className","rest","_objectWithoutProperties","_excluded","spacingClasses","ScrollView","isArray","Array","content","type","Head","unshift","_TableContainer$Head","createElement","key","Foot","push","_TableContainer$Foot","_extends","TableContainerBody","_excluded2","TableContainerHead","_excluded3","TableContainerFoot","_excluded4","Body"],"sources":["../../../../src/components/table/TableContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport TableScrollView, { TableScrollViewProps } from './TableScrollView'\nimport { createSpacingClasses } from '../space/SpacingUtils'\n\nimport type { TableProps } from './Table'\nimport type { SpacingProps } from '../space/types'\nimport { validateDOMAttributes } from '../../shared/component-helper'\n\nexport type TableContainerProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | [\n        React.ReactElement<TableContainerHeadProps>,\n        React.ReactElement<TableContainerBodyProps>,\n        React.ReactElement<TableContainerFootProps>,\n      ]\n    | React.ReactElement<TableContainerBodyProps>\n}\n\nexport type TableContainerAllProps = TableContainerProps &\n  React.TableHTMLAttributes<HTMLTableRowElement> &\n  SpacingProps\n\ntype InternalTableContainerTableScrollView = Omit<\n  TableScrollViewProps,\n  'children'\n> & {\n  children: React.ReactNode\n}\n\nexport default function TableContainer(props: TableContainerAllProps) {\n  const { children, className, ...rest } = props\n  const spacingClasses = createSpacingClasses(props)\n\n  validateDOMAttributes(props, rest)\n\n  const ScrollView =\n    TableScrollView as React.FunctionComponent<InternalTableContainerTableScrollView>\n\n  const isArray = Array.isArray(children)\n  const content = isArray ? children : [children]\n\n  if (content[0]?.type !== TableContainer.Head) {\n    content.unshift(<TableContainer.Head key=\"head\" />)\n  }\n  if (content[2]?.type !== TableContainer.Foot) {\n    content.push(<TableContainer.Foot key=\"foot\" />)\n  }\n\n  return (\n    <section\n      className={classnames(\n        'dnb-table__container',\n        className,\n        spacingClasses\n      )}\n      {...rest}\n    >\n      <ScrollView>{content}</ScrollView>\n    </section>\n  )\n}\n\nexport type TableContainerBodyProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | React.ReactElement<TableProps>\n    | Array<React.ReactElement<TableProps>>\n}\n\nexport function TableContainerBody(\n  props: TableContainerBodyProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames('dnb-table__container__body', className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerHeadProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerHead(\n  props: TableContainerHeadProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__head',\n        !children && 'dnb-table__container__head--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerFootProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerFoot(\n  props: TableContainerFootProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__foot',\n        !children && 'dnb-table__container__foot--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nTableContainer.Body = TableContainerBody\nTableContainer.Head = TableContainerHead\nTableContainer.Foot = TableContainerFoot\n"],"mappings":"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"}

package/components/table/style/table-accordion.scss

@@ -135,7 +135,9 @@
 
   &--outline
     tbody
-    &__tr--has-accordion-content:not(#{&}__tr--expanded):not(:nth-last-child(2))
+    &__tr--has-accordion-content:not(#{&}__tr--expanded):not(
+      :nth-last-child(2)
+    )
     &__td::before {
     bottom: -0.0625rem;
   }
@@ -145,7 +147,9 @@
     background-color: var(--color-white);
   }
 
-  &__tr--has-accordion-content#{&}__tr:not(&__tr--disabled):not(:active):not(:hover):focus {
+  &__tr--has-accordion-content#{&}__tr:not(&__tr--disabled):not(
+      :active
+    ):not(:hover):focus {
     td::before {
       @include whatInput(keyboard) {
         top: 0;
@@ -175,7 +179,9 @@
     @include tableAccordionActiveColor();
   }
 
-  &__tr--has-accordion-content#{&}__tr--expanded:not(&__tr--disabled)#{&}__tr--hover:not(:active):hover
+  &__tr--has-accordion-content#{&}__tr--expanded:not(
+      &__tr--disabled
+    )#{&}__tr--hover:not(:active):hover
     &__td {
     background-color: var(--accordion-background);
 
@@ -185,7 +191,9 @@
     }
   }
 
-  &__tr--has-accordion-content#{&}__tr#{&}__tr--expanded:not(&__tr--disabled):not(:active):not(:hover) {
+  &__tr--has-accordion-content#{&}__tr#{&}__tr--expanded:not(
+      &__tr--disabled
+    ):not(:active):not(:hover) {
     @include whatInputNot('keyboard') {
       background-color: var(--accordion-background);
 
@@ -294,7 +302,9 @@
 
   &--outline
     tbody
-    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
+    &__tr#{&}__tr--has-accordion-content:not(
+      #{&}__tr--expanded
+    ):nth-last-child(2)
     &__td:first-of-type {
     &,
     &::before,
@@ -305,7 +315,9 @@
   &--outline tbody &__tr:last-of-type &__td:last-of-type,
   &--outline
     tbody
-    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
+    &__tr#{&}__tr--has-accordion-content:not(
+      #{&}__tr--expanded
+    ):nth-last-child(2)
     &__td:last-of-type {
     &,
     &::before,

package/components/table/style/table-header-buttons.scss

@@ -20,7 +20,9 @@
     .dnb-table__sort-button.dnb-button {
       > .dnb-icon {
         opacity: 0;
-        transition: opacity 200ms ease-out, transform 500ms ease-out;
+        transition:
+          opacity 200ms ease-out,
+          transform 500ms ease-out;
 
         html[data-visual-test] & {
           transition: none;

package/components/table/style/table-tr.scss

@@ -23,7 +23,9 @@
   &--outline thead &__tr:first-of-type,
   &--outline
     tbody
-    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) {
+    &__tr#{&}__tr--has-accordion-content:not(
+      #{&}__tr--expanded
+    ):nth-last-child(2) {
     // use clip-path, because border-radius does not clip on tr's
     // use "-1rem" to add room for sticky shadow
     clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0);
@@ -31,7 +33,9 @@
   &--outline tbody &__tr:last-of-type,
   &--outline
     tbody
-    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) {
+    &__tr#{&}__tr--has-accordion-content:not(
+      #{&}__tr--expanded
+    ):nth-last-child(2) {
     // use clip-path, because border-radius does not clip on tr's
     clip-path: inset(0 round 0 0 0.5rem 0.5rem);
   }

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

@@ -101,7 +101,9 @@
   &:not(&--outline) > tbody > &__tr:last-of-type > &__th::after,
   &:not(&--outline)
     > tbody
-    > &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
+    > &__tr#{&}__tr--has-accordion-content:not(
+      #{&}__tr--expanded
+    ):nth-last-child(2)
     td::after {
     @include tableBorder();
 

package/components/timeline/TimelineItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { IconIcon } from '../icon/Icon';
 import type { SkeletonShow } from '../skeleton/Skeleton';
+export type TimeLineItemStates = 'completed' | 'current' | 'upcoming';
 export type TimelineItemProps = {
     /**
      * Icon displaying on the left side.
@@ -25,10 +26,10 @@ export type TimelineItemProps = {
      */
     infoMessage?: React.ReactNode;
     /**
-     * The component state. State 'completed' or 'current' or 'upcoming'.
+     * The component state. State 'completed', 'current' or 'upcoming'.
      * Default: null
      */
-    state: 'completed' | 'current' | 'upcoming';
+    state: TimeLineItemStates;
     /**
      * Skeleton should be applied when loading content
      * Default: null

package/components/timeline/TimelineItem.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _span;
-const _excluded = ["icon", "iconAlt", "title", "subtitle", "infoMessage", "state", "skeleton"];
+const _excluded = ["icon", "iconAlt", "title", "subtitle", "infoMessage", "state", "skeleton"],
+  _excluded2 = ["title"];
 import React from 'react';
 import classnames from 'classnames';
 import FormStatus from '../form-status/FormStatus';
@@ -22,17 +23,7 @@ const defaultProps = {
   skeleton: false
 };
 const TimelineItem = localProps => {
-  var _span2, _span3, _FormStatus;
   const context = React.useContext(Context);
-  const {
-    translation: {
-      TimelineItem: {
-        alt_label_completed,
-        alt_label_current,
-        alt_label_upcoming
-      }
-    }
-  } = context;
   const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
   });
@@ -46,44 +37,85 @@ const TimelineItem = localProps => {
       skeleton
     } = allProps,
     props = _objectWithoutProperties(allProps, _excluded);
-  const stateIsCompleted = state === 'completed';
-  const stateIsCurrent = state === 'current';
-  const stateIsUpcoming = state === 'upcoming';
   const skeletonClasses = createSkeletonClass('font', skeleton, context);
   const classes = classnames(`dnb-timeline__item dnb-timeline__item--${state}`, skeletonClasses);
-  const TimelineItemIcon = () => {
-    const currentIcon = icon || stateIsCompleted && checkIcon || stateIsCurrent && pinIcon || stateIsUpcoming && calendarIcon;
-    const currentAltLabel = iconAlt || stateIsCompleted && alt_label_completed || stateIsCurrent && alt_label_current || stateIsUpcoming && alt_label_upcoming;
-    return React.createElement("span", {
-      className: "dnb-timeline__item__label__icon"
-    }, _span || (_span = React.createElement("span", {
-      key: "icon-alignment",
-      "aria-hidden": true
-    }, "\u200C")), !skeleton && currentIcon && React.createElement(IconPrimary, {
-      icon: currentIcon,
-      alt: currentAltLabel,
-      size: stateIsCurrent ? undefined : 'small'
-    }));
-  };
-  const TimelineItemTitle = () => {
-    return _span2 || (_span2 = React.createElement("span", {
-      className: "dnb-timeline__item__label__title"
-    }, title));
+  return React.createElement("li", _extends({
+    className: classes,
+    "aria-current": state === 'current' ? 'step' : undefined
+  }, props), React.createElement(TimelineItemLabel, {
+    state: state,
+    title: title,
+    icon: icon,
+    iconAlt: iconAlt,
+    skeleton: skeleton,
+    translations: context.translation.TimelineItem
+  }), React.createElement(TimelineItemContent, {
+    subtitle: subtitle,
+    infoMessage: infoMessage
+  }));
+};
+const TimelineItemLabel = _ref => {
+  let {
+      title
+    } = _ref,
+    iconProps = _objectWithoutProperties(_ref, _excluded2);
+  return React.createElement("span", {
+    className: "dnb-timeline__item__label"
+  }, React.createElement(TimelineItemIcon, iconProps), React.createElement(TimelineItemTitle, {
+    title: title
+  }));
+};
+const TimelineItemIcon = _ref2 => {
+  let {
+    icon,
+    state,
+    iconAlt,
+    skeleton,
+    translations
+  } = _ref2;
+  const {
+    alt_label_completed,
+    alt_label_current,
+    alt_label_upcoming
+  } = translations;
+  const icons = {
+    completed: checkIcon,
+    current: pinIcon,
+    upcoming: calendarIcon
   };
-  const TimelineItemLabel = () => {
-    return _span3 || (_span3 = React.createElement("span", {
-      className: "dnb-timeline__item__label"
-    }, React.createElement(TimelineItemIcon, null), React.createElement(TimelineItemTitle, null)));
+  const labels = {
+    completed: alt_label_completed,
+    current: alt_label_current,
+    upcoming: alt_label_upcoming
   };
-  const getSubtitle = () => {
-    const TimelineItemSubtitle = _ref => {
-      let {
-        subtitle
-      } = _ref;
-      return React.createElement("div", {
-        className: "dnb-timeline__item__content__subtitle"
-      }, subtitle);
-    };
+  const currentIcon = icon || icons[state];
+  const currentAltLabel = iconAlt || labels[state];
+  return React.createElement("span", {
+    className: "dnb-timeline__item__label__icon"
+  }, _span || (_span = React.createElement("span", {
+    key: "icon-alignment",
+    "aria-hidden": true
+  }, "\u200C")), !skeleton && currentIcon && React.createElement(IconPrimary, {
+    icon: currentIcon,
+    alt: currentAltLabel,
+    size: state === 'current' ? undefined : 'small'
+  }));
+};
+const TimelineItemTitle = _ref3 => {
+  let {
+    title
+  } = _ref3;
+  return React.createElement("span", {
+    className: "dnb-timeline__item__label__title"
+  }, title);
+};
+const TimelineItemContent = _ref4 => {
+  var _TimelineItemSubtitle;
+  let {
+    subtitle,
+    infoMessage
+  } = _ref4;
+  const renderSubtitles = () => {
     if (!subtitle) {
       return null;
     }
@@ -93,24 +125,26 @@ const TimelineItem = localProps => {
         subtitle: subtitle
       }));
     }
-    return React.createElement(TimelineItemSubtitle, {
+    return _TimelineItemSubtitle || (_TimelineItemSubtitle = React.createElement(TimelineItemSubtitle, {
       subtitle: subtitle
-    });
-  };
-  const TimelineItemContent = () => {
-    return React.createElement("div", {
-      className: "dnb-timeline__item__content"
-    }, getSubtitle(), infoMessage && (_FormStatus || (_FormStatus = React.createElement(FormStatus, {
-      text: infoMessage,
-      state: "info",
-      className: "dnb-timeline__item__content__info",
-      stretch: true
-    }))));
+    }));
   };
-  return React.createElement("li", _extends({
-    className: classes,
-    "aria-current": stateIsCurrent ? 'step' : undefined
-  }, props), React.createElement(TimelineItemLabel, null), React.createElement(TimelineItemContent, null));
+  return React.createElement("div", {
+    className: "dnb-timeline__item__content"
+  }, renderSubtitles(), infoMessage && React.createElement(FormStatus, {
+    text: infoMessage,
+    state: "info",
+    className: "dnb-timeline__item__content__info",
+    stretch: true
+  }));
+};
+const TimelineItemSubtitle = _ref5 => {
+  let {
+    subtitle
+  } = _ref5;
+  return React.createElement("div", {
+    className: "dnb-timeline__item__content__subtitle"
+  }, subtitle);
 };
 export default TimelineItem;
 //# sourceMappingURL=TimelineItem.js.map

package/components/timeline/TimelineItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.js","names":["React","classnames","FormStatus","IconPrimary","createSkeletonClass","checkIcon","calendarIcon","pinIcon","Context","extendPropsWithContext","defaultProps","icon","iconAlt","title","subtitle","infoMessage","state","skeleton","TimelineItem","localProps","_span2","_span3","_FormStatus","context","useContext","translation","alt_label_completed","alt_label_current","alt_label_upcoming","allProps","props","_objectWithoutProperties","_excluded","stateIsCompleted","stateIsCurrent","stateIsUpcoming","skeletonClasses","classes","TimelineItemIcon","currentIcon","currentAltLabel","createElement","className","_span","key","alt","size","undefined","TimelineItemTitle","TimelineItemLabel","getSubtitle","TimelineItemSubtitle","_ref","Array","isArray","map","i","TimelineItemContent","text","stretch","_extends"],"sources":["../../../../src/components/timeline/TimelineItem.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport FormStatus from '../form-status/FormStatus'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Icons\nimport checkIcon from '../../icons/check'\nimport calendarIcon from '../../icons/calendar'\nimport pinIcon from '../../icons/pin'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport type TimelineItemProps = {\n  /**\n   * Icon displaying on the left side.\n   * Default: `check` for state `completed`, `pin` for state `current`, and `calendar` for state `upcoming` .\n   */\n  icon?: IconIcon\n\n  /**\n   * Text displaying the title of the item's corresponding page.\n   * Default: translations based on the icon.\n   */\n  iconAlt?: string\n\n  /**\n   * Text displaying the title of the timeline item.\n   */\n  title: React.ReactNode\n\n  /**\n   * Text displaying the subtitle of the timeline item.\n   */\n  subtitle?: React.ReactNode | React.ReactNode[]\n\n  /**\n   * Text displaying info message of the timeline item.\n   */\n  infoMessage?: React.ReactNode\n\n  /**\n   * The component state. State 'completed' or 'current' or 'upcoming'.\n   * Default: null\n   */\n  state: 'completed' | 'current' | 'upcoming'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n}\n\nexport type TimelineItemAllProps = TimelineItemProps &\n  Omit<React.AllHTMLAttributes<HTMLLIElement>, 'title' | 'name'>\n\nconst defaultProps = {\n  icon: null,\n  iconAlt: null,\n  title: null,\n  subtitle: null,\n  infoMessage: null,\n  state: null,\n  skeleton: false,\n}\n\nconst TimelineItem = (localProps: TimelineItemAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      TimelineItem: {\n        alt_label_completed,\n        alt_label_current,\n        alt_label_upcoming,\n      },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.TimelineItem,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    icon,\n    iconAlt,\n    title,\n    subtitle,\n    infoMessage,\n    state,\n    skeleton,\n    ...props\n  } = allProps\n\n  const stateIsCompleted = state === 'completed'\n  const stateIsCurrent = state === 'current'\n  const stateIsUpcoming = state === 'upcoming'\n\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const classes = classnames(\n    'dnb-timeline__item',\n    skeletonClasses,\n    `dnb-timeline__item--${state}`\n  )\n\n  const TimelineItemIcon = () => {\n    const currentIcon =\n      icon ||\n      (stateIsCompleted && checkIcon) ||\n      (stateIsCurrent && pinIcon) ||\n      (stateIsUpcoming && calendarIcon)\n\n    const currentAltLabel =\n      iconAlt ||\n      (stateIsCompleted && alt_label_completed) ||\n      (stateIsCurrent && alt_label_current) ||\n      (stateIsUpcoming && alt_label_upcoming)\n    return (\n      <span className=\"dnb-timeline__item__label__icon\">\n        <span key=\"icon-alignment\" aria-hidden>\n          &zwnj;\n        </span>\n        {!skeleton && currentIcon && (\n          <IconPrimary\n            icon={currentIcon}\n            alt={currentAltLabel}\n            size={stateIsCurrent ? undefined : 'small'}\n          />\n        )}\n      </span>\n    )\n  }\n\n  const TimelineItemTitle = () => {\n    return (\n      <span className=\"dnb-timeline__item__label__title\">{title}</span>\n    )\n  }\n\n  const TimelineItemLabel = () => {\n    return (\n      <span className=\"dnb-timeline__item__label\">\n        <TimelineItemIcon />\n        <TimelineItemTitle />\n      </span>\n    )\n  }\n\n  const getSubtitle = () => {\n    const TimelineItemSubtitle = ({\n      subtitle,\n    }: {\n      subtitle: React.ReactNode\n    }) => (\n      <div className=\"dnb-timeline__item__content__subtitle\">\n        {subtitle}\n      </div>\n    )\n\n    if (!subtitle) {\n      return null\n    }\n\n    if (Array.isArray(subtitle)) {\n      return subtitle.map((subtitle, i) => (\n        <TimelineItemSubtitle key={i} subtitle={subtitle} />\n      ))\n    }\n    return <TimelineItemSubtitle subtitle={subtitle} />\n  }\n\n  const TimelineItemContent = () => {\n    return (\n      <div className=\"dnb-timeline__item__content\">\n        {getSubtitle()}\n        {infoMessage && (\n          <FormStatus\n            text={infoMessage}\n            state=\"info\"\n            className=\"dnb-timeline__item__content__info\"\n            stretch\n          />\n        )}\n      </div>\n    )\n  }\n\n  return (\n    <li\n      className={classes}\n      aria-current={stateIsCurrent ? 'step' : undefined}\n      {...props}\n    >\n      <TimelineItemLabel />\n      <TimelineItemContent />\n    </li>\n  )\n}\n\nexport default TimelineItem\n"],"mappings":"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"}
+{"version":3,"file":"TimelineItem.js","names":["React","classnames","FormStatus","IconPrimary","createSkeletonClass","checkIcon","calendarIcon","pinIcon","Context","extendPropsWithContext","defaultProps","icon","iconAlt","title","subtitle","infoMessage","state","skeleton","TimelineItem","localProps","context","useContext","allProps","props","_objectWithoutProperties","_excluded","skeletonClasses","classes","createElement","_extends","className","undefined","TimelineItemLabel","translations","translation","TimelineItemContent","_ref","iconProps","_excluded2","TimelineItemIcon","TimelineItemTitle","_ref2","alt_label_completed","alt_label_current","alt_label_upcoming","icons","completed","current","upcoming","labels","currentIcon","currentAltLabel","_span","key","alt","size","_ref3","_ref4","_TimelineItemSubtitle","renderSubtitles","Array","isArray","map","i","TimelineItemSubtitle","text","stretch","_ref5"],"sources":["../../../../src/components/timeline/TimelineItem.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport FormStatus from '../form-status/FormStatus'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Icons\nimport checkIcon from '../../icons/check'\nimport calendarIcon from '../../icons/calendar'\nimport pinIcon from '../../icons/pin'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport type TimeLineItemStates = 'completed' | 'current' | 'upcoming'\n\nexport type TimelineItemProps = {\n  /**\n   * Icon displaying on the left side.\n   * Default: `check` for state `completed`, `pin` for state `current`, and `calendar` for state `upcoming` .\n   */\n  icon?: IconIcon\n\n  /**\n   * Text displaying the title of the item's corresponding page.\n   * Default: translations based on the icon.\n   */\n  iconAlt?: string\n\n  /**\n   * Text displaying the title of the timeline item.\n   */\n  title: React.ReactNode\n\n  /**\n   * Text displaying the subtitle of the timeline item.\n   */\n  subtitle?: React.ReactNode | React.ReactNode[]\n\n  /**\n   * Text displaying info message of the timeline item.\n   */\n  infoMessage?: React.ReactNode\n\n  /**\n   * The component state. State 'completed', 'current' or 'upcoming'.\n   * Default: null\n   */\n  state: TimeLineItemStates\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n}\n\nexport type TimelineItemAllProps = TimelineItemProps &\n  Omit<React.AllHTMLAttributes<HTMLLIElement>, 'title' | 'name'>\n\nconst defaultProps = {\n  icon: null,\n  iconAlt: null,\n  title: null,\n  subtitle: null,\n  infoMessage: null,\n  state: null,\n  skeleton: false,\n}\n\nconst TimelineItem = (localProps: TimelineItemAllProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.TimelineItem,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    icon,\n    iconAlt,\n    title,\n    subtitle,\n    infoMessage,\n    state,\n    skeleton,\n    ...props\n  } = allProps\n\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const classes = classnames(\n    'dnb-timeline__item',\n    skeletonClasses,\n    `dnb-timeline__item--${state}`\n  )\n\n  return (\n    <li\n      className={classes}\n      aria-current={state === 'current' ? 'step' : undefined}\n      {...props}\n    >\n      <TimelineItemLabel\n        state={state}\n        title={title}\n        icon={icon}\n        iconAlt={iconAlt}\n        skeleton={skeleton}\n        translations={\n          context.translation.TimelineItem as TimeLineIconAltTranslations\n        }\n      />\n      <TimelineItemContent subtitle={subtitle} infoMessage={infoMessage} />\n    </li>\n  )\n}\n\n// Label\n\ntype TimelineItemLabelProps = TimeLineIconProps & TimelineItemTitleProps\n\nconst TimelineItemLabel = ({\n  title,\n  ...iconProps\n}: TimelineItemLabelProps) => {\n  return (\n    <span className=\"dnb-timeline__item__label\">\n      <TimelineItemIcon {...iconProps} />\n      <TimelineItemTitle title={title} />\n    </span>\n  )\n}\n\ntype TimeLineIconProps = Pick<\n  TimelineItemProps,\n  'icon' | 'iconAlt' | 'state' | 'skeleton'\n> & { translations: TimeLineIconAltTranslations }\n\ntype TimeLineIconAltTranslations = {\n  alt_label_completed: string\n  alt_label_current: string\n  alt_label_upcoming: string\n}\n\nconst TimelineItemIcon = ({\n  icon,\n  state,\n  iconAlt,\n  skeleton,\n  translations,\n}: TimeLineIconProps) => {\n  const { alt_label_completed, alt_label_current, alt_label_upcoming } =\n    translations\n\n  const icons: Record<TimeLineItemStates, IconIcon> = {\n    completed: checkIcon,\n    current: pinIcon,\n    upcoming: calendarIcon,\n  }\n\n  const labels: Record<TimeLineItemStates, string> = {\n    completed: alt_label_completed,\n    current: alt_label_current,\n    upcoming: alt_label_upcoming,\n  }\n\n  const currentIcon = icon || icons[state]\n  const currentAltLabel = iconAlt || labels[state]\n\n  return (\n    <span className=\"dnb-timeline__item__label__icon\">\n      <span key=\"icon-alignment\" aria-hidden>\n        &zwnj;\n      </span>\n      {!skeleton && currentIcon && (\n        <IconPrimary\n          icon={currentIcon}\n          alt={currentAltLabel}\n          size={state === 'current' ? undefined : 'small'}\n        />\n      )}\n    </span>\n  )\n}\n\ntype TimelineItemTitleProps = Pick<TimelineItemProps, 'title'>\n\nconst TimelineItemTitle = ({ title }: TimelineItemTitleProps) => {\n  return <span className=\"dnb-timeline__item__label__title\">{title}</span>\n}\n\n// Content\n\ntype TimeLineItemContentProps = Pick<\n  TimelineItemProps,\n  'subtitle' | 'infoMessage'\n>\n\nconst TimelineItemContent = ({\n  subtitle,\n  infoMessage,\n}: TimeLineItemContentProps) => {\n  const renderSubtitles = () => {\n    if (!subtitle) {\n      return null\n    }\n\n    if (Array.isArray(subtitle)) {\n      return subtitle.map((subtitle, i) => (\n        <TimelineItemSubtitle key={i} subtitle={subtitle} />\n      ))\n    }\n    return <TimelineItemSubtitle subtitle={subtitle} />\n  }\n\n  return (\n    <div className=\"dnb-timeline__item__content\">\n      {renderSubtitles()}\n      {infoMessage && (\n        <FormStatus\n          text={infoMessage}\n          state=\"info\"\n          className=\"dnb-timeline__item__content__info\"\n          stretch\n        />\n      )}\n    </div>\n  )\n}\n\ntype TimelineItemSubtitleProps = {\n  subtitle: React.ReactNode\n}\n\nconst TimelineItemSubtitle = ({ subtitle }: TimelineItemSubtitleProps) => (\n  <div className=\"dnb-timeline__item__content__subtitle\">{subtitle}</div>\n)\n\nexport default TimelineItem\n"],"mappings":"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"}

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

@@ -22,8 +22,9 @@
   );
   --timeline-icon-width-diff: calc(
     (
-        var(--timeline-icon-width--medium) -
-          var(--timeline-icon-width--small)
+        var(--timeline-icon-width--medium) - var(
+            --timeline-icon-width--small
+          )
       ) / 2
   );
   --timeline-border-spacing: var(--spacing-small);

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

@@ -1 +1,3 @@
-.dnb-timeline{--timeline-icon-height--small:1.5rem;--timeline-icon-width--small:1.5rem;--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:2rem;--timeline-icon-width--medium:2rem;--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc((var(--timeline-icon-width--medium) - 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:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;border-radius:var(--timeline-icon-border-radius--small);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-80);line-height:var(--timeline-icon-height--small);width:var(--timeline-icon-width--small)}.dnb-timeline__item__label__title{font-size:var(--font-size-small);line-height:var(--line-height-small);margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed var(--color-black-55);margin-left:calc(var(--timeline-icon-width--small)/2);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 var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__title{color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__title{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium);line-height:var(--line-height-basis);margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:var(--timeline-icon-border-radius--medium);line-height:var(--timeline-icon-height--medium);width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__title{color:var(--color-black-55);font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);--border-width:0.0625rem;background-color:var(--color-black-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-55)}.dnb-timeline__item:only-child{margin-left:0}.dnb-timeline__item:last-child .dnb-timeline__item__content{border-left:none}
+.dnb-timeline{--timeline-icon-height--small:1.5rem;--timeline-icon-width--small:1.5rem;--timeline-icon-border-radius--small:calc(var(--timeline-icon-height--small)/2);--timeline-icon-height--medium:2rem;--timeline-icon-width--medium:2rem;--timeline-icon-border-radius--medium:calc(var(--timeline-icon-height--medium)/2);--timeline-icon-width-diff:calc((var(--timeline-icon-width--medium) - 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:var(--timeline-icon-width-diff)}.dnb-timeline__item__label__icon{--border-color:var(--color-black-80);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;border-radius:var(--timeline-icon-border-radius--small);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-80);line-height:var(--timeline-icon-height--small);width:var(--timeline-icon-width--small)}.dnb-timeline__item__label__title{font-size:var(--font-size-small);line-height:var(--line-height-small);margin-left:var(--timeline-border-spacing--icon-adjusted)}.dnb-timeline__item__content{border-left:1px dashed var(--color-black-55);margin-left:calc(var(--timeline-icon-width--small)/2);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 var(--color-black-80)}.dnb-timeline__item--completed .dnb-timeline__item__label__title{color:var(--color-black-80)}.dnb-timeline__item--current .dnb-timeline__item__content{margin-left:calc(var(--timeline-icon-width--medium)/2);padding-left:calc(var(--timeline-icon-width--medium)/2 + var(--timeline-border-spacing))}.dnb-timeline__item--current .dnb-timeline__item__label__title{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium);line-height:var(--line-height-basis);margin-left:var(--timeline-border-spacing)}.dnb-timeline__item--current .dnb-timeline__item__label__icon{border-radius:var(--timeline-icon-border-radius--medium);line-height:var(--timeline-icon-height--medium);width:var(--timeline-icon-width--medium)}.dnb-timeline__item--current{margin-left:0}.dnb-timeline__item--upcoming .dnb-timeline__item__label__title{color:var(--color-black-55);font-weight:var(--font-weight-basis)}.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon{--border-color:var(--color-black-3);--border-width:0.0625rem;background-color:var(--color-black-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-55)}.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

@@ -27,8 +27,9 @@
   );
   --timeline-icon-width-diff: calc(
     (
-        var(--timeline-icon-width--medium) -
-          var(--timeline-icon-width--small)
+        var(--timeline-icon-width--medium) - var(
+            --timeline-icon-width--small
+          )
       ) / 2
   );
   --timeline-border-spacing: var(--spacing-small);

package/components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss

@@ -205,7 +205,9 @@
       }
     }
     .dnb-checkbox
-      .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover)
+      .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(
+        :hover
+      )
       ~ .dnb-checkbox__gfx {
       color: var(--color-fire-red);
     }

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

@@ -6,6 +6,10 @@
  * Utilities
  */
 .dnb-tooltip {
+  --tooltip-color: white;
+  --tooltip-background-color: black;
+  --tooltip-border-color: 1px solid black;
+  --tooltip-border-radius: 1rem;
   position: absolute;
   z-index: 3100;
   display: flex;
@@ -13,6 +17,10 @@
   justify-content: center;
   align-items: center;
   padding: 0 1rem;
+  color: var(--tooltip-color);
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  box-shadow: var(--shadow-default);
   opacity: 0;
   visibility: hidden;
   transition: opacity 200ms var(--easing-default);
@@ -70,6 +78,8 @@ html[data-visual-test] .dnb-tooltip--hide {
   left: 0;
   width: 1rem;
   height: 1rem;
+  background-color: var(--tooltip-background-color);
+  border: var(--tooltip-border-color);
   transform: translateY(70%) rotate(45deg);
 }
 .dnb-tooltip__arrow__position--bottom {

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

@@ -1 +1 @@
-.dnb-tooltip{align-items:center;display:flex;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;transition:opacity .2s var(--easing-default);visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--active{animation:show-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{animation:show-tooltip 1ms var(--easing-default) forwards}.dnb-tooltip--hide{animation:hide-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{bottom:0;content:"";height:1rem;left:0;position:absolute;transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{align-self:flex-start}.dnb-tooltip__arrow__arrow--right{align-self:flex-end}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}
+.dnb-tooltip{--tooltip-color:#fff;--tooltip-background-color:#000;--tooltip-border-color:1px solid #000;--tooltip-border-radius:1rem;align-items:center;background-color:var(--tooltip-background-color);border-radius:var(--tooltip-border-radius);box-shadow:var(--shadow-default);color:var(--tooltip-color);display:flex;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;transition:opacity .2s var(--easing-default);visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--active{animation:show-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{animation:show-tooltip 1ms var(--easing-default) forwards}.dnb-tooltip--hide{animation:hide-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{background-color:var(--tooltip-background-color);border:var(--tooltip-border-color);bottom:0;content:"";height:1rem;left:0;position:absolute;transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{align-self:flex-start}.dnb-tooltip__arrow__arrow--right{align-self:flex-end}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}

package/components/tooltip/style/dnb-tooltip.scss

@@ -6,6 +6,11 @@
 @import '../../../style/core/utilities.scss';
 
 .dnb-tooltip {
+  --tooltip-color: white;
+  --tooltip-background-color: black;
+  --tooltip-border-color: 1px solid black;
+  --tooltip-border-radius: 1rem;
+
   position: absolute;
   z-index: 3100; // over modal
 
@@ -15,6 +20,11 @@
   align-items: center;
 
   padding: 0 1rem;
+  color: var(--tooltip-color);
+
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  @include defaultDropShadow();
 
   &--large {
     padding: 0.25rem 1rem;
@@ -89,6 +99,10 @@
 
       width: 1rem;
       height: 1rem;
+      background-color: var(--tooltip-background-color);
+
+      border: var(--tooltip-border-color);
+
       transform: translateY(70%) rotate(45deg);
     }
 

package/components/tooltip/style/themes/dnb-tooltip-theme-sbanken.css

@@ -0,0 +1,9 @@
+/*
+* Tooltip theme for Sbanken
+*
+*/
+.dnb-tooltip {
+  --tooltip-color: var(--sb-color-white);
+  --tooltip-background-color: var(--sb-color-gray-dark-3);
+  --tooltip-border-color: 1px solid var(--sb-color-gray-dark-3);
+}

package/components/tooltip/style/themes/dnb-tooltip-theme-sbanken.min.css

@@ -0,0 +1 @@
+.dnb-tooltip{--tooltip-color:var(--sb-color-white);--tooltip-background-color:var(--sb-color-gray-dark-3);--tooltip-border-color:1px solid var(--sb-color-gray-dark-3)}

package/components/tooltip/style/themes/dnb-tooltip-theme-sbanken.scss

@@ -0,0 +1,10 @@
+/*
+* Tooltip theme for Sbanken
+*
+*/
+
+.dnb-tooltip {
+  --tooltip-color: var(--sb-color-white);
+  --tooltip-background-color: var(--sb-color-gray-dark-3);
+  --tooltip-border-color: 1px solid var(--sb-color-gray-dark-3);
+}

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

@@ -2,16 +2,8 @@
 * Tooltip theme
 *
 */
-/*
- * Utilities
- */
 .dnb-tooltip {
-  border-radius: 1rem;
-  color: var(--color-white);
-  background-color: var(--color-black-80);
-  box-shadow: var(--shadow-default);
-}
-.dnb-tooltip__arrow::before {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: var(--color-black-80);
+  --tooltip-color: var(--color-white);
+  --tooltip-background-color: var(--color-black-80);
+  --tooltip-border-color: 1px solid rgb(0 0 0 / 10%);
 }

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

@@ -1 +1 @@
-.dnb-tooltip{background-color:var(--color-black-80);border-radius:1rem;box-shadow:var(--shadow-default);color:var(--color-white)}.dnb-tooltip__arrow:before{background-color:var(--color-black-80);border:1px solid rgba(0,0,0,.1)}
+.dnb-tooltip{--tooltip-color:var(--color-white);--tooltip-background-color:var(--color-black-80);--tooltip-border-color:1px solid rgba(0,0,0,.1)}

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

@@ -3,20 +3,8 @@
 *
 */
 
-@import '../../../../style/core/utilities.scss';
-
 .dnb-tooltip {
-  border-radius: 1rem;
-
-  color: var(--color-white);
-  background-color: var(--color-black-80);
-
-  @include defaultDropShadow();
-
-  &__arrow {
-    &::before {
-      border: 1px solid rgb(0 0 0 / 10%);
-      background-color: var(--color-black-80);
-    }
-  }
+  --tooltip-color: var(--color-white);
+  --tooltip-background-color: var(--color-black-80);
+  --tooltip-border-color: 1px solid rgb(0 0 0 / 10%);
 }