@dnb/eufemia 10.55.0 → 10.56.0

package/cjs/components/button/style/themes/dnb-button-theme-eiendom.css

@@ -10,6 +10,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -17,6 +19,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */

package/cjs/components/button/style/themes/dnb-button-theme-sbanken.css

@@ -6,6 +6,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -13,6 +15,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */

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

@@ -6,6 +6,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -13,6 +15,8 @@
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */

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

@@ -85,4 +85,19 @@
 }
 .dnb-card .dnb-card {
   --outline-width: 0.125rem;
+}
+
+@media screen and (min-width: 40.00625em) {
+  .dnb-card--auto-indent:has(+ .dnb-card,
+  + * + .dnb-card,
+  + * + * + .dnb-card,
+  + .dnb-help-button__content + .dnb-section + .dnb-card):not([class*=space__left]) {
+    margin-left: var(--spacing-medium);
+  }
+}
+.dnb-card--auto-indent:has(+ .dnb-card,
++ * + .dnb-card,
++ * + * + .dnb-card,
++ .dnb-help-button__content + .dnb-section + .dnb-card):not([class*=space__bottom]) {
+  margin-bottom: var(--spacing-small);
 }

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

@@ -1 +1 @@
-.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{--outline-color:var(--card-outline-color);--outline-width:var(--card-outline-width);--background-color:var(--card-background-color);background-color:var(--background-color)}.dnb-card .dnb-section{z-index:1}@media screen and (min-width:40.00625em){.dnb-card{--nested-space-l:calc(var(--padding-left, 0px)*-1);--nested-space-r:calc(var(--padding-right, 0px)*-1)}.dnb-card .dnb-section:after{--left:var(--nested-space-l);--width:calc(100% - var(--nested-space-r)*2)}}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}.dnb-card .dnb-card{--outline-width:0.125rem}
+.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{--outline-color:var(--card-outline-color);--outline-width:var(--card-outline-width);--background-color:var(--card-background-color);background-color:var(--background-color)}.dnb-card .dnb-section{z-index:1}@media screen and (min-width:40.00625em){.dnb-card{--nested-space-l:calc(var(--padding-left, 0px)*-1);--nested-space-r:calc(var(--padding-right, 0px)*-1)}.dnb-card .dnb-section:after{--left:var(--nested-space-l);--width:calc(100% - var(--nested-space-r)*2)}}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}.dnb-card .dnb-card{--outline-width:0.125rem}@media screen and (min-width:40.00625em){.dnb-card--auto-indent:has(+.dnb-card,+*+.dnb-card,+*+*+.dnb-card,+.dnb-help-button__content+.dnb-section+.dnb-card):not([class*=space__left]){margin-left:var(--spacing-medium)}}.dnb-card--auto-indent:has(+.dnb-card,+*+.dnb-card,+*+*+.dnb-card,+.dnb-help-button__content+.dnb-section+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}

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

@@ -119,3 +119,20 @@
     --outline-width: 0.125rem;
   }
 }
+
+.dnb-card--auto-indent:has(
+  + .dnb-card,
+  + * + .dnb-card,/* e.g. one paragraph */
+  + * + * + .dnb-card,/* e.g. two paragraphs */
+  + .dnb-help-button__content + .dnb-section + .dnb-card
+) {
+  &:not([class*='space__left']) {
+    @include allAbove(small) {
+      margin-left: var(--spacing-medium);
+    }
+  }
+
+  &:not([class*='space__bottom']) {
+    margin-bottom: var(--spacing-small);
+  }
+}

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

@@ -1,8 +1,9 @@
-.dnb-card {
+:root {
   --card-outline-color: var(--border-color, var(--color-lavender));
   --card-outline-width: 0.25rem;
   --card-background-color: var(--color-white);
 }
+
 .dnb-card .dnb-card {
   --card-outline-color: var(--color-black-8);
   --outline-width: 0.0625rem;

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

@@ -1 +1 @@
-.dnb-card{--card-outline-color:var(--border-color,var(--color-lavender));--card-outline-width:0.25rem;--card-background-color:var(--color-white)}.dnb-card .dnb-card{--card-outline-color:var(--color-black-8);--outline-width:0.0625rem;--rounded-corner:0.375rem}
+:root{--card-outline-color:var(--border-color,var(--color-lavender));--card-outline-width:0.25rem;--card-background-color:var(--color-white)}.dnb-card .dnb-card{--card-outline-color:var(--color-black-8);--outline-width:0.0625rem;--rounded-corner:0.375rem}

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

@@ -1,8 +1,10 @@
-.dnb-card {
+:root {
   --card-outline-color: var(--border-color, var(--color-lavender));
   --card-outline-width: 0.25rem;
   --card-background-color: var(--color-white);
+}
 
+.dnb-card {
   // Nested Cards
   & .dnb-card {
     --card-outline-color: var(--color-black-8);

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

@@ -25,109 +25,105 @@ export type DisplayPickerEvent = (React.MouseEvent<HTMLButtonElement | HTMLAncho
     focusOnHide?: boolean | string;
     event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
 };
-export type DatePickerProps = Omit<React.HTMLProps<HTMLElement>, 'ref' | 'children' | 'label' | 'size' | 'onBlur' | 'onFocus' | 'start'> & SpacingProps & {
+export type DatePickerProps = {
     /**
      * Defines the pre-filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`.
      */
     date?: DateType;
     /**
-     * To set the pre-filled starting date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `mask_placeholder`.
+     * To set the pre-filled starting date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `maskPlaceholder`.
      */
-    start_date?: DateType;
+    startDate?: DateType;
     /**
-     * To set the pre-filled ending date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `mask_placeholder`.
+     * To set the pre-filled ending date. Is used if `range={true}` is set to `true`. Defaults to `null`, showing the `maskPlaceholder`.
      */
-    end_date?: DateType;
+    endDate?: DateType;
     /**
-     * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
+     * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `startDate`.
      */
     month?: DateType;
     /**
-     * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
+     * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `startDate`.
      */
-    start_month?: DateType;
+    startMonth?: DateType;
     /**
-     * To display what month should be shown in the second calendar by default. Defaults to the `date` respective `start_date`.
+     * To display what month should be shown in the second calendar by default. Defaults to the `date` respective `startDate`.
      */
-    end_month?: DateType;
+    endMonth?: DateType;
     /**
-     * To limit a date range to a minimum `start_date`. Defaults to `null`.
+     * To limit a date range to a minimum `startDate`. Defaults to `null`.
      */
-    min_date?: DateType;
+    minDate?: DateType;
     /**
-     * To limit a date range to a maximum `end_date`. Defaults to `null`.
+     * To limit a date range to a maximum `endDate`. Defaults to `null`.
      */
-    max_date?: DateType;
+    maxDate?: DateType;
     /**
-     * Corrects the input date value to be the same as either `min_date` or `max_date`, when the user types in a date that is either before or after one of these. Defaults to `false`.
+     * Corrects the input date value to be the same as either `minDate` or `maxDate`, when the user types in a date that is either before or after one of these. Defaults to `false`.
      */
-    correct_invalid_date?: boolean;
+    correctInvalidDate?: boolean;
     /**
      * To define the order of the masked placeholder input fields. Defaults to `dd/mm/yyyy`
      */
-    mask_order?: string;
+    maskOrder?: string;
     /**
      * To display the placeholder on input. Defaults to `dd/mm/åååå`.
      */
-    mask_placeholder?: string;
+    maskPlaceholder?: string;
     /**
-     * Defines how the prop dates (`date`, `start_date` and `end_date`) should be parsed, e.g. `yyyy/MM/dd`. Defaults to `yyyy-MM-dd`.
+     * Defines how the prop dates (`date`, `startDate` and `endDate`) should be parsed, e.g. `yyyy/MM/dd`. Defaults to `yyyy-MM-dd`.
      */
-    date_format?: string;
+    dateFormat?: string;
     /**
      * Defines how the returned date, as a string, should be formatted as. Defaults to `yyyy-MM-dd`.
      */
-    return_format?: string;
+    returnFormat?: string;
     /**
      * If set to `true`, the navigation will be hidden. Defaults to `false`.
      */
-    hide_navigation?: boolean;
-    hide_navigation_buttons?: boolean;
+    hideNavigation?: boolean;
+    hideNavigationButtons?: boolean;
     /**
      * If set to `true`, the week days will be hidden. Defaults to `false`.
      */
-    hide_days?: boolean;
+    hideDays?: boolean;
     /**
      * Use `true` to only show the defined month. Disables the month navigation possibility. Defaults to `false`.
      */
-    only_month?: boolean;
+    onlyMonth?: boolean;
     /**
      * Use `true` to only show the last week in the current month if it needs to be shown. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`.
      */
-    hide_last_week?: boolean;
+    hideLastWeek?: boolean;
     /**
      * Once the date picker gets opened, there is a focus handling to ensure good accessibility. can be disabled with property. Defaults to `false`.
      */
-    disable_autofocus?: boolean;
-    enable_keyboard_nav?: boolean;
+    disableAutofocus?: boolean;
+    enableKeyboardNav?: boolean;
     /**
      * If the input fields with the mask should be visible. Defaults to `false`.
      */
-    show_input?: boolean;
+    showInput?: boolean;
     /**
-     * If set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is shown.
+     * If set to `true`, a submit button will be shown. You can change the default text by using `submitButtonText="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is shown.
      */
-    show_submit_button?: boolean;
+    showSubmitButton?: boolean;
     /**
-     * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is shown.
+     * If set to `true`, a cancel button will be shown. You can change the default text by using `cancelButtonText="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is shown.
      */
-    show_cancel_button?: boolean;
+    showCancelButton?: boolean;
     /**
-     * If set to `true`, a reset button will be shown. You can change the default text by using `reset_button_text="Tilbakestill"` Defaults to `false`.
+     * If set to `true`, a reset button will be shown. You can change the default text by using `resetButtonText="Tilbakestill"` Defaults to `false`.
      */
-    show_reset_button?: boolean;
-    submit_button_text?: string;
-    cancel_button_text?: string;
-    reset_button_text?: string;
-    reset_date?: boolean;
+    showResetButton?: boolean;
+    submitButtonText?: string;
+    cancelButtonText?: string;
+    resetButtonText?: string;
+    resetDate?: boolean;
     /**
      * To define the first day of the week. Defaults to `monday`.
      */
-    first_day?: string;
-    /**
-     * @deprecated set locale with `Provider` instead.
-     */
-    locale?: Locale;
+    firstDay?: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
     /**
      * If the date picker should support a range of two dates (starting and ending date). Defaults to `false`.
      */
@@ -145,21 +141,21 @@ export type DatePickerProps = Omit<React.HTMLProps<HTMLElement>, 'ref' | 'childr
      */
     label?: React.ReactNode;
     /**
-     * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.
+     * Use `labelDirection="vertical"` to change the label layout direction. Defaults to `horizontal`.
      */
-    label_direction?: 'vertical' | 'horizontal';
+    labelDirection?: 'vertical' | 'horizontal';
     /**
      * Use `true` to make the label only readable by screen readers.
      */
-    label_sr_only?: boolean;
+    labelSrOnly?: boolean;
     /**
-     * Gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => (<Return />)}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input.
+     * Gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `inputElement="input"`, a React element, or a render function `inputElement={(internalProps) => (<Return />)}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input.
      */
-    input_element?: InputInputElement;
+    inputElement?: InputInputElement;
     /**
      * Gives you the possibility to inject a React element showing up over the footer. Use it to customize `shortcuts`.
      */
-    addon_element?: React.ReactNode;
+    addonElement?: React.ReactNode;
     /**
      * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.
      */
@@ -184,12 +180,12 @@ export type DatePickerProps = Omit<React.HTMLProps<HTMLElement>, 'ref' | 'childr
     /**
      * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
      */
-    status_state?: FormStatusState;
+    statusState?: FormStatusState;
     /**
      * Use an object to define additional FormStatus properties.
      */
-    status_props?: FormStatusProps;
-    status_no_animation?: boolean;
+    statusProps?: FormStatusProps;
+    statusNoAnimation?: boolean;
     /**
      * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
      */
@@ -207,46 +203,46 @@ export type DatePickerProps = Omit<React.HTMLProps<HTMLElement>, 'ref' | 'childr
      */
     tooltip?: React.ReactNode;
     tabIndex?: number;
-    prevent_close?: boolean;
-    no_animation?: boolean;
+    preventClose?: boolean;
+    noAnimation?: boolean;
     direction?: 'auto' | 'top' | 'bottom';
     /**
      * Use `right` to change the calendar alignment direction. Defaults to `left`.
      */
-    align_picker?: 'auto' | 'left' | 'right';
+    alignPicker?: 'auto' | 'left' | 'right';
     className?: string;
     /**
      * Will be called right before every new calendar view gets rendered. See the example above.
      */
-    on_days_render?: (days: Array<CalendarDay>, nr?: DatePickerCalendarProps['nr']) => void;
+    onDaysRender?: (days: Array<CalendarDay>, nr?: DatePickerCalendarProps['nr']) => void;
     /**
      * Will be called on a date change event. Returns an `object`. See Returned Object below.
      */
-    on_change?: (event: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => void;
+    onChange?: (event: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => void;
     /**
      * Will be called on every input and date picker interaction. Returns an `object`. See Returned Object below.
      */
-    on_type?: (event: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => void;
+    onType?: (event: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => void;
     /**
      * Will be called once date-picker is visible.
      */
-    on_show?: (event: DatePickerEvent<DisplayPickerEvent>) => void;
+    onShow?: (event: DatePickerEvent<DisplayPickerEvent>) => void;
     /**
      * Will be called once date-picker is hidden.
      */
-    on_hide?: (event: DatePickerEvent<DisplayPickerEvent>) => void;
+    onHide?: (event: DatePickerEvent<DisplayPickerEvent>) => void;
     /**
      * Will be called once a user presses the submit button.
      */
-    on_submit?: (event: DatePickerEvent<React.MouseEvent<HTMLButtonElement>>) => void;
+    onSubmit?: (event: DatePickerEvent<React.MouseEvent<HTMLButtonElement>>) => void;
     /**
      * Will be called once a user presses the cancel button.
      */
-    on_cancel?: (event: DatePickerEvent<React.MouseEvent<HTMLButtonElement>>) => void;
+    onCancel?: (event: DatePickerEvent<React.MouseEvent<HTMLButtonElement>>) => void;
     /**
      * Will be called once a user presses the reset button.
      */
-    on_reset?: (event: DatePickerEvent<React.MouseEvent<HTMLButtonElement>>) => void;
+    onReset?: (event: DatePickerEvent<React.MouseEvent<HTMLButtonElement>>) => void;
     /**
      * Will be called once the input gets focus.
      */
@@ -256,7 +252,194 @@ export type DatePickerProps = Omit<React.HTMLProps<HTMLElement>, 'ref' | 'childr
      */
     onBlur?: (event: DatePickerEvent<React.FocusEvent<HTMLElement>>) => void;
 };
-declare function DatePicker(externalProps: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+type DatePickerDeprecatedProps = {
+    /**
+     * @deprecated use `startDate` instead.
+     */
+    start_date?: DateType;
+    /**
+     * @deprecated use `endDate` instead.
+     */
+    end_date?: DateType;
+    /**
+     * @deprecated use `startMonth` instead.
+     */
+    start_month?: DateType;
+    /**
+     * @deprecated use `endMonth` instead.
+     */
+    end_month?: DateType;
+    /**
+     * @deprecated use `minDate` instead.
+     */
+    min_date?: DateType;
+    /**
+     * @deprecated use `maxDate` instead.
+     */
+    max_date?: DateType;
+    /**
+     * @deprecated use `correctInvalidDate` instead.
+     */
+    correct_invalid_date?: boolean;
+    /**
+     * @deprecated use `maskOrder` instead.
+     */
+    mask_order?: string;
+    /**
+     * @deprecated use `maskPlaceholder` instead.
+     */
+    mask_placeholder?: string;
+    /**
+     * @deprecated use `dateFormat` instead.
+     */
+    date_format?: string;
+    /**
+     * @deprecated use `returnFormat` instead.
+     */
+    return_format?: string;
+    /**
+     * @deprecated use `hideNavigation` instead.
+     */
+    hide_navigation?: boolean;
+    /**
+     * @deprecated use `hideNavigationButtons` instead.
+     */
+    hide_navigation_buttons?: boolean;
+    /**
+     * @deprecated use `hideDays` instead.
+     */
+    hide_days?: boolean;
+    /**
+     * @deprecated use `onlyMonth` instead.
+     */
+    only_month?: boolean;
+    /**
+     * @deprecated use `hideLastWeek` instead.
+     */
+    hide_last_week?: boolean;
+    /**
+     * @deprecated use `disableAutofocus` instead.
+     */
+    disable_autofocus?: boolean;
+    /**
+     * @deprecated use `enableKeyboardNav` instead.
+     */
+    enable_keyboard_nav?: boolean;
+    /**
+     * @deprecated use `showInput` instead.
+     */
+    show_input?: boolean;
+    /**
+     * @deprecated use `showSubmitButton` instead.
+     */
+    show_submit_button?: boolean;
+    /**
+     * @deprecated use `showCancelButton` instead.
+     */
+    show_cancel_button?: boolean;
+    /**
+     * @deprecated
+     */
+    show_reset_button?: boolean;
+    /**
+     * @deprecated use `submitButtonText` instead.
+     */
+    submit_button_text?: string;
+    /**
+     * @deprecated use `cancelButtonText` instead.
+     */
+    cancel_button_text?: string;
+    /**
+     * @deprecated use `resetButtonText` instead.
+     */
+    reset_button_text?: string;
+    /**
+     * @deprecated use `resetDate` instead.
+     */
+    reset_date?: boolean;
+    /**
+     * @deprecated use `firstDay` instead.
+     */
+    first_day?: string;
+    /**
+     * @deprecated set locale with `Provider` instead.
+     */
+    locale?: Locale;
+    /**
+     * @deprecated use `labelDirection` instead.
+     */
+    label_direction?: 'vertical' | 'horizontal';
+    /**
+     * @deprecated use `labelSrOnly` instead.
+     */
+    label_sr_only?: boolean;
+    /**
+     * @deprecated use `inputElement` instead.
+     */
+    input_element?: InputInputElement;
+    /**
+     * @deprecated use `addonElement` instead.
+     */
+    addon_element?: React.ReactNode;
+    /**
+     * @deprecated use `statusState` instead.
+     */
+    status_state?: FormStatusState;
+    /**
+     * @deprecated use `statusProps` instead.
+     */
+    status_props?: FormStatusProps;
+    /**
+     * @deprecated use `statusNoAnimation` instead.
+     */
+    status_no_animation?: boolean;
+    /**
+     * @deprecated use `preventClose` instead.
+     */
+    prevent_close?: boolean;
+    /**
+     * @deprecated use `no_animation` instead.
+     */
+    no_animation?: boolean;
+    /**
+     * @deprecated use `alignPicker` instead.
+     */
+    align_picker?: 'auto' | 'left' | 'right';
+    /**
+     * @deprecated use `onDaysRender` instead.
+     */
+    on_days_render?: (days: Array<CalendarDay>, nr?: DatePickerCalendarProps['nr']) => void;
+    /**
+     * @deprecated use `onChange` instead.
+     */
+    on_change?: (event: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => void;
+    /**
+     * @deprecated use `onType` instead.
+     */
+    on_type?: (event: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => void;
+    /**
+     * @deprecated use `onShow` instead.
+     */
+    on_show?: (event: DatePickerEvent<DisplayPickerEvent>) => void;
+    /**
+     * @deprecated use `onHide` instead.
+     */
+    on_hide?: (event: DatePickerEvent<DisplayPickerEvent>) => void;
+    /**
+     * @deprecated use `onSubmit` instead.
+     */
+    on_submit?: (event: DatePickerEvent<React.MouseEvent<HTMLButtonElement>>) => void;
+    /**
+     * @deprecated use `onCancel` instead.
+     */
+    on_cancel?: (event: DatePickerEvent<React.MouseEvent<HTMLButtonElement>>) => void;
+    /**
+     * @deprecated use `onReset` instead.
+     */
+    on_reset?: (event: DatePickerEvent<React.MouseEvent<HTMLButtonElement>>) => void;
+};
+export type DatePickerAllProps = DatePickerProps & DatePickerDeprecatedProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'children' | 'label' | 'size' | 'onChange' | 'onBlur' | 'onFocus' | 'onSubmit' | 'start'>;
+declare function DatePicker(externalProps: DatePickerAllProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DatePicker {
     var _supportsSpacingProps: boolean;
 }