@dnb/eufemia 9.17.2 → 9.21.0

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

@@ -0,0 +1,221 @@
+/*
+* DNB Avatar
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-avatar {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-avatar *,
+  .dnb-avatar ::before,
+  .dnb-avatar ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-avatar ::before,
+  .dnb-avatar ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Avatar component
+*
+*/
+:root {
+  --avatar-font-size--small: var(--font-size-x-small);
+  --avatar-font-size--medium: var(--font-size-basis);
+  --avatar-font-size--large: var(--font-size-x-large);
+  --avatar-font-size--x-large: var(--font-size-x-large);
+  --avatar-line-height--small: var(--line-height-x-small);
+  --avatar-line-height--medium: var(--line-height-basis);
+  --avatar-line-height--large: var(--line-height-large);
+  --avatar-line-height--x-large: var(--line-height-large);
+  --avatar-width--small: 1.5rem;
+  --avatar-height--small: 1.5rem;
+  --avatar-width--medium: 2rem;
+  --avatar-height--medium: 2rem;
+  --avatar-width--large: 4rem;
+  --avatar-height--large: 4rem;
+  --avatar-width--x-large: 5rem;
+  --avatar-height--x-large: 5rem; }
+
+.dnb-avatar {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  line-height: 1;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  border-radius: 50%;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }
+  .dnb-avatar,
+  .dnb-core-style .dnb-avatar {
+    line-height: 2.5rem;
+    line-height: var(--button-height); }
+  .dnb-avatar--size-small {
+    width: 1.5rem;
+    width: var(--avatar-width--small);
+    height: 1.5rem;
+    height: var(--avatar-height--small);
+    font-size: 0.875rem;
+    font-size: var(--avatar-font-size--small); }
+    .dnb-avatar--size-small,
+    .dnb-core-style .dnb-avatar--size-small {
+      line-height: 1.125rem;
+      line-height: var(--avatar-line-height--small); }
+  .dnb-avatar--size-medium {
+    width: 2rem;
+    width: var(--avatar-width--medium);
+    height: 2rem;
+    height: var(--avatar-height--medium);
+    font-size: 1.125rem;
+    font-size: var(--avatar-font-size--medium); }
+    .dnb-avatar--size-medium,
+    .dnb-core-style .dnb-avatar--size-medium {
+      line-height: 1.5rem;
+      line-height: var(--avatar-line-height--medium); }
+  .dnb-avatar--size-large {
+    width: 4rem;
+    width: var(--avatar-width--large);
+    height: 4rem;
+    height: var(--avatar-height--large);
+    font-size: 2.125rem;
+    font-size: var(--avatar-font-size--large); }
+    .dnb-avatar--size-large,
+    .dnb-core-style .dnb-avatar--size-large {
+      line-height: 2.5rem;
+      line-height: var(--avatar-line-height--large); }
+  .dnb-avatar--size-x-large {
+    width: 5rem;
+    width: var(--avatar-width--x-large);
+    height: 5rem;
+    height: var(--avatar-height--x-large);
+    font-size: 2.125rem;
+    font-size: var(--avatar-font-size--x-large); }
+    .dnb-avatar--size-x-large,
+    .dnb-core-style .dnb-avatar--size-x-large {
+      line-height: 2.5rem;
+      line-height: var(--avatar-line-height--x-large); }
+  .dnb-avatar__group {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-pack: flex;
+        -ms-flex-pack: flex;
+            justify-content: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row; }
+    .dnb-avatar__group .dnb-avatar {
+      -webkit-box-sizing: content-box;
+              box-sizing: content-box;
+      border: 0.125rem solid #f8f8f8;
+      border: 0.125rem solid var(--color-black-3); }
+      .dnb-avatar__group .dnb-avatar--size-small {
+        margin-left: -0.5rem; }
+      .dnb-avatar__group .dnb-avatar--size-medium {
+        margin-left: -0.75rem; }
+      .dnb-avatar__group .dnb-avatar--size-large {
+        margin-left: -1rem; }
+      .dnb-avatar__group .dnb-avatar--size-x-large {
+        margin-left: -1.5rem; }
+      .dnb-avatar__group .dnb-avatar:nth-of-type(2) {
+        margin-left: 0;
+        border-left: none; }
+    .dnb-avatar__group--elements-left {
+      display: -webkit-inline-box;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+      color: #737373;
+      color: var(--color-black-55); }
+      .dnb-avatar__group--elements-left--size-small {
+        font-size: 0.875rem;
+        font-size: var(--font-size-x-small);
+        margin-left: 0.125rem; }
+      .dnb-avatar__group--elements-left--size-medium {
+        font-size: 1rem;
+        font-size: var(--font-size-small);
+        margin-left: 0.125rem; }
+      .dnb-avatar__group--elements-left--size-large {
+        font-size: 1.625rem;
+        font-size: var(--font-size-large);
+        margin-left: 0.25rem;
+        margin-left: var(--spacing-xx-small); }
+      .dnb-avatar__group--elements-left--size-x-large {
+        font-size: 1.625rem;
+        font-size: var(--font-size-large);
+        margin-left: 0.25rem;
+        margin-left: var(--spacing-xx-small); }

package/cjs/components/avatar/style/dnb-avatar.min.css

@@ -0,0 +1 @@
+.dnb-avatar{-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-avatar *,.dnb-avatar :after,.dnb-avatar :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-avatar :after,.dnb-avatar :before{text-decoration:inherit;vertical-align:inherit}:root{--avatar-font-size--small:var(--font-size-x-small);--avatar-font-size--medium:var(--font-size-basis);--avatar-font-size--large:var(--font-size-x-large);--avatar-font-size--x-large:var(--font-size-x-large);--avatar-line-height--small:var(--line-height-x-small);--avatar-line-height--medium:var(--line-height-basis);--avatar-line-height--large:var(--line-height-large);--avatar-line-height--x-large:var(--line-height-large);--avatar-width--small:1.5rem;--avatar-height--small:1.5rem;--avatar-width--medium:2rem;--avatar-height--medium:2rem;--avatar-width--large:4rem;--avatar-height--large:4rem;--avatar-width--x-large:5rem;--avatar-height--x-large:5rem}.dnb-avatar{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-negative:0;align-items:center;border-radius:50%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;flex-shrink:0;font-weight:500;font-weight:var(--font-weight-medium);justify-content:center;line-height:1;overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-avatar,.dnb-core-style .dnb-avatar{line-height:2.5rem;line-height:var(--button-height)}.dnb-avatar--size-small{font-size:.875rem;font-size:var(--avatar-font-size--small);height:1.5rem;height:var(--avatar-height--small);width:1.5rem;width:var(--avatar-width--small)}.dnb-avatar--size-small,.dnb-core-style .dnb-avatar--size-small{line-height:1.125rem;line-height:var(--avatar-line-height--small)}.dnb-avatar--size-medium{font-size:1.125rem;font-size:var(--avatar-font-size--medium);height:2rem;height:var(--avatar-height--medium);width:2rem;width:var(--avatar-width--medium)}.dnb-avatar--size-medium,.dnb-core-style .dnb-avatar--size-medium{line-height:1.5rem;line-height:var(--avatar-line-height--medium)}.dnb-avatar--size-large{font-size:2.125rem;font-size:var(--avatar-font-size--large);height:4rem;height:var(--avatar-height--large);width:4rem;width:var(--avatar-width--large)}.dnb-avatar--size-large,.dnb-core-style .dnb-avatar--size-large{line-height:2.5rem;line-height:var(--avatar-line-height--large)}.dnb-avatar--size-x-large{font-size:2.125rem;font-size:var(--avatar-font-size--x-large);height:5rem;height:var(--avatar-height--x-large);width:5rem;width:var(--avatar-width--x-large)}.dnb-avatar--size-x-large,.dnb-core-style .dnb-avatar--size-x-large{line-height:2.5rem;line-height:var(--avatar-line-height--x-large)}.dnb-avatar__group{-webkit-box-pack:flex;-ms-flex-pack:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;justify-content:flex}.dnb-avatar__group .dnb-avatar{border:.125rem solid #f8f8f8;border:.125rem solid var(--color-black-3);-webkit-box-sizing:content-box;box-sizing:content-box}.dnb-avatar__group .dnb-avatar--size-small{margin-left:-.5rem}.dnb-avatar__group .dnb-avatar--size-medium{margin-left:-.75rem}.dnb-avatar__group .dnb-avatar--size-large{margin-left:-1rem}.dnb-avatar__group .dnb-avatar--size-x-large{margin-left:-1.5rem}.dnb-avatar__group .dnb-avatar:nth-of-type(2){border-left:none;margin-left:0}.dnb-avatar__group--elements-left{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-negative:0;align-items:center;color:#737373;color:var(--color-black-55);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;flex-shrink:0;justify-content:center}.dnb-avatar__group--elements-left--size-small{font-size:.875rem;font-size:var(--font-size-x-small);margin-left:.125rem}.dnb-avatar__group--elements-left--size-medium{font-size:1rem;font-size:var(--font-size-small);margin-left:.125rem}.dnb-avatar__group--elements-left--size-large,.dnb-avatar__group--elements-left--size-x-large{font-size:1.625rem;font-size:var(--font-size-large);margin-left:.25rem;margin-left:var(--spacing-xx-small)}

package/cjs/components/avatar/style/dnb-avatar.scss

@@ -0,0 +1,12 @@
+/*
+* DNB Avatar
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+.dnb-avatar {
+  @include componentReset();
+}
+
+@import './_avatar.scss';

package/cjs/components/avatar/style/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-avatar.scss'

package/cjs/components/avatar/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./dnb-avatar.min.css");

package/cjs/components/avatar/style/themes/dnb-avatar-theme-ui.css

@@ -0,0 +1,36 @@
+/*
+* Avatar theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-avatar {
+  color: #f2f4ec;
+  color: var(--color-pistachio); }
+  .dnb-avatar svg {
+    color: #f2f4ec;
+    color: var(--color-pistachio);
+    fill: #f2f4ec;
+    fill: var(--color-pistachio); }
+  .dnb-avatar--primary {
+    background-color: #14555a;
+    background-color: var(--color-emerald-green); }
+  .dnb-avatar--secondary {
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+  .dnb-avatar--tertiary {
+    background-color: #a5e1d2;
+    background-color: var(--color-mint-green);
+    color: #14555a;
+    color: var(--color-emerald-green); }
+    .dnb-avatar--tertiary svg {
+      color: #14555a;
+      color: var(--color-emerald-green);
+      fill: #14555a;
+      fill: var(--color-emerald-green); }

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

@@ -0,0 +1 @@
+.dnb-avatar,.dnb-avatar svg{color:#f2f4ec;color:var(--color-pistachio)}.dnb-avatar svg{fill:#f2f4ec;fill:var(--color-pistachio)}.dnb-avatar--primary{background-color:#14555a;background-color:var(--color-emerald-green)}.dnb-avatar--secondary{background-color:#007272;background-color:var(--color-sea-green)}.dnb-avatar--tertiary{background-color:#a5e1d2;background-color:var(--color-mint-green);color:#14555a;color:var(--color-emerald-green)}.dnb-avatar--tertiary svg{fill:#14555a;fill:var(--color-emerald-green);color:#14555a;color:var(--color-emerald-green)}

package/cjs/components/avatar/style/themes/dnb-avatar-theme-ui.scss

@@ -0,0 +1,29 @@
+/*
+* Avatar theme
+*
+*/
+
+@import '../../../../style/themes/imports.scss';
+
+.dnb-avatar {
+  color: var(--color-pistachio);
+
+  svg {
+    color: var(--color-pistachio);
+    fill: var(--color-pistachio);
+  }
+  &--primary {
+    background-color: var(--color-emerald-green);
+  }
+  &--secondary {
+    background-color: var(--color-sea-green);
+  }
+  &--tertiary {
+    background-color: var(--color-mint-green);
+    color: var(--color-emerald-green);
+    svg {
+      color: var(--color-emerald-green);
+      fill: var(--color-emerald-green);
+    }
+  }
+}

package/cjs/components/avatar/style/themes/ui.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./dnb-avatar-theme-ui.min.css");

package/cjs/components/avatar/style.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./style/dnb-avatar.min.css");

package/cjs/components/breadcrumb/Breadcrumb.js

@@ -8,18 +8,10 @@ require("core-js/modules/es.array.index-of.js");
 
 require("core-js/modules/es.symbol.js");
 
-require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.symbol.description.js");
 
 require("core-js/modules/es.object.to-string.js");
 
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-require("core-js/modules/web.dom-collections.for-each.js");
-
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-
-require("core-js/modules/es.symbol.description.js");
-
 require("core-js/modules/es.symbol.iterator.js");
 
 require("core-js/modules/es.array.iterator.js");
@@ -40,13 +32,11 @@ require("core-js/modules/es.object.assign.js");
 
 require("core-js/modules/es.weak-map.js");
 
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  defaultProps: true,
-  BreadcrumbItem: true
-};
 Object.defineProperty(exports, "BreadcrumbItem", {
   enumerable: true,
   get: function get() {
@@ -73,21 +63,12 @@ var _shared = require("../../shared");
 
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 
-var _componentHelper = require("../../shared/component-helper");
+var _hooks = require("../../shared/hooks");
 
-var _BreadcrumbItem = _interopRequireWildcard(require("./BreadcrumbItem"));
+var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem"));
+
+var _componentHelper = require("../../shared/component-helper");
 
-Object.keys(_BreadcrumbItem).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _BreadcrumbItem[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _BreadcrumbItem[key];
-    }
-  });
-});
 var _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "data", "href"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -110,12 +91,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -139,28 +114,28 @@ var defaultProps = {
 };
 exports.defaultProps = defaultProps;
 
-function Breadcrumb(localProps) {
+var Breadcrumb = function Breadcrumb(localProps) {
   var _context$translation;
 
   var context = _react.default.useContext(_Context.default);
 
-  var _extendPropsWithConte = (0, _componentHelper.extendPropsWithContext)(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb),
-      className = _extendPropsWithConte.className,
-      skeleton = _extendPropsWithConte.skeleton,
-      childrenItems = _extendPropsWithConte.children,
-      variant = _extendPropsWithConte.variant,
-      onClick = _extendPropsWithConte.onClick,
-      navText = _extendPropsWithConte.navText,
-      goBackText = _extendPropsWithConte.goBackText,
-      homeText = _extendPropsWithConte.homeText,
-      backToText = _extendPropsWithConte.backToText,
-      styleType = _extendPropsWithConte.styleType,
-      collapsedStyleType = _extendPropsWithConte.collapsedStyleType,
-      overrideIsCollapsed = _extendPropsWithConte.isCollapsed,
-      spacing = _extendPropsWithConte.spacing,
-      data = _extendPropsWithConte.data,
-      href = _extendPropsWithConte.href,
-      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  var _usePropsWithContext = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb),
+      className = _usePropsWithContext.className,
+      skeleton = _usePropsWithContext.skeleton,
+      childrenItems = _usePropsWithContext.children,
+      variant = _usePropsWithContext.variant,
+      onClick = _usePropsWithContext.onClick,
+      navText = _usePropsWithContext.navText,
+      goBackText = _usePropsWithContext.goBackText,
+      homeText = _usePropsWithContext.homeText,
+      backToText = _usePropsWithContext.backToText,
+      styleType = _usePropsWithContext.styleType,
+      collapsedStyleType = _usePropsWithContext.collapsedStyleType,
+      overrideIsCollapsed = _usePropsWithContext.isCollapsed,
+      spacing = _usePropsWithContext.spacing,
+      data = _usePropsWithContext.data,
+      href = _usePropsWithContext.href,
+      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   var skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context);
   var spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
@@ -202,7 +177,7 @@ function Breadcrumb(localProps) {
   };
 
   return _react.default.createElement("nav", _extends({
-    "aria-label": navText,
+    "aria-label": (0, _componentHelper.convertJsxToString)(navText),
     className: (0, _classnames.default)('dnb-breadcrumb', skeletonClasses, spacingClasses, className, spacing && 'dnb-breadcrumb--spacing'),
     "data-testid": "breadcrumb-nav"
   }, props), _react.default.createElement(_Section.default, {
@@ -229,7 +204,7 @@ function Breadcrumb(localProps) {
     className: "dnb-breadcrumb__collapse",
     "data-testid": "breadcrumb-collapse"
   }, _react.default.createElement(MultipleCrumbs, null)));
-}
+};
 
 Breadcrumb.Item = _BreadcrumbItem.default;
 var _default = Breadcrumb;

package/cjs/components/breadcrumb/BreadcrumbItem.js

@@ -6,22 +6,12 @@ require("core-js/modules/es.array.index-of.js");
 
 require("core-js/modules/es.symbol.js");
 
-require("core-js/modules/es.array.filter.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-require("core-js/modules/web.dom-collections.for-each.js");
-
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-
 require("core-js/modules/es.object.assign.js");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = BreadcrumbItem;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -35,7 +25,7 @@ var _home = _interopRequireDefault(require("../../icons/home"));
 
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 
-var _componentHelper = require("../../shared/component-helper");
+var _hooks = require("../../shared/hooks");
 
 var _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton"];
 
@@ -43,12 +33,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -62,19 +46,19 @@ var defaultProps = {
   skeleton: null
 };
 
-function BreadcrumbItem(localProps) {
+var BreadcrumbItem = function BreadcrumbItem(localProps) {
   var context = _react.default.useContext(_Context.default);
 
   var homeText = context.translation.Breadcrumb.homeText;
 
-  var _extendPropsWithConte = (0, _componentHelper.extendPropsWithContext)(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem),
-      text = _extendPropsWithConte.text,
-      href = _extendPropsWithConte.href,
-      icon = _extendPropsWithConte.icon,
-      onClick = _extendPropsWithConte.onClick,
-      variant = _extendPropsWithConte.variant,
-      skeleton = _extendPropsWithConte.skeleton,
-      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  var _usePropsWithContext = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem),
+      text = _usePropsWithContext.text,
+      href = _usePropsWithContext.href,
+      icon = _usePropsWithContext.icon,
+      onClick = _usePropsWithContext.onClick,
+      variant = _usePropsWithContext.variant,
+      skeleton = _usePropsWithContext.skeleton,
+      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   var currentIcon = icon || variant === 'home' && _home.default || 'chevron_left';
   var currentText = text || variant === 'home' && homeText || '';
@@ -82,23 +66,25 @@ function BreadcrumbItem(localProps) {
   return _react.default.createElement("li", {
     className: "dnb-breadcrumb__item",
     "data-testid": "breadcrumb-item",
-    "aria-current": variant === 'current' ? true : undefined
+    "aria-current": variant === 'current' ? 'page' : undefined
   }, isInteractive ? _react.default.createElement(_Button.default, _extends({
     variant: "tertiary",
     href: href,
     icon: currentIcon,
     icon_position: "left",
-    icon_: currentIcon,
     on_click: onClick,
     text: currentText,
     skeleton: skeleton
-  }, props)) : _react.default.createElement("span", {
+  }, props)) : _react.default.createElement("span", _extends({
     className: "dnb-breadcrumb__item__span"
-  }, _react.default.createElement(_IconPrimary.default, {
+  }, props), _react.default.createElement(_IconPrimary.default, {
     icon: currentIcon,
     className: "dnb-breadcrumb__item__span__icon"
   }), _react.default.createElement(_P.default, {
     left: "0",
     "data-testid": "breadcrumb-item-text"
   }, currentText)));
-}
+};
+
+var _default = BreadcrumbItem;
+exports.default = _default;