@dnb/eufemia 9.17.0 → 9.19.0

package/cjs/components/avatar/style/dnb-avatar.css

@@ -0,0 +1,218 @@
+/*
+* DNB Avatar
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-avatar {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-avatar *,
+  .dnb-avatar ::before,
+  .dnb-avatar ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-avatar ::before,
+  .dnb-avatar ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Avatar component
+*
+*/
+:root {
+  --avatar-font-size--small: var(--font-size-x-small);
+  --avatar-font-size--medium: var(--font-size-basis);
+  --avatar-font-size--large: var(--font-size-x-large);
+  --avatar-font-size--x-large: var(--font-size-x-large);
+  --avatar-line-height--small: var(--line-height-x-small);
+  --avatar-line-height--medium: var(--line-height-basis);
+  --avatar-line-height--large: var(--line-height-large);
+  --avatar-line-height--x-large: var(--line-height-large);
+  --avatar-width--small: 1.5rem;
+  --avatar-height--small: 1.5rem;
+  --avatar-width--medium: 2rem;
+  --avatar-height--medium: 2rem;
+  --avatar-width--large: 4rem;
+  --avatar-height--large: 4rem;
+  --avatar-width--x-large: 5rem;
+  --avatar-height--x-large: 5rem; }
+
+.dnb-avatar {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  line-height: 1;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  border-radius: 50%;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }
+  .dnb-avatar,
+  .dnb-core-style .dnb-avatar {
+    line-height: 2.5rem;
+    line-height: var(--button-height); }
+  .dnb-avatar--size-small {
+    width: 1.5rem;
+    width: var(--avatar-width--small);
+    height: 1.5rem;
+    height: var(--avatar-height--small);
+    font-size: 0.875rem;
+    font-size: var(--avatar-font-size--small); }
+    .dnb-avatar--size-small,
+    .dnb-core-style .dnb-avatar--size-small {
+      line-height: 1.125rem;
+      line-height: var(--avatar-line-height--small); }
+  .dnb-avatar--size-medium {
+    width: 2rem;
+    width: var(--avatar-width--medium);
+    height: 2rem;
+    height: var(--avatar-height--medium);
+    font-size: 1.125rem;
+    font-size: var(--avatar-font-size--medium); }
+    .dnb-avatar--size-medium,
+    .dnb-core-style .dnb-avatar--size-medium {
+      line-height: 1.5rem;
+      line-height: var(--avatar-line-height--medium); }
+  .dnb-avatar--size-large {
+    width: 4rem;
+    width: var(--avatar-width--large);
+    height: 4rem;
+    height: var(--avatar-height--large);
+    font-size: 2.125rem;
+    font-size: var(--avatar-font-size--large); }
+    .dnb-avatar--size-large,
+    .dnb-core-style .dnb-avatar--size-large {
+      line-height: 2.5rem;
+      line-height: var(--avatar-line-height--large); }
+  .dnb-avatar--size-x-large {
+    width: 5rem;
+    width: var(--avatar-width--x-large);
+    height: 5rem;
+    height: var(--avatar-height--x-large);
+    font-size: 2.125rem;
+    font-size: var(--avatar-font-size--x-large); }
+    .dnb-avatar--size-x-large,
+    .dnb-core-style .dnb-avatar--size-x-large {
+      line-height: 2.5rem;
+      line-height: var(--avatar-line-height--x-large); }
+  .dnb-avatar__group {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-pack: flex;
+        -ms-flex-pack: flex;
+            justify-content: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row; }
+    .dnb-avatar__group .dnb-avatar {
+      -webkit-box-sizing: content-box;
+              box-sizing: content-box;
+      border: 0.125rem solid #f8f8f8;
+      border: 0.125rem solid var(--color-black-3); }
+      .dnb-avatar__group .dnb-avatar--size-small {
+        margin-left: -0.5rem; }
+      .dnb-avatar__group .dnb-avatar--size-medium {
+        margin-left: -0.75rem; }
+      .dnb-avatar__group .dnb-avatar--size-large {
+        margin-left: -1rem; }
+      .dnb-avatar__group .dnb-avatar--size-x-large {
+        margin-left: -1.5rem; }
+      .dnb-avatar__group .dnb-avatar:nth-of-type(2) {
+        margin-left: 0; }
+    .dnb-avatar__group--elements-left {
+      display: -webkit-inline-box;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      color: #737373;
+      color: var(--color-black-55); }
+      .dnb-avatar__group--elements-left--size-small {
+        font-size: 0.875rem;
+        font-size: var(--font-size-x-small);
+        margin-left: 0.125rem; }
+      .dnb-avatar__group--elements-left--size-medium {
+        font-size: 1rem;
+        font-size: var(--font-size-small);
+        margin-left: 0.125rem; }
+      .dnb-avatar__group--elements-left--size-large {
+        font-size: 1.625rem;
+        font-size: var(--font-size-large);
+        margin-left: 0.25rem;
+        margin-left: var(--spacing-xx-small); }
+      .dnb-avatar__group--elements-left--size-x-large {
+        font-size: 1.625rem;
+        font-size: var(--font-size-large);
+        margin-left: 0.25rem;
+        margin-left: var(--spacing-xx-small); }

package/cjs/components/avatar/style/dnb-avatar.min.css

@@ -0,0 +1 @@
+.dnb-avatar{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-avatar *,.dnb-avatar :after,.dnb-avatar :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-avatar :after,.dnb-avatar :before{text-decoration:inherit;vertical-align:inherit}:root{--avatar-font-size--small:var(--font-size-x-small);--avatar-font-size--medium:var(--font-size-basis);--avatar-font-size--large:var(--font-size-x-large);--avatar-font-size--x-large:var(--font-size-x-large);--avatar-line-height--small:var(--line-height-x-small);--avatar-line-height--medium:var(--line-height-basis);--avatar-line-height--large:var(--line-height-large);--avatar-line-height--x-large:var(--line-height-large);--avatar-width--small:1.5rem;--avatar-height--small:1.5rem;--avatar-width--medium:2rem;--avatar-height--medium:2rem;--avatar-width--large:4rem;--avatar-height--large:4rem;--avatar-width--x-large:5rem;--avatar-height--x-large:5rem}.dnb-avatar{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-negative:0;align-items:center;border-radius:50%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;flex-shrink:0;font-weight:500;font-weight:var(--font-weight-medium);justify-content:center;line-height:1;overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-avatar,.dnb-core-style .dnb-avatar{line-height:2.5rem;line-height:var(--button-height)}.dnb-avatar--size-small{font-size:.875rem;font-size:var(--avatar-font-size--small);height:1.5rem;height:var(--avatar-height--small);width:1.5rem;width:var(--avatar-width--small)}.dnb-avatar--size-small,.dnb-core-style .dnb-avatar--size-small{line-height:1.125rem;line-height:var(--avatar-line-height--small)}.dnb-avatar--size-medium{font-size:1.125rem;font-size:var(--avatar-font-size--medium);height:2rem;height:var(--avatar-height--medium);width:2rem;width:var(--avatar-width--medium)}.dnb-avatar--size-medium,.dnb-core-style .dnb-avatar--size-medium{line-height:1.5rem;line-height:var(--avatar-line-height--medium)}.dnb-avatar--size-large{font-size:2.125rem;font-size:var(--avatar-font-size--large);height:4rem;height:var(--avatar-height--large);width:4rem;width:var(--avatar-width--large)}.dnb-avatar--size-large,.dnb-core-style .dnb-avatar--size-large{line-height:2.5rem;line-height:var(--avatar-line-height--large)}.dnb-avatar--size-x-large{font-size:2.125rem;font-size:var(--avatar-font-size--x-large);height:5rem;height:var(--avatar-height--x-large);width:5rem;width:var(--avatar-width--x-large)}.dnb-avatar--size-x-large,.dnb-core-style .dnb-avatar--size-x-large{line-height:2.5rem;line-height:var(--avatar-line-height--x-large)}.dnb-avatar__group{-webkit-box-pack:flex;-ms-flex-pack:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;justify-content:flex}.dnb-avatar__group .dnb-avatar{border:.125rem solid #f8f8f8;border:.125rem solid var(--color-black-3);-webkit-box-sizing:content-box;box-sizing:content-box}.dnb-avatar__group .dnb-avatar--size-small{margin-left:-.5rem}.dnb-avatar__group .dnb-avatar--size-medium{margin-left:-.75rem}.dnb-avatar__group .dnb-avatar--size-large{margin-left:-1rem}.dnb-avatar__group .dnb-avatar--size-x-large{margin-left:-1.5rem}.dnb-avatar__group .dnb-avatar:nth-of-type(2){margin-left:0}.dnb-avatar__group--elements-left{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:#737373;color:var(--color-black-55);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center}.dnb-avatar__group--elements-left--size-small{font-size:.875rem;font-size:var(--font-size-x-small);margin-left:.125rem}.dnb-avatar__group--elements-left--size-medium{font-size:1rem;font-size:var(--font-size-small);margin-left:.125rem}.dnb-avatar__group--elements-left--size-large,.dnb-avatar__group--elements-left--size-x-large{font-size:1.625rem;font-size:var(--font-size-large);margin-left:.25rem;margin-left:var(--spacing-xx-small)}

package/cjs/components/avatar/style/dnb-avatar.scss

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

package/cjs/components/avatar/style/index.d.ts

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

package/cjs/components/avatar/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./dnb-avatar.min.css");

package/cjs/components/avatar/style/themes/dnb-avatar-theme-ui.css

@@ -0,0 +1,36 @@
+/*
+* Avatar theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-avatar {
+  color: #f2f4ec;
+  color: var(--color-pistachio); }
+  .dnb-avatar svg {
+    color: #f2f4ec;
+    color: var(--color-pistachio);
+    fill: #f2f4ec;
+    fill: var(--color-pistachio); }
+  .dnb-avatar--primary {
+    background-color: #14555a;
+    background-color: var(--color-emerald-green); }
+  .dnb-avatar--secondary {
+    background-color: #007272;
+    background-color: var(--color-sea-green); }
+  .dnb-avatar--tertiary {
+    background-color: #a5e1d2;
+    background-color: var(--color-mint-green);
+    color: #14555a;
+    color: var(--color-emerald-green); }
+    .dnb-avatar--tertiary svg {
+      color: #14555a;
+      color: var(--color-emerald-green);
+      fill: #14555a;
+      fill: var(--color-emerald-green); }

package/cjs/components/avatar/style/themes/dnb-avatar-theme-ui.min.css

@@ -0,0 +1 @@
+.dnb-avatar,.dnb-avatar svg{color:#f2f4ec;color:var(--color-pistachio)}.dnb-avatar svg{fill:#f2f4ec;fill:var(--color-pistachio)}.dnb-avatar--primary{background-color:#14555a;background-color:var(--color-emerald-green)}.dnb-avatar--secondary{background-color:#007272;background-color:var(--color-sea-green)}.dnb-avatar--tertiary{background-color:#a5e1d2;background-color:var(--color-mint-green);color:#14555a;color:var(--color-emerald-green)}.dnb-avatar--tertiary svg{fill:#14555a;fill:var(--color-emerald-green);color:#14555a;color:var(--color-emerald-green)}

package/cjs/components/avatar/style/themes/dnb-avatar-theme-ui.scss

@@ -0,0 +1,29 @@
+/*
+* Avatar theme
+*
+*/
+
+@import '../../../../style/themes/imports.scss';
+
+.dnb-avatar {
+  color: var(--color-pistachio);
+
+  svg {
+    color: var(--color-pistachio);
+    fill: var(--color-pistachio);
+  }
+  &--primary {
+    background-color: var(--color-emerald-green);
+  }
+  &--secondary {
+    background-color: var(--color-sea-green);
+  }
+  &--tertiary {
+    background-color: var(--color-mint-green);
+    color: var(--color-emerald-green);
+    svg {
+      color: var(--color-emerald-green);
+      fill: var(--color-emerald-green);
+    }
+  }
+}

package/cjs/components/avatar/style/themes/ui.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./dnb-avatar-theme-ui.min.css");

package/cjs/components/avatar/style.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./style/dnb-avatar.min.css");

package/cjs/components/breadcrumb/BreadcrumbItem.js

@@ -82,7 +82,7 @@ function BreadcrumbItem(localProps) {
   return _react.default.createElement("li", {
     className: "dnb-breadcrumb__item",
     "data-testid": "breadcrumb-item",
-    "aria-current": variant === 'current' ? true : undefined
+    "aria-current": variant === 'current' ? 'page' : undefined
   }, isInteractive ? _react.default.createElement(_Button.default, _extends({
     variant: "tertiary",
     href: href,
@@ -92,9 +92,9 @@ function BreadcrumbItem(localProps) {
     on_click: onClick,
     text: currentText,
     skeleton: skeleton
-  }, props)) : _react.default.createElement("span", {
+  }, props)) : _react.default.createElement("span", _extends({
     className: "dnb-breadcrumb__item__span"
-  }, _react.default.createElement(_IconPrimary.default, {
+  }, props), _react.default.createElement(_IconPrimary.default, {
     icon: currentIcon,
     className: "dnb-breadcrumb__item__span__icon"
   }), _react.default.createElement(_P.default, {

package/cjs/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.
@@ -87,7 +87,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 +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/cjs/components/button/Button.js

@@ -106,7 +106,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var buttonVariantPropType = {
-  variant: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary', 'signal'])
+  variant: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary', 'signal', 'unstyled'])
 };
 exports.buttonVariantPropType = buttonVariantPropType;
 
@@ -241,14 +241,16 @@ var Button = function (_React$PureComponent) {
 
       var classes = (0, _classnames.default)("dnb-button dnb-button--".concat(usedVariant || 'primary'), (text || content || custom_content) && 'dnb-button--has-text', (0, _SkeletonHelper.createSkeletonClass)(variant === 'tertiary' ? 'font' : 'shape', skeleton, this.context), (0, _SpacingHelper.createSpacingClasses)(props), class_name, className, (props.href || props.to) && '', icon && "dnb-button--icon-position-".concat(icon_position, " dnb-button--has-icon") + (iconSize ? " dnb-button--icon-size-".concat(iconSize) : ""), usedSize && usedSize !== 'default' && "dnb-button--size-".concat(usedSize), (0, _componentHelper.isTrue)(stretch) && 'dnb-button--stretch', wrap && 'dnb-button--wrap', status && "dnb-button__status--".concat(status_state));
 
-      var params = _objectSpread(_objectSpread({
+      var params = _objectSpread({
         className: classes,
         title: title,
         id: this._id,
         disabled: (0, _componentHelper.isTrue)(disabled)
-      }, attributes), {}, {
-        onClick: this.onClickHandler
-      });
+      }, attributes);
+
+      if (this.props.on_click || this.props.onClick) {
+        params.onClick = this.onClickHandler;
+      }
 
       if (Element !== _Anchor.default && !params.type) {
         params.type = params.type === '' ? undefined : 'button';

package/cjs/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/cjs/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/cjs/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/cjs/components/date-picker/DatePicker.js

@@ -88,7 +88,7 @@ var _DatePickerFooter = _interopRequireDefault(require("./DatePickerFooter"));
 var _AlignmentHelper;
 
 var _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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -360,6 +360,7 @@ var DatePicker = function (_React$PureComponent) {
           mask_order = props.mask_order,
           mask_placeholder = props.mask_placeholder,
           align_picker = props.align_picker,
+          reset_button_text = props.reset_button_text,
           _hide_navigation = props.hide_navigation,
           _return_format = props.return_format,
           _date_format = props.date_format,
@@ -502,7 +503,8 @@ var DatePicker = function (_React$PureComponent) {
         isRange: (0, _componentHelper.isTrue)(range),
         onSubmit: this.onSubmitHandler,
         onCancel: this.onCancelHandler,
-        onReset: this.onResetHandler
+        onReset: this.onResetHandler,
+        resetButtonText: reset_button_text
       })))), suffix && _react.default.createElement(_Suffix.default, {
         className: "dnb-date-picker__suffix",
         id: id + '-suffix',

package/cjs/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/cjs/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/cjs/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,