@dnb/eufemia 10.7.0 → 10.9.0

package/es/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/es/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/es/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,41 +37,82 @@ 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 = ({
+  icon,
+  state,
+  iconAlt,
+  skeleton,
+  translations
+}) => {
+  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 = ({
-      subtitle
-    }) => 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 = ({
+  title
+}) => {
+  return React.createElement("span", {
+    className: "dnb-timeline__item__label__title"
+  }, title);
+};
+const TimelineItemContent = ({
+  subtitle,
+  infoMessage
+}) => {
+  var _TimelineItemSubtitle;
+  const renderSubtitles = () => {
     if (!subtitle) {
       return null;
     }
@@ -90,24 +122,23 @@ 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 = ({
+  subtitle
+}) => React.createElement("div", {
+  className: "dnb-timeline__item__content__subtitle"
+}, subtitle);
 export default TimelineItem;
 //# sourceMappingURL=TimelineItem.js.map

package/es/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","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","alt_label_completed","alt_label_current","alt_label_upcoming","icons","completed","current","upcoming","labels","currentIcon","currentAltLabel","_span","key","alt","size","_TimelineItemSubtitle","renderSubtitles","Array","isArray","map","i","TimelineItemSubtitle","text","stretch"],"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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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%);
 }

package/es/elements/blockquote/style/blockquote-mixins.scss

@@ -1,6 +1,17 @@
 @use '../../../style/elements/ui-spacing.scss';
 
 @mixin blockquoteStyle() {
+  --blockquote-padding-top: 2rem;
+  --blockquote-padding-left: 1.5rem;
+  --blockquote-padding-bottom: 3rem;
+
+  // quote
+  --blockquote-quote-size: 3rem;
+  --blockquote-quote-padding: 6rem;
+
+  // font
+  --blockquote-cite-style: italic;
+
   display: inline-block;
   width: auto;
 
@@ -19,10 +30,10 @@
   &::before {
     content: '';
     position: absolute;
-    top: 2rem;
-    left: 1.5rem;
-    width: 3em;
-    height: 3em;
+    top: var(--blockquote-padding-top);
+    left: var(--blockquote-padding-left);
+    width: var(--blockquote-quote-size);
+    height: var(--blockquote-quote-size);
 
     background-size: cover;
 
@@ -33,15 +44,15 @@
   // stylelint-disable-next-line
   &,
   &.dnb-blockquote--left {
-    padding-left: 6rem;
-    padding-top: 2rem;
-    padding-bottom: 3rem;
+    padding-left: var(--blockquote-quote-padding);
+    padding-top: var(--blockquote-padding-top);
+    padding-bottom: var(--blockquote-padding-bottom);
   }
 
   &.dnb-blockquote--top {
-    padding-left: 1.5rem;
-    padding-top: 6rem;
-    padding-bottom: 3rem;
+    padding-left: var(--blockquote-padding-left);
+    padding-top: var(--blockquote-quote-padding);
+    padding-bottom: var(--blockquote-padding-bottom);
   }
 
   &.dnb-blockquote--no-background {
@@ -59,7 +70,7 @@
 
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-basis);
-    font-style: italic; // to have / or avoid italic on cite
+    font-style: var(--blockquote-cite-style);
 
     &::before {
       content: '—';

package/es/elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss

@@ -1,9 +1,28 @@
+@use '../../../../style/core/utilities.scss';
+
 .dnb-blockquote {
-  color: var(--sb-color-text);
+  --blockquote-padding-top: 1.5rem;
+  --blockquote-quote-padding: 5.5rem;
+  --blockquote-cite-style: normal;
+
   background-color: var(--sb-color-violet-light-4);
 
   border-radius: 1.125rem;
 
+  @include utilities.allBelow('small') {
+    --blockquote-padding-bottom: 1.5rem;
+    --blockquote-quote-size: 2rem;
+    --blockquote-quote-padding: 4rem;
+
+    &.dnb-blockquote--top {
+      --blockquote-padding-top: 1rem;
+    }
+
+    &:not(.dnb-blockquote--top) {
+      --blockquote-padding-left: 1rem;
+    }
+  }
+
   &::before {
     filter: brightness(0) saturate(100%) invert(20%) sepia(99%)
       saturate(6711%) hue-rotate(265deg) brightness(71%) contrast(115%); // simulate the color #4e08bc - --sb-color-violet
@@ -16,14 +35,4 @@
         saturate(6079%) hue-rotate(204deg) brightness(78%) contrast(99%);
     }
   }
-
-  h1,
-  h2,
-  h3,
-  .dnb-h--xx-large,
-  .dnb-h--large,
-  .dnb-h--medium,
-  .dnb-lead {
-    color: var(--sb-color-text);
-  }
 }

package/es/elements/lib.d.ts

@@ -66,7 +66,7 @@ export declare const getElements: () => {
     } & import("react").HTMLAttributes<HTMLHeadingElement> & {
         as?: string;
         level?: "use";
-        size?: import("./H").HSize;
+        size?: "auto" | import("../components/Heading").HeadingSize;
     }) => import("react/jsx-runtime").JSX.Element;
     H1: ({ size, ...props }: import("./H").SharedHProps) => import("react/jsx-runtime").JSX.Element;
     H2: ({ size, ...props }: import("./H").SharedHProps) => import("react/jsx-runtime").JSX.Element;

package/es/elements/typography/H.d.ts

@@ -4,7 +4,8 @@
  */
 import React from 'react';
 import { SpacingProps } from '../../components/space/types';
-export type HSize = 'xx-large' | 'x-large' | 'large' | 'medium' | 'basis' | 'small' | 'x-small';
+import { HeadingSize } from '../../components/heading/Heading';
+export type HSize = HeadingSize;
 type HProps = SpacingProps & React.HTMLAttributes<HTMLHeadingElement> & {
     /**
      * Defines the Element Type, like "h1"
@@ -16,10 +17,11 @@ type HProps = SpacingProps & React.HTMLAttributes<HTMLHeadingElement> & {
      */
     level?: 'use';
     /**
-     * Sets the font size based on headingSize_#{HEADING_SIZE} mixins found in typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/
+     * Sets the font size based on headingSize_#{HEADING_SIZE} mixins found in typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/.
+     * Use value 'auto' to base size on heading level
      * Default: xx-large
      */
-    size?: HSize;
+    size?: HSize | 'auto';
 };
 export type SharedHProps = Omit<HProps, 'as'>;
 declare const H: ({ as, is, level, size, className, ...props }: HProps) => import("react/jsx-runtime").JSX.Element;