@dnb/eufemia 9.18.0 → 9.19.0

package/cjs/components/lib.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() {
@@ -207,6 +219,12 @@ Object.defineProperty(exports, "Textarea", {
     return _Textarea.default;
   }
 });
+Object.defineProperty(exports, "Timeline", {
+  enumerable: true,
+  get: function get() {
+    return _Timeline.default;
+  }
+});
 Object.defineProperty(exports, "ToggleButton", {
   enumerable: true,
   get: function get() {
@@ -227,6 +245,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"));
@@ -257,6 +277,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"));
@@ -291,6 +313,8 @@ 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"));
@@ -301,6 +325,7 @@ var getComponents = function getComponents() {
   return {
     Accordion: _Accordion.default,
     Autocomplete: _Autocomplete.default,
+    Avatar: _Avatar.default,
     Breadcrumb: _Breadcrumb.default,
     Button: _Button.default,
     Checkbox: _Checkbox.default,
@@ -316,6 +341,7 @@ var getComponents = function getComponents() {
     HelpButton: _HelpButton.default,
     Icon: _Icon.default,
     IconPrimary: _IconPrimary.default,
+    InfoCard: _InfoCard.default,
     Input: _Input.default,
     InputMasked: _InputMasked.default,
     Logo: _Logo.default,
@@ -333,6 +359,7 @@ var getComponents = function getComponents() {
     Tabs: _Tabs.default,
     Tag: _Tag.default,
     Textarea: _Textarea.default,
+    Timeline: _Timeline.default,
     ToggleButton: _ToggleButton.default,
     Tooltip: _Tooltip.default
   };

package/cjs/components/number-format/NumberFormat.d.ts

@@ -68,7 +68,7 @@ export interface NumberFormatProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * A number.
+   * <em>(required)</em> a number.
    */
   value?: NumberFormatValue;
 
@@ -215,7 +215,7 @@ export interface NumberFormatProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * A number.
+   * <em>(required)</em> a number.
    */
   children?: NumberFormatChildren;
 }

package/cjs/components/pagination/Pagination.js

@@ -35,7 +35,7 @@ require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.createPagination = exports.InfinityMarker = void 0;
+exports.default = exports.createPagination = exports.InfinityMarker = exports.Bar = void 0;
 
 require("core-js/modules/es.array.find.js");
 
@@ -350,6 +350,16 @@ Pagination.Content = PaginationContent;
 var PaginationWrapper = Pagination;
 var InfinityMarkerWrapper = InfinityMarker;
 
+var Bar = function Bar(props) {
+  return _react.default.createElement(Pagination, _extends({
+    fallback_element: function fallback_element() {
+      return null;
+    }
+  }, props));
+};
+
+exports.Bar = Bar;
+
 var createPagination = function createPagination() {
   var initProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 

package/cjs/components/radio/Radio.d.ts

@@ -94,7 +94,7 @@ export interface RadioProps extends React.HTMLProps<HTMLElement> {
   suffix?: RadioSuffix;
 
   /**
-   * Defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
+   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
    */
   value?: string;
   attributes?: RadioAttributes;

package/cjs/components/radio/RadioGroup.d.ts

@@ -94,7 +94,7 @@ export interface RadioGroupProps extends React.HTMLProps<HTMLElement> {
   vertical?: RadioGroupVertical;
 
   /**
-   * Defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
+   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
    */
   value?: string;
   attributes?: RadioGroupAttributes;

package/cjs/components/slider/Slider.d.ts

@@ -131,7 +131,7 @@ export interface SliderProps extends React.HTMLProps<HTMLElement> {
   max?: SliderMax;
 
   /**
-   * The `value` of the slider. Also the event callback result.
+   * <em>(required)</em> the `value` of the slider. Also the event callback result.
    */
   value?: SliderValue;
 

package/cjs/components/step-indicator/StepIndicator.d.ts

@@ -70,17 +70,17 @@ export type StepIndicatorChildren =
  */
 export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
   /**
-   * A unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id?: string;
 
   /**
-   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
    */
   mode?: StepIndicatorMode;
 
   /**
-   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
+   * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
    */
   data?: StepIndicatorData;
   title: StepIndicatorTitle;

package/cjs/components/step-indicator/StepIndicatorContext.d.ts

@@ -5,7 +5,7 @@ import * as React from 'react';
  */
 export interface StepIndicatorProviderProps {
   /**
-   * A unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id: string;
   children: React.ReactNode;

package/cjs/components/step-indicator/StepIndicatorItem.d.ts

@@ -12,7 +12,7 @@ export type StepIndicatorItemIsActive = string | boolean;
 export interface StepIndicatorItemProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
    */
   mode?: string;
   title: StepIndicatorItemTitle;

package/cjs/components/step-indicator/StepIndicatorSidebar.d.ts

@@ -29,12 +29,12 @@ export type StepIndicatorSidebarData =
 export interface StepIndicatorSidebarProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * A unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id: string;
 
   /**
-   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
    */
   mode?: StepIndicatorSidebarMode;
 
@@ -44,7 +44,7 @@ export interface StepIndicatorSidebarProps
   current_step?: StepIndicatorSidebarCurrentStep;
 
   /**
-   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
+   * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
    */
   data?: StepIndicatorSidebarData;
   internalId?: string;

package/cjs/components/step-indicator/StepIndicatorTriggerButton.d.ts

@@ -6,7 +6,7 @@ import * as React from 'react';
 export interface StepIndicatorTriggerButtonProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * A unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id?: string;
   className?: string;

package/cjs/components/switch/Switch.d.ts

@@ -67,7 +67,7 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   label_position?: SwitchLabelPosition;
 
   /**
-   * The `title` of the input - describing it a bit further for accessibility reasons.
+   * <em>(required)</em> the `title` of the input - describing it a bit further for accessibility reasons.
    */
   title?: string;
   default_state?: SwitchDefaultState;

package/cjs/components/tabs/Tabs.d.ts

@@ -66,12 +66,12 @@ export type TabsChildren =
  */
 export interface TabsProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Defines the data structure to load as a JSON. e.g. `[{title: &#39;...&#39;, content: &#39;Current tab&#39;, key
+   * <em>(required)</em> defines the data structure to load as a JSON. e.g. `[{title: &#39;...&#39;, content: &#39;Current tab&#39;, key
    */
   data?: TabsData;
 
   /**
-   * The content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
+   * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   content?: TabsContent;
 
@@ -161,7 +161,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
+   * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   children?: TabsChildren;
   render?: (...args: any[]) => any;
@@ -198,7 +198,7 @@ export default class Tabs extends React.Component<TabsProps, any> {
  */
 export interface DummyProps {
   /**
-   * The content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
+   * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   children: React.ReactNode;
 }

package/cjs/components/tabs/TabsContentWrapper.d.ts

@@ -27,7 +27,7 @@ export interface ContentWrapperProps extends React.HTMLProps<HTMLElement> {
   content_spacing?: ContentWrapperContentSpacing;
 
   /**
-   * The content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
+   * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   children?: ContentWrapperChildren;
 }

package/cjs/components/tabs/TabsCustomContent.d.ts

@@ -74,7 +74,7 @@ export interface CustomContentProps extends React.HTMLProps<HTMLElement> {
   left?: CustomContentLeft;
 
   /**
-   * The content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
+   * <em>(required)</em> the content to render. Can be a function, returning the current tab content `(key) => (&#39;Current tab&#39;)`, a React Component or an object with the keys and content `{key1: &#39;Current tab&#39;}`.
    */
   children?: CustomContentChildren;
   className?: string;

package/cjs/components/tag/Tag.js

@@ -27,17 +27,21 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _SkeletonHelper = require("../skeleton/SkeletonHelper");
+var _IconPrimary2 = _interopRequireDefault(require("../icon-primary/IconPrimary"));
 
-var _SpacingHelper = require("../space/SpacingHelper");
-
-var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary"));
+var _Button = _interopRequireDefault(require("../button/Button"));
 
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 
 var _componentHelper = require("../../shared/component-helper");
 
-var _excluded = ["className", "skeleton", "children", "icon", "text"];
+var _TagGroup = _interopRequireDefault(require("./TagGroup"));
+
+var _TagContext = require("./TagContext");
+
+var _IconPrimary;
+
+var _excluded = ["className", "skeleton", "children", "text", "onClick", "onDelete", "omitOnKeyUpDeleteEvent"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -58,40 +62,96 @@ var defaultProps = {
   skeleton: false,
   text: null,
   children: null,
-  icon: null
+  icon: null,
+  onClick: null,
+  onDelete: null,
+  omitOnKeyUpDeleteEvent: false
 };
 exports.defaultProps = defaultProps;
 
-function Tag(localProps) {
+var Tag = function Tag(localProps) {
   var _context$translation;
 
   var context = _react.default.useContext(_Context.default);
 
-  var _extendPropsWithConte = (0, _componentHelper.extendPropsWithContext)(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag),
+  var tagGroupContext = _react.default.useContext(_TagContext.TagGroupContext);
+
+  var _extendPropsWithConte = (0, _componentHelper.extendPropsWithContext)(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag, tagGroupContext),
       className = _extendPropsWithConte.className,
       skeleton = _extendPropsWithConte.skeleton,
       children = _extendPropsWithConte.children,
-      icon = _extendPropsWithConte.icon,
       text = _extendPropsWithConte.text,
+      onClick = _extendPropsWithConte.onClick,
+      onDelete = _extendPropsWithConte.onDelete,
+      omitOnKeyUpDeleteEvent = _extendPropsWithConte.omitOnKeyUpDeleteEvent,
       props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
 
-  var skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('shape', skeleton, context);
-  var spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
   var content = text || children;
-  return _react.default.createElement("div", _extends({
-    className: (0, _classnames.default)('dnb-tag', skeletonClasses, spacingClasses, className),
-    "data-testid": "tag"
-  }, props), icon && _react.default.createElement("span", {
-    "data-testid": "tag-icon",
-    className: "dnb-tag__icon"
-  }, _react.default.createElement(_IconPrimary.default, {
-    icon: icon,
-    right: "x-small"
-  })), content && _react.default.createElement("span", {
-    "data-testid": "tag-text",
-    className: "dnb-tag__text"
-  }, content));
-}
+  var isClickable = !!onClick;
+  var isRemovable = !!onDelete && !isClickable;
+  var isInteractive = isClickable || isRemovable;
+  var tagClassNames = (0, _classnames.default)('dnb-tag', className, isInteractive && 'dnb-tag--interactive', isRemovable && 'dnb-tag--removable');
+
+  var isDeleteKeyboardEvent = function isDeleteKeyboardEvent(keyboardEvent) {
+    return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
+  };
+
+  var handleKeyUp = function handleKeyUp(event) {
+    if (onDelete && isDeleteKeyboardEvent(event)) {
+      onDelete(event);
+    }
+  };
+
+  if (!isInteractive) {
+    props.element = 'span';
+    props.type = '';
+  }
+
+  if (isRemovable) {
+    props.icon = getDeleteIcon();
+  }
+
+  if (!tagGroupContext) {
+    (0, _componentHelper.warn)("Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.");
+  }
+
+  return _react.default.createElement(_Button.default, _extends({
+    "data-testid": "tag",
+    variant: "unstyled",
+    size: "small",
+    icon_position: isRemovable ? 'right' : 'left',
+    className: tagClassNames,
+    on_click: onClick || onDelete,
+    text: content,
+    skeleton: skeleton,
+    onKeyUp: isRemovable && !omitOnKeyUpDeleteEvent ? function (e) {
+      return handleKeyUp(e);
+    } : undefined
+  }, props));
+
+  function getDeleteIcon() {
+    return _IconPrimary || (_IconPrimary = _react.default.createElement(_IconPrimary2.default, {
+      "data-testid": "tag-delete-icon",
+      inherit_color: false,
+      icon: _react.default.createElement("svg", {
+        width: "16",
+        height: "16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, _react.default.createElement("path", {
+        d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
+        className: "dnb-icon-close-circle-path"
+      }), _react.default.createElement("path", {
+        d: "m5.5 10.5 5-5m0 5-5-5",
+        className: "dnb-icon-close-cross-path",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }))
+    }));
+  }
+};
 
+Tag.Group = _TagGroup.default;
 var _default = Tag;
 exports.default = _default;

package/cjs/components/tag/TagContext.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagGroupContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var TagGroupContext = _react.default.createContext(null);
+
+exports.TagGroupContext = TagGroupContext;

package/cjs/components/tag/TagGroup.js

@@ -0,0 +1,123 @@
+"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.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = exports.default = void 0;
+
+require("core-js/modules/es.array.map.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _SpacingHelper = require("../space/SpacingHelper");
+
+var _Context = _interopRequireDefault(require("../../shared/Context"));
+
+var _componentHelper = require("../../shared/component-helper");
+
+var _TagContext = require("./TagContext");
+
+var _excluded = ["label", "className", "children"];
+
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+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 = {
+  label: null,
+  className: null,
+  children: null
+};
+exports.defaultProps = defaultProps;
+
+function TagGroup(localProps) {
+  var context = _react.default.useContext(_Context.default);
+
+  var _extendPropsWithConte = (0, _componentHelper.extendPropsWithContext)(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.TagGroup),
+      label = _extendPropsWithConte.label,
+      className = _extendPropsWithConte.className,
+      childrenProp = _extendPropsWithConte.children,
+      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+
+  var children = childrenProp;
+
+  if (Array.isArray(childrenProp)) {
+    children = _toConsumableArray(childrenProp).map(function (child) {
+      return child;
+    });
+  }
+
+  var spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
+  return _react.default.createElement(_TagContext.TagGroupContext.Provider, {
+    value: props
+  }, _react.default.createElement("div", _extends({
+    className: (0, _classnames.default)('dnb-tag__group', spacingClasses, className),
+    "data-testid": "tag-group"
+  }, props), _react.default.createElement("span", {
+    "data-testid": "tag-group-label",
+    className: "dnb-sr-only"
+  }, label), children));
+}
+
+var _default = TagGroup;
+exports.default = _default;