@dnb/eufemia 9.17.2 → 9.18.0

package/esm/components/pagination/Pagination.d.ts

@@ -83,12 +83,12 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   debug?: boolean;
 
   /**
-   * The page show in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
+   * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
   startup_page?: PaginationStartupPage;
 
   /**
-   * The page show in the moment the component renders. Defaults to `1`.
+   * The page shown at the moment the component renders. Defaults to `1`.
    */
   current_page?: PaginationCurrentPage;
 
@@ -98,17 +98,17 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   page_count?: PaginationPageCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show on the first render. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`.
    */
   startup_count?: PaginationStartupCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show once the users scrolls down. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`.
    */
   parallel_load_count?: PaginationParallelLoadCount;
 
   /**
-   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effect. But it depends really on the content, if this would make more sense to use instead. Defaults to `false`.
+   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`.
    */
   place_maker_before_content?: PaginationPlaceMakerBeforeContent;
 
@@ -164,7 +164,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   end_infinity_handler?: PaginationEndInfinityHandler;
 
   /**
-   * By default a `<div>` is used. Set it to what ever element you have to use. Adds also a class: `dnb-pagination__page` shown.
+   * By default a `<div>` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown.
    */
   page_element?: PaginationPageElement;
 
@@ -184,7 +184,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   indicator_element?: PaginationIndicatorElement;
 
   /**
-   * Define the aligned of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
+   * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
    */
   align?: string;
 
@@ -251,17 +251,17 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   children?: PaginationChildren;
 
   /**
-   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. Se below for more details.
+   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_change?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. Se below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
+   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
    */
   on_startup?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. Se below for more details.
+   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_load?: (...args: any[]) => any;
 
@@ -361,12 +361,12 @@ export interface PaginationInstanceProps {
   debug?: boolean;
 
   /**
-   * The page show in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
+   * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
   startup_page?: PaginationInstanceStartupPage;
 
   /**
-   * The page show in the moment the component renders. Defaults to `1`.
+   * The page shown at the moment the component renders. Defaults to `1`.
    */
   current_page?: PaginationInstanceCurrentPage;
 
@@ -376,17 +376,17 @@ export interface PaginationInstanceProps {
   page_count?: PaginationInstancePageCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show on the first render. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`.
    */
   startup_count?: PaginationInstanceStartupCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show once the users scrolls down. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`.
    */
   parallel_load_count?: PaginationInstanceParallelLoadCount;
 
   /**
-   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effect. But it depends really on the content, if this would make more sense to use instead. Defaults to `false`.
+   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`.
    */
   place_maker_before_content?: PaginationInstancePlaceMakerBeforeContent;
 
@@ -442,7 +442,7 @@ export interface PaginationInstanceProps {
   end_infinity_handler?: PaginationInstanceEndInfinityHandler;
 
   /**
-   * By default a `<div>` is used. Set it to what ever element you have to use. Adds also a class: `dnb-pagination__page` shown.
+   * By default a `<div>` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown.
    */
   page_element?: PaginationInstancePageElement;
 
@@ -462,7 +462,7 @@ export interface PaginationInstanceProps {
   indicator_element?: PaginationInstanceIndicatorElement;
 
   /**
-   * Define the aligned of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
+   * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
    */
   align?: string;
 
@@ -529,17 +529,17 @@ export interface PaginationInstanceProps {
   children?: PaginationInstanceChildren;
 
   /**
-   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. Se below for more details.
+   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_change?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. Se below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
+   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
    */
   on_startup?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. Se below for more details.
+   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_load?: (...args: any[]) => any;
 
@@ -641,12 +641,12 @@ export interface InfinityMarkerProps {
   debug?: boolean;
 
   /**
-   * The page show in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
+   * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
   startup_page?: InfinityMarkerStartupPage;
 
   /**
-   * The page show in the moment the component renders. Defaults to `1`.
+   * The page shown at the moment the component renders. Defaults to `1`.
    */
   current_page?: InfinityMarkerCurrentPage;
 
@@ -656,17 +656,17 @@ export interface InfinityMarkerProps {
   page_count?: InfinityMarkerPageCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show on the first render. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`.
    */
   startup_count?: InfinityMarkerStartupCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show once the users scrolls down. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`.
    */
   parallel_load_count?: InfinityMarkerParallelLoadCount;
 
   /**
-   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effect. But it depends really on the content, if this would make more sense to use instead. Defaults to `false`.
+   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`.
    */
   place_maker_before_content?: InfinityMarkerPlaceMakerBeforeContent;
 
@@ -722,7 +722,7 @@ export interface InfinityMarkerProps {
   end_infinity_handler?: InfinityMarkerEndInfinityHandler;
 
   /**
-   * By default a `<div>` is used. Set it to what ever element you have to use. Adds also a class: `dnb-pagination__page` shown.
+   * By default a `<div>` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown.
    */
   page_element?: InfinityMarkerPageElement;
 
@@ -742,7 +742,7 @@ export interface InfinityMarkerProps {
   indicator_element?: InfinityMarkerIndicatorElement;
 
   /**
-   * Define the aligned of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
+   * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
    */
   align?: string;
 
@@ -809,17 +809,17 @@ export interface InfinityMarkerProps {
   children?: InfinityMarkerChildren;
 
   /**
-   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. Se below for more details.
+   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_change?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. Se below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
+   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
    */
   on_startup?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. Se below for more details.
+   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_load?: (...args: any[]) => any;
 

package/esm/components/pagination/PaginationProvider.d.ts

@@ -35,12 +35,12 @@ export type PaginationProviderChildren =
 export interface PaginationProviderProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * The page show in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
+   * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
   startup_page?: PaginationProviderStartupPage;
 
   /**
-   * The page show in the moment the component renders. Defaults to `1`.
+   * The page shown at the moment the component renders. Defaults to `1`.
    */
   current_page?: PaginationProviderCurrentPage;
 

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

@@ -43,7 +43,7 @@ export type RadioChildren = string | ((...args: any[]) => any);
  */
 export interface RadioProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: RadioLabel;
   label_sr_only?: RadioLabelSrOnly;
@@ -62,7 +62,7 @@ export interface RadioProps extends React.HTMLProps<HTMLElement> {
   element?: React.ReactNode;
 
   /**
-   * Use a unique group identifier to define the Radio buttons who belongs together.
+   * Use a unique group identifier to define the Radio buttons that belongs together.
    */
   group?: string;
 
@@ -77,7 +77,7 @@ export interface RadioProps extends React.HTMLProps<HTMLElement> {
   status?: RadioStatus;
 
   /**
-   * 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;
 
@@ -112,7 +112,7 @@ export interface RadioProps 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/esm/components/radio/RadioGroup.d.ts

@@ -47,7 +47,7 @@ export type RadioGroupChildren =
  */
 export interface RadioGroupProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: RadioGroupLabel;
   label_direction?: RadioGroupLabelDirection;
@@ -75,7 +75,7 @@ export interface RadioGroupProps extends React.HTMLProps<HTMLElement> {
   status?: RadioGroupStatus;
 
   /**
-   * 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;
 
@@ -110,7 +110,7 @@ export interface RadioGroupProps 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;
 }

package/esm/components/section/Section.d.ts

@@ -52,7 +52,7 @@ export interface SectionProps extends React.HTMLProps<HTMLElement> {
    * Define what HTML element should be used. Defaults to `<section>`.
    */
   element?: string;
-  inner_ref?: Object;
+  inner_ref?: React.RefObject<any>;
 
   /**
    * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
@@ -81,6 +81,8 @@ export interface SectionProps extends React.HTMLProps<HTMLElement> {
   class?: string;
   className?: string;
   children?: SectionChildren;
+
+  [x: string]: any;
 }
 export default class Section extends React.Component<SectionProps, any> {
   static defaultProps: object;

package/esm/components/skeleton/Skeleton.d.ts

@@ -45,7 +45,7 @@ export type SkeletonChildren =
  */
 export interface SkeletonProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use `true` to enable/show the skeleton for ever component used inside. Defaults to `false`.
+   * Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`.
    */
   show?: SkeletonShow;
 
@@ -65,7 +65,7 @@ export interface SkeletonProps extends React.HTMLProps<HTMLElement> {
   figure?: SkeletonFigure;
 
   /**
-   * Set what ever HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div`
+   * Set any HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div`
    */
   element?: React.ReactNode;
 

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

@@ -85,7 +85,7 @@ export interface SliderProps extends React.HTMLProps<HTMLElement> {
   status?: SliderStatus;
 
   /**
-   * 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;
 
@@ -106,17 +106,17 @@ export interface SliderProps extends React.HTMLProps<HTMLElement> {
   suffix?: SliderSuffix;
 
   /**
-   * Give the slider thump button a title for accessibility reason. Defaults to `null`.
+   * Give the slider thump button a title for accessibility reasons. Defaults to `null`.
    */
   thump_title?: string;
 
   /**
-   * Give the add button a title for accessibility reason. Defaults to `+`.
+   * Give the add button a title for accessibility reasons. Defaults to `+`.
    */
   add_title?: string;
 
   /**
-   * Give the subtract button a title for accessibility reason. Defaults to `−`.
+   * Give the subtract button a title for accessibility reasons. Defaults to `−`.
    */
   subtract_title?: string;
 

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

@@ -13,7 +13,7 @@ export type StepIndicatorData =
       status_state?: 'warn' | 'info' | 'error';
 
       /**
-       * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+       * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
        */
       on_click?: (...args: any[]) => any;
       on_render?: (...args: any[]) => any;
@@ -70,7 +70,7 @@ export type StepIndicatorChildren =
  */
 export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
   /**
-   * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * 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;
 
@@ -80,7 +80,7 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
   mode?: StepIndicatorMode;
 
   /**
-   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and example above.
+   * 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;
@@ -91,7 +91,7 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
   status_state?: StepIndicatorStatusState;
 
   /**
-   * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+   * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
    */
   on_click?: (...args: any[]) => any;
   on_render?: (...args: any[]) => any;
@@ -156,7 +156,7 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
   children?: StepIndicatorChildren;
 
   /**
-   * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
+   * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
    */
   on_change?: (...args: any[]) => any;
 }

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

@@ -5,7 +5,7 @@ import * as React from 'react';
  */
 export interface StepIndicatorProviderProps {
   /**
-   * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * 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

@@ -29,13 +29,13 @@ export interface StepIndicatorItemProps
   on_item_render?: (...args: any[]) => any;
 
   /**
-   * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
+   * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
    */
   on_change?: (...args: any[]) => any;
   on_render?: (...args: any[]) => any;
 
   /**
-   * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+   * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
    */
   on_click?: (...args: any[]) => any;
   is_current?: boolean;

package/esm/components/step-indicator/StepIndicatorItem.js

@@ -213,6 +213,7 @@ var StepIndicatorItem = function (_React$PureComponent) {
       if (!buttonParams.onClick) {
         buttonParams.element = 'span';
         buttonParams.type = '';
+        buttonParams.on_click = undefined;
         isInactive = true;
       }
 

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

@@ -13,7 +13,7 @@ export type StepIndicatorSidebarData =
       status_state?: 'warn' | 'info' | 'error';
 
       /**
-       * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+       * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
        */
       on_click?: (...args: any[]) => any;
       on_render?: (...args: any[]) => any;
@@ -29,7 +29,7 @@ export type StepIndicatorSidebarData =
 export interface StepIndicatorSidebarProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * 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;
 
@@ -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 example above.
+   * 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> {
   /**
-   * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * 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

@@ -57,7 +57,7 @@ export type SwitchChildren = string | ((...args: any[]) => any);
  */
 export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: SwitchLabel;
 
@@ -73,7 +73,7 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   default_state?: SwitchDefaultState;
 
   /**
-   * Determine whether the switch is checked or not. Default will be `false`.
+   * Determine whether the switch is checked or not. The default will be `false`.
    */
   checked?: SwitchChecked;
   disabled?: SwitchDisabled;
@@ -90,7 +90,7 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   status?: SwitchStatus;
 
   /**
-   * 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;
 
@@ -149,12 +149,12 @@ export interface SwitchProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`.
+   * Will be called on state changes made by the user. Returns a boolean `{ checked, event }`.
    */
   on_change?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user, but with a delay. This way the users sees the animation, before e.g. an error will be removed. Returns an boolean `{ checked, event }`.
+   * Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean `{ checked, event }`.
    */
   on_change_end?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

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

@@ -81,7 +81,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   content_style?: string;
 
   /**
-   * To modify the `spacing` on to the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
+   * To modify the `spacing` onto the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
    */
   content_spacing?: TabsContentSpacing;
   label?: string;
@@ -107,7 +107,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   tabs_style?: string;
 
   /**
-   * To modify the `spacing` inside the tabs list. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `false`.
+   * To modify the `spacing` inside the tab list. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `false`.
    */
   tabs_spacing?: TabsTabsSpacing;
   use_hash?: TabsUseHash;
@@ -118,7 +118,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   prerender?: TabsPrerender;
 
   /**
-   * If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the users is activating a tab. Defaults to `false`.
+   * If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.
    */
   prevent_rerender?: TabsPreventRerender;
 
@@ -172,7 +172,7 @@ export interface TabsProps extends React.HTMLProps<HTMLElement> {
   on_change?: (...args: any[]) => any;
 
   /**
-   * This event gets triggered once the a users mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.
+   * This event gets triggered once the user&#39;s mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.
    */
   on_mouse_enter?: (...args: any[]) => any;
 

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

@@ -22,7 +22,7 @@ export interface ContentWrapperProps extends React.HTMLProps<HTMLElement> {
   content_style?: string;
 
   /**
-   * To modify the `spacing` on to the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
+   * To modify the `spacing` onto the content wrapper. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `true`.
    */
   content_spacing?: ContentWrapperContentSpacing;
 

package/esm/components/tag/Tag.js

@@ -0,0 +1,63 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "skeleton", "children", "icon", "text"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import classnames from 'classnames';
+import { createSkeletonClass } from '../skeleton/SkeletonHelper';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import Icon from '../icon-primary/IconPrimary';
+import Context from '../../shared/Context';
+import { extendPropsWithContext } from '../../shared/component-helper';
+export var defaultProps = {
+  className: null,
+  skeleton: false,
+  text: null,
+  children: null,
+  icon: null
+};
+
+function Tag(localProps) {
+  var _context$translation;
+
+  var context = React.useContext(Context);
+
+  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),
+      className = _extendPropsWithConte.className,
+      skeleton = _extendPropsWithConte.skeleton,
+      children = _extendPropsWithConte.children,
+      icon = _extendPropsWithConte.icon,
+      text = _extendPropsWithConte.text,
+      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));
+}
+
+export default Tag;