@dnb/eufemia 9.18.0 → 9.19.0

package/esm/components/avatar/style/_avatar.scss

@@ -0,0 +1,145 @@
+/*
+* 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: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+  overflow: hidden;
+  user-select: none;
+
+  border-radius: 50%;
+  font-weight: var(--font-weight-medium);
+
+  // Safari needs a correct CSS specificity
+  &,
+  .dnb-core-style & {
+    line-height: var(--button-height);
+  }
+
+  &--size-small {
+    width: var(--avatar-width--small);
+    height: var(--avatar-height--small);
+    font-size: var(--avatar-font-size--small);
+    // Safari needs a correct CSS specificity
+    &,
+    .dnb-core-style & {
+      line-height: var(--avatar-line-height--small);
+    }
+  }
+
+  &--size-medium {
+    width: var(--avatar-width--medium);
+    height: var(--avatar-height--medium);
+    font-size: var(--avatar-font-size--medium);
+    // Safari needs a correct CSS specificity
+    &,
+    .dnb-core-style & {
+      line-height: var(--avatar-line-height--medium);
+    }
+  }
+
+  &--size-large {
+    width: var(--avatar-width--large);
+    height: var(--avatar-height--large);
+    font-size: var(--avatar-font-size--large);
+    // Safari needs a correct CSS specificity
+    &,
+    .dnb-core-style & {
+      line-height: var(--avatar-line-height--large);
+    }
+  }
+
+  &--size-x-large {
+    width: var(--avatar-width--x-large);
+    height: var(--avatar-height--x-large);
+    font-size: var(--avatar-font-size--x-large);
+    // Safari needs a correct CSS specificity
+    &,
+    .dnb-core-style & {
+      line-height: var(--avatar-line-height--x-large);
+    }
+  }
+
+  &__group {
+    display: inline-flex;
+    justify-content: flex;
+    flex-direction: row;
+
+    .dnb-avatar {
+      box-sizing: content-box;
+      border: 0.125rem solid var(--color-black-3);
+
+      &--size-small {
+        margin-left: -0.5rem;
+      }
+
+      &--size-medium {
+        margin-left: -0.75rem;
+      }
+
+      &--size-large {
+        margin-left: -1rem;
+      }
+
+      &--size-x-large {
+        margin-left: -1.5rem;
+      }
+
+      &:nth-of-type(2) {
+        margin-left: 0;
+      }
+    }
+
+    &--elements-left {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-black-55);
+
+      &--size-small {
+        font-size: var(--font-size-x-small);
+        margin-left: 0.125rem;
+      }
+
+      &--size-medium {
+        font-size: var(--font-size-small);
+        margin-left: 0.125rem;
+      }
+
+      &--size-large {
+        font-size: var(--font-size-large);
+        margin-left: var(--spacing-xx-small);
+      }
+
+      &--size-x-large {
+        font-size: var(--font-size-large);
+        margin-left: var(--spacing-xx-small);
+      }
+    }
+  }
+}

package/esm/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/esm/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/esm/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/esm/components/avatar/style/index.d.ts

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

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

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

package/esm/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/esm/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/esm/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/esm/components/avatar/style/themes/ui.js

@@ -0,0 +1 @@
+import "./dnb-avatar-theme-ui.min.css";

package/esm/components/avatar/style.js

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

package/esm/components/breadcrumb/BreadcrumbItem.js

@@ -48,7 +48,7 @@ export default function BreadcrumbItem(localProps) {
   return React.createElement("li", {
     className: "dnb-breadcrumb__item",
     "data-testid": "breadcrumb-item",
-    "aria-current": variant === 'current' ? true : undefined
+    "aria-current": variant === 'current' ? 'page' : undefined
   }, isInteractive ? React.createElement(Button, _extends({
     variant: "tertiary",
     href: href,
@@ -58,9 +58,9 @@ export default function BreadcrumbItem(localProps) {
     on_click: onClick,
     text: currentText,
     skeleton: skeleton
-  }, props)) : React.createElement("span", {
+  }, props)) : React.createElement("span", _extends({
     className: "dnb-breadcrumb__item__span"
-  }, React.createElement(IconPrimary, {
+  }, props), React.createElement(IconPrimary, {
     icon: currentIcon,
     className: "dnb-breadcrumb__item__span__icon"
   }), React.createElement(P, {

package/esm/components/breadcrumb/BreadcrumbItem.tsx

@@ -88,7 +88,7 @@ export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
     <li
       className="dnb-breadcrumb__item"
       data-testid="breadcrumb-item"
-      aria-current={variant === 'current' ? true : undefined}
+      aria-current={variant === 'current' ? 'page' : undefined}
     >
       {isInteractive ? (
         <Button
@@ -103,7 +103,7 @@ export default function BreadcrumbItem(localProps: BreadcrumbItemProps) {
           {...props}
         />
       ) : (
-        <span className="dnb-breadcrumb__item__span">
+        <span className="dnb-breadcrumb__item__span" {...props}>
           <IconPrimary
             icon={currentIcon}
             className="dnb-breadcrumb__item__span__icon"

package/esm/components/button/Button.js

@@ -44,7 +44,7 @@ import FormStatus from '../form-status/FormStatus';
 import Anchor from '../../elements/Anchor';
 import Tooltip from '../tooltip/Tooltip';
 export var buttonVariantPropType = {
-  variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'signal'])
+  variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'signal', 'unstyled'])
 };
 
 var Button = function (_React$PureComponent) {

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

@@ -19,7 +19,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 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; }
 
@@ -290,6 +290,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,
@@ -432,7 +433,8 @@ var DatePicker = function (_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/esm/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/esm/components/date-picker/DatePickerFooter.js

@@ -96,20 +96,22 @@ var DatePickerFooter = function (_React$PureComponent) {
   _createClass(DatePickerFooter, [{
     key: "render",
     value: function render() {
-      var isRange = this.props.isRange;
+      var _this$props = this.props,
+          isRange = _this$props.isRange,
+          resetButtonText = _this$props.resetButtonText;
       var _this$context$props = this.context.props,
           show_reset_button = _this$context$props.show_reset_button,
           show_cancel_button = _this$context$props.show_cancel_button,
           show_submit_button = _this$context$props.show_submit_button;
 
-      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);
       }
 
       var _this$context$transla = this.context.translation.DatePicker,
           submit_button_text = _this$context$transla.submit_button_text,
           cancel_button_text = _this$context$transla.cancel_button_text,
-          reset_button_text = _this$context$transla.reset_button_text;
+          reset_button_text_translation = _this$context$transla.reset_button_text;
       return React.createElement("div", {
         className: "dnb-date-picker__footer"
       }, (isRange || isTrue(show_submit_button)) && React.createElement(Button, {
@@ -117,7 +119,7 @@ var DatePickerFooter = function (_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",
@@ -142,7 +144,8 @@ _defineProperty(DatePickerFooter, "contextType", DatePickerContext);
 _defineProperty(DatePickerFooter, "defaultProps", {
   onSubmit: null,
   onCancel: null,
-  onReset: null
+  onReset: null,
+  resetButtonText: null
 });
 
 export { DatePickerFooter as default };
@@ -150,5 +153,6 @@ 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/esm/components/dropdown/Dropdown.d.ts

@@ -51,7 +51,8 @@ export type DropdownVariant =
   | 'primary'
   | 'secondary'
   | 'tertiary'
-  | 'signal';
+  | 'signal'
+  | 'unstyled';
 export type DropdownIcon =
   | string
   | React.ReactNode
@@ -346,7 +347,7 @@ 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;
 
@@ -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;

package/esm/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;