@dnb/eufemia 9.26.1 → 9.29.0

package/cjs/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/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", "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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -140,6 +140,7 @@ var DatePicker = function (_React$PureComponent) {
       var _this$props = _this.props,
           show_input = _this$props.show_input,
           align_picker = _this$props.align_picker;
+      var triangleWidth = 16;
 
       if ((0, _componentHelper.isTrue)(show_input) && _this._triangleRef.current && _this._innerRef.current) {
         try {
@@ -148,10 +149,10 @@ var DatePicker = function (_React$PureComponent) {
           var buttonWidth = _this._innerRef.current.querySelector('.dnb-input__submit-button__button').getBoundingClientRect().width;
 
           if (align_picker === 'right') {
-            var distance = buttonWidth / 2 - 8;
+            var distance = buttonWidth / 2 - triangleWidth / 2;
             _this._triangleRef.current.style.marginRight = "".concat(distance / 16, "rem");
           } else {
-            var _distance = shellWidth - buttonWidth / 2 - 8;
+            var _distance = shellWidth - buttonWidth / 2 - triangleWidth / 2;
 
             _this._triangleRef.current.style.marginLeft = "".concat(_distance / 16, "rem");
           }
@@ -351,6 +352,7 @@ var DatePicker = function (_React$PureComponent) {
           disabled = props.disabled,
           stretch = props.stretch,
           skeleton = props.skeleton,
+          size = props.size,
           status = props.status,
           status_state = props.status_state,
           status_props = props.status_props,
@@ -406,7 +408,7 @@ var DatePicker = function (_React$PureComponent) {
       var submitParams = (_submitParams = {}, _defineProperty(_submitParams, 'aria-expanded', opened), _defineProperty(_submitParams, "ref", this._submitButtonRef), _submitParams);
       var selectedDateTitle = this.formatSelectedDateTitle();
       var mainParams = {
-        className: (0, _classnames.default)("dnb-date-picker dnb-form-component", ((0, _componentHelper.isTrue)(range) || (0, _componentHelper.isTrue)(show_submit_button) || (0, _componentHelper.isTrue)(show_cancel_button) || (0, _componentHelper.isTrue)(show_reset_button)) && 'dnb-date-picker--show-footer', (0, _SpacingHelper.createSpacingClasses)(props), _className, className, status && "dnb-date-picker__status--".concat(status_state), label_direction && "dnb-date-picker--".concat(label_direction), opened && 'dnb-date-picker--opened', hidden && 'dnb-date-picker--hidden', showInput && 'dnb-date-picker--show-input', align_picker && "dnb-date-picker--".concat(align_picker), (0, _componentHelper.isTrue)(stretch) && "dnb-date-picker--stretch")
+        className: (0, _classnames.default)("dnb-date-picker dnb-form-component", ((0, _componentHelper.isTrue)(range) || (0, _componentHelper.isTrue)(show_submit_button) || (0, _componentHelper.isTrue)(show_cancel_button) || (0, _componentHelper.isTrue)(show_reset_button)) && 'dnb-date-picker--show-footer', (0, _SpacingHelper.createSpacingClasses)(props), _className, className, status && "dnb-date-picker__status--".concat(status_state), label_direction && "dnb-date-picker--".concat(label_direction), opened && 'dnb-date-picker--opened', hidden && 'dnb-date-picker--hidden', showInput && 'dnb-date-picker--show-input', align_picker && "dnb-date-picker--".concat(align_picker), (0, _componentHelper.isTrue)(stretch) && "dnb-date-picker--stretch", size && "dnb-date-picker--".concat(size))
       };
 
       if (locale !== null && locale !== void 0 && locale.code) {
@@ -466,6 +468,7 @@ var DatePicker = function (_React$PureComponent) {
         input_element: input_element,
         opened: opened,
         hidden: hidden,
+        size: size,
         status: status ? 'error' : null,
         status_state: status_state,
         locale: locale
@@ -575,6 +578,7 @@ _defineProperty(DatePicker, "defaultProps", {
   disabled: null,
   stretch: null,
   skeleton: null,
+  size: null,
   status: null,
   status_state: 'error',
   status_props: null,
@@ -647,6 +651,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = _objectSpread(_ob
   disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   stretch: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  size: _propTypes.default.oneOf(['default', 'small', 'medium', 'large']),
   status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
   status_state: _propTypes.default.string,
   status_props: _propTypes.default.object,

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

@@ -159,21 +159,21 @@ var DatePickerFooter = function (_React$PureComponent) {
       }, (isRange || (0, _componentHelper.isTrue)(show_submit_button)) && _react.default.createElement(_Button.default, {
         text: submit_button_text,
         onClick: this.onSubmitHandler,
-        "data-visual-test": "submit"
+        "data-testid": "submit"
       }) || _span || (_span = _react.default.createElement("span", null)), _react.default.createElement("span", null, (0, _componentHelper.isTrue)(show_reset_button) && _react.default.createElement(_Button.default, {
         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.default.createElement("span", null)), (isRange || (0, _componentHelper.isTrue)(show_cancel_button)) && _react.default.createElement(_Button.default, {
         text: cancel_button_text,
         icon: "close",
         icon_position: "left",
         variant: "tertiary",
         onClick: this.onCancelHandler,
-        "data-visual-test": "cancel"
+        "data-testid": "cancel"
       }) || _span3 || (_span3 = _react.default.createElement("span", null))));
     }
   }]);

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

@@ -103,7 +103,7 @@ var _DatePickerCalc = require("./DatePickerCalc");
 
 var _DatePickerContext = _interopRequireDefault(require("./DatePickerContext"));
 
-var _excluded = ["id", "title", "submitAttributes", "isRange", "maskOrder", "maskPlaceholder", "separatorRexExp", "onChange", "onFocus", "onSubmit", "selectedDateTitle", "showInput", "input_element", "locale", "disabled", "skeleton", "opened", "status", "status_state", "status_props"];
+var _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;
 
@@ -347,66 +347,73 @@ var DatePickerInput = function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "prepareCounting", function () {
       var _ref5 = _asyncToGenerator(regeneratorRuntime.mark(function _callee2(_ref4) {
-        var _this$callOnChange;
+        var keyCode, target, event, _this$callOnChange, isDate, isInRange, date, count, endPos;
 
-        var keyCode, target, event, isDate, isInRange, date, count, endPos;
         return regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
                 keyCode = _ref4.keyCode, target = _ref4.target, event = _ref4.event;
+                _context2.prev = 1;
                 isDate = target.getAttribute('class').match(/__input--([day|month|year]+)($|\s)/)[1];
-                isInRange = target.getAttribute('id').match(/[0-9]-([start|end]+)-/)[1];
+                isInRange = target.getAttribute('id').match(/-([start|end]+)-/)[1];
                 date = isInRange === 'start' ? _this.context.startDate : _this.context.endDate;
 
                 if (date) {
-                  _context2.next = 6;
+                  _context2.next = 7;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 6:
+              case 7:
                 count = keyCode === 'up' ? 1 : -1;
 
                 if (!(keyCode === 'up' || keyCode === 'down')) {
-                  _context2.next = 17;
+                  _context2.next = 18;
                   break;
                 }
 
                 _context2.t0 = isDate;
-                _context2.next = _context2.t0 === 'day' ? 11 : _context2.t0 === 'month' ? 13 : _context2.t0 === 'year' ? 15 : 17;
+                _context2.next = _context2.t0 === 'day' ? 12 : _context2.t0 === 'month' ? 14 : _context2.t0 === 'year' ? 16 : 18;
                 break;
 
-              case 11:
+              case 12:
                 date = (0, _addDays.default)(date, count);
-                return _context2.abrupt("break", 17);
+                return _context2.abrupt("break", 18);
 
-              case 13:
+              case 14:
                 date = (0, _addMonths.default)(date, count);
-                return _context2.abrupt("break", 17);
+                return _context2.abrupt("break", 18);
 
-              case 15:
+              case 16:
                 date = (0, _addYears.default)(date, count);
-                return _context2.abrupt("break", 17);
+                return _context2.abrupt("break", 18);
 
-              case 17:
+              case 18:
                 _this.callOnChange((_this$callOnChange = {}, _defineProperty(_this$callOnChange, isInRange === 'start' ? 'startDate' : 'endDate', date), _defineProperty(_this$callOnChange, "event", event), _this$callOnChange));
 
-                _context2.next = 20;
+                _context2.next = 21;
                 return wait(1);
 
-              case 20:
+              case 21:
                 endPos = target.value.length;
                 target.focus();
                 target.setSelectionRange(0, endPos);
+                _context2.next = 29;
+                break;
+
+              case 26:
+                _context2.prev = 26;
+                _context2.t1 = _context2["catch"](1);
+                (0, _componentHelper.warn)(_context2.t1);
 
-              case 23:
+              case 29:
               case "end":
                 return _context2.stop();
             }
           }
-        }, _callee2);
+        }, _callee2, null, [[1, 26]]);
       }));
 
       return function (_x2) {
@@ -680,7 +687,8 @@ var DatePickerInput = function (_React$PureComponent) {
         var _this2$props = _this2.props,
             input_element = _this2$props.input_element,
             separatorRexExp = _this2$props.separatorRexExp,
-            isRange = _this2$props.isRange;
+            isRange = _this2$props.isRange,
+            size = _this2$props.size;
         var _this2$context$transl = _this2.context.translation.DatePicker,
             day = _this2$context$transl.day,
             month = _this2$context$transl.month,
@@ -704,6 +712,7 @@ var DatePickerInput = function (_React$PureComponent) {
           }
 
           var DateField = input_element && _react.default.isValidElement(input_element) ? input_element : InputElement;
+          var inputSizeClassName = size && "dnb-date-picker__input--".concat(size);
 
           switch (state) {
             case 'd':
@@ -714,7 +723,7 @@ var DatePickerInput = function (_React$PureComponent) {
               }, _react.default.createElement(DateField, _extends({}, params, {
                 id: "".concat(_this2.props.id, "-").concat(mode, "-day"),
                 key: 'di' + i,
-                className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--day", params.className),
+                className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--day", params.className, inputSizeClassName),
                 size: "2",
                 mask: [/[0-3]/, /[0-9]/],
                 inputRef: _this2["_".concat(mode, "DayRef")],
@@ -735,7 +744,7 @@ var DatePickerInput = function (_React$PureComponent) {
               }, _react.default.createElement(DateField, _extends({}, params, {
                 id: "".concat(_this2.props.id, "-").concat(mode, "-month"),
                 key: 'mi' + i,
-                className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--month", params.className),
+                className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--month", params.className, inputSizeClassName),
                 size: "2",
                 mask: [/[0-1]/, /[0-9]/],
                 inputRef: _this2["_".concat(mode, "MonthRef")],
@@ -756,7 +765,7 @@ var DatePickerInput = function (_React$PureComponent) {
               }, _react.default.createElement(DateField, _extends({}, params, {
                 id: "".concat(_this2.props.id, "-").concat(mode, "-year"),
                 key: 'yi' + i,
-                className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--year", params.className),
+                className: (0, _classnames.default)("dnb-date-picker__input dnb-date-picker__input--year", params.className, inputSizeClassName),
                 size: "4",
                 mask: [/[1-2]/, /[0-9]/, /[0-9]/, /[0-9]/],
                 inputRef: _this2["_".concat(mode, "YearRef")],
@@ -806,6 +815,7 @@ var DatePickerInput = function (_React$PureComponent) {
           disabled = _this$props2.disabled,
           skeleton = _this$props2.skeleton,
           opened = _this$props2.opened,
+          size = _this$props2.size,
           status = _this$props2.status,
           status_state = _this$props2.status_state,
           status_props = _this$props2.status_props,
@@ -832,6 +842,7 @@ var DatePickerInput = function (_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, {
@@ -842,6 +853,7 @@ var DatePickerInput = function (_React$PureComponent) {
           className: (0, _classnames.default)(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",
@@ -871,6 +883,7 @@ _defineProperty(DatePickerInput, "defaultProps", {
   separatorRexExp: /[-/ ]/g,
   submitAttributes: null,
   isRange: null,
+  size: null,
   status: null,
   status_state: 'error',
   status_props: null,
@@ -894,6 +907,7 @@ process.env.NODE_ENV !== "production" ? DatePickerInput.propTypes = {
   separatorRexExp: _propTypes.default.instanceOf(RegExp),
   submitAttributes: _propTypes.default.object,
   isRange: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(['default', 'small', 'medium', 'large']),
   status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
   status_state: _propTypes.default.string,
   status_props: _propTypes.default.object,

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