@dnb/eufemia 9.17.2 → 9.21.0

package/components/toggle-button/ToggleButton.d.ts

@@ -64,12 +64,12 @@ export type ToggleButtonChildren = string | ((...args: any[]) => any);
  */
 export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   /**
-   * The text show in the ToggleButton.
+   * <em>(required)</em> the text shown in the ToggleButton.
    */
   text?: string;
 
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: ToggleButtonLabel;
   label_direction?: ToggleButtonLabelDirection;
@@ -81,7 +81,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   title?: string;
 
   /**
-   * Determine whether the ToggleButton is checked or not. Default will be `false`.
+   * Determine whether the ToggleButton is checked or not. The default will be `false`.
    */
   checked?: ToggleButtonChecked;
   variant?: ToggleButtonVariant;
@@ -100,7 +100,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   status?: ToggleButtonStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -121,7 +121,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   suffix?: ToggleButtonSuffix;
 
   /**
-   * Defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "ToggleButtonGroup".
+   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "ToggleButtonGroup".
    */
   value?: ToggleButtonValue;
 
@@ -131,7 +131,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   icon?: ToggleButtonIcon;
 
   /**
-   * Position of icon inside the toggle button. Set to `left` or `right`. Defaults to `right` if not set.
+   * Position of the icon inside the toggle button. Set to `left` or `right`. Defaults to `right` if not set.
    */
   icon_position?: ToggleButtonIconPosition;
 
@@ -173,7 +173,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an boolean and string `{ checked, value, event }`.
+   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
    */
   on_change?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

package/components/toggle-button/ToggleButtonGroup.d.ts

@@ -65,7 +65,7 @@ export type ToggleButtonGroupChildren =
 export interface ToggleButtonGroupProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: ToggleButtonGroupLabel;
   label_direction?: ToggleButtonGroupLabelDirection;
@@ -94,7 +94,7 @@ export interface ToggleButtonGroupProps
   status?: ToggleButtonGroupStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -117,7 +117,7 @@ export interface ToggleButtonGroupProps
   layout_direction?: ToggleButtonGroupLayoutDirection;
 
   /**
-   * Defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "ToggleButtonGroup".
+   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "ToggleButtonGroup".
    */
   value?: ToggleButtonGroupValue;
 
@@ -158,7 +158,7 @@ export interface ToggleButtonGroupProps
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an boolean and string `{ checked, value, event }`.
+   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
    */
   on_change?: (...args: any[]) => any;
 }

package/components/tooltip/Tooltip.d.ts

@@ -57,7 +57,7 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * If the tooltip should animate from one target to the next, define an unique ID.
+   * If the tooltip should animate from one target to the next, define a unique ID.
    */
   group?: string;
 
@@ -72,7 +72,7 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   active?: TooltipActive;
 
   /**
-   * Defines the offset position in corporation to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
+   * Defines the offset position to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
    */
   position?: TooltipPosition;
 
@@ -82,13 +82,13 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   arrow?: TooltipArrow;
 
   /**
-   * Defines the offset alignment in corporation to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
+   * Defines the offset alignment to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
    */
   align?: TooltipAlign;
   animate_position?: TooltipAnimatePosition;
 
   /**
-   * If set to `true`, the Tooltip will be fixed in it&#39;s scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   * If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. Defaults to `false`.
    */
   fixed_position?: TooltipFixedPosition;
 
@@ -98,7 +98,7 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   no_animation?: TooltipNoAnimation;
 
   /**
-   * Define the delay until the tooltip should show up after initial hover / active state.
+   * Define the delay until the tooltip should show up after the initial hover / active state.
    */
   show_delay?: TooltipShowDelay;
 

package/components/tooltip/TooltipContainer.d.ts

@@ -28,7 +28,7 @@ export interface TooltipContainerProps
   active?: TooltipContainerActive;
 
   /**
-   * Defines the offset position in corporation to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
+   * Defines the offset position to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
    */
   position?: string;
 
@@ -38,13 +38,13 @@ export interface TooltipContainerProps
   arrow?: string;
 
   /**
-   * Defines the offset alignment in corporation to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
+   * Defines the offset alignment to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
    */
   align?: string;
   animate_position?: TooltipContainerAnimatePosition;
 
   /**
-   * If set to `true`, the Tooltip will be fixed in it's scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   * If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. Defaults to `false`.
    */
   fixed_position?: TooltipContainerFixedPosition;
 

package/components/tooltip/TooltipPortal.d.ts

@@ -15,7 +15,7 @@ export interface TooltipPortalProps extends React.HTMLProps<HTMLElement> {
   active?: boolean;
 
   /**
-   * If the tooltip should animate from one target to the next, define an unique ID.
+   * If the tooltip should animate from one target to the next, define a unique ID.
    */
   group?: string;
 

package/components/tooltip/TooltipWithEvents.d.ts

@@ -18,7 +18,7 @@ export interface TooltipWithEventsProps
   internal_id?: string;
 
   /**
-   * Define the delay until the tooltip should show up after initial hover / active state.
+   * Define the delay until the tooltip should show up after the initial hover / active state.
    */
   show_delay?: TooltipWithEventsShowDelay;
   target?: TooltipWithEventsTarget;

package/elements/Img.d.ts

@@ -14,7 +14,7 @@ export type ImgRight = string | number | boolean;
 export type ImgBottom = string | number | boolean;
 export type ImgLeft = string | number | boolean;
 export type ImgSkeleton = string | boolean;
-export type ImgClassName = string | Object | any[];
+export type ImgClassName = string | any | any[];
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".

package/elements/P.d.ts

@@ -25,7 +25,8 @@ export type PSize =
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
-export interface PProps extends React.HTMLProps<HTMLElement> {
+export interface PProps
+  extends Omit<React.HTMLProps<HTMLElement>, 'size'> {
   space?: PSpace;
   top?: PTop;
   right?: PRight;

package/es/components/Avatar.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index avatar to autogenerate all the components and extensions
+ * Used by "prepareAvatars"
+ */
+
+import Avatar from './avatar/Avatar'
+export * from './avatar/Avatar'
+export default Avatar

package/es/components/Avatar.js

@@ -0,0 +1,3 @@
+import Avatar from './avatar/Avatar';
+export * from './avatar/Avatar';
+export default Avatar;

package/es/components/InfoCard.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index info-card to autogenerate all the components and extensions
+ * Used by "prepareInfoCards"
+ */
+
+import InfoCard from './info-card/InfoCard'
+export * from './info-card/InfoCard'
+export default InfoCard

package/es/components/InfoCard.js

@@ -0,0 +1,3 @@
+import InfoCard from './info-card/InfoCard';
+export * from './info-card/InfoCard';
+export default InfoCard;

package/es/components/Tag.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index tag to autogenerate all the components and extensions
+ * Used by "prepareTags"
+ */
+
+import Tag from './tag/Tag'
+export * from './tag/Tag'
+export default Tag

package/es/components/Tag.js

@@ -0,0 +1,3 @@
+import Tag from './tag/Tag';
+export * from './tag/Tag';
+export default Tag;

package/es/components/Timeline.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index timeline to autogenerate all the components and extensions
+ * Used by "prepareTimelines"
+ */
+
+import Timeline from './timeline/Timeline'
+export * from './timeline/Timeline'
+export default Timeline

package/es/components/Timeline.js

@@ -0,0 +1,3 @@
+import Timeline from './timeline/Timeline';
+export * from './timeline/Timeline';
+export default Timeline;

package/es/components/accordion/Accordion.d.ts

@@ -59,7 +59,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   title?: React.ReactNode;
 
   /**
-   * If set to `true` the accordion will be expanded as it&#39;s initial state.
+   * If set to `true` the accordion will be expanded as its initial state.
    */
   expanded?: AccordionExpanded;
 
@@ -69,7 +69,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   no_animation?: AccordionNoAnimation;
 
   /**
-   * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But thats mainly an technical aspect to consider.
+   * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that&#39;s mainly a technical aspect to consider.
    */
   expanded_ssr?: AccordionExpandedSsr;
 
@@ -79,7 +79,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   prerender?: AccordionPrerender;
 
   /**
-   * If set to `true` the accordion component will not re-render it&#39;s content – can be useful for widgets you don&#39;t have control of storing the temporary state during interaction.
+   * If set to `true` the accordion component will not re-render its content – can be useful for widgets you don&#39;t have control of storing the temporary state during an interaction.
    */
   prevent_rerender?: AccordionPreventRerender;
 
@@ -89,7 +89,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   prevent_rerender_conditional?: AccordionPreventRerenderConditional;
 
   /**
-   * If set to `true`, it will remember a changed state initiated by the user. It requires an unique `id`. It will store the sate in the local storage.
+   * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
    */
   remember_state?: AccordionRememberState;
 
@@ -125,7 +125,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   skeleton?: AccordionSkeleton;
 
   /**
-   * An unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
+   * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
    */
   id?: string;
   group?: string;
@@ -214,13 +214,13 @@ export type GroupRememberState = string | boolean;
  */
 export interface GroupProps {
   /**
-   * An unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
+   * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
    */
   id?: string;
   group?: string;
 
   /**
-   * If set to `true`, it will remember a changed state initiated by the user. It requires an unique `id`. It will store the sate in the local storage.
+   * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
    */
   remember_state?: GroupRememberState;
 }

package/es/components/autocomplete/Autocomplete.d.ts

@@ -224,12 +224,12 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   mode?: AutocompleteMode;
 
   /**
-   * Give a title to let the user know what they has to do. Defaults to `Skriv og få alternativer&#39;` .
+   * Give a title to let the user know what theyhaves to do. Defaults to `Skriv og få alternativer&#39;` .
    */
   title?: AutocompleteTitle;
 
   /**
-   * Use this to define the pre filled placeholder text in the input. Defaults to `title="Skriv og velg"`.
+   * Use this to define the pre-filled placeholder text in the input. Defaults to `title="Skriv og velg"`.
    */
   placeholder?: AutocompletePlaceholder;
 
@@ -254,7 +254,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   indicator_label?: AutocompleteIndicatorLabel;
 
   /**
-   * Only for screen readers. Title of the button in order to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.
+   * Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.
    */
   show_options_sr?: string;
 
@@ -284,7 +284,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   icon_size?: string;
 
   /**
-   * Position of icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.
+   * Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.
    */
   icon_position?: AutocompleteIconPosition;
 
@@ -314,7 +314,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   label_sr_only?: AutocompleteLabelSrOnly;
 
   /**
-   * Use `true` to not remove the typed value on input blur, if it is invalid. By default the typed value will disappear / replaced by a selected value from the data list during the input field blur.
+   * Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur.
    */
   keep_value?: AutocompleteKeepValue;
 
@@ -324,7 +324,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   keep_value_and_selection?: AutocompleteKeepValueAndSelection;
 
   /**
-   * If set to `true`, a clear button is showed inside the input field. Defaults to `false`.
+   * If set to `true`, a clear button is shown inside the input field. Defaults to `false`.
    */
   show_clear_button?: AutocompleteShowClearButton;
 
@@ -334,7 +334,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   status?: AutocompleteStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -375,7 +375,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   focusable?: AutocompleteFocusable;
 
   /**
-   * If set to `true`, word highlighting will disabled, but the options will still get filtered. Defaults to `false`.
+   * If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`.
    */
   disable_highlighting?: AutocompleteDisableHighlighting;
 
@@ -410,7 +410,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   show_submit_button?: AutocompleteShowSubmitButton;
 
   /**
-   * Replace the drop down / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.
+   * Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.
    */
   submit_element?: React.ReactNode;
 
@@ -440,7 +440,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   input_element?: AutocompleteInputElement;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If You don&#39;t have to define a `value`, You can also send in a `function` which will be called once the user opens the DrawerList.
+   * <em>(required)</em> the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   data?: AutocompleteData;
 
@@ -455,7 +455,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   search_numbers?: AutocompleteSearchNumbers;
 
   /**
-   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice . Defaults to `null`.
+   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice. Defaults to `null`.
    */
   default_value?: AutocompleteDefaultValue;
 
@@ -470,7 +470,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   input_value?: string;
 
   /**
-   * Use `true` to auto open the list once the users is entering the input field with the keyboard.
+   * Use `true` to auto open the list once the user is entering the input field with the keyboard.
    */
   open_on_focus?: AutocompleteOpenOnFocus;
 
@@ -513,7 +513,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If You don&#39;t have to define a `value`, You can also send in a `function` which will be called once the user opens the DrawerList.
+   * <em>(required)</em> the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   children?: AutocompleteChildren;
   custom_element?: Object;

package/es/components/avatar/Avatar.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["alt", "className", "children", "size", "skeleton", "variant", "src", "imgProps"];
+
+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 classnames from 'classnames';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import { createSkeletonClass } from '../skeleton/SkeletonHelper';
+import Img from '../../elements/Img';
+import Context from '../../shared/Context';
+import { warn } from '../../shared/component-helper';
+import { usePropsWithContext } from '../../shared/hooks';
+import AvatarGroup, { AvatarGroupContext } from './AvatarGroup';
+export const defaultProps = {
+  alt: null,
+  className: null,
+  size: 'medium',
+  src: null,
+  imgProps: null,
+  variant: 'primary',
+  skeleton: false,
+  children: null
+};
+
+const Avatar = localProps => {
+  const context = React.useContext(Context);
+  const avatarGroupContext = React.useContext(AvatarGroupContext);
+
+  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Avatar, avatarGroupContext),
+        {
+    alt,
+    className,
+    children: childrenProp,
+    size,
+    skeleton,
+    variant,
+    src,
+    imgProps
+  } = _usePropsWithContext,
+        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+
+  let children = null;
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context);
+  const spacingClasses = createSpacingClasses(props);
+  const childrenIsString = typeof childrenProp === 'string';
+
+  if (src || imgProps) {
+    const imageProps = _objectSpread({
+      src,
+      alt
+    }, imgProps);
+
+    children = React.createElement(Img, imageProps);
+  } else if (childrenIsString) {
+    const firstLetterUpperCase = childrenProp.charAt(0).toUpperCase();
+    children = React.createElement("span", {
+      "data-testid": "avatar-text",
+      "aria-hidden": true
+    }, firstLetterUpperCase);
+  } else {
+    children = childrenProp;
+  }
+
+  if (!avatarGroupContext) {
+    warn(`Avatar group required: An Avatar requires an Avatar.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`);
+  }
+
+  return React.createElement("span", _extends({
+    className: classnames(`dnb-avatar dnb-avatar--${variant || 'primary'} dnb-avatar--size-${size || 'medium'}`, skeletonClasses, spacingClasses, className),
+    "data-testid": "avatar"
+  }, props), childrenIsString && React.createElement("span", {
+    "data-testid": "avatar-label",
+    className: "dnb-sr-only"
+  }, childrenProp), children);
+};
+
+Avatar.Group = AvatarGroup;
+export { AvatarGroup };
+export default Avatar;