@dnb/eufemia 9.18.0 → 9.19.0

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

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

package/esm/components/info-card/style/index.js

@@ -0,0 +1 @@
+import "./dnb-info-card.min.css";

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

@@ -0,0 +1 @@
+import "./style/dnb-info-card.min.css";

package/esm/components/input/Input.d.ts

@@ -43,7 +43,8 @@ export type InputSubmitButtonVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type InputSubmitButtonIcon =
   | string
   | React.ReactNode

package/esm/components/lib.js

@@ -1,6 +1,7 @@
 import { registerElement } from '../shared/component-helper';
 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';
@@ -16,6 +17,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';
@@ -33,13 +35,15 @@ 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, Tag, 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 };
 export var getComponents = function getComponents() {
   return {
     Accordion: Accordion,
     Autocomplete: Autocomplete,
+    Avatar: Avatar,
     Breadcrumb: Breadcrumb,
     Button: Button,
     Checkbox: Checkbox,
@@ -55,6 +59,7 @@ export var getComponents = function getComponents() {
     HelpButton: HelpButton,
     Icon: Icon,
     IconPrimary: IconPrimary,
+    InfoCard: InfoCard,
     Input: Input,
     InputMasked: InputMasked,
     Logo: Logo,
@@ -72,6 +77,7 @@ export var getComponents = function getComponents() {
     Tabs: Tabs,
     Tag: Tag,
     Textarea: Textarea,
+    Timeline: Timeline,
     ToggleButton: ToggleButton,
     Tooltip: Tooltip
   };

package/esm/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/esm/components/pagination/Pagination.js

@@ -282,6 +282,13 @@ Pagination.Bar = PaginationBar;
 Pagination.Content = PaginationContent;
 var PaginationWrapper = Pagination;
 var InfinityMarkerWrapper = InfinityMarker;
+export var Bar = function Bar(props) {
+  return React.createElement(Pagination, _extends({
+    fallback_element: function fallback_element() {
+      return null;
+    }
+  }, props));
+};
 export var createPagination = function createPagination() {
   var initProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var store = React.createRef({});

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/tag/Tag.js

@@ -8,7 +8,10 @@ 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 = ["className", "skeleton", "children", "icon", "text"];
+
+var _IconPrimary;
+
+var _excluded = ["className", "skeleton", "children", "text", "onClick", "onDelete", "omitOnKeyUpDeleteEvent"];
 
 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; }
 
@@ -16,48 +19,104 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import classnames from 'classnames';
-import { createSkeletonClass } from '../skeleton/SkeletonHelper';
-import { createSpacingClasses } from '../space/SpacingHelper';
-import Icon from '../icon-primary/IconPrimary';
+import IconPrimary from '../icon-primary/IconPrimary';
+import Button from '../button/Button';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
+import { warn, extendPropsWithContext } from '../../shared/component-helper';
+import TagGroup from './TagGroup';
+import { TagGroupContext } from './TagContext';
 export var defaultProps = {
   className: null,
   skeleton: false,
   text: null,
   children: null,
-  icon: null
+  icon: null,
+  onClick: null,
+  onDelete: null,
+  omitOnKeyUpDeleteEvent: false
 };
 
-function Tag(localProps) {
+var Tag = function Tag(localProps) {
   var _context$translation;
 
   var context = React.useContext(Context);
+  var tagGroupContext = React.useContext(TagGroupContext);
 
-  var _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag),
+  var _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.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 = createSkeletonClass('shape', skeleton, context);
-  var spacingClasses = createSpacingClasses(props);
   var content = text || children;
-  return React.createElement("div", _extends({
-    className: classnames('dnb-tag', skeletonClasses, spacingClasses, className),
-    "data-testid": "tag"
-  }, props), icon && React.createElement("span", {
-    "data-testid": "tag-icon",
-    className: "dnb-tag__icon"
-  }, React.createElement(Icon, {
-    icon: icon,
-    right: "x-small"
-  })), content && React.createElement("span", {
-    "data-testid": "tag-text",
-    className: "dnb-tag__text"
-  }, content));
-}
+  var isClickable = !!onClick;
+  var isRemovable = !!onDelete && !isClickable;
+  var isInteractive = isClickable || isRemovable;
+  var tagClassNames = classnames('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) {
+    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.createElement(Button, _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.createElement(IconPrimary, {
+      "data-testid": "tag-delete-icon",
+      inherit_color: false,
+      icon: React.createElement("svg", {
+        width: "16",
+        height: "16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, React.createElement("path", {
+        d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
+        className: "dnb-icon-close-circle-path"
+      }), React.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;
 export default Tag;