@dnb/eufemia 9.17.2 → 9.18.0

package/es/components/tag/Tag.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import classnames from 'classnames'
+
+// Components
+import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+import { createSpacingClasses } from '../space/SpacingHelper'
+import Icon, { IconPrimaryIcon } from '../icon-primary/IconPrimary'
+
+// Shared
+import Context from '../../shared/Context'
+import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
+import { extendPropsWithContext } from '../../shared/component-helper'
+
+export interface TagProps {
+  /**
+   * The content of the tag element, can be a string or a React Element.
+   * Default: null
+   */
+  text?: React.ReactNode
+
+  /**
+   * Icon displaying on the left side
+   * Default: null
+   */
+  icon?: IconPrimaryIcon
+
+  /**
+   * Custom className on the component root
+   * Default: null
+   */
+  className?: string
+
+  /**
+   * Skeleton should be applied when loading content
+   * Default: null
+   */
+  skeleton?: SkeletonTypes
+
+  /**
+   * The content of the tag element, can be a string or a React Element. Will be overwritten by text prop
+   * Default: null
+   */
+  children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...
+}
+
+export const defaultProps = {
+  className: null,
+  skeleton: false,
+  text: null,
+  children: null,
+  icon: null,
+}
+
+function Tag(localProps: TagProps & ISpacingProps) {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  // Extract additional props from global context
+  const { className, skeleton, children, icon, text, ...props } =
+    extendPropsWithContext(
+      { ...defaultProps, ...localProps },
+      defaultProps,
+      context?.translation?.Tag,
+      context?.Tag
+    )
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context)
+  const spacingClasses = createSpacingClasses(props)
+
+  const content = text || children
+
+  return (
+    <div
+      className={classnames(
+        'dnb-tag',
+        skeletonClasses,
+        spacingClasses,
+        className
+      )}
+      data-testid="tag"
+      {...props}
+    >
+      {icon && (
+        <span data-testid="tag-icon" className="dnb-tag__icon">
+          <Icon icon={icon} right="x-small" />
+        </span>
+      )}
+      {content && (
+        <span data-testid="tag-text" className="dnb-tag__text">
+          {content}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default Tag

package/es/components/tag/index.d.ts

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

package/es/components/tag/index.js

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

package/es/components/tag/style/_tag.scss

@@ -0,0 +1,26 @@
+/*
+* Tag component
+*
+*/
+
+:root {
+  --tag-border-radius: 2.5rem;
+}
+
+.dnb-tag {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-xx-small) var(--spacing-x-small);
+  font-size: var(--font-size-x-small);
+  background-color: var(--color-black-8);
+  border-radius: var(--tag-border-radius);
+  &__icon {
+    display: flex;
+    align-items: center;
+  }
+  &__text {
+    color: var(--color-black-80);
+  }
+}

package/es/components/tag/style/dnb-tag.css

@@ -0,0 +1,109 @@
+/*
+* DNB Tag
+*
+*/
+/**
+ * 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-tag {
+  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-tag *,
+  .dnb-tag ::before,
+  .dnb-tag ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-tag ::before,
+  .dnb-tag ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Tag component
+*
+*/
+:root {
+  --tag-border-radius: 2.5rem; }
+
+.dnb-tag {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0.25rem 0.5rem;
+  padding: var(--spacing-xx-small) var(--spacing-x-small);
+  font-size: 0.875rem;
+  font-size: var(--font-size-x-small);
+  background-color: #ebebeb;
+  background-color: var(--color-black-8);
+  border-radius: 2.5rem;
+  border-radius: var(--tag-border-radius); }
+  .dnb-tag__icon {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  .dnb-tag__text {
+    color: #333;
+    color: var(--color-black-80); }

package/es/components/tag/style/dnb-tag.min.css

@@ -0,0 +1 @@
+.dnb-tag{-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-tag *,.dnb-tag :after,.dnb-tag :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tag :after,.dnb-tag :before{text-decoration:inherit;vertical-align:inherit}:root{--tag-border-radius:2.5rem}.dnb-tag{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;background-color:#ebebeb;background-color:var(--color-black-8);border-radius:2.5rem;border-radius:var(--tag-border-radius);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;font-size:.875rem;font-size:var(--font-size-x-small);justify-content:center;padding:.25rem .5rem;padding:var(--spacing-xx-small) var(--spacing-x-small)}.dnb-tag,.dnb-tag__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.dnb-tag__icon{display:-webkit-box;display:-ms-flexbox;display:flex}.dnb-tag__text{color:#333;color:var(--color-black-80)}

package/es/components/tag/style/dnb-tag.scss

@@ -0,0 +1,12 @@
+/*
+* DNB Tag
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+.dnb-tag {
+  @include componentReset();
+}
+
+@import './_tag.scss';

package/es/components/tag/style/index.d.ts

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

package/es/components/tag/style/index.js

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

package/es/components/tag/style.js

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

package/es/components/textarea/Textarea.d.ts

@@ -96,7 +96,7 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
   textarea_state?: string;
 
   /**
-   * 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;
 
@@ -154,7 +154,7 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
   textarea_class?: string;
 
   /**
-   * Provide the Textarea element with any attributes by using an Object `textarea_attributes={{size:&#39;2&#39;}}` or a JSON Object `textarea_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be send along and set as a Textarea element attribute.
+   * Provide the Textarea element with any attributes by using an Object `textarea_attributes={{size:&#39;2&#39;}}` or a JSON Object `textarea_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as a Textarea element attribute.
    */
   textarea_attributes?: TextareaTextareaAttributes;
   readOnly?: TextareaReadOnly;
@@ -162,7 +162,7 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
   cols?: TextareaCols;
 
   /**
-   * By providing a React.ref we can get the internal used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
+   * By providing a React.ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   inner_ref?: TextareaInnerRef;
 
@@ -202,7 +202,7 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
   on_change?: (...args: any[]) => any;
 
   /**
-   * Will be called on focus set by the user. Returns `{ value, event }`.
+   * Will be called on the focus set by the user. Returns `{ value, event }`.
    */
   on_focus?: (...args: any[]) => any;
 

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

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

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

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

package/es/components/tooltip/Tooltip.d.ts

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

package/es/components/tooltip/TooltipContainer.d.ts

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

package/es/components/tooltip/TooltipPortal.d.ts

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

package/es/components/tooltip/TooltipWithEvents.d.ts

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

package/es/fragments/scroll-view/ScrollView.js

@@ -8,17 +8,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { extendPropsWithContext, registerElement, validateDOMAttributes, processChildren } from '../../shared/component-helper';
+import { validateDOMAttributes, processChildren, extendPropsWithContext } from '../../shared/component-helper';
 import Context from '../../shared/Context';
-import { spacingPropTypes, createSpacingClasses } from '../../components/space/SpacingHelper';
+import { createSpacingClasses } from '../../components/space/SpacingHelper';
 
 class ScrollView extends React.PureComponent {
-  static enableWebComponent() {
-    registerElement(ScrollView.tagName, ScrollView, ScrollView.defaultProps);
-  }
-
   static getContent(props) {
     if (props.text) return props.text;
     return processChildren(props);
@@ -26,6 +21,9 @@ class ScrollView extends React.PureComponent {
 
   constructor(props) {
     super(props);
+
+    _defineProperty(this, "ref", void 0);
+
     this.ref = props.innerRef || React.createRef();
   }
 
@@ -33,9 +31,9 @@ class ScrollView extends React.PureComponent {
     const props = extendPropsWithContext(this.props, ScrollView.defaultProps, this.context.FormRow, this.context.ScrollView);
 
     const {
-      className,
+      className = null,
       class: _className,
-      innerRef
+      innerRef = null
     } = props,
           attributes = _objectWithoutProperties(props, _excluded);
 
@@ -64,12 +62,6 @@ _defineProperty(ScrollView, "defaultProps", {
   class: null
 });
 
-process.env.NODE_ENV !== "production" ? ScrollView.propTypes = _objectSpread(_objectSpread({}, spacingPropTypes), {}, {
-  className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
-  innerRef: PropTypes.object,
-  class: PropTypes.string
-}) : void 0;
 export default React.forwardRef(function ScrollViewRef(props, ref) {
   return React.createElement(ScrollView, _extends({
     innerRef: ref

package/es/fragments/scroll-view/ScrollView.tsx

@@ -0,0 +1,92 @@
+/**
+ * Web ScrollView Component
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import {
+  validateDOMAttributes,
+  processChildren,
+  extendPropsWithContext,
+} from '../../shared/component-helper'
+import Context from '../../shared/Context'
+import { createSpacingClasses } from '../../components/space/SpacingHelper'
+import { ISpacingProps } from '../../shared/interfaces'
+
+interface ScrollViewProps extends ISpacingProps {
+  className: string
+  children: string | React.ReactNode | ((...args: any[]) => any)
+  innerRef: any
+  class: string
+  // All other props
+  [x: string]: any
+}
+
+class ScrollView extends React.PureComponent<ScrollViewProps> {
+  static tagName = 'dnb-scroll-view'
+  static contextType = Context
+  ref: any
+
+  static getContent(props) {
+    if (props.text) return props.text
+    return processChildren(props)
+  }
+
+  static defaultProps = {
+    className: null,
+    children: null,
+    innerRef: null,
+
+    class: null,
+  }
+
+  constructor(props) {
+    super(props)
+    this.ref = props.innerRef || React.createRef()
+  }
+
+  render() {
+    // use only the props from context, who are available here anyway
+    const props = extendPropsWithContext(
+      this.props,
+      ScrollView.defaultProps,
+      this.context.FormRow,
+      this.context.ScrollView
+    )
+
+    const {
+      className = null,
+      class: _className,
+      innerRef = null, // eslint-disable-line
+      ...attributes
+    } = props
+
+    const contentToRender = ScrollView.getContent(props)
+
+    const mainParams = {
+      className: classnames(
+        'dnb-scroll-view',
+        createSpacingClasses(props),
+        _className,
+        className
+      ),
+      ...attributes,
+    }
+
+    validateDOMAttributes(this.props, mainParams)
+
+    return (
+      <div {...mainParams} ref={this.ref}>
+        {contentToRender}
+      </div>
+    )
+  }
+}
+
+export default React.forwardRef(function ScrollViewRef(
+  props: ScrollViewProps,
+  ref
+) {
+  return <ScrollView innerRef={ref} {...props} />
+})

package/es/index.d.ts

@@ -42,6 +42,7 @@ import Space from './components/space/Space'
 import StepIndicator from './components/step-indicator/StepIndicator'
 import Switch from './components/switch/Switch'
 import Tabs from './components/tabs/Tabs'
+import Tag from './components/tag/Tag'
 import Textarea from './components/textarea/Textarea'
 import ToggleButton from './components/toggle-button/ToggleButton'
 import Tooltip from './components/tooltip/Tooltip'
@@ -109,6 +110,7 @@ export {
   StepIndicator,
   Switch,
   Tabs,
+  Tag,
   Textarea,
   ToggleButton,
   Tooltip,

package/es/index.js

@@ -30,6 +30,7 @@ import Space from './components/space/Space';
 import StepIndicator from './components/step-indicator/StepIndicator';
 import Switch from './components/switch/Switch';
 import Tabs from './components/tabs/Tabs';
+import Tag from './components/tag/Tag';
 import Textarea from './components/textarea/Textarea';
 import ToggleButton from './components/toggle-button/ToggleButton';
 import Tooltip from './components/tooltip/Tooltip';
@@ -62,5 +63,5 @@ import Td from './elements/Td';
 import Th from './elements/Th';
 import Tr from './elements/Tr';
 import Ul from './elements/Ul';
-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, Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Table, Td, Th, Tr, Ul };
+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, Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Table, Td, Th, Tr, Ul };
 export default {};

package/es/shared/Context.js

@@ -44,7 +44,8 @@ export const prepareContext = (props = {}) => {
   }, props), {}, {
     translation,
     Breadcrumb: {},
-    BreadcrumbItem: {}
+    BreadcrumbItem: {},
+    Tag: {}
   });
 
   return context;