@dnb/eufemia 9.26.1 → 9.27.0

package/es/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.min.css

@@ -1,3 +1,3 @@
-.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{-webkit-box-shadow:0 0 0 .125rem #007272;box-shadow:0 0 0 .125rem #007272;-webkit-box-shadow:0 0 0 .125rem var(--color-sea-green);box-shadow:0 0 0 .125rem var(--color-sea-green)}}.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button{background-color:#007272;background-color:var(--color-sea-green);border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:#fff;color:var(--color-white)}.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-fire-red);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{-webkit-box-shadow:0 0 0 .125rem #dc2a2a;box-shadow:0 0 0 .125rem #dc2a2a;-webkit-box-shadow:0 0 0 .125rem var(--color-fire-red);box-shadow:0 0 0 .125rem var(--color-fire-red)}}.dnb-autocomplete__root .dnb-drawer-list__option__item:first-of-type{font-weight:400;font-weight:var(--font-weight-basis)}.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n+2){color:#737373;color:var(--color-black-55)}.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight{font-weight:600;font-weight:var(--font-weight-bold)}.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor,.dnb-autocomplete__root
+.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{-webkit-box-shadow:0 0 0 .125rem #007272;box-shadow:0 0 0 .125rem #007272;-webkit-box-shadow:0 0 0 .125rem var(--color-sea-green);box-shadow:0 0 0 .125rem var(--color-sea-green)}}.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button,.dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button{background-color:#007272;background-color:var(--color-sea-green);border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:#fff;color:var(--color-white)}.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon{color:transparent}.dnb-autocomplete__input,.dnb-autocomplete__shell{border-radius:.25rem;border-radius:var(--autocomplete-border-radius)}.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-fire-red);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover~.dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{-webkit-box-shadow:0 0 0 .125rem #dc2a2a;box-shadow:0 0 0 .125rem #dc2a2a;-webkit-box-shadow:0 0 0 .125rem var(--color-fire-red);box-shadow:0 0 0 .125rem var(--color-fire-red)}}.dnb-autocomplete__root .dnb-drawer-list__option__item:first-of-type{font-weight:400;font-weight:var(--font-weight-basis)}.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n+2){color:#737373;color:var(--color-black-55)}.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight{font-weight:600;font-weight:var(--font-weight-bold)}.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor,.dnb-autocomplete__root
 .dnb-drawer-list__option--selected
 .dnb-drawer-list__option__item:nth-of-type(n+2){color:#fff;color:var(--color-white)}

package/es/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss

@@ -22,6 +22,14 @@
     }
   }
 
+  &--show-indicator &__input .dnb-input__icon {
+    color: transparent;
+  }
+  &__shell,
+  &__input {
+    border-radius: var(--autocomplete-border-radius);
+  }
+
   &__status--error:not(#{&}--opened)
     .dnb-form-label:hover
     ~ &__inner

package/es/components/avatar/Avatar.js

@@ -13,7 +13,7 @@ import { createSpacingClasses } from '../space/SpacingHelper';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
 import Img from '../../elements/Img';
 import Context from '../../shared/Context';
-import { warn } from '../../shared/component-helper';
+import { validateDOMAttributes, warn } from '../../shared/component-helper';
 import { usePropsWithContext } from '../../shared/hooks';
 import AvatarGroup, { AvatarGroupContext } from './AvatarGroup';
 export const defaultProps = {
@@ -25,11 +25,11 @@ export const defaultProps = {
 const Avatar = localProps => {
   const context = React.useContext(Context);
   const avatarGroupContext = React.useContext(AvatarGroupContext);
-
-  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Avatar, {
+  const allProps = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Avatar, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }, avatarGroupContext),
-        {
+  }, avatarGroupContext);
+
+  const {
     alt,
     className,
     children: childrenProp,
@@ -39,8 +39,8 @@ const Avatar = localProps => {
     src,
     imgProps,
     hasLabel
-  } = _usePropsWithContext,
-        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  } = allProps,
+        props = _objectWithoutProperties(allProps, _excluded);
 
   let children = null;
   const skeletonClasses = createSkeletonClass('shape', skeleton, context);
@@ -68,6 +68,7 @@ const Avatar = localProps => {
     warn(`Avatar group required: An Avatar requires an Avatar.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`);
   }
 
+  validateDOMAttributes(allProps, props);
   return React.createElement("span", _extends({
     className: classnames(`dnb-avatar dnb-avatar--${variant || 'primary'} dnb-avatar--size-${size || 'medium'}`, skeletonClasses, spacingClasses, className),
     "data-testid": "avatar"

package/es/components/breadcrumb/Breadcrumb.js

@@ -11,7 +11,7 @@ import { useMediaQuery } from '../../shared';
 import Context from '../../shared/Context';
 import { usePropsWithContext } from '../../shared/hooks';
 import BreadcrumbItem from './BreadcrumbItem';
-import { convertJsxToString } from '../../shared/component-helper';
+import { convertJsxToString, validateDOMAttributes } from '../../shared/component-helper';
 export const defaultProps = {
   skeleton: false,
   navText: 'Back',
@@ -28,11 +28,11 @@ const Breadcrumb = localProps => {
   var _context$translation;
 
   const context = React.useContext(Context);
-
-  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb, {
+  const allProps = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-  }),
-        {
+  });
+
+  const {
     className,
     skeleton,
     children: childrenItems,
@@ -48,8 +48,8 @@ const Breadcrumb = localProps => {
     spacing,
     data,
     href
-  } = _usePropsWithContext,
-        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  } = allProps,
+        props = _objectWithoutProperties(allProps, _excluded);
 
   const skeletonClasses = createSkeletonClass('font', skeleton, context);
   const spacingClasses = createSpacingClasses(props);
@@ -81,6 +81,7 @@ const Breadcrumb = localProps => {
     variant: i == 0 && 'home' || i == data.length - 1 && 'current' || null
   }, breadcrumbItem))), childrenItems);
 
+  validateDOMAttributes(allProps, props);
   return React.createElement("nav", _extends({
     "aria-label": convertJsxToString(navText),
     className: classnames('dnb-breadcrumb', skeletonClasses, spacingClasses, className, spacing && 'dnb-breadcrumb--spacing'),

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SkeletonShow } from '../skeleton/Skeleton';
 import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
+import { DataAttributeTypes } from '../../shared/interfaces';
 export type ButtonText = string | React.ReactNode;
 export type ButtonVariant =
   | 'primary'
@@ -72,9 +73,10 @@ export type ButtonOnClick = string | ((...args: any[]) => any);
 
 export interface ButtonProps
   extends Omit<
-    React.HTMLProps<HTMLElement>,
-    'disabled' | 'size' | 'title' | 'wrap'
-  > {
+      React.HTMLProps<HTMLElement>,
+      'disabled' | 'size' | 'title' | 'wrap'
+    >,
+    Partial<DataAttributeTypes> {
   /**
    * The content of the button can be a string or a React Element.
    */

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

@@ -38,6 +38,7 @@ export type DatePickerShortcuts = any[] | ((...args: any[]) => any);
 export type DatePickerDisabled = string | boolean;
 export type DatePickerStretch = string | boolean;
 export type DatePickerSkeleton = string | boolean;
+export type DatePickerSize = 'default' | 'small' | 'medium' | 'large';
 export type DatePickerStatus =
   | string
   | boolean
@@ -268,6 +269,11 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
    */
   skeleton?: DatePickerSkeleton;
 
+  /**
+   * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`.
+   */
+  size?: DatePickerSize;
+
   /**
    * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
    */

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", "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"];
+      _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", "size", "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; }
 
@@ -43,6 +43,7 @@ export default class DatePicker extends React.PureComponent {
         show_input,
         align_picker
       } = this.props;
+      const triangleWidth = 16;
 
       if (isTrue(show_input) && this._triangleRef.current && this._innerRef.current) {
         try {
@@ -51,10 +52,10 @@ export default class DatePicker extends React.PureComponent {
           const buttonWidth = this._innerRef.current.querySelector('.dnb-input__submit-button__button').getBoundingClientRect().width;
 
           if (align_picker === 'right') {
-            const distance = buttonWidth / 2 - 8;
+            const distance = buttonWidth / 2 - triangleWidth / 2;
             this._triangleRef.current.style.marginRight = `${distance / 16}rem`;
           } else {
-            const distance = shellWidth - buttonWidth / 2 - 8;
+            const distance = shellWidth - buttonWidth / 2 - triangleWidth / 2;
             this._triangleRef.current.style.marginLeft = `${distance / 16}rem`;
           }
         } catch (e) {
@@ -243,6 +244,7 @@ export default class DatePicker extends React.PureComponent {
       disabled,
       stretch,
       skeleton,
+      size,
       status,
       status_state,
       status_props,
@@ -304,7 +306,7 @@ export default class DatePicker extends React.PureComponent {
     };
     const selectedDateTitle = this.formatSelectedDateTitle();
     const mainParams = {
-      className: classnames("dnb-date-picker dnb-form-component", (isTrue(range) || isTrue(show_submit_button) || isTrue(show_cancel_button) || isTrue(show_reset_button)) && 'dnb-date-picker--show-footer', createSpacingClasses(props), _className, className, status && `dnb-date-picker__status--${status_state}`, label_direction && `dnb-date-picker--${label_direction}`, opened && 'dnb-date-picker--opened', hidden && 'dnb-date-picker--hidden', showInput && 'dnb-date-picker--show-input', align_picker && `dnb-date-picker--${align_picker}`, isTrue(stretch) && `dnb-date-picker--stretch`)
+      className: classnames("dnb-date-picker dnb-form-component", (isTrue(range) || isTrue(show_submit_button) || isTrue(show_cancel_button) || isTrue(show_reset_button)) && 'dnb-date-picker--show-footer', createSpacingClasses(props), _className, className, status && `dnb-date-picker__status--${status_state}`, label_direction && `dnb-date-picker--${label_direction}`, opened && 'dnb-date-picker--opened', hidden && 'dnb-date-picker--hidden', showInput && 'dnb-date-picker--show-input', align_picker && `dnb-date-picker--${align_picker}`, isTrue(stretch) && `dnb-date-picker--stretch`, size && `dnb-date-picker--${size}`)
     };
 
     if (locale !== null && locale !== void 0 && locale.code) {
@@ -362,6 +364,7 @@ export default class DatePicker extends React.PureComponent {
       input_element: input_element,
       opened: opened,
       hidden: hidden,
+      size: size,
       status: status ? 'error' : null,
       status_state: status_state,
       locale: locale
@@ -462,6 +465,7 @@ _defineProperty(DatePicker, "defaultProps", {
   disabled: null,
   stretch: null,
   skeleton: null,
+  size: null,
   status: null,
   status_state: 'error',
   status_props: null,
@@ -534,6 +538,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = _objectSpread(_ob
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  size: PropTypes.oneOf(['default', 'small', 'medium', 'large']),
   status: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func, PropTypes.node]),
   status_state: PropTypes.string,
   status_props: PropTypes.object,

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

@@ -97,21 +97,21 @@ export default class DatePickerFooter extends React.PureComponent {
     }, (isRange || isTrue(show_submit_button)) && React.createElement(Button, {
       text: submit_button_text,
       onClick: this.onSubmitHandler,
-      "data-visual-test": "submit"
+      "data-testid": "submit"
     }) || _span || (_span = React.createElement("span", null)), React.createElement("span", null, isTrue(show_reset_button) && React.createElement(Button, {
       text: resetButtonText || reset_button_text_translation,
       icon: "reset",
       icon_position: "left",
       variant: "tertiary",
       onClick: this.onResetHandler,
-      "data-visual-test": "reset"
+      "data-testid": "reset"
     }) || _span2 || (_span2 = React.createElement("span", null)), (isRange || isTrue(show_cancel_button)) && React.createElement(Button, {
       text: cancel_button_text,
       icon: "close",
       icon_position: "left",
       variant: "tertiary",
       onClick: this.onCancelHandler,
-      "data-visual-test": "cancel"
+      "data-testid": "cancel"
     }) || _span3 || (_span3 = React.createElement("span", null))));
   }
 

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+export type DatePickerInputSize = 'default' | 'small' | 'medium' | 'large';
 export type DatePickerInputStatus =
   | string
   | boolean
@@ -23,6 +24,11 @@ export interface DatePickerInputProps
   submitAttributes?: Object;
   isRange?: boolean;
 
+  /**
+   * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`.
+   */
+  size?: DatePickerInputSize;
+
   /**
    * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.
    */

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

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["id", "title", "submitAttributes", "isRange", "maskOrder", "maskPlaceholder", "separatorRexExp", "onChange", "onFocus", "onSubmit", "selectedDateTitle", "showInput", "input_element", "locale", "disabled", "skeleton", "opened", "status", "status_state", "status_props"];
+const _excluded = ["id", "title", "submitAttributes", "isRange", "maskOrder", "maskPlaceholder", "separatorRexExp", "onChange", "onFocus", "onSubmit", "selectedDateTitle", "showInput", "input_element", "locale", "disabled", "skeleton", "opened", "size", "status", "status_state", "status_props"];
 
 var _span;
 
@@ -178,40 +178,44 @@ export default class DatePickerInput extends React.PureComponent {
       target,
       event
     }) => {
-      const isDate = target.getAttribute('class').match(/__input--([day|month|year]+)($|\s)/)[1];
-      const isInRange = target.getAttribute('id').match(/[0-9]-([start|end]+)-/)[1];
-      let date = isInRange === 'start' ? this.context.startDate : this.context.endDate;
+      try {
+        const isDate = target.getAttribute('class').match(/__input--([day|month|year]+)($|\s)/)[1];
+        const isInRange = target.getAttribute('id').match(/-([start|end]+)-/)[1];
+        let date = isInRange === 'start' ? this.context.startDate : this.context.endDate;
 
-      if (!date) {
-        return;
-      }
+        if (!date) {
+          return;
+        }
 
-      const count = keyCode === 'up' ? 1 : -1;
+        const count = keyCode === 'up' ? 1 : -1;
 
-      if (keyCode === 'up' || keyCode === 'down') {
-        switch (isDate) {
-          case 'day':
-            date = addDays(date, count);
-            break;
+        if (keyCode === 'up' || keyCode === 'down') {
+          switch (isDate) {
+            case 'day':
+              date = addDays(date, count);
+              break;
 
-          case 'month':
-            date = addMonths(date, count);
-            break;
+            case 'month':
+              date = addMonths(date, count);
+              break;
 
-          case 'year':
-            date = addYears(date, count);
-            break;
+            case 'year':
+              date = addYears(date, count);
+              break;
+          }
         }
-      }
 
-      this.callOnChange({
-        [isInRange === 'start' ? 'startDate' : 'endDate']: date,
-        event
-      });
-      await wait(1);
-      const endPos = target.value.length;
-      target.focus();
-      target.setSelectionRange(0, endPos);
+        this.callOnChange({
+          [isInRange === 'start' ? 'startDate' : 'endDate']: date,
+          event
+        });
+        await wait(1);
+        const endPos = target.value.length;
+        target.focus();
+        target.setSelectionRange(0, endPos);
+      } catch (e) {
+        warn(e);
+      }
     });
 
     _defineProperty(this, "onFocusHandler", event => {
@@ -422,7 +426,8 @@ export default class DatePickerInput extends React.PureComponent {
       const {
         input_element,
         separatorRexExp,
-        isRange
+        isRange,
+        size
       } = this.props;
       const {
         day,
@@ -447,6 +452,7 @@ export default class DatePickerInput extends React.PureComponent {
         }
 
         const DateField = input_element && React.isValidElement(input_element) ? input_element : InputElement;
+        const inputSizeClassName = size && `dnb-date-picker__input--${size}`;
 
         switch (state) {
           case 'd':
@@ -456,7 +462,7 @@ export default class DatePickerInput extends React.PureComponent {
             }, React.createElement(DateField, _extends({}, params, {
               id: `${this.props.id}-${mode}-day`,
               key: 'di' + i,
-              className: classnames("dnb-date-picker__input dnb-date-picker__input--day", params.className),
+              className: classnames("dnb-date-picker__input dnb-date-picker__input--day", params.className, inputSizeClassName),
               size: "2",
               mask: [/[0-3]/, /[0-9]/],
               inputRef: this[`_${mode}DayRef`],
@@ -476,7 +482,7 @@ export default class DatePickerInput extends React.PureComponent {
             }, React.createElement(DateField, _extends({}, params, {
               id: `${this.props.id}-${mode}-month`,
               key: 'mi' + i,
-              className: classnames("dnb-date-picker__input dnb-date-picker__input--month", params.className),
+              className: classnames("dnb-date-picker__input dnb-date-picker__input--month", params.className, inputSizeClassName),
               size: "2",
               mask: [/[0-1]/, /[0-9]/],
               inputRef: this[`_${mode}MonthRef`],
@@ -496,7 +502,7 @@ export default class DatePickerInput extends React.PureComponent {
             }, React.createElement(DateField, _extends({}, params, {
               id: `${this.props.id}-${mode}-year`,
               key: 'yi' + i,
-              className: classnames("dnb-date-picker__input dnb-date-picker__input--year", params.className),
+              className: classnames("dnb-date-picker__input dnb-date-picker__input--year", params.className, inputSizeClassName),
               size: "4",
               mask: [/[1-2]/, /[0-9]/, /[0-9]/, /[0-9]/],
               inputRef: this[`_${mode}YearRef`],
@@ -549,6 +555,7 @@ export default class DatePickerInput extends React.PureComponent {
       disabled,
       skeleton,
       opened,
+      size,
       status,
       status_state,
       status_props
@@ -578,6 +585,7 @@ export default class DatePickerInput extends React.PureComponent {
       input_element: input_element && typeof input_element !== 'string' ? typeof input_element === 'function' ? input_element(this.props) : input_element : this.renderInputElement,
       disabled: disabled || skeleton,
       skeleton: skeleton,
+      size: size,
       status: !opened ? status : null,
       status_state: status_state
     }, status_props, {
@@ -588,6 +596,7 @@ export default class DatePickerInput extends React.PureComponent {
         className: classnames(showInput && 'dnb-button--input-button', opened && 'dnb-button--active'),
         "aria-label": this.formatDate(),
         title: title,
+        size: size,
         status: status,
         status_state: status_state,
         type: "button",
@@ -613,6 +622,7 @@ _defineProperty(DatePickerInput, "defaultProps", {
   separatorRexExp: /[-/ ]/g,
   submitAttributes: null,
   isRange: null,
+  size: null,
   status: null,
   status_state: 'error',
   status_props: null,
@@ -636,6 +646,7 @@ process.env.NODE_ENV !== "production" ? DatePickerInput.propTypes = {
   separatorRexExp: PropTypes.instanceOf(RegExp),
   submitAttributes: PropTypes.object,
   isRange: PropTypes.bool,
+  size: PropTypes.oneOf(['default', 'small', 'medium', 'large']),
   status: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func, PropTypes.node]),
   status_state: PropTypes.string,
   status_props: PropTypes.object,

package/es/components/date-picker/style/_date-picker.scss

@@ -73,6 +73,17 @@
     left: -1rem;
     top: var(--date-picker-input-height);
   }
+
+  &--small &__container {
+    top: var(--input-height--small);
+  }
+  &--medium &__container {
+    top: var(--input-height--medium);
+  }
+  &--large &__container {
+    top: var(--input-height--large);
+  }
+
   &--show-input &__container {
     left: 0;
   }
@@ -150,7 +161,35 @@
         margin-right: 2.2rem;
       }
     }
+
+    &--small {
+      &#{&}--has-submit-element &__input {
+        padding-right: 0.125rem;
+      }
+      &:last-of-type:not(*:root) {
+        margin-right: 2.2rem;
+      }
+    }
+
+    &--medium {
+      &#{&}--has-submit-element &__input {
+        padding-right: 0.125rem;
+      }
+      &:last-of-type:not(*:root) {
+        margin-right: 3.2rem;
+      }
+    }
+
+    &--large {
+      &#{&}--has-submit-element &__input {
+        padding-right: 0.125rem;
+      }
+      &:last-of-type:not(*:root) {
+        margin-right: 4rem;
+      }
+    }
   }
+
   .dnb-input__input#{&}__input:first-of-type,
   &__input:first-of-type {
     margin-left: 0.8rem;
@@ -375,6 +414,7 @@
       background-color: var(--color-white);
     }
   }
+
   &--right &__triangle {
     left: auto;
     right: 0;

package/es/components/date-picker/style/dnb-date-picker.css

@@ -1469,11 +1469,6 @@ legend.dnb-form-label {
     word-break: normal;
     position: relative;
     z-index: 2; }
-  .dnb-input input.dnb-input__input {
-    font-size: 1.125rem;
-    font-size: var(--input-font-size);
-    line-height: 1.125rem;
-    line-height: var(--font-size-basis); }
   .dnb-input__input[disabled] {
     -moz-user-select: none;
      -ms-user-select: none;
@@ -1490,12 +1485,16 @@ legend.dnb-form-label {
     padding-left: 1rem;
     padding-left: var(--input-padding);
     padding-right: 1rem;
-    padding-right: var(--input-padding);
-    text-align: inherit;
+    padding-right: var(--input-padding); }
+  .dnb-input__placeholder, .dnb-input__input,
+  .dnb-input input.dnb-input__input {
+    padding-top: 0;
+    padding-bottom: 0;
     color: inherit;
     background-color: transparent;
     font-size: 1.125rem;
-    font-size: var(--input-font-size); }
+    font-size: var(--input-font-size);
+    line-height: inherit; }
   .dnb-input__placeholder {
     pointer-events: none;
     position: absolute;
@@ -5422,6 +5421,15 @@ legend.dnb-form-label {
     left: -1rem;
     top: 2rem;
     top: var(--date-picker-input-height); }
+  .dnb-date-picker--small .dnb-date-picker__container {
+    top: 1.5rem;
+    top: var(--input-height--small); }
+  .dnb-date-picker--medium .dnb-date-picker__container {
+    top: 2.5rem;
+    top: var(--input-height--medium); }
+  .dnb-date-picker--large .dnb-date-picker__container {
+    top: 3rem;
+    top: var(--input-height--large); }
   .dnb-date-picker--show-input .dnb-date-picker__container {
     left: 0; }
   .dnb-date-picker--right .dnb-date-picker__container {
@@ -5494,6 +5502,42 @@ legend.dnb-form-label {
         .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(*:root),
         .dnb-core-style .dnb-date-picker__input:last-of-type:not(*:root) {
           margin-right: 2.2rem; } } }
+    .dnb-date-picker__input--small.dnb-date-picker__input--small, .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input,
+    .dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small,
+    .dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small, .dnb-core-style .dnb-date-picker__input--small--has-submit-element
+    .dnb-core-style .dnb-date-picker__input--small__input {
+      padding-right: 0.125rem; }
+    .dnb-date-picker__input--small:last-of-type:not(*:root),
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(*:root),
+    .dnb-core-style .dnb-date-picker__input--small:last-of-type:not(*:root) {
+      margin-right: 2.2rem; }
+    .dnb-date-picker__input--medium.dnb-date-picker__input--medium, .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium--has-submit-element
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input,
+    .dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium,
+    .dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium, .dnb-core-style .dnb-date-picker__input--medium--has-submit-element
+    .dnb-core-style .dnb-date-picker__input--medium__input {
+      padding-right: 0.125rem; }
+    .dnb-date-picker__input--medium:last-of-type:not(*:root),
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(*:root),
+    .dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(*:root) {
+      margin-right: 3.2rem; }
+    .dnb-date-picker__input--large.dnb-date-picker__input--large, .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large,
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large--has-submit-element
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input,
+    .dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large,
+    .dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large, .dnb-core-style .dnb-date-picker__input--large--has-submit-element
+    .dnb-core-style .dnb-date-picker__input--large__input {
+      padding-right: 0.125rem; }
+    .dnb-date-picker__input--large:last-of-type:not(*:root),
+    .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(*:root),
+    .dnb-core-style .dnb-date-picker__input--large:last-of-type:not(*:root) {
+      margin-right: 4rem; }
   .dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type, .dnb-date-picker__input:first-of-type {
     margin-left: 0.8rem; }
   .dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type, .dnb-date-picker__input:last-of-type {