@dnb/eufemia 9.17.2 → 9.21.0

package/esm/components/date-picker/DatePickerFooter.js

@@ -96,20 +96,22 @@ var DatePickerFooter = function (_React$PureComponent) {
   _createClass(DatePickerFooter, [{
     key: "render",
     value: function render() {
-      var isRange = this.props.isRange;
+      var _this$props = this.props,
+          isRange = _this$props.isRange,
+          resetButtonText = _this$props.resetButtonText;
       var _this$context$props = this.context.props,
           show_reset_button = _this$context$props.show_reset_button,
           show_cancel_button = _this$context$props.show_cancel_button,
           show_submit_button = _this$context$props.show_submit_button;
 
-      if (!isRange && !isTrue(show_submit_button) && !isTrue(show_cancel_button)) {
+      if (!isRange && !isTrue(show_submit_button) && !isTrue(show_cancel_button) && !isTrue(show_reset_button)) {
         return React.createElement(React.Fragment, null);
       }
 
       var _this$context$transla = this.context.translation.DatePicker,
           submit_button_text = _this$context$transla.submit_button_text,
           cancel_button_text = _this$context$transla.cancel_button_text,
-          reset_button_text = _this$context$transla.reset_button_text;
+          reset_button_text_translation = _this$context$transla.reset_button_text;
       return React.createElement("div", {
         className: "dnb-date-picker__footer"
       }, (isRange || isTrue(show_submit_button)) && React.createElement(Button, {
@@ -117,7 +119,7 @@ var DatePickerFooter = function (_React$PureComponent) {
         onClick: this.onSubmitHandler,
         "data-visual-test": "submit"
       }) || _span || (_span = React.createElement("span", null)), React.createElement("span", null, isTrue(show_reset_button) && React.createElement(Button, {
-        text: reset_button_text,
+        text: resetButtonText || reset_button_text_translation,
         icon: "reset",
         icon_position: "left",
         variant: "tertiary",
@@ -142,7 +144,8 @@ _defineProperty(DatePickerFooter, "contextType", DatePickerContext);
 _defineProperty(DatePickerFooter, "defaultProps", {
   onSubmit: null,
   onCancel: null,
-  onReset: null
+  onReset: null,
+  resetButtonText: null
 });
 
 export { DatePickerFooter as default };
@@ -150,5 +153,6 @@ process.env.NODE_ENV !== "production" ? DatePickerFooter.propTypes = {
   isRange: PropTypes.bool.isRequired,
   onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
-  onReset: PropTypes.func
+  onReset: PropTypes.func,
+  resetButtonText: PropTypes.string
 } : void 0;

package/esm/components/date-picker/DatePickerInput.d.ts

@@ -29,7 +29,7 @@ export interface DatePickerInputProps
   status?: DatePickerInputStatus;
 
   /**
-   * 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;
 

package/esm/components/dropdown/Dropdown.d.ts

@@ -51,7 +51,8 @@ export type DropdownVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type DropdownIcon =
   | string
   | React.ReactNode
@@ -200,12 +201,12 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Give a title to let the user know what they has to do. Defaults to `Valgmeny` .
+   * Give a title to let the users know what they have to do. Defaults to `Valgmeny`.
    */
   title?: DropdownTitle;
 
   /**
-   * Defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary` .
+   * Defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`.
    */
   variant?: DropdownVariant;
 
@@ -220,7 +221,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   icon_size?: string;
 
   /**
-   * Position of icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.
+   * Position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.
    */
   icon_position?: DropdownIconPosition;
 
@@ -250,7 +251,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   status?: DropdownStatus;
 
   /**
-   * 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;
 
@@ -346,12 +347,12 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   trigger_element?: DropdownTriggerElement;
 
   /**
-   * 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?: DropdownData;
 
   /**
-   * 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?: DropdownDefaultValue;
 
@@ -361,7 +362,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   value?: DropdownValue;
 
   /**
-   * If set to `true`, the Dropdown will be opened when the users enters the trigger button with a focus action.
+   * If set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action.
    */
   open_on_focus?: DropdownOpenOnFocus;
 
@@ -394,7 +395,7 @@ export interface DropdownProps 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?: DropdownChildren;
   custom_element?: Object;
@@ -416,7 +417,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   on_change?: (...args: any[]) => any;
 
   /**
-   * Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation
+   * Will be called once the user selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation
    */
   on_select?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

package/esm/components/form-label/FormLabel.d.ts

@@ -47,7 +47,7 @@ export type FormLabelChildren =
  */
 export interface FormLabelProps extends React.HTMLProps<HTMLElement> {
   /**
-   * The `id` of the input.
+   * <em>(required)</em> the `id` of the input.
    */
   for_id?: string;
 

package/esm/components/form-row/FormRow.d.ts

@@ -57,7 +57,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: FormRowLabel;
 
@@ -73,7 +73,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   label_id?: string;
 
   /**
-   * If You need to style the "legend", then You can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
+   * If you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
    */
   label_class?: string;
   no_label?: FormRowNoLabel;
@@ -94,7 +94,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   indent?: FormRowIndent;
 
   /**
-   * Forces the content of a FormRow to wrap. Make sure You always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
+   * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
    */
   wrap?: FormRowWrap;
 
@@ -109,7 +109,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   vertical?: FormRowVertical;
 
   /**
-   * Will center all children vertically as long as the screen not hits a mobile width.
+   * Will center all children vertically as long as the screen does not hit a mobile width.
    */
   centered?: FormRowCentered;
 

package/esm/components/form-set/FormSet.d.ts

@@ -83,7 +83,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: FormSetLabel;
 
@@ -99,7 +99,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   label_id?: string;
 
   /**
-   * If You need to style the "legend", then You can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
+   * If you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
    */
   label_class?: string;
   no_label?: FormSetNoLabel;
@@ -120,7 +120,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   indent?: FormSetIndent;
 
   /**
-   * Forces the content of a FormRow to wrap. Make sure You always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
+   * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
    */
   wrap?: FormSetWrap;
 
@@ -135,7 +135,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   vertical?: FormSetVertical;
 
   /**
-   * Will center all children vertically as long as the screen not hits a mobile width.
+   * Will center all children vertically as long as the screen does not hit a mobile width.
    */
   centered?: FormSetCentered;
 
@@ -190,7 +190,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   children?: FormSetChildren;
 
   /**
-   * Will be called on submit. Returns an object with the a native event: `{ event }`
+   * Will be called on submit. Returns an object with a native event: `{ event }`
    */
   on_submit?: (...args: any[]) => any;
   custom_element?: Object;

package/esm/components/global-error/GlobalError.d.ts

@@ -27,7 +27,7 @@ export type GlobalErrorChildren =
  */
 export interface GlobalErrorProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Status code define the view showing up.
+   * Status code defines the view showing up.
    */
   status?: string;
 

package/esm/components/global-status/GlobalStatus.d.ts

@@ -70,17 +70,17 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   default_title?: string;
 
   /**
-   * The text appears as the status content. Beside plain text, You can send in a React component as well. Defaults to `null`.
+   * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
    */
   text?: GlobalStatusText;
 
   /**
-   * The items (list items) appears as a part of the status content. You can both use an JSON array, or a vanilla array with a string or an object content. Se "Item Object" example below.
+   * The items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. Se "Item Object" example below.
    */
   items?: GlobalStatusItems;
 
   /**
-   * The icon show before the status title. Defaults to `exclamation`.
+   * The icon shown before the status title. Defaults to `exclamation`.
    */
   icon?: GlobalStatusIcon;
 
@@ -115,7 +115,7 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   no_animation?: GlobalStatusNoAnimation;
 
   /**
-   * Defines the delay on how long the automated visibility should wait, before it appears to the user. Defaults to `200ms`.
+   * Defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`.
    */
   delay?: GlobalStatusDelay;
 
@@ -169,7 +169,7 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The text appears as the status content. Beside plain text, You can send in a React component as well. Defaults to `null`.
+   * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
    */
   children?: GlobalStatusChildren;
 

package/esm/components/heading/Heading.d.ts

@@ -58,7 +58,7 @@ export interface HeadingProps extends React.HTMLProps<HTMLElement> {
   group?: string;
 
   /**
-   * A heading, can be text or a another component.
+   * <em>(required)</em> a heading, can be text or React.Node.
    */
   text?: HeadingText;
 
@@ -144,7 +144,7 @@ export interface HeadingProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * A heading, can be text or a another component.
+   * <em>(required)</em> a heading, can be text or React.Node.
    */
   children?: HeadingChildren;
 }

package/esm/components/heading/HeadingProvider.d.ts

@@ -40,12 +40,12 @@ export interface HeadingProviderProps
   reset?: HeadingProviderReset;
 
   /**
-   * A heading, can be text or a another component.
+   * <em>(required)</em> a heading, can be text or React.Node.
    */
   text?: any;
 
   /**
-   * A heading, can be text or a another component.
+   * <em>(required)</em> a heading, can be text or React.Node.
    */
   children?: any;
 }

package/esm/components/help-button/HelpButton.d.ts

@@ -82,7 +82,7 @@ export interface HelpButtonProps extends React.HTMLProps<HTMLElement> {
   title?: React.ReactNode;
 
   /**
-   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`.
+   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`.
    */
   variant?: any;
 

package/esm/components/help-button/HelpButtonInstance.d.ts

@@ -3,7 +3,8 @@ export type HelpButtonInstanceVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type HelpButtonInstanceIcon =
   | string
   | React.ReactNode
@@ -47,7 +48,7 @@ export interface HelpButtonInstanceProps
   id?: string;
 
   /**
-   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`.
+   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`.
    */
   variant?: HelpButtonInstanceVariant;
 

package/esm/components/icon/Icon.d.ts

@@ -46,7 +46,7 @@ export type IconChildren = React.ReactNode | ((...args: any[]) => any);
  */
 export interface IconProps extends React.HTMLProps<HTMLElement> {
   /**
-   * A React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
+   * <em>(required)</em> a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
    */
   icon?: IconIcon;
 
@@ -56,7 +56,7 @@ export interface IconProps extends React.HTMLProps<HTMLElement> {
   modifier?: string;
 
   /**
-   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the mother HTML element, if it provides a `font-size`.
+   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`.
    */
   size?: IconSize;
 

package/esm/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/esm/components/index.d.ts

@@ -12,6 +12,7 @@
 // import all the available components
 import Accordion from './accordion/Accordion'
 import Autocomplete from './autocomplete/Autocomplete'
+import Avatar from './avatar/Avatar'
 import Breadcrumb from './breadcrumb/Breadcrumb'
 import Button from './button/Button'
 import Checkbox from './checkbox/Checkbox'
@@ -27,6 +28,7 @@ import Heading from './heading/Heading'
 import HelpButton from './help-button/HelpButton'
 import Icon from './icon/Icon'
 import IconPrimary from './icon-primary/IconPrimary'
+import InfoCard from './info-card/InfoCard'
 import Input from './input/Input'
 import InputMasked from './input-masked/InputMasked'
 import Logo from './logo/Logo'
@@ -42,7 +44,9 @@ import Space from './space/Space'
 import StepIndicator from './step-indicator/StepIndicator'
 import Switch from './switch/Switch'
 import Tabs from './tabs/Tabs'
+import Tag from './tag/Tag'
 import Textarea from './textarea/Textarea'
+import Timeline from './timeline/Timeline'
 import ToggleButton from './toggle-button/ToggleButton'
 import Tooltip from './tooltip/Tooltip'
 
@@ -50,6 +54,7 @@ import Tooltip from './tooltip/Tooltip'
 export {
   Accordion,
   Autocomplete,
+  Avatar,
   Breadcrumb,
   Button,
   Checkbox,
@@ -65,6 +70,7 @@ export {
   HelpButton,
   Icon,
   IconPrimary,
+  InfoCard,
   Input,
   InputMasked,
   Logo,
@@ -80,7 +86,9 @@ export {
   StepIndicator,
   Switch,
   Tabs,
+  Tag,
   Textarea,
+  Timeline,
   ToggleButton,
   Tooltip,
 }

package/esm/components/index.js

@@ -1,5 +1,6 @@
 import Accordion from './accordion/Accordion';
 import Autocomplete from './autocomplete/Autocomplete';
+import Avatar from './avatar/Avatar';
 import Breadcrumb from './breadcrumb/Breadcrumb';
 import Button from './button/Button';
 import Checkbox from './checkbox/Checkbox';
@@ -15,6 +16,7 @@ import Heading from './heading/Heading';
 import HelpButton from './help-button/HelpButton';
 import Icon from './icon/Icon';
 import IconPrimary from './icon-primary/IconPrimary';
+import InfoCard from './info-card/InfoCard';
 import Input from './input/Input';
 import InputMasked from './input-masked/InputMasked';
 import Logo from './logo/Logo';
@@ -30,7 +32,9 @@ import Space from './space/Space';
 import StepIndicator from './step-indicator/StepIndicator';
 import Switch from './switch/Switch';
 import Tabs from './tabs/Tabs';
+import Tag from './tag/Tag';
 import Textarea from './textarea/Textarea';
+import Timeline from './timeline/Timeline';
 import ToggleButton from './toggle-button/ToggleButton';
 import Tooltip from './tooltip/Tooltip';
-export { Accordion, Autocomplete, Breadcrumb, Button, Checkbox, DatePicker, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Tabs, Textarea, ToggleButton, Tooltip };
+export { Accordion, Autocomplete, Avatar, Breadcrumb, Button, Checkbox, DatePicker, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip };

package/esm/components/info-card/InfoCard.js

@@ -0,0 +1,140 @@
+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 = ["alt", "centered", "title", "skeleton", "className", "icon", "src", "imgProps", "text", "onClose", "onAccept", "closeButtonText", "acceptButtonText", "closeButtonAttributes", "acceptButtonAttributes"];
+
+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 Button from '../button/Button';
+import IconPrimary from '../icon-primary/IconPrimary';
+import Img from '../../elements/Img';
+import Div from '../../elements/Div';
+import H3 from '../../elements/H3';
+import P from '../../elements/P';
+import { lightbulb_medium as LightbulbIcon } from '../../icons';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import { createSkeletonClass } from '../skeleton/SkeletonHelper';
+import Context from '../../shared/Context';
+import { usePropsWithContext } from '../../shared/hooks';
+export var defaultProps = {
+  alt: null,
+  centered: false,
+  className: null,
+  skeleton: false,
+  icon: LightbulbIcon,
+  imgProps: null,
+  src: null,
+  title: null,
+  onAccept: null,
+  onClose: null,
+  closeButtonText: null,
+  acceptButtonText: null,
+  closeButtonAttributes: null,
+  acceptButtonAttributes: null
+};
+
+var InfoCard = function InfoCard(localProps) {
+  var _IconPrimary;
+
+  var context = React.useContext(Context);
+
+  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);
+  var closeButtonIsHidden = !onClose && !closeButtonText;
+  var acceptButtonIsHidden = !onAccept && !acceptButtonText;
+  return React.createElement(Div, _extends({
+    className: classnames('dnb-info-card', skeletonClasses, spacingClasses, className, centered && 'dnb-info-card--centered'),
+    "data-testid": "info-card"
+  }, props), React.createElement(Div, {
+    right: !centered && 'small',
+    bottom: centered && 'small'
+  }, getIllustration()), React.createElement("div", {
+    className: "dnb-info-card--content",
+    "data-testid": "info-card-content"
+  }, title && React.createElement(H3, {
+    size: "small",
+    "data-testid": "info-card-title",
+    bottom: "x-small",
+    top: "0"
+  }, title), React.createElement(P, {
+    size: "small",
+    "data-testid": "info-card-text",
+    bottom: "0"
+  }, text), getButtons()));
+
+  function getButtons() {
+    if (closeButtonIsHidden && acceptButtonIsHidden) return null;
+    return React.createElement(Div, {
+      top: centered ? 'medium' : 'small',
+      className: 'dnb-info-card--buttons' + (centered ? " dnb-info-card--buttons-centered" : "")
+    }, !acceptButtonIsHidden && React.createElement(Button, _extends({
+      type: "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": "info-card-close-button",
+      variant: "tertiary",
+      top: centered && 'small',
+      on_click: onClose,
+      icon: "close",
+      icon_position: "left",
+      text: closeButtonText
+    }, closeButtonAttributes)));
+  }
+
+  function getIllustration() {
+    if (src || imgProps) {
+      var imageProps = _objectSpread({
+        src: src,
+        alt: alt
+      }, imgProps);
+
+      return React.createElement(Img, _extends({
+        "data-testid": "info-card-image",
+        className: "dnb-info-card--image"
+      }, imageProps));
+    }
+
+    return _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
+      size: "medium",
+      className: "dnb-info-card--icon",
+      icon: icon,
+      "data-testid": "info-card-icon"
+    }));
+  }
+};
+
+export default InfoCard;