@dnb/eufemia 9.17.2 → 9.21.0

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/icon-primary/IconPrimary.d.ts

@@ -53,9 +53,10 @@ 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`).
+   * <em>(required)</em> a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`).
    */
   icon?: IconPrimaryIcon;
 
@@ -65,7 +66,7 @@ export interface IconPrimaryProps 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?: IconPrimarySize;
 

package/cjs/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/cjs/components/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "Autocomplete", {
     return _Autocomplete.default;
   }
 });
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar.default;
+  }
+});
 Object.defineProperty(exports, "Breadcrumb", {
   enumerable: true,
   get: function get() {
@@ -105,6 +111,12 @@ Object.defineProperty(exports, "IconPrimary", {
     return _IconPrimary.default;
   }
 });
+Object.defineProperty(exports, "InfoCard", {
+  enumerable: true,
+  get: function get() {
+    return _InfoCard.default;
+  }
+});
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function get() {
@@ -195,12 +207,24 @@ Object.defineProperty(exports, "Tabs", {
     return _Tabs.default;
   }
 });
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _Tag.default;
+  }
+});
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
   get: function get() {
     return _Textarea.default;
   }
 });
+Object.defineProperty(exports, "Timeline", {
+  enumerable: true,
+  get: function get() {
+    return _Timeline.default;
+  }
+});
 Object.defineProperty(exports, "ToggleButton", {
   enumerable: true,
   get: function get() {
@@ -218,6 +242,8 @@ var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
 
 var _Autocomplete = _interopRequireDefault(require("./autocomplete/Autocomplete"));
 
+var _Avatar = _interopRequireDefault(require("./avatar/Avatar"));
+
 var _Breadcrumb = _interopRequireDefault(require("./breadcrumb/Breadcrumb"));
 
 var _Button = _interopRequireDefault(require("./button/Button"));
@@ -248,6 +274,8 @@ var _Icon = _interopRequireDefault(require("./icon/Icon"));
 
 var _IconPrimary = _interopRequireDefault(require("./icon-primary/IconPrimary"));
 
+var _InfoCard = _interopRequireDefault(require("./info-card/InfoCard"));
+
 var _Input = _interopRequireDefault(require("./input/Input"));
 
 var _InputMasked = _interopRequireDefault(require("./input-masked/InputMasked"));
@@ -278,8 +306,12 @@ var _Switch = _interopRequireDefault(require("./switch/Switch"));
 
 var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
 
+var _Tag = _interopRequireDefault(require("./tag/Tag"));
+
 var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
 
+var _Timeline = _interopRequireDefault(require("./timeline/Timeline"));
+
 var _ToggleButton = _interopRequireDefault(require("./toggle-button/ToggleButton"));
 
 var _Tooltip = _interopRequireDefault(require("./tooltip/Tooltip"));

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

@@ -0,0 +1,180 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+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.defaultProps = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../button/Button"));
+
+var _IconPrimary2 = _interopRequireDefault(require("../icon-primary/IconPrimary"));
+
+var _Img = _interopRequireDefault(require("../../elements/Img"));
+
+var _Div = _interopRequireDefault(require("../../elements/Div"));
+
+var _H = _interopRequireDefault(require("../../elements/H3"));
+
+var _P = _interopRequireDefault(require("../../elements/P"));
+
+var _icons = require("../../icons");
+
+var _SpacingHelper = require("../space/SpacingHelper");
+
+var _SkeletonHelper = require("../skeleton/SkeletonHelper");
+
+var _Context = _interopRequireDefault(require("../../shared/Context"));
+
+var _hooks = require("../../shared/hooks");
+
+var _excluded = ["alt", "centered", "title", "skeleton", "className", "icon", "src", "imgProps", "text", "onClose", "onAccept", "closeButtonText", "acceptButtonText", "closeButtonAttributes", "acceptButtonAttributes"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+var defaultProps = {
+  alt: null,
+  centered: false,
+  className: null,
+  skeleton: false,
+  icon: _icons.lightbulb_medium,
+  imgProps: null,
+  src: null,
+  title: null,
+  onAccept: null,
+  onClose: null,
+  closeButtonText: null,
+  acceptButtonText: null,
+  closeButtonAttributes: null,
+  acceptButtonAttributes: null
+};
+exports.defaultProps = defaultProps;
+
+var InfoCard = function InfoCard(localProps) {
+  var _IconPrimary;
+
+  var context = _react.default.useContext(_Context.default);
+
+  var _usePropsWithContext = (0, _hooks.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 = (0, _SkeletonHelper.createSkeletonClass)('shape', skeleton, context);
+  var spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
+  var closeButtonIsHidden = !onClose && !closeButtonText;
+  var acceptButtonIsHidden = !onAccept && !acceptButtonText;
+  return _react.default.createElement(_Div.default, _extends({
+    className: (0, _classnames.default)('dnb-info-card', skeletonClasses, spacingClasses, className, centered && 'dnb-info-card--centered'),
+    "data-testid": "info-card"
+  }, props), _react.default.createElement(_Div.default, {
+    right: !centered && 'small',
+    bottom: centered && 'small'
+  }, getIllustration()), _react.default.createElement("div", {
+    className: "dnb-info-card--content",
+    "data-testid": "info-card-content"
+  }, title && _react.default.createElement(_H.default, {
+    size: "small",
+    "data-testid": "info-card-title",
+    bottom: "x-small",
+    top: "0"
+  }, title), _react.default.createElement(_P.default, {
+    size: "small",
+    "data-testid": "info-card-text",
+    bottom: "0"
+  }, text), getButtons()));
+
+  function getButtons() {
+    if (closeButtonIsHidden && acceptButtonIsHidden) return null;
+    return _react.default.createElement(_Div.default, {
+      top: centered ? 'medium' : 'small',
+      className: 'dnb-info-card--buttons' + (centered ? " dnb-info-card--buttons-centered" : "")
+    }, !acceptButtonIsHidden && _react.default.createElement(_Button.default, _extends({
+      type: "button",
+      "data-testid": "info-card-accept-button",
+      variant: "secondary",
+      right: !centered && 'small',
+      on_click: onAccept,
+      text: acceptButtonText
+    }, acceptButtonAttributes)), !closeButtonIsHidden && _react.default.createElement(_Button.default, _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.default.createElement(_Img.default, _extends({
+        "data-testid": "info-card-image",
+        className: "dnb-info-card--image"
+      }, imageProps));
+    }
+
+    return _IconPrimary || (_IconPrimary = _react.default.createElement(_IconPrimary2.default, {
+      size: "medium",
+      className: "dnb-info-card--icon",
+      icon: icon,
+      "data-testid": "info-card-icon"
+    }));
+  }
+};
+
+var _default = InfoCard;
+exports.default = _default;

package/cjs/components/info-card/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Component Entry
+ *
+ */
+
+import InfoCard from './InfoCard';
+export default InfoCard;
+export * from './InfoCard';

package/cjs/components/info-card/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.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.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+
+var _InfoCard = _interopRequireWildcard(require("./InfoCard"));
+
+Object.keys(_InfoCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _InfoCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InfoCard[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _InfoCard.default;
+exports.default = _default;

package/cjs/components/info-card/style/_info-card.scss

@@ -0,0 +1,52 @@
+/*
+* InfoCard component
+*
+*/
+
+.dnb-info-card {
+  display: flex;
+  flex-direction: row;
+
+  background: white;
+
+  border: 1px solid var(--color-black-8);
+  border-radius: 0.25rem;
+  padding: 1rem;
+
+  @include defaultDropShadow();
+
+  &--centered {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  &--content {
+    flex-direction: column;
+    margin-top: 0.1875rem;
+  }
+
+  &--centered &--content {
+    flex-direction: column;
+    margin-top: 0;
+  }
+
+  &--icon {
+    color: var(--color-emerald-green);
+  }
+
+  &--image {
+    height: 4rem;
+    width: 4rem;
+  }
+
+  &--buttons {
+    display: flex;
+    flex-direction: row;
+    &-centered {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }
+}

package/cjs/components/info-card/style/dnb-info-card.css

@@ -0,0 +1,135 @@
+/*
+* DNB InfoCard
+*
+*/
+/**
+ * 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-info-card {
+  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-info-card *,
+  .dnb-info-card ::before,
+  .dnb-info-card ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-info-card ::before,
+  .dnb-info-card ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* InfoCard component
+*
+*/
+.dnb-info-card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  background: white;
+  border: 1px solid #ebebeb;
+  border: 1px solid var(--color-black-8);
+  border-radius: 0.25rem;
+  padding: 1rem;
+  -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
+          box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
+  -webkit-box-shadow: var(--shadow-default);
+          box-shadow: var(--shadow-default); }
+  .dnb-info-card--centered {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    text-align: center; }
+  .dnb-info-card--content {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    margin-top: 0.1875rem; }
+  .dnb-info-card--centered .dnb-info-card--content {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    margin-top: 0; }
+  .dnb-info-card--icon {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+  .dnb-info-card--image {
+    height: 4rem;
+    width: 4rem; }
+  .dnb-info-card--buttons {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row; }
+    .dnb-info-card--buttons-centered {
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      text-align: center; }

package/cjs/components/info-card/style/dnb-info-card.min.css

@@ -0,0 +1 @@
+.dnb-info-card{-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-info-card *,.dnb-info-card :after,.dnb-info-card :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-info-card :after,.dnb-info-card :before{text-decoration:inherit;vertical-align:inherit}.dnb-info-card{-webkit-box-orient:horizontal;-webkit-box-direction:normal;background:#fff;border:1px solid #ebebeb;border:1px solid var(--color-black-8);border-radius:.25rem;-webkit-box-shadow:0 8px 16px rgba(51,51,51,.08);box-shadow:0 8px 16px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default);box-shadow:var(--shadow-default);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:1rem}.dnb-info-card--centered{-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center}.dnb-info-card--centered,.dnb-info-card--content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.dnb-info-card--content{margin-top:.1875rem}.dnb-info-card--centered .dnb-info-card--content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:0}.dnb-info-card--icon{color:#14555a;color:var(--color-emerald-green)}.dnb-info-card--image{height:4rem;width:4rem}.dnb-info-card--buttons{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.dnb-info-card--buttons-centered{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;text-align:center}

package/cjs/components/info-card/style/dnb-info-card.scss

@@ -0,0 +1,12 @@
+/*
+* DNB InfoCard
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+.dnb-info-card {
+  @include componentReset();
+}
+
+@import './_info-card.scss';

package/cjs/components/info-card/style/index.d.ts

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