@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/esm/date-picker/Calendar.js

@@ -1,25 +1,20 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useMemo, useCallback } from 'react';
-import { Calendar as BaseCalendar } from 'baseui/datepicker';
-import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
-import { DENSITY } from 'baseui/datepicker/constants';
-import _merge from 'lodash/merge';
+import { Calendar as BaseCalendar, DENSITY } from '../baseui/datepicker';
+import dateFnsAdapter from '../baseui/datepicker/utils/date-fns-adapter';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import ChevronLeft from '../icon/components/chevron-left';
 import ChevronRight from '../icon/components/chevron-right';
-import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import { mergeOverrides } from '../overrides';
 import { Popover } from '../popover';
 import { Menu, MenuItem } from '../menu';
 import { IconButton } from '../button';
-import { themeContext, useTheme } from '../theme';
 import { DateTimeContainer } from './DateTimeContainer';
-import withThemeOverride from '../helpers/baseui/withThemeOverride';
 import { getDayStyles, getCalendarContainerStyles } from './styled-components';
 import { DEFAULT_FORMAT_STRING } from './constants';
 import { prepareLocale } from './utils';
 import { useIsMobileDevice } from '../hooks/useIsMobileDevice';
-var CALENDAR_CUSTOM_THEME = { theme: { input: { borderRadius: '4px', sizeSm: { borderRadius: '4px' } } } };
 var MonthYearSelectMenu = function (props) {
     var _a = __read(useState(props.initialState.highlightedIndex), 2), highlightedIndex = _a[0], setHighlightedIndex = _a[1];
     var onItemSelect = props.onItemSelect;
@@ -59,9 +54,7 @@ var ArrowButton = function (_a) {
 var Calendar = function (_a) {
     var _b;
     var overrides = _a.overrides, _c = _a.adapter, adapter = _c === void 0 ? dateFnsAdapter : _c, _d = _a.formatString, formatString = _d === void 0 ? DEFAULT_FORMAT_STRING : _d, weekStartsOn = _a.weekStartsOn, props = __rest(_a, ["overrides", "adapter", "formatString", "weekStartsOn"]);
-    var currentTheme = useTheme();
     var isMobileDevice = useIsMobileDevice();
-    var Provider = themeContext.Provider;
     var dateHelpers = useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var todaySOD = adapter.startOfDay(new Date());
     var value = props.value, onChange = props.onChange, range = props.range, timeSelectStart = props.timeSelectStart, timeSelectEnd = props.timeSelectEnd;
@@ -113,119 +106,117 @@ var Calendar = function (_a) {
             });
         }
     }, [adapter, onChange, props.value, setTime, props.timeSelectStart]);
-    var convertedOverrides = useConvertOverrides({
-        MonthYearSelectPopover: {
-            // @ts-ignore
-            component: Popover,
-            props: {
-                showArrow: false,
-            },
-        },
-        NextButton: {
-            component: function (nextButtonProps) { return _jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "next" }, nextButtonProps), void 0); },
-        },
-        PrevButton: {
-            component: function (nextButtonProps) { return (_jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "previous" }, nextButtonProps), void 0)); },
-        },
-        MonthYearSelectStatefulMenu: {
-            // @ts-ignore
-            component: MonthYearSelectMenu,
-        },
-        CalendarContainer: {
-            style: getCalendarContainerStyles,
-            props: {
-                'data-testid': 'calendar-container',
-            },
-        },
-        WeekdayHeader: {
-            style: 'text-12 font-normal leading-8 spr-text-01 w-9 h-9',
-            props: {
-                'data-testid': 'week-day-header',
-            },
-        },
-        MonthHeader: {
-            style: function (_a) {
-                var theme = _a.theme;
-                return ({
-                    borderBottomColor: theme.spr.border02,
-                    borderBottomStyle: 'solid',
-                    borderBottomWidth: theme.borderWidth.default,
-                    color: theme.spr.text01,
-                });
+    var convertedOverrides = useMemo(function () {
+        return mergeOverrides({
+            MonthYearSelectPopover: {
+                // @ts-ignore
+                component: Popover,
+                props: {
+                    showArrow: false,
+                },
             },
-        },
-        Root: {
-            style: function (_a) {
-                var theme = _a.theme;
-                return (__assign({}, theme.typography.bl3));
-            },
-        },
-        TimeSelectContainer: {
-            props: {
-                range: range,
-                adapter: adapter,
-                timeSelectStart: timeSelectStart,
-                timeSelectEnd: timeSelectEnd,
-                value: value,
-                monthsShown: monthsShown,
-                onChange: onChange,
-                overrides: overrides,
-                locale: dateFnsLocale,
-                minDate: props.minDate,
-                maxDate: props.maxDate,
-            },
-            // @ts-ignore
-            component: DateTimeContainer,
-        },
-        Day: {
-            style: getDayStyles(todaySOD),
-        },
-        MonthContainer: {
-            style: 'flex-row',
-        },
-        CalendarHeader: {
-            style: 'py-3',
-        },
-        MonthYearSelectButton: {
-            style: 'typography-bs1',
-        },
-        Week: {
-            style: 'mb-1',
-        },
-    }, overrides, [
-        overrides,
-        todaySOD,
+            NextButton: {
+                component: function (nextButtonProps) { return (_jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "next" }, nextButtonProps), void 0)); },
+            },
+            PrevButton: {
+                component: function (nextButtonProps) { return (_jsx(ArrowButton, __assign({ monthsShown: monthsShown, direction: "previous" }, nextButtonProps), void 0)); },
+            },
+            MonthYearSelectStatefulMenu: {
+                // @ts-ignore
+                component: MonthYearSelectMenu,
+            },
+            CalendarContainer: {
+                style: getCalendarContainerStyles,
+                props: {
+                    'data-testid': 'calendar-container',
+                },
+            },
+            WeekdayHeader: {
+                style: [
+                    'text-12 font-normal leading-8 spr-text-01',
+                    function (_a) {
+                        var theme = _a.theme;
+                        return theme.density === 'COMPACT'
+                            ? {
+                                width: '30px',
+                                height: '30px',
+                            }
+                            : 'w-9 h-9';
+                    },
+                ],
+                props: {
+                    'data-testid': 'week-day-header',
+                },
+            },
+            MonthHeader: {
+                style: [
+                    function (_a) {
+                        var theme = _a.theme;
+                        return ({
+                            borderBottomColor: theme.spr.border02,
+                            borderBottomStyle: 'solid',
+                            borderBottomWidth: theme.borderWidth.default,
+                            color: theme.spr.text01,
+                        });
+                    },
+                    'block text-center',
+                ],
+            },
+            Root: {
+                style: [function (_a) {
+                        var theme = _a.theme;
+                        return (__assign({}, theme.typography.bl3));
+                    }, 'p-0'],
+            },
+            TimeSelectContainer: {
+                props: {
+                    range: range,
+                    adapter: adapter,
+                    timeSelectStart: timeSelectStart,
+                    timeSelectEnd: timeSelectEnd,
+                    value: value,
+                    monthsShown: monthsShown,
+                    onChange: onChange,
+                    overrides: overrides,
+                    locale: dateFnsLocale,
+                    minDate: props.minDate,
+                    maxDate: props.maxDate,
+                },
+                // @ts-ignore
+                component: DateTimeContainer,
+            },
+            Day: {
+                style: getDayStyles(todaySOD),
+            },
+            MonthContainer: {
+                style: 'flex-row',
+            },
+            CalendarHeader: {
+                style: 'flex justify-between py-3 px-4',
+            },
+            MonthYearSelectButton: {
+                style: 'typography-bs1 p-0 h-auto',
+            },
+            Week: {
+                style: 'mb-1',
+            },
+        }, overrides);
+    }, [
+        adapter,
+        dateFnsLocale,
         monthsShown,
+        onChange,
+        overrides,
+        props.maxDate,
+        props.minDate,
         range,
         timeSelectEnd,
         timeSelectStart,
-        dateFnsLocale,
+        todaySOD,
         value,
-        adapter,
-        formatString,
-        props.minDate,
-        props.maxDate,
     ]);
-    var calendarTheme = useMemo(function () { return _merge({}, currentTheme, CALENDAR_CUSTOM_THEME); }, [currentTheme]);
-    return (_jsx(Provider, __assign({ value: calendarTheme }, { children: _jsx(BaseCalendar, __assign({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, monthsShown: monthsShown, 
-            //@ts-ignore baseweb has type inconsistency in declaration file
-            density: DENSITY.high }), void 0) }), void 0));
+    return (_jsx(BaseCalendar, __assign({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, monthsShown: monthsShown, 
+        //@ts-ignore baseweb has type inconsistency in declaration file
+        density: DENSITY.high }), void 0));
 };
-export default withThemeOverride(Calendar, function (theme) { return ({
-    colors: {
-        calendarHeaderBackground: theme.spr.ui01,
-        calendarHeaderForeground: theme.spr.text01,
-        accent: theme.spr.ui04,
-        mono400: theme.spr.border02,
-        mono300: theme.spr.ui05,
-        calendarDayBackgroundSelectedHighlighted: theme.spr.ui04,
-        calendarDayForegroundSelected: theme.spr.text05,
-        calendarBackground: theme.spr.ui01,
-    },
-    sizing: {
-        scale1000: '36px',
-        scale800: '20px',
-        scale300: '8px',
-        scale200: '6px',
-    },
-}); });
+export default Calendar;

package/esm/date-picker/DateInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 export declare const isDateValid: (value: any) => boolean;
 declare type DateInputProps = {
     locale?: any;
@@ -10,5 +10,5 @@ declare type DateInputProps = {
     maxDate?: Date;
     disabled?: boolean;
 };
-export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled }: DateInputProps) => JSX.Element>;
+export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled, locale }: DateInputProps) => JSX.Element>;
 export {};

package/esm/date-picker/DateInput.js

@@ -1,27 +1,21 @@
-import { __assign, __read } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import _times from 'lodash/times';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
 import InputMask from 'react-input-mask';
 import { borderColor, borderRadius } from '../helpers/longHandHelpers';
 import { Input } from '../input';
+import { AutosizeInput } from '../baseui/select';
 import { isDayInRange } from './utils';
 import { Box } from '../box';
 import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 import { useTheme } from '../theme';
 var COMMON_STYLE = [
-    'px-0 py-0 rounded-2 focus:spr-ui-04 focus:spr-text-05 text-center',
+    'px-0 py-0 rounded-2 text-center tabular-nums',
     function (_a) {
-        var theme = _a.theme, px2rem = _a.px2rem;
-        return ({
-            '::selection': {
-                backgroundColor: 'transparent',
-            },
-            ':focus': {
-                caretColor: theme.spr.ui01,
-            },
-            fontVariantNumeric: 'tabular-nums',
-        });
+        var theme = _a.theme;
+        return (theme.density === 'COMPACT' ? 'body-16' : '');
     },
 ];
 var DATE_CLASSNAME = [
@@ -41,20 +35,24 @@ var DATE_OVERRIDES = {
         },
     },
 };
-var MONTH_CLASSNAME = [
-    'text-center flex-none',
-    {
-        maxWidth: '2.7rem',
-    },
-];
 var MONTH_OVERRIDES = {
-    InputContainer: {
-        style: 'border-0',
-    },
     Input: {
-        style: COMMON_STYLE,
+        component: function (_a) {
+            var $width = _a.$width, props = __rest(_a, ["$width"]);
+            return (_jsx(Input, __assign({}, props, { className: [{ width: $width }, 'text-center flex-none', props.className] }), void 0));
+        },
         props: {
-            'data-testid': 'month-spin-input',
+            overrides: {
+                InputContainer: {
+                    style: 'border-0',
+                },
+                Input: {
+                    style: COMMON_STYLE,
+                    props: {
+                        'data-testid': 'month-spin-input',
+                    },
+                },
+            },
         },
     },
 };
@@ -75,33 +73,19 @@ var YEAR_OVERRIDES = {
         },
     },
 };
-var MONTH_LABELS = [
-    //TODO: Should we use localization here
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-];
 var MIN_YEAR = 1900;
 var MAX_YEAR = 2100;
 export var isDateValid = function (value) { return value > 0 && value <= 31; };
 export var DateInput = React.memo(
-// eslint-disable-next-line max-statements
+// eslint-disable-next-line max-statements -- works for functional component
 function (_a) {
     var _b;
-    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled;
+    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled, locale = _a.locale;
     var theme = useTheme().theme;
     var _c = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _c[0], setDay = _c[1];
     var _d = __read(React.useState(function () { return (date ? dateHelpers.getYear(date) : ''); }), 2), year = _d[0], setYear = _d[1];
     var _e = __read(React.useState(false), 2), error = _e[0], setError = _e[1];
+    var monthLabels = React.useMemo(function () { return _times(12, Number).map(function (month) { return dateHelpers.getMonthInLocale(month, locale); }); }, [dateHelpers, locale]);
     var minAllowedDate = 1;
     var maxAllowedDate = getDaysInMonth(date || new Date());
     var minYear = minDate ? dateHelpers.getYear(minDate) : MIN_YEAR;
@@ -152,7 +136,7 @@ function (_a) {
     var changeMonth = function (sign) {
         var currentMonthIndex = dateHelpers.getMonth(date || new Date());
         var nextMonth = currentMonthIndex + sign;
-        var newDate = dateHelpers.setMonth(date || new Date(), (nextMonth + MONTH_LABELS.length) % MONTH_LABELS.length);
+        var newDate = dateHelpers.setMonth(date || new Date(), (nextMonth + monthLabels.length) % monthLabels.length);
         onChange(newDate);
     };
     var monthKeyDown = function (event) {
@@ -164,9 +148,9 @@ function (_a) {
         else {
             var monthLabel_1 = event.key.toLowerCase();
             var currentMonthIndex_1 = dateHelpers.getMonth(date || new Date());
-            var monthIndex = MONTH_LABELS.findIndex(function (month, index) { return index > currentMonthIndex_1 && monthLabel_1 === month[0].toLowerCase(); });
+            var monthIndex = monthLabels.findIndex(function (month, index) { return index > currentMonthIndex_1 && monthLabel_1 === month[0].toLowerCase(); });
             if (monthIndex === -1) {
-                monthIndex = MONTH_LABELS.findIndex(function (month) { return monthLabel_1 === month[0].toLowerCase(); });
+                monthIndex = monthLabels.findIndex(function (month) { return monthLabel_1 === month[0].toLowerCase(); });
             }
             if (monthIndex === -1 || monthIndex === currentMonthIndex_1) {
                 return;
@@ -209,10 +193,10 @@ function (_a) {
             updateYear(nextYear);
         }
     };
-    var month = date ? dateHelpers.formatDate(date, 'MMM') : '';
-    var inputSizeTheme = getComponentSizeTheme(theme, 'input', 'sm', getDefaultSize(theme));
+    var month = date ? dateHelpers.formatDate(date, 'MMM', locale) : '';
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', undefined, getDefaultSize(theme));
     return (_jsxs(Box, __assign({ "data-testid": "date-input", className: [
             'px-3 flex items-center border-1 border-solid border-box',
             __assign(__assign(__assign(__assign({}, borderColor(error ? theme.spr.supportError : theme.spr.ui03)), borderRadius((_b = inputSizeTheme.borderRadius) !== null && _b !== void 0 ? _b : theme.input.borderRadius)), { paddingLeft: inputSizeTheme.paddingX, paddingRight: inputSizeTheme.paddingX, paddingTop: inputSizeTheme.paddingY, paddingBottom: inputSizeTheme.paddingY }), (disabled ? { backgroundColor: theme.spr.ui02 } : { backgroundColor: theme.spr.ui01 })),
-        ] }, { children: [_jsx(InputMask, __assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm", disabled: disabled }), void 0)); } }), void 0), _jsx(InputMask, __assign({ value: month, onKeyDown: monthKeyDown, mask: "aaa", maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: MONTH_CLASSNAME, overrides: MONTH_OVERRIDES, placeholder: "MM", size: "sm", disabled: disabled }), void 0)); } }), void 0), _jsx(InputMask, __assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm", disabled: disabled }), void 0)); } }), void 0)] }), void 0));
+        ] }, { children: [_jsx(InputMask, __assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm", disabled: disabled }), void 0)); } }), void 0), _jsx(AutosizeInput, { value: month, onKeyDown: monthKeyDown, disabled: disabled, "$searchable": true, placeholder: "MM", size: "sm", overrides: MONTH_OVERRIDES }, void 0), _jsx(InputMask, __assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_", disabled: disabled }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm", disabled: disabled }), void 0)); } }), void 0)] }), void 0));
 });

package/esm/date-picker/DatePickerContent.js

@@ -1,53 +1,34 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
-import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
+import dateFnsAdapter from '../baseui/datepicker/utils/date-fns-adapter';
 import _compact from 'lodash/compact';
 import BaseCalendar from './Calendar';
 import { Box } from '../box';
 import { Stack } from '../stack';
 import { Button } from '../button';
 import { StyledFooter } from './styled-components';
-import { TimezonePicker } from '../time-zone-picker';
+import { TimezonePicker as BaseTimezonePicker } from '../time-zone-picker';
 import { FormControl } from '../form-control';
 import { useOverrides } from '../overrides';
 import { useLocale } from '../locale';
 import { isTimeInRange } from './utils';
 import { convertDateFromTargetTzToSystemTz } from '../time-range-picker/utils';
 var MONTH_WIDTH = 284;
-var TIMEZONE_PICKER_OVERRIDES = {
-    Select: {
-        props: {
-            overrides: {
-                Input: {
-                    props: {
-                        'data-testid': 'timezone-selector',
-                    },
-                },
-            },
-        },
-    },
-};
 export var DatePickerContent = function (_a) {
     var _value = _a.value, onChange = _a.onChange, overrides = _a.overrides, autoFocusCalendar = _a.autoFocusCalendar, onClose = _a.onClose, _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, showTimezone = _a.showTimezone, _timezone = _a.timezone, props = __rest(_a, ["value", "onChange", "overrides", "autoFocusCalendar", "onClose", "adapter", "showTimezone", "timezone"]);
     var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var _c = __read(React.useState(_value), 2), value = _c[0], setValue = _c[1];
-    var _d = __read(React.useState(false), 2), hasError = _d[0], setHasError = _d[1];
+    var _d = __read(React.useState(function () { return !isTimeInRange(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers }); }), 2), hasError = _d[0], setHasError = _d[1];
     var _e = __read(React.useState(_timezone), 2), timezone = _e[0], setTimezone = _e[1];
-    React.useEffect(function () {
-        if (isTimeInRange(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
-            setHasError(false);
-        }
-        else {
-            setHasError(true);
-        }
-    }, [dateHelpers, props.maxDate, props.minDate, value]);
     var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Footer, StyledFooter), 2), Footer = _f[0], footerProps = _f[1];
     var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Calendar, BaseCalendar), 2), Calendar = _g[0], calendarProps = _g[1];
+    var _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.TimezonePicker, BaseTimezonePicker), 2), TimezonePicker = _h[0], timezonePickerProps = _h[1];
     var locale = useLocale();
     var handleChange = React.useCallback(function (data) {
         setValue(data.date);
+        setHasError(!isTimeInRange(data.date, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers }));
         if (!props.timeSelect) {
             if (Array.isArray(data.date)) {
                 onChange === null || onChange === void 0 ? void 0 : onChange({
@@ -63,7 +44,7 @@ export var DatePickerContent = function (_a) {
                 });
             }
         }
-    }, [onChange, props.timeSelect, timezone]);
+    }, [onChange, props.timeSelect, timezone, props.minDate, props.maxDate, dateHelpers]);
     var handleSubmit = React.useCallback(function () {
         if (value && !Array.isArray(value)) {
             var startMillis = convertDateFromTargetTzToSystemTz(value, timezone);
@@ -85,8 +66,8 @@ export var DatePickerContent = function (_a) {
             });
         } }, { children: [_jsx(Calendar, __assign({ trapTabbing: !props.timeSelect }, props, { value: value, onChange: handleChange, 
                 // @ts-ignore
-                overrides: overrides, autoFocusCalendar: autoFocusCalendar, timeSelectEnd: props.timeSelect, timeSelectStart: props.timeSelect, adapter: adapter }, calendarProps), void 0), showTimezone ? (_jsx(Box, __assign({ className: "px-4 mb-4" }, { children: _jsx(FormControl, __assign({ label: locale.datePicker.timezonePickerLabel }, { children: _jsx(TimezonePicker, { clearable: false, placeholder: locale.datePicker.timezonePickerPlaceholder, value: timezone, size: "sm", onChange: function (_a) {
+                overrides: overrides, autoFocusCalendar: autoFocusCalendar, timeSelectEnd: props.timeSelect, timeSelectStart: props.timeSelect, adapter: adapter }, calendarProps), void 0), showTimezone ? (_jsx(Box, __assign({ className: "px-4 mb-4" }, { children: _jsx(FormControl, __assign({ label: locale.datePicker.timezonePickerLabel }, { children: _jsx(TimezonePicker, __assign({ clearable: false, placeholder: locale.datePicker.timezonePickerPlaceholder, value: timezone, size: "sm", onChange: function (_a) {
                             var id = _a.id;
                             return setTimezone(id);
-                        }, overrides: TIMEZONE_PICKER_OVERRIDES }, void 0) }), void 0) }), void 0)) : null, props.timeSelect ? (_jsx(Footer, __assign({ "$onSubmit": handleSubmit, "$onClose": onClose, className: "justify-end" }, footerProps, { children: _jsxs(Stack, __assign({ direction: "horizontal", gap: 3, className: "items-center" }, { children: [_jsx(Button, __assign({ size: "xs", onClick: onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __assign({ size: "xs", onClick: handleSubmit, "data-testid": "save", disabled: hasError || !value }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0) }), void 0)) : null] }), void 0));
+                        } }, timezonePickerProps), void 0) }), void 0) }), void 0)) : null, props.timeSelect ? (_jsx(Footer, __assign({ "$onSubmit": handleSubmit, "$onClose": onClose, className: "justify-end" }, footerProps, { children: _jsxs(Stack, __assign({ direction: "horizontal", gap: 3, className: "items-center" }, { children: [_jsx(Button, __assign({ onClick: onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __assign({ onClick: handleSubmit, "data-testid": "save", disabled: hasError || !value }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0) }), void 0)) : null] }), void 0));
 };

package/esm/date-picker/DateTimeContainer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { CalendarProps as BaseCalendarProps } from 'baseui/datepicker';
-import { DateIOAdapter } from 'baseui/datepicker/utils/types';
+import { CalendarProps as BaseCalendarProps } from '../baseui/datepicker';
+import { DateIOAdapter } from '../baseui/datepicker/utils/types';
 import { DatepickerOverrides } from './types';
 declare type Props = {
     range?: boolean;

package/esm/date-picker/DateTimeContainer.js

@@ -1,8 +1,8 @@
 import { __assign, __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import dateFnsAdapter from '../baseui/datepicker/utils/date-fns-adapter';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import { Stack, StackItem } from '../stack';
 import { DateInput } from './DateInput';
 import { TimeInput } from './TimeInput';
@@ -14,13 +14,19 @@ var DateAndTimeSelect = function (_a) {
     var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.TimePickerFormControl, FormControl), 2), TimePickerFormControl = _b[0], timePickerFormControlProps = _b[1];
     var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DateInputFormControl, FormControl), 2), DateInputFormControl = _c[0], dateInputFormControlProps = _c[1];
-    return (_jsxs(Stack, __assign({ direction: "horizontal", gap: 2, className: "items-center" }, { children: [_jsx(StackItem, __assign({ className: ['flex-1', function (_a) {
-                        var px2rem = _a.px2rem;
-                        return ({ width: px2rem(120) });
-                    }] }, { children: _jsx(DateInputFormControl, __assign({ className: "mb-0", label: dateInputLabel }, dateInputFormControlProps, { children: _jsx(DateInput, { disabled: disabled, dateHelpers: dateHelpers, date: time, onChange: onDateChange, minDate: minDate, maxDate: maxDate, locale: locale }, void 0) }), void 0) }), void 0), _jsx(StackItem, __assign({ className: ['flex-1', function (_a) {
-                        var px2rem = _a.px2rem;
-                        return ({ width: px2rem(120) });
-                    }] }, { children: _jsx(TimePickerFormControl, __assign({ className: "mb-0", label: timePickerLabel }, timePickerFormControlProps, { children: _jsx(TimeInput, { disabled: disabled, time: time, dateHelpers: dateHelpers, onChange: onTimeChange, overrides: overrides, minTime: minDate, maxTime: maxDate, adapter: adapter }, void 0) }), void 0) }), void 0)] }), void 0));
+    return (_jsxs(Stack, __assign({ direction: "horizontal", gap: 2, className: "items-center" }, { children: [_jsx(StackItem, __assign({ className: [
+                    'flex-1',
+                    function (_a) {
+                        var px2rem = _a.px2rem, theme = _a.theme;
+                        return theme.density === 'COMPACT' ? { width: px2rem(100) } : { width: px2rem(120) };
+                    },
+                ] }, { children: _jsx(DateInputFormControl, __assign({ className: "mb-0", label: dateInputLabel }, dateInputFormControlProps, { children: _jsx(DateInput, { disabled: disabled, dateHelpers: dateHelpers, date: time, onChange: onDateChange, minDate: minDate, maxDate: maxDate, locale: locale }, void 0) }), void 0) }), void 0), _jsx(StackItem, __assign({ className: [
+                    'flex-1',
+                    function (_a) {
+                        var px2rem = _a.px2rem, theme = _a.theme;
+                        return theme.density === 'COMPACT' ? { width: px2rem(100) } : { width: px2rem(120) };
+                    },
+                ] }, { children: _jsx(TimePickerFormControl, __assign({ className: "mb-0", label: timePickerLabel }, timePickerFormControlProps, { children: _jsx(TimeInput, { disabled: disabled, time: time, dateHelpers: dateHelpers, onChange: onTimeChange, overrides: overrides, minTime: minDate, maxTime: maxDate, adapter: adapter }, void 0) }), void 0) }), void 0)] }), void 0));
 };
 export var DateTimeContainer = React.memo(function (_a) {
     var range = _a.range, _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, timeSelectStart = _a.timeSelectStart, timeSelectEnd = _a.timeSelectEnd, value = _a.value, monthsShown = _a.monthsShown, onChange = _a.onChange, overrides = _a.overrides, dateFnsLocale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate, disabled = _a.disabled;
@@ -117,5 +123,5 @@ export var DateTimeContainer = React.memo(function (_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange({ date: date });
         }
     }, [dateHelpers, onChange, range, adapter, value]);
-    return (_jsxs(Stack, __assign({ gap: 4, className: "px-4 pb-4", direction: monthsShown === 1 ? 'vertical' : 'horizontal' }, { children: [timeSelectStart && (_jsx(DateTimeSelectContainer, __assign({ className: "flex-1", "$timeSelect": "start" }, dateTimeSelectContainerProps, { children: _jsx(DateAndTimeSelect, { time: startDate, onTimeChange: function (date) { return handleTimeChange(date, 0); }, onDateChange: function (date) { return handleDateInputChange(date, 0); }, dateInputLabel: locale.calendar.dateInputStartLabel, timePickerLabel: locale.calendar.timePickerStartLabel, adapter: adapter, locale: locale, maxDate: maxDate, minDate: minDate, overrides: overrides, disabled: disabled }, void 0) }), void 0)), range && timeSelectEnd && (_jsx(DateTimeSelectContainer, __assign({ className: "flex-1", "$timeSelect": "end" }, dateTimeSelectContainerProps, { children: _jsx(DateAndTimeSelect, { time: endDate, onTimeChange: function (date) { return handleTimeChange(date, 1); }, onDateChange: function (date) { return handleDateInputChange(date, 1); }, dateInputLabel: locale.calendar.dateInputEndLabel, timePickerLabel: locale.calendar.timePickerEndLabel, adapter: adapter, locale: locale, maxDate: maxDate, minDate: minDate, overrides: overrides, disabled: disabled }, void 0) }), void 0))] }), void 0));
+    return (_jsxs(Stack, __assign({ gap: 4, className: "px-4 pb-4", direction: monthsShown === 1 ? 'vertical' : 'horizontal' }, { children: [timeSelectStart && (_jsx(DateTimeSelectContainer, __assign({ className: "flex-1", "$timeSelect": "start" }, dateTimeSelectContainerProps, { children: _jsx(DateAndTimeSelect, { time: startDate, onTimeChange: function (date) { return handleTimeChange(date, 0); }, onDateChange: function (date) { return handleDateInputChange(date, 0); }, dateInputLabel: locale.calendar.dateInputStartLabel, timePickerLabel: locale.calendar.timePickerStartLabel, adapter: adapter, locale: dateFnsLocale, maxDate: maxDate, minDate: minDate, overrides: overrides, disabled: disabled }, void 0) }), void 0)), range && timeSelectEnd && (_jsx(DateTimeSelectContainer, __assign({ className: "flex-1", "$timeSelect": "end" }, dateTimeSelectContainerProps, { children: _jsx(DateAndTimeSelect, { time: endDate, onTimeChange: function (date) { return handleTimeChange(date, 1); }, onDateChange: function (date) { return handleDateInputChange(date, 1); }, dateInputLabel: locale.calendar.dateInputEndLabel, timePickerLabel: locale.calendar.timePickerEndLabel, adapter: adapter, locale: dateFnsLocale, maxDate: maxDate, minDate: minDate, overrides: overrides, disabled: disabled }, void 0) }), void 0))] }), void 0));
 });

package/esm/date-picker/StatelessDatePicker.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import * as React from 'react';
 import _noop from 'lodash/noop';
 import _compact from 'lodash/compact';
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
-import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
-import { PLACEMENT } from 'baseui/popover';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
+import dateFnsAdapter from '../baseui/datepicker/utils/date-fns-adapter';
+import { PLACEMENT } from '../baseui/popover';
 import { Popover } from '../popover';
 import { StyledInputWrapper } from './styled-components';
 import { Typography } from '../typography';
@@ -20,19 +20,7 @@ import { DatePickerContent } from './DatePickerContent';
 import { convertDateFromSystemTzToTargetTz, getSystemTzName } from '../time-range-picker/utils';
 import { getDefaultSize } from '../helpers/themeHelpers';
 import { useStyle } from '../style';
-var accessibilityStyles = {
-    position: 'fixed',
-    width: '0px',
-    height: '0px',
-    borderLeftWidth: 0,
-    borderRightWidth: 0,
-    borderTopWidth: 0,
-    borderBottomWidth: 0,
-    padding: 0,
-    overflow: 'hidden',
-    clip: 'rect(0, 0, 0, 0)',
-    clipPath: 'inset(100%)',
-};
+import { accessibilityStyles } from '../helpers/commonStyles';
 // eslint-disable-next-line max-statements
 export var StatelessDatePicker = function (_props) {
     var _a, _b;

package/esm/date-picker/TimeInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import DateHelpers from 'baseui/datepicker/utils/date-helpers';
-import { DateIOAdapter } from 'baseui/datepicker/utils/types';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
+import { DateIOAdapter } from '../baseui/datepicker/utils/types';
 declare type TimeInputProps = {
     time?: Date | null;
     overrides?: any;

package/esm/date-picker/TimeInput.js

@@ -67,5 +67,5 @@ export var TimeInput = function (_a) {
         }, overrides);
     }, [error, value, overrides, time, minTime, maxTime, dateHelpers]);
     var _d = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.TimePicker, DefaultTimePicker), 2), TimePicker = _d[0], timeSelectProps = _d[1];
-    return (_jsx(TimePicker, __assign({ adapter: adapter, size: "sm", value: value, onChange: handleChange, creatable: true, clearable: true, disabled: disabled, minTime: minTime && dateHelpers.isSameDay(value, minTime) ? roundUpTime(minTime) : undefined, maxTime: dateHelpers.isSameDay(value, maxTime) ? maxTime : undefined }, timeSelectProps), void 0));
+    return (_jsx(TimePicker, __assign({ adapter: adapter, value: value, onChange: handleChange, creatable: true, clearable: true, disabled: disabled, minTime: minTime && dateHelpers.isSameDay(value, minTime) ? roundUpTime(minTime) : undefined, maxTime: dateHelpers.isSameDay(value, maxTime) ? maxTime : undefined }, timeSelectProps), void 0));
 };

package/esm/date-picker/index.d.ts

@@ -1,7 +1,7 @@
 import Calendar from './Calendar';
 import DatePickerInput from './DatePickerInput';
 export { Calendar };
-export { StyledCalendarContainer, StyledCalendarHeader, StyledInputWrapper, StyledMonth, StyledMonthContainer, StyledMonthHeader, StyledMonthYearSelectButton, StyledMonthYearSelectIconContainer, StyledNextButton, StyledPrevButton, StyledRoot, StyledSelectorContainer, StyledWeek, StyledWeekdayHeader, } from 'baseui/datepicker/styled-components';
+export { StyledCalendarContainer, StyledCalendarHeader, StyledInputWrapper, StyledMonth, StyledMonthContainer, StyledMonthHeader, StyledMonthYearSelectButton, StyledMonthYearSelectIconContainer, StyledNextButton, StyledPrevButton, StyledRoot, StyledSelectorContainer, StyledWeek, StyledWeekdayHeader, } from '../baseui/datepicker/styled-components';
 export { DatePicker } from './DatePicker';
 export { DatePickerInput };
 export { StatelessDatePicker } from './StatelessDatePicker';