@am92/react-design-system 2.10.2 → 3.0.1-beta.0

package/dist/x-charts/Types/index.d.ts

@@ -12,16 +12,11 @@ export { ChartsAxisHighlightProps as DsChartsAxisHighlightProps } from '@mui/x-c
 export { ChartsClipPathProps as DsChartsClipPathProps } from '@mui/x-charts';
 export { ChartsGridProps as DsChartsGridProps } from '@mui/x-charts';
 export { ChartsLegendProps as DsChartsLegendProps } from '@mui/x-charts';
-export { ChartsOnAxisClickHandlerProps as DsChartsOnAxisClickHandlerProps } from '@mui/x-charts';
 export { ChartsSurfaceProps as DsChartsSurfaceProps } from '@mui/x-charts';
 export { ChartsTextProps as DsChartsTextProps } from '@mui/x-charts';
 export { ChartsTooltipProps as DsChartsTooltipProps } from '@mui/x-charts';
-export { ChartsVoronoiHandlerProps as DsChartsVoronoiHandlerProps } from '@mui/x-charts';
 export { ChartsXAxisProps as DsChartsXAxisProps } from '@mui/x-charts';
 export { ChartsYAxisProps as DsChartsYAxisProps } from '@mui/x-charts';
-export { ChartsAxisContentProps as DsChartsAxisContentProps } from '@mui/x-charts';
-export { ChartsItemContentProps as DsChartsItemContentProps } from '@mui/x-charts';
-export { LegendRendererProps as DsLegendRendererProps } from '@mui/x-charts';
 export { GaugeProps as DsGaugeProps } from '@mui/x-charts';
 export { GaugeContainerProps as DsGaugeContainerProps } from '@mui/x-charts';
 export { LineChartProps as DsLineChartProps } from '@mui/x-charts';
@@ -37,7 +32,6 @@ export { PieArcLabelPlotProps as DsPieArcLabelPlotProps } from '@mui/x-charts';
 export { PieArcPlotProps as DsPieArcPlotProps } from '@mui/x-charts';
 export { PieChartProps as DsPieChartProps } from '@mui/x-charts';
 export { PiePlotProps as DsPiePlotProps } from '@mui/x-charts';
-export { ResponsiveChartContainerProps as DsResponsiveChartContainerProps } from '@mui/x-charts';
 export { ScatterProps as DsScatterProps } from '@mui/x-charts';
 export { ScatterChartProps as DsScatterChartProps } from '@mui/x-charts';
 export { ScatterPlotProps as DsScatterPlotProps } from '@mui/x-charts';

package/dist/x-datepicker/Components/DsDatePicker/DateCalenderHeader.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { PickersCalendarHeaderProps } from '@mui/x-date-pickers';
-export declare const DateCalenderHeader: React.ForwardRefExoticComponent<PickersCalendarHeaderProps<Date> & React.RefAttributes<HTMLDivElement>>;
+export declare const DateCalenderHeader: React.ForwardRefExoticComponent<PickersCalendarHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/x-datepicker/Components/DsDatePicker/DateCalenderHeader.js

@@ -11,9 +11,9 @@ export const DateCalenderHeader = React.forwardRef(function PickersCalendarHeade
         name: 'MuiPickersCalendarHeader'
     });
     const { currentMonth, view } = props;
-    const handleMonthChange = (direction, numberOfMonths) => () => {
+    const handleMonthChange = (numberOfMonths) => () => {
         const { currentMonth, onMonthChange } = props;
-        onMonthChange(utils.addMonths(currentMonth, numberOfMonths), direction);
+        onMonthChange(utils.addMonths(currentMonth, numberOfMonths));
     };
     const handleViewShow = (view) => () => {
         const { onViewChange } = props;
@@ -21,7 +21,20 @@ export const DateCalenderHeader = React.forwardRef(function PickersCalendarHeade
     };
     const isYearNavigationDisabled = view === 'month';
     const isMonthNavigationDisabled = view === 'year';
-    return (_jsxs(DsStack, { direction: "row", justifyContent: "space-between", 
+    return (_jsxs(DsStack, { direction: "row", 
         // spacing='var(--ds-spacing-frostbite)'
-        sx: { p: 'var(--ds-spacing-frostbite)' }, children: [_jsxs(DsStack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: "var(--ds-spacing-frostbite)", children: [_jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange('left', -1), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-left-line" }) }), _jsxs(DsButtonBase, { disabled: isMonthNavigationDisabled, onClick: handleViewShow('month'), children: [_jsx(DsTypography, { variant: "bodyBoldSmall", color: isMonthNavigationDisabled ? 'text.disabled' : 'text.primary', children: utils.formatByString(currentMonth, utils.formats.monthShort) }), _jsx(DsRemixIcon, { className: "ri-arrow-drop-down-fill", color: isMonthNavigationDisabled ? 'iconDisabled' : 'iconDefault', sx: { mr: 'var(--ds-spacing-quickFreeze)' } })] }), _jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange('right', 1), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-right-line" }) })] }), _jsxs(DsStack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: "var(--ds-spacing-frostbite)", children: [_jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange('left', -12), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-left-line" }) }), _jsxs(DsButtonBase, { disabled: isYearNavigationDisabled, onClick: handleViewShow('year'), children: [_jsx(DsTypography, { variant: "bodyBoldSmall", color: isYearNavigationDisabled ? 'text.disabled' : 'text.primary', children: utils.formatByString(currentMonth, utils.formats.year) }), _jsx(DsRemixIcon, { className: "ri-arrow-drop-down-fill", color: isYearNavigationDisabled ? 'iconDisabled' : 'iconDefault', sx: { mr: 'var(--ds-spacing-quickFreeze)' } })] }), _jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange('right', 12), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-right-line" }) })] })] }));
+        sx: {
+            justifyContent: 'space-between',
+            p: 'var(--ds-spacing-frostbite)'
+        }, children: [_jsxs(DsStack, { direction: "row", spacing: "var(--ds-spacing-frostbite)", sx: {
+                    justifyContent: "space-between",
+                    alignItems: "center"
+                }, children: [_jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange(-1), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-left-line" }) }), _jsxs(DsButtonBase, { disabled: isMonthNavigationDisabled, onClick: handleViewShow('month'), children: [_jsx(DsTypography, { variant: "bodyBoldSmall", sx: {
+                                    color: isMonthNavigationDisabled ? 'text.disabled' : 'text.primary'
+                                }, children: utils.formatByString(currentMonth, utils.formats.monthShort) }), _jsx(DsRemixIcon, { className: "ri-arrow-drop-down-fill", color: isMonthNavigationDisabled ? 'iconDisabled' : 'iconDefault', sx: { mr: 'var(--ds-spacing-quickFreeze)' } })] }), _jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange(1), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-right-line" }) })] }), _jsxs(DsStack, { direction: "row", spacing: "var(--ds-spacing-frostbite)", sx: {
+                    justifyContent: "space-between",
+                    alignItems: "center"
+                }, children: [_jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange(-12), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-left-line" }) }), _jsxs(DsButtonBase, { disabled: isYearNavigationDisabled, onClick: handleViewShow('year'), children: [_jsx(DsTypography, { variant: "bodyBoldSmall", sx: {
+                                    color: isYearNavigationDisabled ? 'text.disabled' : 'text.primary'
+                                }, children: utils.formatByString(currentMonth, utils.formats.year) }), _jsx(DsRemixIcon, { className: "ri-arrow-drop-down-fill", color: isYearNavigationDisabled ? 'iconDisabled' : 'iconDefault', sx: { mr: 'var(--ds-spacing-quickFreeze)' } })] }), _jsx(DsIconButton, { disabled: isYearNavigationDisabled || isMonthNavigationDisabled, onClick: handleMonthChange(12), children: _jsx(DsRemixIcon, { className: "ri-arrow-drop-right-line" }) })] })] }));
 });

package/dist/x-datepicker/Components/DsDatePicker/DatePickerTextField.d.ts

@@ -1,12 +1,12 @@
 import { DateFieldProps } from '@mui/x-date-pickers';
-import { FunctionComponent } from 'react';
+import React from 'react';
 import { DsTextFieldProps } from '../../../Components';
 export interface IDatePickerTextFieldProps extends Omit<DsTextFieldProps, 'margin' | 'onInvalid' | 'onKeyDown' | 'onBlur' | 'onKeyUp' | 'ref'> {
     setOpen?: (open: boolean) => void;
-    InputProps?: DateFieldProps<Date>['InputProps'];
-    ref?: DateFieldProps<Date>['ref'];
+    InputProps?: DateFieldProps['InputProps'];
+    ref?: DateFieldProps['ref'];
     focused?: boolean;
     ownerState?: any;
 }
-declare const DatePickerTextField: FunctionComponent<IDatePickerTextFieldProps>;
+declare const DatePickerTextField: React.ForwardRefExoticComponent<Omit<IDatePickerTextFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default DatePickerTextField;

package/dist/x-datepicker/Components/DsDatePicker/DatePickerTextField.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useThemeProps } from '@mui/system';
+import React from 'react';
 import { DsTextField } from '../../../Components';
-const DatePickerTextField = (props) => {
+const DatePickerTextField = React.forwardRef((props, ref) => {
     const mergedProps = useThemeProps({
         props: props,
         name: 'MuiPickersInput'
     });
-    const { setOpen, ref, InputProps, focused, ownerState, ...other } = mergedProps;
+    const { setOpen, InputProps, focused, ownerState, ...other } = mergedProps;
     const { readOnly } = InputProps || {};
     return _jsx(DsTextField, { readOnly: readOnly, ...other });
-};
+});
 export default DatePickerTextField;

package/dist/x-datepicker/Components/DsDatePicker/DefaultActionBar.d.ts

@@ -1,7 +1,4 @@
-import { PickersActionBarProps } from '@mui/x-date-pickers';
-export declare function DefaultActionBar(props: PickersActionBarProps & {
-    ownerState?: any;
-}): import("react/jsx-runtime").JSX.Element | null;
-export declare namespace DefaultActionBar {
-    var displayName: string;
-}
+export declare const DefaultActionBar: {
+    (): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/x-datepicker/Components/DsDatePicker/DefaultActionBar.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLocaleText } from '@mui/x-date-pickers/internals';
+import { usePickerTranslations, usePickerContext } from '@mui/x-date-pickers';
 import { DsButtonGroup, DsButton } from '../../../Components';
-export function DefaultActionBar(props) {
-    const { onAccept, onClear, ownerState, actions } = props;
-    const { value } = ownerState || {};
+export const DefaultActionBar = () => {
+    const { clearValue, acceptValueChanges, value, view } = usePickerContext();
+    const actions = view === 'day' ? ['clear', 'accept'] : [];
     if (actions == null || actions?.length === 0) {
         return null;
     }
-    const translations = useLocaleText();
+    const translations = usePickerTranslations();
     const isClearVisible = actions.includes('clear');
     const isConfirmVisible = actions.includes('accept');
     return (_jsxs(DsButtonGroup, { sx: {
@@ -19,9 +19,9 @@ export function DefaultActionBar(props) {
         }, justifyContent: "space-between", size: "medium", children: [isClearVisible && (_jsx(DsButton, { sx: {
                     py: 'var(--ds-spacing-glacial)',
                     px: 'var(--ds-spacing-pleasant)'
-                }, variant: "text", size: "medium", color: "secondary", onClick: onClear, disabled: !value, children: translations.clearButtonLabel })), isConfirmVisible && (_jsx(DsButton, { sx: {
+                }, variant: "text", size: "medium", color: "secondary", onClick: clearValue, disabled: !value, children: translations.clearButtonLabel })), isConfirmVisible && (_jsx(DsButton, { sx: {
                     py: 'var(--ds-spacing-glacial)',
                     px: 'var(--ds-spacing-pleasant)'
-                }, variant: "text", size: "medium", color: "secondary", onClick: onAccept, disabled: !value, children: translations.okButtonLabel }))] }));
-}
+                }, variant: "text", size: "medium", color: "secondary", onClick: acceptValueChanges, disabled: !value, children: translations.okButtonLabel }))] }));
+};
 DefaultActionBar.displayName = 'DefaultActionBar';

package/dist/x-datepicker/Components/DsDatePicker/DefaultToolbar.d.ts

@@ -1,5 +1,3 @@
 import React from 'react';
 import { DatePickerToolbarProps } from '@mui/x-date-pickers';
-export declare const DefaultToolbar: React.ForwardRefExoticComponent<DatePickerToolbarProps<Date> & {
-    ownerState?: any;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const DefaultToolbar: React.ForwardRefExoticComponent<DatePickerToolbarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/x-datepicker/Components/DsDatePicker/DefaultToolbar.js

@@ -1,14 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers';
 import { useUtils } from '@mui/x-date-pickers/internals';
-import { useThemeProps } from '@mui/system';
-import { useLocaleText } from '@mui/x-date-pickers/internals';
 import { DsStack, DsTypography, DsIconButton, DsRemixIcon } from '../../../Components';
 export const DefaultToolbar = React.forwardRef(function DatePickerToolbar(inProps, ref) {
-    const props = useThemeProps({ props: inProps, name: 'MuiDatePickerToolbar' });
-    const { value, ownerState } = props;
-    const { onCancel } = ownerState;
-    const translations = useLocaleText();
+    const { value, cancelValueChanges } = usePickerContext();
+    const translations = usePickerTranslations();
     const utils = useUtils();
     const dateText = (value && `: ${utils.formatByString(value, utils.formats.fullDate)}`) || '';
     return (_jsx(DsStack, { sx: {
@@ -21,5 +18,5 @@ export const DefaultToolbar = React.forwardRef(function DatePickerToolbar(inProp
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between'
-            }, variant: "headingBoldExtraSmall", children: [`${translations.datePickerToolbarTitle}${dateText}`, _jsx(DsIconButton, { onClick: onCancel, children: _jsx(DsRemixIcon, { className: "ri-close-line" }) })] }) }));
+            }, variant: "headingBoldExtraSmall", children: [`${translations.datePickerToolbarTitle}${dateText}`, _jsx(DsIconButton, { onClick: cancelValueChanges, children: _jsx(DsRemixIcon, { className: "ri-close-line" }) })] }) }));
 });

package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Component.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { DsDatePickerProps } from './DsDatePicker.Types';
-export declare const DsDatePicker: React.FC<DsDatePickerProps<Date>>;
+export declare const DsDatePicker: React.FC<DsDatePickerProps>;

package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Component.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useRef } from 'react';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { DatePicker, LocalizationProvider, } from '@mui/x-date-pickers';
 import { DefaultActionBar } from './DefaultActionBar';
 import { DefaultToolbar } from './DefaultToolbar';
-import { DsDatePickerDefaultProps } from './DsDatePicker.Types';
 import { DateCalenderHeader } from './DateCalenderHeader';
 import { getDateFromValue, getErrorFromErrorMap, getValueTypeFromValue } from './utils';
 import { DsInputAdornment, DsIconButton, DsRemixIcon } from '../../../Components';
 import { useThemeProps } from '@mui/system';
 import DatePickerTextField from './DatePickerTextField';
+import { mergeSlotProps } from '../../../utils';
 export const DsDatePicker = inProps => {
     const props = useThemeProps({
         props: inProps,
@@ -78,20 +78,14 @@ export const DsDatePicker = inProps => {
                     ...props.slotProps?.textField,
                     endAdornment: (_jsx(DsInputAdornment, { position: "end", disablePointerEvents: disabled, children: _jsx(DsIconButton, { disabled: disabled, onClick: onOpen, children: _jsx(DsRemixIcon, { className: "ri-calendar-line", fontSize: "bitterCold" }) }) }))
                 },
-                actionBar: ownerState => ({
-                    actions: ownerState.view === 'day' ? ['clear', 'accept'] : [],
-                    ...props.slotProps?.actionBar
-                }),
-                popper: {
+                popper: mergeSlotProps(props.slotProps?.popper, {
                     anchorEl: ref.current,
                     // style to unset fixed width
                     sx: {
                         '.MuiMonthCalendar-root': {
                             width: '100%'
                         }
-                    },
-                    ...props.slotProps?.popper
-                }
-            }, readOnly: readOnly, disabled: disabled, format: format, open: open, reduceAnimations: true, onOpen: onOpen, onClose: onClose, onChange: handleChange, onViewChange: handleViewChange, onError: handleError, views: propViews || views, value: getDateFromValue(value, valueType, format), defaultValue: getDateFromValue(defaultValue, valueType, format), inputRef: ref }) }));
+                    }
+                })
+            }, readOnly: readOnly, disabled: disabled, format: format, open: open, reduceAnimations: true, onOpen: onOpen, onClose: onClose, onChange: handleChange, onViewChange: handleViewChange, onError: handleError, views: propViews || views, value: getDateFromValue(value, valueType, format), defaultValue: getDateFromValue(defaultValue, valueType, format), inputRef: ref, enableAccessibleFieldDOMStructure: false }) }));
 };
-DsDatePicker.defaultProps = DsDatePickerDefaultProps;

package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Overrides.d.ts

@@ -1,10 +1,10 @@
 export declare const DsDatePickerOverrides: {
     MuiDatePicker: {
-        defaultProps: import("./DsDatePicker.Types").DsDatePickerProps<Date>;
+        defaultProps: import("./DsDatePicker.Types").DsDatePickerProps;
     };
     MuiLocalizationProvider: {
         defaultProps: {
-            adapterLocale: Locale;
+            adapterLocale: import("date-fns").Locale;
             localeText: {
                 okButtonLabel: string;
                 previousMonth?: string | undefined;
@@ -15,19 +15,25 @@ export declare const DsDatePickerOverrides: {
                 calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
                 openPreviousView?: string | undefined;
                 openNextView?: string | undefined;
-                calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers").DateView) => string) | undefined;
+                calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers/models").DateView) => string) | undefined;
                 start?: string | undefined;
                 end?: string | undefined;
+                startDate?: string | undefined;
+                startTime?: string | undefined;
+                endDate?: string | undefined;
+                endTime?: string | undefined;
                 cancelButtonLabel?: string | undefined;
                 clearButtonLabel?: string | undefined;
                 todayButtonLabel?: string | undefined;
-                clockLabelText?: ((view: import("@mui/x-date-pickers").TimeView, time: any, adapter: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                nextStepButtonLabel?: string | undefined;
+                clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
                 hoursClockNumberText?: ((hours: string) => string) | undefined;
                 minutesClockNumberText?: ((minutes: string) => string) | undefined;
                 secondsClockNumberText?: ((seconds: string) => string) | undefined;
-                selectViewText?: ((view: import("@mui/x-date-pickers/internals/models").TimeViewWithMeridiem) => string) | undefined;
-                openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
-                openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                selectViewText?: ((view: import("@mui/x-date-pickers/internals").TimeViewWithMeridiem) => string) | undefined;
+                openDatePickerDialogue?: ((formattedDate: string | null) => string) | undefined;
+                openTimePickerDialogue?: ((formattedTime: string | null) => string) | undefined;
+                openRangePickerDialogue?: ((formattedRange: string | null) => string) | undefined;
                 fieldClearLabel?: string | undefined;
                 timeTableLabel?: string | undefined;
                 dateTableLabel?: string | undefined;
@@ -36,14 +42,14 @@ export declare const DsDatePickerOverrides: {
                     format: string;
                 }) => string) | undefined;
                 fieldMonthPlaceholder?: ((params: {
-                    contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                    contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
                     format: string;
                 }) => string) | undefined;
                 fieldDayPlaceholder?: ((params: {
                     format: string;
                 }) => string) | undefined;
                 fieldWeekDayPlaceholder?: ((params: {
-                    contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                    contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
                     format: string;
                 }) => string) | undefined;
                 fieldHoursPlaceholder?: ((params: {
@@ -58,14 +64,24 @@ export declare const DsDatePickerOverrides: {
                 fieldMeridiemPlaceholder?: ((params: {
                     format: string;
                 }) => string) | undefined;
+                year?: string | undefined;
+                month?: string | undefined;
+                day?: string | undefined;
+                weekDay?: string | undefined;
+                hours?: string | undefined;
+                minutes?: string | undefined;
+                seconds?: string | undefined;
+                meridiem?: string | undefined;
+                empty?: string | undefined;
                 datePickerToolbarTitle?: string | undefined;
                 timePickerToolbarTitle?: string | undefined;
                 dateTimePickerToolbarTitle?: string | undefined;
                 dateRangePickerToolbarTitle?: string | undefined;
+                timeRangePickerToolbarTitle?: string | undefined;
             };
         };
     };
-    MuiPickersPopper: {
+    MuiPickerPopper: {
         styleOverrides: {
             root: {
                 ' &[data-popper-placement^="right"]': {
@@ -162,9 +178,16 @@ export declare const DsDatePickerOverrides: {
             };
         };
     };
-    MuiPickersMonth: {
+    MuiMonthCalendar: {
         styleOverrides: {
-            monthButton: {
+            root: {
+                rowGap: string;
+                paddingTop: string;
+                paddingBottom: string;
+                paddingLeft: string;
+                paddingRight: string;
+            };
+            button: {
                 fontWeight: string;
                 fontSize: string;
                 lineHeight: string;
@@ -230,25 +253,7 @@ export declare const DsDatePickerOverrides: {
                 marginBottom: string;
                 backgroundColor: string;
             };
-        };
-    };
-    MuiMonthCalendar: {
-        styleOverrides: {
-            root: {
-                rowGap: string;
-                paddingTop: string;
-                paddingBottom: string;
-                paddingLeft: string;
-                paddingRight: string;
-            };
-        };
-    };
-    MuiPickersYear: {
-        styleOverrides: {
-            root: {
-                flexBasis: string;
-            };
-            yearButton: {
+            button: {
                 width: string;
                 paddingTop: string;
                 paddingBottom: string;

package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Overrides.js

@@ -7,7 +7,7 @@ export const DsDatePickerOverrides = {
     MuiLocalizationProvider: {
         defaultProps: DsDatePickerLocaleEnUS.components.MuiLocalizationProvider.defaultProps
     },
-    MuiPickersPopper: {
+    MuiPickerPopper: {
         styleOverrides: {
             root: {
                 ' &[data-popper-placement^="right"]': {
@@ -106,9 +106,16 @@ export const DsDatePickerOverrides = {
             }
         }
     },
-    MuiPickersMonth: {
+    MuiMonthCalendar: {
         styleOverrides: {
-            monthButton: {
+            root: {
+                rowGap: 'var(--ds-spacing-mild)',
+                paddingTop: 'var(--ds-spacing-tropical)',
+                paddingBottom: 'var(--ds-spacing-tropical)',
+                paddingLeft: 'var(--ds-spacing-bitterCold)',
+                paddingRight: 'var(--ds-spacing-bitterCold)'
+            },
+            button: {
                 fontWeight: 'var(--ds-typo-bodyRegularLarge-fontWeight)',
                 fontSize: 'var(--ds-typo-bodyRegularLarge-fontSize)',
                 lineHeight: 'var(--ds-typo-bodyRegularLarge-lineHeight)',
@@ -173,26 +180,8 @@ export const DsDatePickerOverrides = {
                 marginTop: 'var(--ds-spacing-warm)',
                 marginBottom: 'var(--ds-spacing-warm)',
                 backgroundColor: 'var(--ds-colour-surfaceBackground)'
-            }
-        }
-    },
-    MuiMonthCalendar: {
-        styleOverrides: {
-            root: {
-                rowGap: 'var(--ds-spacing-mild)',
-                paddingTop: 'var(--ds-spacing-tropical)',
-                paddingBottom: 'var(--ds-spacing-tropical)',
-                paddingLeft: 'var(--ds-spacing-bitterCold)',
-                paddingRight: 'var(--ds-spacing-bitterCold)'
-            }
-        }
-    },
-    MuiPickersYear: {
-        styleOverrides: {
-            root: {
-                flexBasis: '100%'
             },
-            yearButton: {
+            button: {
                 width: '100%',
                 paddingTop: 'var(--ds-spacing-quickFreeze)',
                 paddingBottom: 'var(--ds-spacing-quickFreeze)',

package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Types.d.ts

@@ -4,7 +4,7 @@ import { Locale } from 'date-fns';
 export type TErrorMapKeys = Exclude<DateValidationError, null>;
 export type TValue = string | Date | undefined | null;
 export type TValueType = 'date' | 'formattedValue' | 'ISO' | undefined;
-export interface DsDatePickerProps<TDate extends Date> extends Omit<DatePickerProps<TDate>, 'open' | 'onOpen' | 'onClose' | 'yearsPerRow' | 'monthsPerRow' | 'onChange' | 'onError' | 'value' | 'defaultValue'>, Pick<DsTextFieldProps, 'required' | 'fullWidth' | 'label' | 'InputLabelProps' | 'labelSupportText' | 'helperText' | 'HelperTextProps' | 'FormControlProps' | 'success' | 'error' | 'onFocus' | 'onBlur'> {
+export interface DsDatePickerProps extends Omit<DatePickerProps, 'open' | 'onOpen' | 'onClose' | 'yearsPerRow' | 'monthsPerRow' | 'onChange' | 'onError' | 'value' | 'defaultValue'>, Pick<DsTextFieldProps, 'required' | 'fullWidth' | 'label' | 'InputLabelProps' | 'labelSupportText' | 'helperText' | 'HelperTextProps' | 'FormControlProps' | 'success' | 'error' | 'onFocus' | 'onBlur'> {
     onChange?: (name: string, value: TValue) => void;
     onError?: (name: string, error: string, errorCode: DateValidationError, value: TValue | null) => void;
     name: string;
@@ -12,6 +12,6 @@ export interface DsDatePickerProps<TDate extends Date> extends Omit<DatePickerPr
     defaultValue?: TValue;
     valueType?: TValueType;
     errorMap?: Partial<Record<TErrorMapKeys, string>>;
-    LocalizationProviderProps?: LocalizationProviderProps<Date, Locale>;
+    LocalizationProviderProps?: LocalizationProviderProps<Locale>;
 }
-export declare const DsDatePickerDefaultProps: DsDatePickerProps<Date>;
+export declare const DsDatePickerDefaultProps: DsDatePickerProps;

package/dist/x-datepicker/Components/DsDatePicker/utils.d.ts

@@ -1,5 +1,5 @@
 import { DsDatePickerProps, TValue, TValueType } from './DsDatePicker.Types';
 import { DateValidationError } from '@mui/x-date-pickers';
-export declare const getDateFromValue: (value: TValue, valueType: TValueType, format?: DsDatePickerProps<Date>["format"]) => Date | undefined | null;
-export declare const getValueTypeFromValue: (value: Date | null, valueType: TValueType, format?: DsDatePickerProps<Date>["format"]) => TValue;
-export declare const getErrorFromErrorMap: (errorMap: DsDatePickerProps<Date>["errorMap"], error: DateValidationError, value: TValue | null) => string;
+export declare const getDateFromValue: (value: TValue, valueType: TValueType, format?: DsDatePickerProps["format"]) => Date | undefined | null;
+export declare const getValueTypeFromValue: (value: Date | null, valueType: TValueType, format?: DsDatePickerProps["format"]) => TValue;
+export declare const getErrorFromErrorMap: (errorMap: DsDatePickerProps["errorMap"], error: DateValidationError, value: TValue | null) => string;

package/dist/x-datepicker/Locale/DsDatePickerLocaleBeBY.d.ts

@@ -2,7 +2,7 @@ export declare const DsDatePickerLocaleBeBY: {
     components: {
         MuiLocalizationProvider: {
             defaultProps: {
-                adapterLocale: Locale;
+                adapterLocale: import("date-fns/locale").Locale;
                 localeText: {
                     okButtonLabel: string;
                     previousMonth?: string | undefined;
@@ -13,19 +13,25 @@ export declare const DsDatePickerLocaleBeBY: {
                     calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
                     openPreviousView?: string | undefined;
                     openNextView?: string | undefined;
-                    calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers").DateView) => string) | undefined;
+                    calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers/models").DateView) => string) | undefined;
                     start?: string | undefined;
                     end?: string | undefined;
+                    startDate?: string | undefined;
+                    startTime?: string | undefined;
+                    endDate?: string | undefined;
+                    endTime?: string | undefined;
                     cancelButtonLabel?: string | undefined;
                     clearButtonLabel?: string | undefined;
                     todayButtonLabel?: string | undefined;
-                    clockLabelText?: ((view: import("@mui/x-date-pickers").TimeView, time: any, adapter: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                    nextStepButtonLabel?: string | undefined;
+                    clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
                     hoursClockNumberText?: ((hours: string) => string) | undefined;
                     minutesClockNumberText?: ((minutes: string) => string) | undefined;
                     secondsClockNumberText?: ((seconds: string) => string) | undefined;
-                    selectViewText?: ((view: import("@mui/x-date-pickers/internals/models").TimeViewWithMeridiem) => string) | undefined;
-                    openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
-                    openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                    selectViewText?: ((view: import("@mui/x-date-pickers/internals").TimeViewWithMeridiem) => string) | undefined;
+                    openDatePickerDialogue?: ((formattedDate: string | null) => string) | undefined;
+                    openTimePickerDialogue?: ((formattedTime: string | null) => string) | undefined;
+                    openRangePickerDialogue?: ((formattedRange: string | null) => string) | undefined;
                     fieldClearLabel?: string | undefined;
                     timeTableLabel?: string | undefined;
                     dateTableLabel?: string | undefined;
@@ -34,14 +40,14 @@ export declare const DsDatePickerLocaleBeBY: {
                         format: string;
                     }) => string) | undefined;
                     fieldMonthPlaceholder?: ((params: {
-                        contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                        contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
                         format: string;
                     }) => string) | undefined;
                     fieldDayPlaceholder?: ((params: {
                         format: string;
                     }) => string) | undefined;
                     fieldWeekDayPlaceholder?: ((params: {
-                        contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                        contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
                         format: string;
                     }) => string) | undefined;
                     fieldHoursPlaceholder?: ((params: {
@@ -56,10 +62,20 @@ export declare const DsDatePickerLocaleBeBY: {
                     fieldMeridiemPlaceholder?: ((params: {
                         format: string;
                     }) => string) | undefined;
+                    year?: string | undefined;
+                    month?: string | undefined;
+                    day?: string | undefined;
+                    weekDay?: string | undefined;
+                    hours?: string | undefined;
+                    minutes?: string | undefined;
+                    seconds?: string | undefined;
+                    meridiem?: string | undefined;
+                    empty?: string | undefined;
                     datePickerToolbarTitle?: string | undefined;
                     timePickerToolbarTitle?: string | undefined;
                     dateTimePickerToolbarTitle?: string | undefined;
                     dateRangePickerToolbarTitle?: string | undefined;
+                    timeRangePickerToolbarTitle?: string | undefined;
                 };
             };
         };

package/dist/x-datepicker/Locale/DsDatePickerLocaleBeBY.js

@@ -1,5 +1,5 @@
 import { beBY } from '@mui/x-date-pickers/locales';
-import be from 'date-fns/locale/be';
+import { be } from 'date-fns/locale';
 export const DsDatePickerLocaleBeBY = {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleCaES.d.ts

@@ -2,7 +2,7 @@ export declare const DsDatePickerLocaleCaES: {
     components: {
         MuiLocalizationProvider: {
             defaultProps: {
-                adapterLocale: Locale;
+                adapterLocale: import("date-fns/locale").Locale;
                 localeText: {
                     okButtonLabel: string;
                     previousMonth?: string | undefined;
@@ -13,19 +13,25 @@ export declare const DsDatePickerLocaleCaES: {
                     calendarWeekNumberText?: ((weekNumber: number) => string) | undefined;
                     openPreviousView?: string | undefined;
                     openNextView?: string | undefined;
-                    calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers").DateView) => string) | undefined;
+                    calendarViewSwitchingButtonAriaLabel?: ((currentView: import("@mui/x-date-pickers/models").DateView) => string) | undefined;
                     start?: string | undefined;
                     end?: string | undefined;
+                    startDate?: string | undefined;
+                    startTime?: string | undefined;
+                    endDate?: string | undefined;
+                    endTime?: string | undefined;
                     cancelButtonLabel?: string | undefined;
                     clearButtonLabel?: string | undefined;
                     todayButtonLabel?: string | undefined;
-                    clockLabelText?: ((view: import("@mui/x-date-pickers").TimeView, time: any, adapter: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                    nextStepButtonLabel?: string | undefined;
+                    clockLabelText?: ((view: import("@mui/x-date-pickers/models").TimeView, formattedTime: string | null) => string) | undefined;
                     hoursClockNumberText?: ((hours: string) => string) | undefined;
                     minutesClockNumberText?: ((minutes: string) => string) | undefined;
                     secondsClockNumberText?: ((seconds: string) => string) | undefined;
-                    selectViewText?: ((view: import("@mui/x-date-pickers/internals/models").TimeViewWithMeridiem) => string) | undefined;
-                    openDatePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
-                    openTimePickerDialogue?: ((date: any, utils: import("@mui/x-date-pickers").MuiPickersAdapter<any, any>) => string) | undefined;
+                    selectViewText?: ((view: import("@mui/x-date-pickers/internals").TimeViewWithMeridiem) => string) | undefined;
+                    openDatePickerDialogue?: ((formattedDate: string | null) => string) | undefined;
+                    openTimePickerDialogue?: ((formattedTime: string | null) => string) | undefined;
+                    openRangePickerDialogue?: ((formattedRange: string | null) => string) | undefined;
                     fieldClearLabel?: string | undefined;
                     timeTableLabel?: string | undefined;
                     dateTableLabel?: string | undefined;
@@ -34,14 +40,14 @@ export declare const DsDatePickerLocaleCaES: {
                         format: string;
                     }) => string) | undefined;
                     fieldMonthPlaceholder?: ((params: {
-                        contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                        contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
                         format: string;
                     }) => string) | undefined;
                     fieldDayPlaceholder?: ((params: {
                         format: string;
                     }) => string) | undefined;
                     fieldWeekDayPlaceholder?: ((params: {
-                        contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+                        contentType: import("@mui/x-date-pickers/models").FieldSectionContentType;
                         format: string;
                     }) => string) | undefined;
                     fieldHoursPlaceholder?: ((params: {
@@ -56,10 +62,20 @@ export declare const DsDatePickerLocaleCaES: {
                     fieldMeridiemPlaceholder?: ((params: {
                         format: string;
                     }) => string) | undefined;
+                    year?: string | undefined;
+                    month?: string | undefined;
+                    day?: string | undefined;
+                    weekDay?: string | undefined;
+                    hours?: string | undefined;
+                    minutes?: string | undefined;
+                    seconds?: string | undefined;
+                    meridiem?: string | undefined;
+                    empty?: string | undefined;
                     datePickerToolbarTitle?: string | undefined;
                     timePickerToolbarTitle?: string | undefined;
                     dateTimePickerToolbarTitle?: string | undefined;
                     dateRangePickerToolbarTitle?: string | undefined;
+                    timeRangePickerToolbarTitle?: string | undefined;
                 };
             };
         };