@dnb/eufemia 9.19.0 → 9.20.0

package/components/avatar/AvatarGroup.tsx

@@ -8,14 +8,14 @@ import { AvatarSizes, AvatarVariants } from './Avatar'
 // Shared
 import Context from '../../shared/Context'
 import { ISpacingProps } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import { usePropsWithContext } from '../../shared/hooks'
 
 export interface AvatarGroupProps {
   /**
    * Label to describe the avatar group
    * Default: null
    */
-  label: string
+  label: React.ReactNode
 
   /**
    * Custom className on the component root
@@ -59,7 +59,7 @@ export const defaultProps = {
 
 export const AvatarGroupContext = React.createContext(null)
 
-function AvatarGroup(localProps: AvatarGroupProps & ISpacingProps) {
+const AvatarGroup = (localProps: AvatarGroupProps & ISpacingProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   // Extract additional props from global context
@@ -71,11 +71,7 @@ function AvatarGroup(localProps: AvatarGroupProps & ISpacingProps) {
     maxElements: maxElementsProp,
     variant,
     ...props
-  } = extendPropsWithContext(
-    { ...defaultProps, ...localProps },
-    defaultProps,
-    context?.AvatarGroup
-  )
+  } = usePropsWithContext(localProps, defaultProps, context?.AvatarGroup)
 
   const maxElements =
     maxElementsProp && maxElementsProp > 0 ? maxElementsProp : 4

package/components/avatar/style/_avatar.scss

@@ -112,6 +112,7 @@
 
       &:nth-of-type(2) {
         margin-left: 0;
+        border-left: none;
       }
     }
 
@@ -119,6 +120,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      flex-shrink: 0;
       color: var(--color-black-55);
 
       &--size-small {

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

@@ -185,7 +185,8 @@
       .dnb-avatar__group .dnb-avatar--size-x-large {
         margin-left: -1.5rem; }
       .dnb-avatar__group .dnb-avatar:nth-of-type(2) {
-        margin-left: 0; }
+        margin-left: 0;
+        border-left: none; }
     .dnb-avatar__group--elements-left {
       display: -webkit-inline-box;
       display: -ms-inline-flexbox;
@@ -196,6 +197,8 @@
       -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 {

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

@@ -1 +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){margin-left:0}.dnb-avatar__group--elements-left{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:#737373;color:var(--color-black-55);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;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)}
+.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/components/breadcrumb/Breadcrumb.js

@@ -1,21 +1,8 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "data", "href"];
 import "core-js/modules/es.array.map.js";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import React, { useEffect, useState } from 'react';
 import classnames from 'classnames';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
@@ -24,9 +11,9 @@ import Section from '../section/Section';
 import Button from '../button/Button';
 import { useMediaQuery } from '../../shared';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
 import BreadcrumbItem from './BreadcrumbItem';
-export * from './BreadcrumbItem';
+import { convertJsxToString } from '../../shared/component-helper';
 export var defaultProps = {
   className: null,
   skeleton: false,
@@ -45,28 +32,28 @@ export var defaultProps = {
   spacing: false
 };
 
-function Breadcrumb(localProps) {
+var Breadcrumb = function Breadcrumb(localProps) {
   var _context$translation;
 
   var context = React.useContext(Context);
 
-  var _extendPropsWithConte = 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 = 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 = createSkeletonClass('font', skeleton, context);
   var spacingClasses = createSpacingClasses(props);
@@ -108,7 +95,7 @@ function Breadcrumb(localProps) {
   };
 
   return React.createElement("nav", _extends({
-    "aria-label": navText,
+    "aria-label": convertJsxToString(navText),
     className: classnames('dnb-breadcrumb', skeletonClasses, spacingClasses, className, spacing && 'dnb-breadcrumb--spacing'),
     "data-testid": "breadcrumb-nav"
   }, props), React.createElement(Section, {
@@ -135,7 +122,7 @@ function Breadcrumb(localProps) {
     className: "dnb-breadcrumb__collapse",
     "data-testid": "breadcrumb-collapse"
   }, React.createElement(MultipleCrumbs, null)));
-}
+};
 
 Breadcrumb.Item = BreadcrumbItem;
 export { BreadcrumbItem };

package/components/breadcrumb/Breadcrumb.tsx

@@ -10,13 +10,13 @@ import Button from '../button/Button'
 // Shared
 import { useMediaQuery } from '../../shared'
 import Context from '../../shared/Context'
-import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import { ISpacingProps } from '../../shared/interfaces'
+import { SkeletonShow } from '../skeleton/Skeleton'
+import { usePropsWithContext } from '../../shared/hooks'
 
 // Internal
 import BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'
-
-export * from './BreadcrumbItem'
+import { convertJsxToString } from '../../shared/component-helper'
 
 export interface BreadcrumbProps {
   /**
@@ -29,7 +29,7 @@ export interface BreadcrumbProps {
    * Skeleton should be applied when loading content
    * Default: null
    */
-  skeleton?: SkeletonTypes
+  skeleton?: SkeletonShow
 
   /**
    * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.
@@ -89,7 +89,7 @@ export interface BreadcrumbProps {
    * If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.
    * Default: null
    */
-  isCollapsed?: boolean | string
+  isCollapsed?: boolean
 
   /**
    * Use one of the Section component style types (style_type)
@@ -128,7 +128,7 @@ export const defaultProps = {
   spacing: false,
 }
 
-function Breadcrumb(localProps: BreadcrumbProps & ISpacingProps) {
+const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   // Extract additional props from global context
@@ -149,8 +149,8 @@ function Breadcrumb(localProps: BreadcrumbProps & ISpacingProps) {
     data,
     href,
     ...props
-  } = extendPropsWithContext(
-    { ...defaultProps, ...localProps },
+  } = usePropsWithContext(
+    localProps,
     defaultProps,
     context?.translation?.Breadcrumb,
     context?.Breadcrumb
@@ -197,7 +197,7 @@ function Breadcrumb(localProps: BreadcrumbProps & ISpacingProps) {
 
   return (
     <nav
-      aria-label={navText}
+      aria-label={convertJsxToString(navText)}
       className={classnames(
         'dnb-breadcrumb',
         skeletonClasses,

package/components/breadcrumb/BreadcrumbItem.js

@@ -1,26 +1,13 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import React from 'react';
 import Button from '../button/Button';
 import IconPrimary from '../icon-primary/IconPrimary';
 import P from '../../elements/P';
 import homeIcon from '../../icons/home';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
 var defaultProps = {
   text: null,
   href: null,
@@ -29,18 +16,19 @@ var defaultProps = {
   variant: null,
   skeleton: null
 };
-export default function BreadcrumbItem(localProps) {
+
+var BreadcrumbItem = function BreadcrumbItem(localProps) {
   var context = React.useContext(Context);
   var homeText = context.translation.Breadcrumb.homeText;
 
-  var _extendPropsWithConte = 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 = 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' && homeIcon || 'chevron_left';
   var currentText = text || variant === 'home' && homeText || '';
@@ -54,7 +42,6 @@ export default function BreadcrumbItem(localProps) {
     href: href,
     icon: currentIcon,
     icon_position: "left",
-    icon_: currentIcon,
     on_click: onClick,
     text: currentText,
     skeleton: skeleton
@@ -67,4 +54,6 @@ export default function BreadcrumbItem(localProps) {
     left: "0",
     "data-testid": "breadcrumb-item-text"
   }, currentText)));
-}
+};
+
+export default BreadcrumbItem;

package/components/breadcrumb/BreadcrumbItem.tsx

@@ -12,8 +12,8 @@ import homeIcon from '../../icons/home'
 
 // Shared
 import Context from '../../shared/Context'
-import { SkeletonTypes } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import { SkeletonShow } from '../skeleton/Skeleton'
+import { usePropsWithContext } from '../../shared/hooks'
 
 export interface BreadcrumbItemProps {
   /**
@@ -50,7 +50,7 @@ export interface BreadcrumbItemProps {
    * Skeleton should be applied when loading content
    * Default: null
    */
-  skeleton?: SkeletonTypes
+  skeleton?: SkeletonShow
 }
 
 const defaultProps = {
@@ -62,7 +62,7 @@ const defaultProps = {
   skeleton: null,
 }
 
-export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
+const BreadcrumbItem = (localProps: BreadcrumbItemProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   const {
@@ -73,13 +73,9 @@ export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
 
   // Extract additional props from global context
   const { text, href, icon, onClick, variant, skeleton, ...props } =
-    extendPropsWithContext(
-      { ...defaultProps, ...localProps },
-      defaultProps,
-      context?.BreadcrumbItem
-    )
+    usePropsWithContext(localProps, defaultProps, context?.BreadcrumbItem)
 
-  const currentIcon =
+  const currentIcon: IconPrimaryIcon =
     icon || (variant === 'home' && homeIcon) || 'chevron_left'
   const currentText = text || (variant === 'home' && homeText) || ''
   const isInteractive = (href || onClick) && variant !== 'current'
@@ -96,7 +92,6 @@ export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
           href={href}
           icon={currentIcon}
           icon_position="left"
-          icon_={currentIcon} // what does this do?
           on_click={onClick}
           text={currentText}
           skeleton={skeleton}
@@ -116,3 +111,5 @@ export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
     </li>
   )
 }
+
+export default BreadcrumbItem

package/components/button/Button.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
+import { SkeletonShow } from '../skeleton/Skeleton';
+import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
 export type ButtonText = string | React.ReactNode;
 export type ButtonVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type ButtonSize = 'default' | 'small' | 'medium' | 'large';
-export type ButtonIcon =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
+export type ButtonIcon = IconPrimaryIcon;
 export type ButtonIconPosition = 'left' | 'right' | 'top';
 export type ButtonIconSize = string | number;
 export type ButtonTooltip =
@@ -26,7 +26,7 @@ export type ButtonTo = string | any | ((...args: any[]) => any);
 export type ButtonWrap = string | boolean;
 export type ButtonBounding = string | boolean;
 export type ButtonStretch = string | boolean;
-export type ButtonSkeleton = string | boolean;
+export type ButtonSkeleton = SkeletonShow;
 export type ButtonDisabled = string | boolean;
 export type ButtonChildren =
   | string
@@ -70,7 +70,11 @@ export type ButtonOnClick = string | ((...args: any[]) => any);
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
-export interface ButtonProps extends React.HTMLProps<HTMLElement> {
+export interface ButtonProps
+  extends Omit<
+    React.HTMLProps<HTMLElement>,
+    'disabled' | 'size' | 'title' | 'wrap'
+  > {
   /**
    * The content of the button can be a string or a React Element.
    */

package/components/icon-primary/IconPrimary.d.ts

@@ -53,7 +53,8 @@ export type IconPrimaryChildren =
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
-export interface IconPrimaryProps extends React.HTMLProps<HTMLElement> {
+export interface IconPrimaryProps
+  extends Omit<React.HTMLProps<HTMLElement>, 'size'> {
   /**
    * A React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
    */

package/components/info-card/InfoCard.js

@@ -26,7 +26,7 @@ import { lightbulb_medium as LightbulbIcon } from '../../icons';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
 export var defaultProps = {
   alt: null,
   centered: false,
@@ -44,28 +44,28 @@ export var defaultProps = {
   acceptButtonAttributes: null
 };
 
-function InfoCard(localProps) {
+var InfoCard = function InfoCard(localProps) {
   var _IconPrimary;
 
   var context = React.useContext(Context);
 
-  var _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps)),
-      alt = _extendPropsWithConte.alt,
-      centered = _extendPropsWithConte.centered,
-      title = _extendPropsWithConte.title,
-      skeleton = _extendPropsWithConte.skeleton,
-      className = _extendPropsWithConte.className,
-      icon = _extendPropsWithConte.icon,
-      src = _extendPropsWithConte.src,
-      imgProps = _extendPropsWithConte.imgProps,
-      text = _extendPropsWithConte.text,
-      onClose = _extendPropsWithConte.onClose,
-      onAccept = _extendPropsWithConte.onAccept,
-      closeButtonText = _extendPropsWithConte.closeButtonText,
-      acceptButtonText = _extendPropsWithConte.acceptButtonText,
-      closeButtonAttributes = _extendPropsWithConte.closeButtonAttributes,
-      acceptButtonAttributes = _extendPropsWithConte.acceptButtonAttributes,
-      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  var _usePropsWithContext = usePropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps)),
+      alt = _usePropsWithContext.alt,
+      centered = _usePropsWithContext.centered,
+      title = _usePropsWithContext.title,
+      skeleton = _usePropsWithContext.skeleton,
+      className = _usePropsWithContext.className,
+      icon = _usePropsWithContext.icon,
+      src = _usePropsWithContext.src,
+      imgProps = _usePropsWithContext.imgProps,
+      text = _usePropsWithContext.text,
+      onClose = _usePropsWithContext.onClose,
+      onAccept = _usePropsWithContext.onAccept,
+      closeButtonText = _usePropsWithContext.closeButtonText,
+      acceptButtonText = _usePropsWithContext.acceptButtonText,
+      closeButtonAttributes = _usePropsWithContext.closeButtonAttributes,
+      acceptButtonAttributes = _usePropsWithContext.acceptButtonAttributes,
+      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   var skeletonClasses = createSkeletonClass('shape', skeleton, context);
   var spacingClasses = createSpacingClasses(props);
@@ -98,14 +98,14 @@ function InfoCard(localProps) {
       className: 'dnb-info-card--buttons' + (centered ? " dnb-info-card--buttons-centered" : "")
     }, !acceptButtonIsHidden && React.createElement(Button, _extends({
       type: "button",
-      "data-testid": "into-card-accept-button",
+      "data-testid": "info-card-accept-button",
       variant: "secondary",
       right: !centered && 'small',
       on_click: onAccept,
       text: acceptButtonText
     }, acceptButtonAttributes)), !closeButtonIsHidden && React.createElement(Button, _extends({
       type: "button",
-      "data-testid": "into-card-close-button",
+      "data-testid": "info-card-close-button",
       variant: "tertiary",
       top: centered && 'small',
       on_click: onClose,
@@ -135,6 +135,6 @@ function InfoCard(localProps) {
       "data-testid": "info-card-icon"
     }));
   }
-}
+};
 
 export default InfoCard;

package/components/info-card/InfoCard.tsx

@@ -15,16 +15,17 @@ import { lightbulb_medium as LightbulbIcon } from '../../icons'
 // Shared
 import { createSpacingClasses } from '../space/SpacingHelper'
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+import { SkeletonShow } from '../skeleton/Skeleton'
 import Context from '../../shared/Context'
-import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import { ISpacingProps } from '../../shared/interfaces'
+import { usePropsWithContext } from '../../shared/hooks'
 
 export interface InfoCardProps {
   /**
    * Used in combination with `src` to provide an alt attribute for the `img` element.
    * Default: null
    */
-  alt?: string
+  alt?: React.ReactNode
   /**
    * Aligns the content to center, rather than left
    * Default: false
@@ -49,7 +50,7 @@ export interface InfoCardProps {
    * Skeleton should be applied when loading content
    * Default: null
    */
-  skeleton?: SkeletonTypes
+  skeleton?: SkeletonShow
   /**
    * Specifies the path to the image
    * Default: null
@@ -59,12 +60,12 @@ export interface InfoCardProps {
    * Image src, will replace the 'icon' with the image
    * Default: null
    */
-  text: string
+  text: React.ReactNode
   /**
    * Component title
    * Default: null
    */
-  title?: string
+  title?: React.ReactNode
   /**
    * Is called when the close button is clicked
    * Default: null
@@ -74,7 +75,7 @@ export interface InfoCardProps {
    * The text of the close button.
    * Default: null
    */
-  closeButtonText?: string
+  closeButtonText?: React.ReactNode
   /**
    * Is called when the accept button is clicked
    * Default: null
@@ -84,7 +85,7 @@ export interface InfoCardProps {
    * The text of the accept button.
    * Default: null
    */
-  acceptButtonText?: string
+  acceptButtonText?: React.ReactNode
   /**
    * Additional attributes for the close button.
    * Default: null
@@ -114,7 +115,7 @@ export const defaultProps = {
   acceptButtonAttributes: null,
 }
 
-function InfoCard(localProps: InfoCardProps & ISpacingProps) {
+const InfoCard = (localProps: InfoCardProps & ISpacingProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
   // Extract additional props from global context
@@ -135,7 +136,7 @@ function InfoCard(localProps: InfoCardProps & ISpacingProps) {
     closeButtonAttributes,
     acceptButtonAttributes,
     ...props
-  } = extendPropsWithContext({
+  } = usePropsWithContext({
     ...defaultProps,
     ...localProps,
   })
@@ -199,7 +200,7 @@ function InfoCard(localProps: InfoCardProps & ISpacingProps) {
         {!acceptButtonIsHidden && (
           <Button
             type="button"
-            data-testid="into-card-accept-button"
+            data-testid="info-card-accept-button"
             variant="secondary"
             right={!centered && 'small'}
             on_click={onAccept}
@@ -210,7 +211,7 @@ function InfoCard(localProps: InfoCardProps & ISpacingProps) {
         {!closeButtonIsHidden && (
           <Button
             type="button"
-            data-testid="into-card-close-button"
+            data-testid="info-card-close-button"
             variant="tertiary"
             top={centered && 'small'}
             on_click={onClose}

package/components/modal/Modal.tsx

@@ -25,7 +25,7 @@ import ModalHeader from './components/ModalHeader'
 import ModalHeaderBar from './components/ModalHeaderBar'
 import CloseButton from './components/CloseButton'
 import ModalRoot from './ModalRoot'
-import { ISpacingProps } from 'packages/dnb-eufemia/build/shared/interfaces'
+import { ISpacingProps } from '../../shared/interfaces'
 
 export const ANIMATION_DURATION = 300