@dnb/eufemia 9.17.2 → 9.18.0

package/es/components/autocomplete/Autocomplete.d.ts

@@ -224,12 +224,12 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   mode?: AutocompleteMode;
 
   /**
-   * Give a title to let the user know what they has to do. Defaults to `Skriv og få alternativer&#39;` .
+   * Give a title to let the user know what theyhaves to do. Defaults to `Skriv og få alternativer&#39;` .
    */
   title?: AutocompleteTitle;
 
   /**
-   * Use this to define the pre filled placeholder text in the input. Defaults to `title="Skriv og velg"`.
+   * Use this to define the pre-filled placeholder text in the input. Defaults to `title="Skriv og velg"`.
    */
   placeholder?: AutocompletePlaceholder;
 
@@ -254,7 +254,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   indicator_label?: AutocompleteIndicatorLabel;
 
   /**
-   * Only for screen readers. Title of the button in order to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.
+   * Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.
    */
   show_options_sr?: string;
 
@@ -284,7 +284,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   icon_size?: string;
 
   /**
-   * Position of icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.
+   * Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.
    */
   icon_position?: AutocompleteIconPosition;
 
@@ -314,7 +314,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   label_sr_only?: AutocompleteLabelSrOnly;
 
   /**
-   * Use `true` to not remove the typed value on input blur, if it is invalid. By default the typed value will disappear / replaced by a selected value from the data list during the input field blur.
+   * Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur.
    */
   keep_value?: AutocompleteKeepValue;
 
@@ -324,7 +324,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   keep_value_and_selection?: AutocompleteKeepValueAndSelection;
 
   /**
-   * If set to `true`, a clear button is showed inside the input field. Defaults to `false`.
+   * If set to `true`, a clear button is shown inside the input field. Defaults to `false`.
    */
   show_clear_button?: AutocompleteShowClearButton;
 
@@ -334,7 +334,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   status?: AutocompleteStatus;
 
   /**
-   * 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;
 
@@ -375,7 +375,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   focusable?: AutocompleteFocusable;
 
   /**
-   * If set to `true`, word highlighting will disabled, but the options will still get filtered. Defaults to `false`.
+   * If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`.
    */
   disable_highlighting?: AutocompleteDisableHighlighting;
 
@@ -410,7 +410,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   show_submit_button?: AutocompleteShowSubmitButton;
 
   /**
-   * Replace the drop down / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.
+   * Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.
    */
   submit_element?: React.ReactNode;
 
@@ -440,7 +440,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   input_element?: AutocompleteInputElement;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If You don&#39;t have to define a `value`, You can also send in a `function` which will be called once the user opens the DrawerList.
+   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   data?: AutocompleteData;
 
@@ -455,7 +455,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   search_numbers?: AutocompleteSearchNumbers;
 
   /**
-   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice . Defaults to `null`.
+   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice. Defaults to `null`.
    */
   default_value?: AutocompleteDefaultValue;
 
@@ -470,7 +470,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   input_value?: string;
 
   /**
-   * Use `true` to auto open the list once the users is entering the input field with the keyboard.
+   * Use `true` to auto open the list once the user is entering the input field with the keyboard.
    */
   open_on_focus?: AutocompleteOpenOnFocus;
 
@@ -513,7 +513,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If You don&#39;t have to define a `value`, You can also send in a `function` which will be called once the user opens the DrawerList.
+   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   children?: AutocompleteChildren;
   custom_element?: Object;

package/es/components/button/Button.d.ts

@@ -22,7 +22,7 @@ export type ButtonStatus =
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type ButtonStatusNoAnimation = string | boolean;
-export type ButtonTo = string | Object | ((...args: any[]) => any);
+export type ButtonTo = string | any | ((...args: any[]) => any);
 export type ButtonWrap = string | boolean;
 export type ButtonBounding = string | boolean;
 export type ButtonStretch = string | boolean;
@@ -34,7 +34,7 @@ export type ButtonChildren =
   | React.ReactNode;
 export type ButtonElement =
   | ((...args: any[]) => any)
-  | Object
+  | any
   | React.ReactNode;
 export type ButtonSpace =
   | string
@@ -66,10 +66,10 @@ export type ButtonRight = string | number | boolean;
 export type ButtonBottom = string | number | boolean;
 export type ButtonLeft = string | number | boolean;
 export type ButtonOnClick = string | ((...args: any[]) => any);
-
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
+
 export interface ButtonProps extends React.HTMLProps<HTMLElement> {
   /**
    * The content of the button can be a string or a React Element.
@@ -129,7 +129,7 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
   /**
    * Use an object to define additional FormStatus properties.
    */
-  status_props?: Object;
+  status_props?: any;
   status_no_animation?: ButtonStatusNoAnimation;
 
   /**
@@ -178,9 +178,9 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
    */
   skeleton?: ButtonSkeleton;
   disabled?: ButtonDisabled;
-  inner_ref?: Object;
+  inner_ref?: any;
   className?: string;
-  innerRef?: Object;
+  innerRef?: any;
 
   /**
    * The content of the button can be a string or a React Element.
@@ -216,7 +216,7 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
    * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
    */
   left?: ButtonLeft;
-  custom_element?: Object;
+  custom_element?: any;
   custom_method?: (...args: any[]) => any;
 
   /**

package/es/components/button/Button.js

@@ -157,14 +157,16 @@ export default class Button extends React.PureComponent {
 
     const classes = classnames(`dnb-button dnb-button--${usedVariant || 'primary'}`, (text || content || custom_content) && 'dnb-button--has-text', createSkeletonClass(variant === 'tertiary' ? 'font' : 'shape', skeleton, this.context), createSpacingClasses(props), class_name, className, (props.href || props.to) && '', icon && `dnb-button--icon-position-${icon_position} dnb-button--has-icon` + (iconSize ? ` dnb-button--icon-size-${iconSize}` : ""), usedSize && usedSize !== 'default' && `dnb-button--size-${usedSize}`, isTrue(stretch) && 'dnb-button--stretch', wrap && 'dnb-button--wrap', status && `dnb-button__status--${status_state}`);
 
-    const params = _objectSpread(_objectSpread({
+    const params = _objectSpread({
       className: classes,
       title,
       id: this._id,
       disabled: isTrue(disabled)
-    }, attributes), {}, {
-      onClick: this.onClickHandler
-    });
+    }, attributes);
+
+    if (this.props.on_click || this.props.onClick) {
+      params.onClick = this.onClickHandler;
+    }
 
     if (Element !== Anchor && !params.type) {
       params.type = params.type === '' ? undefined : 'button';

package/es/components/checkbox/Checkbox.d.ts

@@ -57,7 +57,7 @@ export type CheckboxChildren = string | ((...args: any[]) => any);
  */
 export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: CheckboxLabel;
 
@@ -74,7 +74,7 @@ export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   default_state?: CheckboxDefaultState;
 
   /**
-   * Determine whether the checkbox is checked or not. Default will be `false`.
+   * Determine whether the checkbox is checked or not. The default is `false`.
    */
   checked?: CheckboxChecked;
   disabled?: CheckboxDisabled;
@@ -91,7 +91,7 @@ export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   status?: CheckboxStatus;
 
   /**
-   * 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;
 

package/es/components/date-picker/DatePicker.d.ts

@@ -91,32 +91,32 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   title?: string;
 
   /**
-   * Defines the pre filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`.
+   * Defines the pre-filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`.
    */
   date?: DatePickerDate;
 
   /**
-   * To set the pre filled starting date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
+   * To set the pre-filled starting date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
    */
   start_date?: DatePickerStartDate;
 
   /**
-   * To set the pre filled ending date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
+   * To set the pre-filled ending date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
    */
   end_date?: DatePickerEndDate;
 
   /**
-   * To display what month should be shows in the first calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
    */
   month?: DatePickerMonth;
 
   /**
-   * To display what month should be shows in the first calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
    */
   start_month?: DatePickerStartMonth;
 
   /**
-   * To display what month should be shows in the second calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the second calendar by default. Defaults to the `date` respective `start_date`.
    */
   end_month?: DatePickerEndMonth;
 
@@ -168,7 +168,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   only_month?: DatePickerOnlyMonth;
 
   /**
-   * Use `true` to only show the last week in the current month, if it needs to be shows. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`.
+   * Use `true` to only show the last week in the current month if it needs to be shown. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`.
    */
   hide_last_week?: DatePickerHideLastWeek;
 
@@ -184,12 +184,12 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   show_input?: DatePickerShowInput;
 
   /**
-   * If set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is show by.
+   * If set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is shown.
    */
   show_submit_button?: DatePickerShowSubmitButton;
 
   /**
-   * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is show by.
+   * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is shown.
    */
   show_cancel_button?: DatePickerShowCancelButton;
 
@@ -218,12 +218,12 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   range?: DatePickerRange;
 
   /**
-   * Link both calendars, once to user is navigating between months. Only meant to use if range is set to true. Defaults to `false`.
+   * Link both calendars, once to the user is navigating between months. Only meant to use if the range is set to true. Defaults to `false`.
    */
   link?: DatePickerLink;
 
   /**
-   * Sync input values with the calendars views. Once the input values getting changed, the calendar changes its views in sync. Defaults to `true`.
+   * Sync input values with the calendars views. Once the input values get changed, the calendar changes its views in sync. Defaults to `true`.
    */
   sync?: DatePickerSync;
 
@@ -253,7 +253,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   addon_element?: DatePickerAddonElement;
 
   /**
-   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info below.
+   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.
    */
   shortcuts?: DatePickerShortcuts;
   disabled?: DatePickerDisabled;
@@ -274,7 +274,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   status?: DatePickerStatus;
 
   /**
-   * 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;
 
@@ -337,7 +337,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called right before every new calendar view gets rendered. Se example above.
+   * Will be called right before every new calendar view gets rendered. See the example above.
    */
   on_days_render?: (...args: any[]) => any;
 

package/es/components/date-picker/DatePickerAddon.d.ts

@@ -10,7 +10,7 @@ export type DatePickerAddonRenderElement =
 export interface DatePickerAddonProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info below.
+   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.
    */
   shortcuts?: DatePickerAddonShortcuts;
   renderElement?: DatePickerAddonRenderElement;

package/es/components/date-picker/DatePickerCalendar.d.ts

@@ -9,7 +9,7 @@ export interface DatePickerCalendarProps
   nr?: number;
 
   /**
-   * To display what month should be shows in the first calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
    */
   month?: Date;
   prevBtn?: boolean;

package/es/components/date-picker/DatePickerInput.d.ts

@@ -29,7 +29,7 @@ export interface DatePickerInputProps
   status?: DatePickerInputStatus;
 
   /**
-   * 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;
 

package/es/components/dropdown/Dropdown.d.ts

@@ -200,12 +200,12 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Give a title to let the user know what they has to do. Defaults to `Valgmeny` .
+   * Give a title to let the users know what they have to do. Defaults to `Valgmeny`.
    */
   title?: DropdownTitle;
 
   /**
-   * Defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary` .
+   * Defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`.
    */
   variant?: DropdownVariant;
 
@@ -220,7 +220,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   icon_size?: string;
 
   /**
-   * Position of icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.
+   * Position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.
    */
   icon_position?: DropdownIconPosition;
 
@@ -250,7 +250,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   status?: DropdownStatus;
 
   /**
-   * 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;
 
@@ -346,12 +346,12 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   trigger_element?: DropdownTriggerElement;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If You don&#39;t have to define a `value`, You can also send in a `function` which will be called once the user opens the DrawerList.
+   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   data?: DropdownData;
 
   /**
-   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice . Defaults to `null`.
+   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice. Defaults to `null`.
    */
   default_value?: DropdownDefaultValue;
 
@@ -361,7 +361,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   value?: DropdownValue;
 
   /**
-   * If set to `true`, the Dropdown will be opened when the users enters the trigger button with a focus action.
+   * If set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action.
    */
   open_on_focus?: DropdownOpenOnFocus;
 
@@ -394,7 +394,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If You don&#39;t have to define a `value`, You can also send in a `function` which will be called once the user opens the DrawerList.
+   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   children?: DropdownChildren;
   custom_element?: Object;
@@ -416,7 +416,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   on_change?: (...args: any[]) => any;
 
   /**
-   * Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation
+   * Will be called once the user selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation
    */
   on_select?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

package/es/components/form-row/FormRow.d.ts

@@ -57,7 +57,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: FormRowLabel;
 
@@ -73,7 +73,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   label_id?: string;
 
   /**
-   * If You need to style the "legend", then You can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
+   * If you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
    */
   label_class?: string;
   no_label?: FormRowNoLabel;
@@ -94,7 +94,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   indent?: FormRowIndent;
 
   /**
-   * Forces the content of a FormRow to wrap. Make sure You always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
+   * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
    */
   wrap?: FormRowWrap;
 
@@ -109,7 +109,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   vertical?: FormRowVertical;
 
   /**
-   * Will center all children vertically as long as the screen not hits a mobile width.
+   * Will center all children vertically as long as the screen does not hit a mobile width.
    */
   centered?: FormRowCentered;
 

package/es/components/form-set/FormSet.d.ts

@@ -83,7 +83,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: FormSetLabel;
 
@@ -99,7 +99,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   label_id?: string;
 
   /**
-   * If You need to style the "legend", then You can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
+   * If you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
    */
   label_class?: string;
   no_label?: FormSetNoLabel;
@@ -120,7 +120,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   indent?: FormSetIndent;
 
   /**
-   * Forces the content of a FormRow to wrap. Make sure You always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
+   * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
    */
   wrap?: FormSetWrap;
 
@@ -135,7 +135,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   vertical?: FormSetVertical;
 
   /**
-   * Will center all children vertically as long as the screen not hits a mobile width.
+   * Will center all children vertically as long as the screen does not hit a mobile width.
    */
   centered?: FormSetCentered;
 
@@ -190,7 +190,7 @@ export interface FormSetProps extends React.HTMLProps<HTMLElement> {
   children?: FormSetChildren;
 
   /**
-   * Will be called on submit. Returns an object with the a native event: `{ event }`
+   * Will be called on submit. Returns an object with a native event: `{ event }`
    */
   on_submit?: (...args: any[]) => any;
   custom_element?: Object;

package/es/components/global-error/GlobalError.d.ts

@@ -27,7 +27,7 @@ export type GlobalErrorChildren =
  */
 export interface GlobalErrorProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Status code define the view showing up.
+   * Status code defines the view showing up.
    */
   status?: string;
 

package/es/components/global-status/GlobalStatus.d.ts

@@ -70,17 +70,17 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   default_title?: string;
 
   /**
-   * The text appears as the status content. Beside plain text, You can send in a React component as well. Defaults to `null`.
+   * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
    */
   text?: GlobalStatusText;
 
   /**
-   * The items (list items) appears as a part of the status content. You can both use an JSON array, or a vanilla array with a string or an object content. Se "Item Object" example below.
+   * The items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. Se "Item Object" example below.
    */
   items?: GlobalStatusItems;
 
   /**
-   * The icon show before the status title. Defaults to `exclamation`.
+   * The icon shown before the status title. Defaults to `exclamation`.
    */
   icon?: GlobalStatusIcon;
 
@@ -115,7 +115,7 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   no_animation?: GlobalStatusNoAnimation;
 
   /**
-   * Defines the delay on how long the automated visibility should wait, before it appears to the user. Defaults to `200ms`.
+   * Defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`.
    */
   delay?: GlobalStatusDelay;
 
@@ -169,7 +169,7 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The text appears as the status content. Beside plain text, You can send in a React component as well. Defaults to `null`.
+   * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`.
    */
   children?: GlobalStatusChildren;
 

package/es/components/heading/Heading.d.ts

@@ -58,7 +58,7 @@ export interface HeadingProps extends React.HTMLProps<HTMLElement> {
   group?: string;
 
   /**
-   * A heading, can be text or a another component.
+   * A heading, can be text or React.Node.
    */
   text?: HeadingText;
 
@@ -144,7 +144,7 @@ export interface HeadingProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * A heading, can be text or a another component.
+   * A heading, can be text or React.Node.
    */
   children?: HeadingChildren;
 }

package/es/components/heading/HeadingProvider.d.ts

@@ -40,12 +40,12 @@ export interface HeadingProviderProps
   reset?: HeadingProviderReset;
 
   /**
-   * A heading, can be text or a another component.
+   * A heading, can be text or React.Node.
    */
   text?: any;
 
   /**
-   * A heading, can be text or a another component.
+   * A heading, can be text or React.Node.
    */
   children?: any;
 }

package/es/components/icon/Icon.d.ts

@@ -56,7 +56,7 @@ export interface IconProps extends React.HTMLProps<HTMLElement> {
   modifier?: string;
 
   /**
-   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the mother HTML element, if it provides a `font-size`.
+   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`.
    */
   size?: IconSize;
 

package/es/components/icon-primary/IconPrimary.d.ts

@@ -65,7 +65,7 @@ export interface IconPrimaryProps extends React.HTMLProps<HTMLElement> {
   modifier?: string;
 
   /**
-   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the mother HTML element, if it provides a `font-size`.
+   * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`.
    */
   size?: IconPrimarySize;
 

package/es/components/index.d.ts

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

package/es/components/index.js

@@ -30,7 +30,8 @@ import Space from './space/Space';
 import StepIndicator from './step-indicator/StepIndicator';
 import Switch from './switch/Switch';
 import Tabs from './tabs/Tabs';
+import Tag from './tag/Tag';
 import Textarea from './textarea/Textarea';
 import 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, Textarea, ToggleButton, 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 };