@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/color-picker/styled-component.js

@@ -0,0 +1,2 @@
+import { styled } from '../style';
+export var StyledRoot = styled('div', 'flex flex-col gap-3');

package/esm/color-picker/types.d.ts

@@ -0,0 +1,15 @@
+import { Override } from '../overrides';
+export declare type ColorPickerOverrides = {
+    Root?: Override<Record<string, any>>;
+    Heading?: Override<Record<string, any>>;
+    Swatches?: Override<Record<string, any>>;
+    Swatch?: Override<Record<string, any>>;
+    TickIcon?: Override<Record<string, any>>;
+};
+export declare type ColorPickerProps = {
+    overrides?: ColorPickerOverrides;
+    value?: string;
+    onChange: (value?: string) => void;
+    heading?: string;
+    resetButtonLabel?: string;
+};

package/esm/color-picker/types.js

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

package/esm/currency/Currency.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CurrencyProps } from './types';
+export declare const Currency: ({ value, variant, currency, currencyOptions, }: CurrencyProps) => JSX.Element;

package/esm/currency/Currency.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+//hooks
+import { useCurrency } from './useCurrency';
+//constants
+import { DEFAULT_VARIANT, DEFAULT_CURRENCY } from './constants';
+export var Currency = function (_a) {
+    var value = _a.value, _b = _a.variant, variant = _b === void 0 ? DEFAULT_VARIANT : _b, _c = _a.currency, currency = _c === void 0 ? DEFAULT_CURRENCY : _c, currencyOptions = _a.currencyOptions;
+    var formattedCurrency = useCurrency({ value: value, variant: variant, currency: currency, currencyOptions: currencyOptions });
+    return _jsx(_Fragment, { children: formattedCurrency }, void 0);
+};

package/esm/currency/constants.d.ts

@@ -0,0 +1,3 @@
+import { CompactAutoFormat } from '../utils/intlNumberFormatUtils/types';
+export declare const DEFAULT_VARIANT: CompactAutoFormat;
+export declare const DEFAULT_CURRENCY = "USD";

package/esm/currency/constants.js

@@ -0,0 +1,5 @@
+import { NUMBER_VARIANTS } from '../utils/intlNumberFormatUtils/types';
+export var DEFAULT_VARIANT = {
+    type: NUMBER_VARIANTS.COMPACT_AUTO_FORMAT,
+};
+export var DEFAULT_CURRENCY = 'USD';

package/esm/currency/index.d.ts

@@ -0,0 +1,5 @@
+export { Currency } from './Currency';
+export { useCurrency } from './useCurrency';
+export { getFormattedCurrency } from './utils';
+export * from './types';
+export * from '../utils/intlNumberFormatUtils/types';

package/esm/currency/index.js

@@ -0,0 +1,5 @@
+export { Currency } from './Currency';
+export { useCurrency } from './useCurrency';
+export { getFormattedCurrency } from './utils';
+export * from './types';
+export * from '../utils/intlNumberFormatUtils/types';

package/esm/currency/types.d.ts

@@ -0,0 +1,7 @@
+import { NumberVariant } from '../utils/intlNumberFormatUtils/types';
+export declare type CurrencyProps = {
+    value: number;
+    variant?: NumberVariant;
+    currency?: string;
+    currencyOptions?: Intl.NumberFormatOptions;
+};

package/esm/currency/types.js

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

package/esm/currency/useCurrency.d.ts

@@ -0,0 +1,2 @@
+import { CurrencyProps } from './types';
+export declare const useCurrency: ({ value, currency, variant, currencyOptions, }: CurrencyProps) => string;

package/esm/currency/useCurrency.js

@@ -0,0 +1,8 @@
+import { useLocale } from '../locale';
+import { getFormattedCurrency } from './utils';
+import { DEFAULT_CURRENCY, DEFAULT_VARIANT } from './constants';
+export var useCurrency = function (_a) {
+    var value = _a.value, _b = _a.currency, currency = _b === void 0 ? DEFAULT_CURRENCY : _b, _c = _a.variant, variant = _c === void 0 ? DEFAULT_VARIANT : _c, currencyOptions = _a.currencyOptions;
+    var langCode = useLocale().langCode;
+    return getFormattedCurrency({ value: value, locale: langCode, variant: variant, currencyOptions: currencyOptions, currency: currency });
+};

package/esm/currency/utils.d.ts

@@ -0,0 +1,8 @@
+import { NumberVariant } from '../utils/intlNumberFormatUtils/types';
+export declare const getFormattedCurrency: ({ value, locale, variant, currencyOptions, currency, }: {
+    value: number;
+    locale: string;
+    variant: NumberVariant;
+    currency: string;
+    currencyOptions?: Intl.NumberFormatOptions | undefined;
+}) => string;

package/esm/currency/utils.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import { getFormattedNumber } from '../utils/intlNumberFormatUtils';
+export var getFormattedCurrency = function (_a) {
+    var value = _a.value, locale = _a.locale, variant = _a.variant, currencyOptions = _a.currencyOptions, currency = _a.currency;
+    var intlNumberFormatterOptions = __assign({ style: 'currency', currency: currency }, currencyOptions);
+    return getFormattedNumber({ value: value, locale: locale, variant: variant, numberOptions: intlNumberFormatterOptions });
+};

package/esm/date-input/Before.d.ts

@@ -2,16 +2,18 @@ import { ReactElement } from 'react';
 import { SharedProps } from 'baseui/input';
 import { WeekStartsOn } from '../date-picker';
 import { Override } from '../overrides';
-export declare const Before: ({ weekStartsOn, adapter, locale, overrides, onChange: _onChange, minDate, maxDate, value, timeSelect, ...props }: SharedProps & {
+export declare const Before: ({ weekStartsOn, adapter, locale, overrides, onChange: _onChange, minDate, maxDate, value, timeSelect, showTimezone, timezone, ...props }: SharedProps & {
     adapter?: any;
     locale?: any;
     overrides?: {
         DatePicker?: Override<Record<string, any>> | undefined;
     } | undefined;
-    onChange: (value?: Date | undefined) => void;
+    onChange: (value?: Date | undefined, timezone?: string | undefined) => void;
     weekStartsOn?: WeekStartsOn | undefined;
     minDate?: Date | undefined;
     maxDate?: Date | undefined;
     value?: Date | undefined;
     timeSelect?: boolean | undefined;
+    showTimezone?: boolean | undefined;
+    timezone?: string | undefined;
 }) => ReactElement;

package/esm/date-input/Before.js

@@ -5,11 +5,11 @@ import { DatePicker as DefaultDatePicker } from '../date-picker';
 import { CalendarIconButton } from './CalendarIconButton';
 import { mergeOverrides, useOverrides } from '../overrides';
 export var Before = function (_a) {
-    var weekStartsOn = _a.weekStartsOn, adapter = _a.adapter, locale = _a.locale, overrides = _a.overrides, _onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, timeSelect = _a.timeSelect, props = __rest(_a, ["weekStartsOn", "adapter", "locale", "overrides", "onChange", "minDate", "maxDate", "value", "timeSelect"]);
+    var weekStartsOn = _a.weekStartsOn, adapter = _a.adapter, locale = _a.locale, overrides = _a.overrides, _onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, timeSelect = _a.timeSelect, _b = _a.showTimezone, showTimezone = _b === void 0 ? false : _b, timezone = _a.timezone, props = __rest(_a, ["weekStartsOn", "adapter", "locale", "overrides", "onChange", "minDate", "maxDate", "value", "timeSelect", "showTimezone", "timezone"]);
     var onChange = useCallback(function (data) {
-        _onChange(data.value);
+        _onChange(data.value, data.timezone);
     }, [_onChange]);
-    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DatePicker, DefaultDatePicker), 2), DatePicker = _b[0], datePickerProps = _b[1];
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DatePicker, DefaultDatePicker), 2), DatePicker = _c[0], datePickerProps = _c[1];
     var mergedOverrides = useMemo(function () {
         var _a;
         return mergeOverrides({
@@ -19,5 +19,5 @@ export var Before = function (_a) {
             },
         }, (_a = datePickerProps) === null || _a === void 0 ? void 0 : _a.overrides);
     }, [datePickerProps, props]);
-    return (_jsx(DatePicker, __assign({ weekStartsOn: weekStartsOn, adapter: adapter, locale: locale, onChange: onChange, disabled: props.$disabled, timeSelect: timeSelect, minDate: minDate, maxDate: maxDate, value: value }, datePickerProps, { overrides: mergedOverrides }), void 0));
+    return (_jsx(DatePicker, __assign({ weekStartsOn: weekStartsOn, adapter: adapter, locale: locale, onChange: onChange, disabled: props.$disabled, timeSelect: timeSelect, minDate: minDate, maxDate: maxDate, value: value, showTimezone: showTimezone, timezone: timezone }, datePickerProps, { overrides: mergedOverrides }), void 0));
 };

package/esm/date-input/CalendarIconButton.js

@@ -3,4 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import BaseCalendarIcon from '../icon/components/calendar-solid';
 import { IconButton } from '../button';
 import { Box } from '../box';
-export var CalendarIconButton = function (props) { return (_jsx(Box, __assign({ className: "flex items-center h-full pl-1" }, { children: _jsx(IconButton, __assign({ size: "xs", className: "flex items-center", disabled: props.$disabled, type: "button" }, { children: _jsx(BaseCalendarIcon, {}, void 0) }), void 0) }), void 0)); };
+import { useLocale } from '../locale';
+import { useStyle } from '../style';
+export var CalendarIconButton = function (props) {
+    var locale = useLocale();
+    var theme = useStyle().theme;
+    return (_jsx(Box, __assign({ className: "flex items-center h-full pl-1" }, { children: _jsx(IconButton, __assign({ size: theme.density === 'COMPACT' ? 'xxxs' : 'xxs', className: "flex items-center", disabled: props.$disabled, type: "button", "aria-label": locale.calendar.calendarButtonAriaLabel }, { children: _jsx(BaseCalendarIcon, {}, void 0) }), void 0) }), void 0));
+};

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

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { DateInputProps } from './types';
-export declare const DateInput: ({ adapter, formatString, mask, onChange, value, locale, weekStartsOn, maskChar, overrides, minDate, maxDate, timeSelect, ...restProps }: DateInputProps) => ReactElement;
+export declare const DateInput: ({ adapter, formatString, mask, onChange, value, locale, weekStartsOn, maskChar, overrides, minDate, maxDate, timeSelect, showTimezone, timezone, ...restProps }: DateInputProps) => ReactElement;

package/esm/date-input/DateInput.js

@@ -1,6 +1,6 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useMemo, useState, useCallback } from 'react';
 import InputMask from 'react-input-mask';
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
@@ -10,24 +10,18 @@ import { mergeOverrides } from '../overrides';
 import { DEFAULT_FORMAT_STRING } from '../date-picker/constants';
 import { prepareLocale, formatDate, normalizeDashes, isDayInRange } from '../date-picker/utils';
 import { inputStyles } from './styled-components';
+import { convertDateFromSystemTzToTargetTz, getSystemTzName, convertDateFromTargetTzToSystemTz, } from '../time-range-picker/utils';
+import { useContextualFormProps } from '../form-control/context';
 export var DateInput = function (_a) {
-    var _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, _c = _a.formatString, formatString = _c === void 0 ? DEFAULT_FORMAT_STRING : _c, mask = _a.mask, onChange = _a.onChange, value = _a.value, locale = _a.locale, weekStartsOn = _a.weekStartsOn, _d = _a.maskChar, maskChar = _d === void 0 ? '_' : _d, overrides = _a.overrides, minDate = _a.minDate, maxDate = _a.maxDate, timeSelect = _a.timeSelect, restProps = __rest(_a, ["adapter", "formatString", "mask", "onChange", "value", "locale", "weekStartsOn", "maskChar", "overrides", "minDate", "maxDate", "timeSelect"]);
+    var _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, _c = _a.formatString, formatString = _c === void 0 ? DEFAULT_FORMAT_STRING : _c, mask = _a.mask, onChange = _a.onChange, value = _a.value, locale = _a.locale, weekStartsOn = _a.weekStartsOn, _d = _a.maskChar, maskChar = _d === void 0 ? '_' : _d, overrides = _a.overrides, minDate = _a.minDate, maxDate = _a.maxDate, timeSelect = _a.timeSelect, _e = _a.showTimezone, showTimezone = _e === void 0 ? false : _e, _f = _a.timezone, timezone = _f === void 0 ? getSystemTzName() : _f, restProps = __rest(_a, ["adapter", "formatString", "mask", "onChange", "value", "locale", "weekStartsOn", "maskChar", "overrides", "minDate", "maxDate", "timeSelect", "showTimezone", "timezone"]);
+    var intent = useContextualFormProps(restProps).intent;
     var dateFnsLocale = useMemo(function () { return prepareLocale(locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, locale]);
     var dateHelpers = useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
-    var _e = __read(useState(function () { return formatDate({ date: value, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }); }), 2), date = _e[0], setDate = _e[1];
-    var _f = __read(useState(false), 2), error = _f[0], setError = _f[1];
-    useEffect(function () {
-        if (isDayInRange(value, {
-            minDate: minDate,
-            maxDate: maxDate,
-            dateHelpers: dateHelpers,
-        })) {
-            setError(false);
-        }
-        else {
-            setError(true);
-        }
-    }, [dateHelpers, maxDate, minDate, value]);
+    var timezoneAdaptedValue = useMemo(function () { return (value ? new Date(convertDateFromSystemTzToTargetTz(value, timezone)) : undefined); }, [value, timezone]);
+    var _g = __read(useState(function () {
+        return formatDate({ date: timezoneAdaptedValue, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString });
+    }), 2), date = _g[0], setDate = _g[1];
+    var _h = __read(useState(function () { return !isDayInRange(timezoneAdaptedValue, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }); }), 2), error = _h[0], setError = _h[1];
     var getMask = useCallback(function () {
         if (!mask && formatString !== DEFAULT_FORMAT_STRING) {
             return null;
@@ -44,7 +38,10 @@ export var DateInput = function (_a) {
         var _mask = getMask();
         var _date = dateHelpers.date(dateString);
         // to check the clearable cases
-        if ((typeof _mask === 'string' && inputValue === _mask.replace(/[9|a|*]/g, ' ')) || inputValue.length === 0) {
+        if ((typeof _mask === 'string' &&
+            inputValue.replace(new RegExp(maskChar, 'g'), ' ') === _mask.replace(/[9|a|*]/g, ' ')) ||
+            inputValue.length === 0) {
+            setError(false);
             onChange(null);
             return;
         }
@@ -55,19 +52,28 @@ export var DateInput = function (_a) {
             _date = dateHelpers.parseString(dateString, formatString, dateFnsLocale);
         }
         var isValidDate = _date && dateHelpers.isValid(_date);
-        if (isValidDate) {
-            setError(false);
+        if (isValidDate && _date) {
+            setError(!isDayInRange(_date, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }));
             setDate(formatDate({ date: _date, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }));
-            onChange === null || onChange === void 0 ? void 0 : onChange(_date);
+            onChange === null || onChange === void 0 ? void 0 : onChange(new Date(convertDateFromTargetTzToSystemTz(_date, timezone)), timezone);
         }
         else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
             setError(true);
         }
-    }, [onChange, dateFnsLocale, dateHelpers, formatString, getMask]);
-    var onCalendarDateChange = useCallback(function (_date) {
-        setDate(formatDate({ date: _date, locale: dateFnsLocale, dateHelpers: dateHelpers, formatString: formatString }));
-        onChange(_date);
-    }, [onChange, dateFnsLocale, dateHelpers, formatString]);
+    }, [onChange, dateFnsLocale, dateHelpers, formatString, getMask, timezone, maskChar, maxDate, minDate]);
+    var onCalendarDateChange = useCallback(function (_date, _timezone) {
+        // _date is timezone adapted date, original date is what user actually selected from calendar
+        var originalDate = new Date(convertDateFromSystemTzToTargetTz(_date, _timezone));
+        setDate(formatDate({
+            date: originalDate,
+            locale: dateFnsLocale,
+            dateHelpers: dateHelpers,
+            formatString: formatString,
+        }));
+        setError(!isDayInRange(originalDate, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers }));
+        onChange(_date, _timezone);
+    }, [onChange, dateFnsLocale, dateHelpers, formatString, minDate, maxDate]);
     var mergedOverrides = useMemo(function () {
         return mergeOverrides({
             Before: {
@@ -77,16 +83,31 @@ export var DateInput = function (_a) {
                     locale: locale,
                     onChange: onCalendarDateChange,
                     weekStartsOn: weekStartsOn,
+                    // passing value as it is as date picker will adapt this with timezone
                     value: value,
                     minDate: minDate,
                     maxDate: maxDate,
                     timeSelect: timeSelect,
+                    showTimezone: showTimezone,
+                    timezone: timezone,
                 },
             },
             Input: {
                 style: inputStyles,
             },
         }, overrides);
-    }, [adapter, onCalendarDateChange, locale, overrides, value, weekStartsOn, minDate, maxDate, timeSelect]);
-    return (_jsx(InputMask, __assign({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled }, { children: function (props) { return _jsx(Input, __assign({}, props, restProps, { intent: error ? 'error' : 'default', overrides: mergedOverrides }), void 0); } }), void 0));
+    }, [
+        adapter,
+        onCalendarDateChange,
+        locale,
+        overrides,
+        value,
+        weekStartsOn,
+        minDate,
+        maxDate,
+        timeSelect,
+        showTimezone,
+        timezone,
+    ]);
+    return (_jsx(InputMask, __assign({ mask: getMask(), value: date, maskChar: maskChar, onChange: handleInputChange, disabled: restProps.disabled, onBlur: restProps.onBlur }, { children: function (props) { return _jsx(Input, __assign({}, restProps, props, { intent: error ? 'error' : intent, overrides: mergedOverrides }), void 0); } }), void 0));
 };

package/esm/date-input/styled-components.d.ts

@@ -1,4 +1,4 @@
 import { StyleObject } from '../types';
-export declare const inputStyles: (utils: any, { $size }: {
+export declare const inputStyles: (string | ((utils: any, { $size }: {
     $size: any;
-}) => StyleObject;
+}) => StyleObject))[];

package/esm/date-input/styled-components.js

@@ -3,10 +3,13 @@ var dateInputSizeConfig = {
     md: { paddingLeft: '4px' },
     lg: { paddingLeft: '8px' },
 };
-export var inputStyles = function (utils, _a) {
-    var _b;
-    var $size = _a.$size;
-    return ({
-        paddingLeft: ((_b = dateInputSizeConfig[$size]) !== null && _b !== void 0 ? _b : dateInputSizeConfig.lg).paddingLeft,
-    });
-};
+export var inputStyles = [
+    'tabular-nums',
+    function (utils, _a) {
+        var _b;
+        var $size = _a.$size;
+        return ({
+            paddingLeft: ((_b = dateInputSizeConfig[$size]) !== null && _b !== void 0 ? _b : dateInputSizeConfig.lg).paddingLeft,
+        });
+    },
+];

package/esm/date-input/types.d.ts

@@ -1,15 +1,17 @@
 import { WeekStartsOn } from '../date-picker';
 import { InputProps } from '../input';
-export declare type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'intent' | 'min' | 'max' | 'debouncedOnChange' | 'debounceInterval' | 'type' | 'inputMode'> & {
+export declare type DateInputProps = Omit<InputProps, 'value' | 'onChange' | 'min' | 'max' | 'debouncedOnChange' | 'debounceInterval' | 'type' | 'inputMode'> & {
     formatString?: string;
     adapter?: any;
     mask?: string;
     locale?: any;
     value?: Date;
-    onChange: (value?: Date | null) => void;
+    onChange: (value?: Date | null, timezone?: string) => void;
     weekStartsOn?: WeekStartsOn;
     maskChar?: string;
     minDate?: Date;
     maxDate?: Date;
     timeSelect?: boolean;
+    showTimezone?: boolean;
+    timezone?: string;
 };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SharedStyleProps } from './types';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<import("baseui/datepicker").CalendarProps, "overrides"> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<import("baseui/datepicker").CalendarProps<Date>, "overrides"> & {
     formatString?: string | undefined;
     overrides?: import("./types").DatepickerOverrides<SharedStyleProps> | undefined;
     adapter?: any;

package/esm/date-picker/Calendar.js

@@ -5,18 +5,21 @@ 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 ChevronDown from '../icon/components/chevron-down';
+import _merge from 'lodash/merge';
+import ChevronLeft from '../icon/components/chevron-left';
+import ChevronRight from '../icon/components/chevron-right';
 import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { Popover } from '../popover';
 import { Menu, MenuItem } from '../menu';
 import { IconButton } from '../button';
-import { ThemeProvider } from '../theme';
+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';
-var CALENDAR_CUSTOM_THEME = { theme: { input: { borderRadius: '4px' } } };
+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;
@@ -41,6 +44,7 @@ var isHiddenPaginationButton = function (direction, order, monthsShown) {
 var ArrowButton = function (_a) {
     var $order = _a.$order, monthsShown = _a.monthsShown, direction = _a.direction, nextButtonProps = __rest(_a, ["$order", "monthsShown", "direction"]);
     var isHidden = isHiddenPaginationButton(direction, $order, monthsShown);
+    var ChevronIcon = direction === 'next' ? ChevronRight : ChevronLeft;
     return (_jsx(IconButton, __assign({ className: [
             'h-6 w-6',
             isHidden ? 'invisible' : 'visible',
@@ -50,13 +54,18 @@ var ArrowButton = function (_a) {
                     minWidth: px2rem(24),
                 });
             },
-        ] }, nextButtonProps, { children: _jsx(ChevronDown, { size: 8, className: ['transform', direction === 'next' ? '-rotate-90' : 'rotate-90'] }, void 0) }), void 0));
+        ] }, nextButtonProps, { children: _jsx(ChevronIcon, { size: 8 }, void 0) }), void 0));
 };
 var Calendar = function (_a) {
-    var overrides = _a.overrides, _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, _c = _a.formatString, formatString = _c === void 0 ? DEFAULT_FORMAT_STRING : _c, weekStartsOn = _a.weekStartsOn, props = __rest(_a, ["overrides", "adapter", "formatString", "weekStartsOn"]);
+    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 _d = props.monthsShown, monthsShown = _d === void 0 ? 1 : _d, value = props.value, onChange = props.onChange, range = props.range, timeSelectStart = props.timeSelectStart, timeSelectEnd = props.timeSelectEnd;
+    var value = props.value, onChange = props.onChange, range = props.range, timeSelectStart = props.timeSelectStart, timeSelectEnd = props.timeSelectEnd;
+    var monthsShown = isMobileDevice ? 1 : (_b = props.monthsShown) !== null && _b !== void 0 ? _b : 1;
     var dateFnsLocale = useMemo(function () { return prepareLocale(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
     var setTime = useCallback(function (_a) {
         var date = _a.date, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
@@ -197,7 +206,8 @@ var Calendar = function (_a) {
         props.minDate,
         props.maxDate,
     ]);
-    return (_jsx(ThemeProvider, __assign({ theme: CALENDAR_CUSTOM_THEME }, { children: _jsx(BaseCalendar, __assign({ orientation: "vertical" }, props, { onChange: handleCalendarDateChange, overrides: convertedOverrides, timeSelectEnd: false, locale: dateFnsLocale, 
+    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));
 };

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

@@ -3,11 +3,12 @@ import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 export declare const isDateValid: (value: any) => boolean;
 declare type DateInputProps = {
     locale?: any;
-    dateHelpers: DateHelpers;
+    dateHelpers: DateHelpers<Date>;
     onChange: (date: Date) => void;
     date?: Date | null;
     minDate?: Date;
     maxDate?: Date;
+    disabled?: boolean;
 };
-export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate }: DateInputProps) => JSX.Element>;
+export declare const DateInput: React.MemoExoticComponent<({ dateHelpers, date, onChange, maxDate, minDate, disabled }: DateInputProps) => JSX.Element>;
 export {};

package/esm/date-picker/DateInput.js

@@ -3,12 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
 import InputMask from 'react-input-mask';
-import { borderColor } from '../helpers/longHandHelpers';
+import { borderColor, borderRadius } from '../helpers/longHandHelpers';
 import { Input } from '../input';
 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 font-mono focus:spr-ui-04 focus:spr-text-05 text-center',
+    'px-0 py-0 rounded-2 focus:spr-ui-04 focus:spr-text-05 text-center',
     function (_a) {
         var theme = _a.theme, px2rem = _a.px2rem;
         return ({
@@ -19,14 +21,13 @@ var COMMON_STYLE = [
                 caretColor: theme.spr.ui01,
             },
             fontVariantNumeric: 'tabular-nums',
-            lineHeight: px2rem(16),
         });
     },
 ];
 var DATE_CLASSNAME = [
     'text-center flex-none',
     {
-        maxWidth: '1.8rem',
+        maxWidth: '1.9rem',
     },
 ];
 var DATE_OVERRIDES = {
@@ -43,7 +44,7 @@ var DATE_OVERRIDES = {
 var MONTH_CLASSNAME = [
     'text-center flex-none',
     {
-        maxWidth: '2.6rem',
+        maxWidth: '2.7rem',
     },
 ];
 var MONTH_OVERRIDES = {
@@ -60,7 +61,7 @@ var MONTH_OVERRIDES = {
 var YEAR_CLASSNAME = [
     'text-center flex-none',
     {
-        maxWidth: '3.6rem',
+        maxWidth: '3.7rem',
     },
 ];
 var YEAR_OVERRIDES = {
@@ -92,12 +93,15 @@ var MONTH_LABELS = [
 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
-export var DateInput = React.memo(function (_a) {
-    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate;
-    var _b = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'dd') : ''); }), 2), day = _b[0], setDay = _b[1];
-    var _c = __read(React.useState(function () { return (date ? dateHelpers.formatDate(date, 'yyyy') : ''); }), 2), year = _c[0], setYear = _c[1];
-    var _d = __read(React.useState(false), 2), error = _d[0], setError = _d[1];
+function (_a) {
+    var _b;
+    var dateHelpers = _a.dateHelpers, date = _a.date, onChange = _a.onChange, maxDate = _a.maxDate, minDate = _a.minDate, disabled = _a.disabled;
+    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 minAllowedDate = 1;
     var maxAllowedDate = getDaysInMonth(date || new Date());
     var minYear = minDate ? dateHelpers.getYear(minDate) : MIN_YEAR;
@@ -110,7 +114,7 @@ export var DateInput = React.memo(function (_a) {
             setError(true);
         }
         setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
-        setYear(date ? dateHelpers.formatDate(date, 'yyyy') : '');
+        setYear(date ? dateHelpers.getYear(date) : '');
     }, [date, minDate, maxDate, dateHelpers]);
     var updateDate = function (nextDate) {
         if (isDateValid(nextDate)) {
@@ -206,11 +210,9 @@ export var DateInput = React.memo(function (_a) {
         }
     };
     var month = date ? dateHelpers.formatDate(date, 'MMM') : '';
+    var inputSizeTheme = getComponentSizeTheme(theme, 'input', 'sm', getDefaultSize(theme));
     return (_jsxs(Box, __assign({ "data-testid": "date-input", className: [
-            'px-3 flex items-center border-1 border-solid rounded-4 border-box',
-            function (_a) {
-                var theme = _a.theme, px2rem = _a.px2rem;
-                return (__assign(__assign({}, borderColor(error ? theme.spr.supportError : theme.spr.ui03)), { height: px2rem(35) }));
-            },
-        ] }, { children: [_jsx(InputMask, __assign({ onBlur: dateBlur, onKeyDown: dateKeyDown, mask: "99", value: day, onChange: dayChange, maskChar: "_" }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: DATE_CLASSNAME, overrides: DATE_OVERRIDES, placeholder: "dd", size: "sm" }), void 0)); } }), void 0), _jsx(InputMask, __assign({ value: month, onKeyDown: monthKeyDown, mask: "aaa", maskChar: "_" }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: MONTH_CLASSNAME, overrides: MONTH_OVERRIDES, placeholder: "MM", size: "sm" }), void 0)); } }), void 0), _jsx(InputMask, __assign({ onBlur: yearBlur, onKeyDown: yearKeyDown, mask: "9999", value: year, onChange: yearChange, maskChar: "_" }, { children: function (props) { return (_jsx(Input, __assign({}, props, { className: YEAR_CLASSNAME, overrides: YEAR_OVERRIDES, placeholder: "yyyy", size: "sm" }), void 0)); } }), void 0)] }), void 0));
+            '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));
 });

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

@@ -1,9 +1,15 @@
 import * as React from 'react';
-import { DatepickerOverrides, CalendarProps } from './types';
-declare type DatePickerContentProps = Omit<CalendarProps, 'timeSelectEnd' | 'timeSelectStart'> & {
+import { DatepickerOverrides, CalendarProps, Nullable } from './types';
+declare type DatePickerContentProps = Omit<CalendarProps, 'timeSelectEnd' | 'timeSelectStart' | 'onChange'> & {
     overrides?: DatepickerOverrides;
     timeSelect?: boolean;
     onClose: () => void;
+    showTimezone?: boolean;
+    timezone: string;
+    onChange: (params: {
+        date?: Nullable<Date>[] | Nullable<Date>;
+        timezone?: string;
+    }) => void;
 };
-export declare const DatePickerContent: ({ value: _value, onChange, overrides, autoFocusCalendar, onClose, adapter, ...props }: DatePickerContentProps) => React.ReactElement;
+export declare const DatePickerContent: ({ value: _value, onChange, overrides, autoFocusCalendar, onClose, adapter, showTimezone, timezone: _timezone, ...props }: DatePickerContentProps) => React.ReactElement;
 export {};