@dnb/eufemia 9.26.1 → 9.29.0

package/components/badge/style/_badge.scss

@@ -0,0 +1,74 @@
+/*
+* Badge component
+*
+*/
+
+:root {
+  --badge-font-size: var(--font-size-x-small);
+  --badge-width: 1.5rem;
+  --badge-height: 1.5rem;
+  --badge-border-radius-information: calc(var(--badge-height) / 4);
+  --badge-border-radius-notification: calc(var(--badge-height) / 2);
+  --badge-line-height: var(--line-height-x-small);
+}
+
+.dnb-badge {
+  // Safari needs a correct CSS specificity
+  &,
+  .dnb-core-style & {
+    line-height: var(--badge-line-height);
+  }
+
+  display: inline-flex;
+  font-weight: var(--font-weight-medium);
+  flex-direction: row;
+  white-space: nowrap;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+
+  width: var(--badge-width);
+  height: var(--badge-height);
+  font-size: var(--badge-font-size);
+
+  &__root {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    flex-shrink: 0;
+    .dnb-badge {
+      display: flex;
+      overflow: hidden;
+      position: absolute;
+      z-index: 2; // Render the badge on top of a potential .dnb-img img.
+    }
+  }
+
+  &--variant-notification {
+    border-radius: var(--badge-border-radius-notification);
+  }
+
+  &--variant-information {
+    border-radius: var(--badge-border-radius-information);
+    min-width: var(--badge-width);
+    width: auto;
+    padding: 0 var(--spacing-xx-small);
+  }
+
+  &--horizontal-left {
+    left: 0;
+  }
+
+  &--horizontal-right {
+    right: 0;
+  }
+
+  &--vertical-bottom {
+    bottom: 0;
+  }
+
+  &--vertical-top {
+    top: 0;
+  }
+}

package/components/badge/style/dnb-badge.css

@@ -0,0 +1,151 @@
+/*
+* DNB Badge
+*
+*/
+/**
+ * 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-badge {
+  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-badge *,
+  .dnb-badge ::before,
+  .dnb-badge ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-badge ::before,
+  .dnb-badge ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Badge component
+*
+*/
+:root {
+  --badge-font-size: var(--font-size-x-small);
+  --badge-width: 1.5rem;
+  --badge-height: 1.5rem;
+  --badge-border-radius-information: calc(var(--badge-height)/4);
+  --badge-border-radius-information: calc(var(--badge-height) / 4);
+  --badge-border-radius-notification: calc(var(--badge-height)/2);
+  --badge-border-radius-notification: calc(var(--badge-height) / 2);
+  --badge-line-height: var(--line-height-x-small); }
+
+.dnb-badge {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  white-space: nowrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 1.5rem;
+  width: var(--badge-width);
+  height: 1.5rem;
+  height: var(--badge-height);
+  font-size: 0.875rem;
+  font-size: var(--badge-font-size); }
+  .dnb-badge,
+  .dnb-core-style .dnb-badge {
+    line-height: 1.125rem;
+    line-height: var(--badge-line-height); }
+  .dnb-badge__root {
+    position: relative;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    vertical-align: middle;
+    -ms-flex-negative: 0;
+        flex-shrink: 0; }
+    .dnb-badge__root .dnb-badge {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      overflow: hidden;
+      position: absolute;
+      z-index: 2; }
+  .dnb-badge--variant-notification {
+    border-radius: 0.75rem;
+    border-radius: calc(1.5rem / 2);
+    border-radius: var(--badge-border-radius-notification); }
+  .dnb-badge--variant-information {
+    border-radius: 0.375rem;
+    border-radius: calc(1.5rem / 4);
+    border-radius: var(--badge-border-radius-information);
+    min-width: 1.5rem;
+    min-width: var(--badge-width);
+    width: auto;
+    padding: 0 0.25rem;
+    padding: 0 var(--spacing-xx-small); }
+  .dnb-badge--horizontal-left {
+    left: 0; }
+  .dnb-badge--horizontal-right {
+    right: 0; }
+  .dnb-badge--vertical-bottom {
+    bottom: 0; }
+  .dnb-badge--vertical-top {
+    top: 0; }

package/components/badge/style/dnb-badge.min.css

@@ -0,0 +1 @@
+.dnb-badge{-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-badge *,.dnb-badge :after,.dnb-badge :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-badge :after,.dnb-badge :before{text-decoration:inherit;vertical-align:inherit}:root{--badge-font-size:var(--font-size-x-small);--badge-width:1.5rem;--badge-height:1.5rem;--badge-border-radius-information:calc(var(--badge-height)/4);--badge-border-radius-notification:calc(var(--badge-height)/2);--badge-line-height:var(--line-height-x-small)}.dnb-badge{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-line-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-content:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:.875rem;font-size:var(--badge-font-size);font-weight:500;font-weight:var(--font-weight-medium);height:1.5rem;height:var(--badge-height);justify-content:center;white-space:nowrap;width:1.5rem;width:var(--badge-width)}.dnb-badge,.dnb-core-style .dnb-badge{line-height:1.125rem;line-height:var(--badge-line-height)}.dnb-badge__root{-ms-flex-negative:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;flex-shrink:0;position:relative;vertical-align:middle}.dnb-badge__root .dnb-badge{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;position:absolute;z-index:2}.dnb-badge--variant-notification{border-radius:.75rem;border-radius:var(--badge-border-radius-notification)}.dnb-badge--variant-information{border-radius:.375rem;border-radius:var(--badge-border-radius-information);min-width:1.5rem;min-width:var(--badge-width);padding:0 .25rem;padding:0 var(--spacing-xx-small);width:auto}.dnb-badge--horizontal-left{left:0}.dnb-badge--horizontal-right{right:0}.dnb-badge--vertical-bottom{bottom:0}.dnb-badge--vertical-top{top:0}

package/components/badge/style/dnb-badge.scss

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

package/components/badge/style/index.d.ts

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

package/components/badge/style/index.js

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

package/components/badge/style/themes/dnb-badge-theme-ui.css

@@ -0,0 +1,21 @@
+/*
+* Badge theme
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-badge {
+  color: #fff;
+  color: var(--color-white); }
+  .dnb-badge--variant-information {
+    background-color: #14555a;
+    background-color: var(--color-emerald-green); }
+  .dnb-badge--variant-notification {
+    background-color: #dc2a2a;
+    background-color: var(--color-fire-red); }

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

@@ -0,0 +1 @@
+.dnb-badge{color:#fff;color:var(--color-white)}.dnb-badge--variant-information{background-color:#14555a;background-color:var(--color-emerald-green)}.dnb-badge--variant-notification{background-color:#dc2a2a;background-color:var(--color-fire-red)}

package/components/badge/style/themes/dnb-badge-theme-ui.scss

@@ -0,0 +1,17 @@
+/*
+* Badge theme
+*
+*/
+
+@import '../../../../style/themes/imports.scss';
+
+.dnb-badge {
+  color: var(--color-white);
+
+  &--variant-information {
+    background-color: var(--color-emerald-green);
+  }
+  &--variant-notification {
+    background-color: var(--color-fire-red);
+  }
+}

package/components/badge/style/themes/ui.d.ts

@@ -0,0 +1 @@
+export {};

package/components/badge/style/themes/ui.js

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

package/components/badge/style.d.ts

@@ -0,0 +1 @@
+export {};

package/components/badge/style.js

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

package/components/breadcrumb/Breadcrumb.js

@@ -13,7 +13,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 var defaultProps = {
   skeleton: false,
   navText: 'Back',
@@ -30,26 +30,26 @@ var Breadcrumb = function Breadcrumb(localProps) {
   var _context$translation;
 
   var context = React.useContext(Context);
-
-  var _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, {
+  var 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
-  }),
-      className = _usePropsWithContext.className,
-      skeleton = _usePropsWithContext.skeleton,
-      childrenItems = _usePropsWithContext.children,
-      variant = _usePropsWithContext.variant,
-      onClick = _usePropsWithContext.onClick,
-      navText = _usePropsWithContext.navText,
-      goBackText = _usePropsWithContext.goBackText,
-      homeText = _usePropsWithContext.homeText,
-      backToText = _usePropsWithContext.backToText,
-      styleType = _usePropsWithContext.styleType,
-      collapsedStyleType = _usePropsWithContext.collapsedStyleType,
-      overrideIsCollapsed = _usePropsWithContext.isCollapsed,
-      spacing = _usePropsWithContext.spacing,
-      data = _usePropsWithContext.data,
-      href = _usePropsWithContext.href,
-      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  });
+
+  var className = allProps.className,
+      skeleton = allProps.skeleton,
+      childrenItems = allProps.children,
+      variant = allProps.variant,
+      onClick = allProps.onClick,
+      navText = allProps.navText,
+      goBackText = allProps.goBackText,
+      homeText = allProps.homeText,
+      backToText = allProps.backToText,
+      styleType = allProps.styleType,
+      collapsedStyleType = allProps.collapsedStyleType,
+      overrideIsCollapsed = allProps.isCollapsed,
+      spacing = allProps.spacing,
+      data = allProps.data,
+      href = allProps.href,
+      props = _objectWithoutProperties(allProps, _excluded);
 
   var skeletonClasses = createSkeletonClass('font', skeleton, context);
   var spacingClasses = createSpacingClasses(props);
@@ -90,6 +90,7 @@ var Breadcrumb = function Breadcrumb(localProps) {
     }), 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/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/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/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", "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; }
 
@@ -70,6 +70,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 (isTrue(show_input) && _this._triangleRef.current && _this._innerRef.current) {
         try {
@@ -78,10 +79,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");
           }
@@ -281,6 +282,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,
@@ -336,7 +338,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: 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--".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), 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--".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), isTrue(stretch) && "dnb-date-picker--stretch", size && "dnb-date-picker--".concat(size))
       };
 
       if (locale !== null && locale !== void 0 && locale.code) {
@@ -396,6 +398,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
@@ -503,6 +506,7 @@ _defineProperty(DatePicker, "defaultProps", {
   disabled: null,
   stretch: null,
   skeleton: null,
+  size: null,
   status: null,
   status_state: 'error',
   status_props: null,
@@ -576,6 +580,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/components/date-picker/DatePickerFooter.js

@@ -117,21 +117,21 @@ var DatePickerFooter = function (_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/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.
    */