@dnb/eufemia 9.17.2 → 9.21.0

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
+import { SkeletonShow } from '../skeleton/Skeleton';
+import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
 export type ButtonText = string | React.ReactNode;
 export type ButtonVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type ButtonSize = 'default' | 'small' | 'medium' | 'large';
-export type ButtonIcon =
-  | string
-  | React.ReactNode
-  | ((...args: any[]) => any);
+export type ButtonIcon = IconPrimaryIcon;
 export type ButtonIconPosition = 'left' | 'right' | 'top';
 export type ButtonIconSize = string | number;
 export type ButtonTooltip =
@@ -22,11 +22,11 @@ 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;
-export type ButtonSkeleton = string | boolean;
+export type ButtonSkeleton = SkeletonShow;
 export type ButtonDisabled = string | boolean;
 export type ButtonChildren =
   | string
@@ -34,7 +34,7 @@ export type ButtonChildren =
   | React.ReactNode;
 export type ButtonElement =
   | ((...args: any[]) => any)
-  | Object
+  | any
   | React.ReactNode;
 export type ButtonSpace =
   | string
@@ -66,11 +66,15 @@ 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> {
+
+export interface ButtonProps
+  extends Omit<
+    React.HTMLProps<HTMLElement>,
+    'disabled' | 'size' | 'title' | 'wrap'
+  > {
   /**
    * The content of the button can be a string or a React Element.
    */
@@ -87,7 +91,7 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
   title?: React.ReactNode;
 
   /**
-   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`.
+   * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`.
    */
   variant?: ButtonVariant;
 
@@ -129,7 +133,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 +182,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 +220,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

@@ -23,7 +23,7 @@ import FormStatus from '../form-status/FormStatus';
 import Anchor from '../../elements/Anchor';
 import Tooltip from '../tooltip/Tooltip';
 export const buttonVariantPropType = {
-  variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'signal'])
+  variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'signal', 'unstyled'])
 };
 export default class Button extends React.PureComponent {
   static enableWebComponent() {
@@ -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/button/style/themes/dnb-button-theme-ui.scss

@@ -373,4 +373,7 @@
     color: var(--color-black-55);
     background-color: var(--color-black-3);
   }
+
+  // For internal usage only, we have also "unstyled"
+  // &--unstyled {}
 }

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/DatePicker.js

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _AlignmentHelper;
 
 const _excluded = ["hidePicker"],
-      _excluded2 = ["label", "title", "label_direction", "label_sr_only", "only_month", "hide_last_week", "disable_autofocus", "enable_keyboard_nav", "hide_navigation_buttons", "show_input", "range", "first_day", "reset_date", "locale", "link", "sync", "input_element", "addon_element", "shortcuts", "disabled", "stretch", "skeleton", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "mask_order", "mask_placeholder", "align_picker", "hide_navigation", "return_format", "date_format", "hide_days", "month", "date", "start_date", "end_date", "min_date", "max_date", "correct_invalid_date", "opened", "direction", "id", "className", "class", "show_submit_button", "show_cancel_button", "show_reset_button"];
+      _excluded2 = ["label", "title", "label_direction", "label_sr_only", "only_month", "hide_last_week", "disable_autofocus", "enable_keyboard_nav", "hide_navigation_buttons", "show_input", "range", "first_day", "reset_date", "locale", "link", "sync", "input_element", "addon_element", "shortcuts", "disabled", "stretch", "skeleton", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "mask_order", "mask_placeholder", "align_picker", "reset_button_text", "hide_navigation", "return_format", "date_format", "hide_days", "month", "date", "start_date", "end_date", "min_date", "max_date", "correct_invalid_date", "opened", "direction", "id", "className", "class", "show_submit_button", "show_cancel_button", "show_reset_button"];
 
 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; }
 
@@ -252,6 +252,7 @@ export default class DatePicker extends React.PureComponent {
       mask_order,
       mask_placeholder,
       align_picker,
+      reset_button_text,
       hide_navigation: _hide_navigation,
       return_format: _return_format,
       date_format: _date_format,
@@ -398,7 +399,8 @@ export default class DatePicker extends React.PureComponent {
       isRange: isTrue(range),
       onSubmit: this.onSubmitHandler,
       onCancel: this.onCancelHandler,
-      onReset: this.onResetHandler
+      onReset: this.onResetHandler,
+      resetButtonText: reset_button_text
     })))), suffix && React.createElement(Suffix, {
       className: "dnb-date-picker__suffix",
       id: id + '-suffix',

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/DatePickerFooter.d.ts

@@ -9,6 +9,7 @@ export interface DatePickerFooterProps
   onSubmit?: (...args: any[]) => any;
   onCancel?: (...args: any[]) => any;
   onReset?: (...args: any[]) => any;
+  resetButtonText?: string;
 }
 export default class DatePickerFooter extends React.Component<
   DatePickerFooterProps,

package/es/components/date-picker/DatePickerFooter.js

@@ -74,7 +74,8 @@ export default class DatePickerFooter extends React.PureComponent {
 
   render() {
     const {
-      isRange
+      isRange,
+      resetButtonText
     } = this.props;
     const {
       show_reset_button,
@@ -82,14 +83,14 @@ export default class DatePickerFooter extends React.PureComponent {
       show_submit_button
     } = this.context.props;
 
-    if (!isRange && !isTrue(show_submit_button) && !isTrue(show_cancel_button)) {
+    if (!isRange && !isTrue(show_submit_button) && !isTrue(show_cancel_button) && !isTrue(show_reset_button)) {
       return React.createElement(React.Fragment, null);
     }
 
     const {
       submit_button_text,
       cancel_button_text,
-      reset_button_text
+      reset_button_text: reset_button_text_translation
     } = this.context.translation.DatePicker;
     return React.createElement("div", {
       className: "dnb-date-picker__footer"
@@ -98,7 +99,7 @@ export default class DatePickerFooter extends React.PureComponent {
       onClick: this.onSubmitHandler,
       "data-visual-test": "submit"
     }) || _span || (_span = React.createElement("span", null)), React.createElement("span", null, isTrue(show_reset_button) && React.createElement(Button, {
-      text: reset_button_text,
+      text: resetButtonText || reset_button_text_translation,
       icon: "reset",
       icon_position: "left",
       variant: "tertiary",
@@ -121,12 +122,14 @@ _defineProperty(DatePickerFooter, "contextType", DatePickerContext);
 _defineProperty(DatePickerFooter, "defaultProps", {
   onSubmit: null,
   onCancel: null,
-  onReset: null
+  onReset: null,
+  resetButtonText: null
 });
 
 process.env.NODE_ENV !== "production" ? DatePickerFooter.propTypes = {
   isRange: PropTypes.bool.isRequired,
   onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
-  onReset: PropTypes.func
+  onReset: PropTypes.func,
+  resetButtonText: PropTypes.string
 } : void 0;

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

@@ -51,7 +51,8 @@ export type DropdownVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type DropdownIcon =
   | string
   | React.ReactNode
@@ -200,12 +201,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 +221,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 +251,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 +347,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.
+   * <em>(required)</em> 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 +362,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 +395,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.
+   * <em>(required)</em> 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 +417,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-label/FormLabel.d.ts

@@ -47,7 +47,7 @@ export type FormLabelChildren =
  */
 export interface FormLabelProps extends React.HTMLProps<HTMLElement> {
   /**
-   * The `id` of the input.
+   * <em>(required)</em> the `id` of the input.
    */
   for_id?: string;
 

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.
+   * <em>(required)</em> 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.
+   * <em>(required)</em> 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.
+   * <em>(required)</em> a heading, can be text or React.Node.
    */
   text?: any;
 
   /**
-   * A heading, can be text or a another component.
+   * <em>(required)</em> a heading, can be text or React.Node.
    */
   children?: any;
 }