@sprinklrjs/spaceweb 10.1.0 → 11.0.0

package/esm/date-picker/DateTimeContainer.js

@@ -10,20 +10,20 @@ import { FormControl } from '../form-control';
 import { useOverrides } from '../overrides';
 import { useLocale } from '../locale';
 var DateAndTimeSelect = function (_a) {
-    var time = _a.time, onTimeChange = _a.onTimeChange, onDateChange = _a.onDateChange, dateInputLabel = _a.dateInputLabel, timePickerLabel = _a.timePickerLabel, overrides = _a.overrides, locale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate, adapter = _a.adapter;
+    var time = _a.time, onTimeChange = _a.onTimeChange, onDateChange = _a.onDateChange, dateInputLabel = _a.dateInputLabel, timePickerLabel = _a.timePickerLabel, overrides = _a.overrides, locale = _a.locale, minDate = _a.minDate, maxDate = _a.maxDate, adapter = _a.adapter, disabled = _a.disabled;
     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, { 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) {
+                    }] }, { 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, { time: time, dateHelpers: dateHelpers, onChange: onTimeChange, overrides: overrides, minTime: minDate, maxTime: maxDate }, void 0) }), void 0) }), void 0)] }), void 0));
+                    }] }, { 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;
+    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;
     var _c = __read([].concat(value), 2), startDate = _c[0], endDate = _c[1];
     var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var locale = useLocale();
@@ -117,5 +117,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 }, 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 }, 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: 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));
 });

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

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { StatelessDatePickerProps } from './types';
-export declare const StatelessDatePicker: ({ onChange, onBlur, adapter, size, formatString, isOpen, onFocus, clearable, displayValueAtRangeIndex, variant, overrides, intent, value, formatDisplayValue, autoSizeInput, weekStartsOn, ...props }: StatelessDatePickerProps) => ReactElement;
+export declare const StatelessDatePicker: (_props: StatelessDatePickerProps) => ReactElement;

package/esm/date-picker/StatelessDatePicker.js

@@ -11,6 +11,7 @@ import { Typography } from '../typography';
 import DatePickerInput from './DatePickerInput';
 import { useLocale } from '../locale';
 import useUniqueId from '../hooks/useUniqueId';
+import { useContextualFormProps } from '../form-control/context';
 import { mergeOverrides, useOverrides } from '../overrides';
 import { DEFAULT_FORMAT_STRING } from './constants';
 import { formatDate, getAriaLabel, isTimeInRange, normalizeDashes, prepareLocale } from './utils';
@@ -29,9 +30,9 @@ var accessibilityStyles = {
     clipPath: 'inset(100%)',
 };
 // eslint-disable-next-line max-statements
-export var StatelessDatePicker = function (_a) {
-    var _b, _c;
-    var onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.adapter, adapter = _d === void 0 ? dateFnsAdapter : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.formatString, formatString = _f === void 0 ? DEFAULT_FORMAT_STRING : _f, _g = _a.isOpen, isOpen = _g === void 0 ? false : _g, onFocus = _a.onFocus, clearable = _a.clearable, displayValueAtRangeIndex = _a.displayValueAtRangeIndex, _h = _a.variant, variant = _h === void 0 ? 'default' : _h, overrides = _a.overrides, intent = _a.intent, value = _a.value, formatDisplayValue = _a.formatDisplayValue, _j = _a.autoSizeInput, autoSizeInput = _j === void 0 ? false : _j, weekStartsOn = _a.weekStartsOn, props = __rest(_a, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn"]);
+export var StatelessDatePicker = function (_props) {
+    var _a, _b;
+    var _c = useContextualFormProps(_props), onChange = _c.onChange, onBlur = _c.onBlur, _d = _c.adapter, adapter = _d === void 0 ? dateFnsAdapter : _d, _e = _c.size, size = _e === void 0 ? 'md' : _e, _f = _c.formatString, formatString = _f === void 0 ? DEFAULT_FORMAT_STRING : _f, _g = _c.isOpen, isOpen = _g === void 0 ? false : _g, onFocus = _c.onFocus, clearable = _c.clearable, displayValueAtRangeIndex = _c.displayValueAtRangeIndex, _h = _c.variant, variant = _h === void 0 ? 'default' : _h, overrides = _c.overrides, intent = _c.intent, value = _c.value, formatDisplayValue = _c.formatDisplayValue, _j = _c.autoSizeInput, autoSizeInput = _j === void 0 ? false : _j, weekStartsOn = _c.weekStartsOn, props = __rest(_c, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn"]);
     var locale = useLocale();
     var dateHelpers = React.useMemo(function () { return new DateHelpers(adapter); }, [adapter]);
     var dateFnsLocale = React.useMemo(function () { return prepareLocale(props.locale, { weekStartsOn: weekStartsOn }); }, [weekStartsOn, props.locale]);
@@ -90,7 +91,7 @@ export var StatelessDatePicker = function (_a) {
                 style: 'rounded-8',
             },
         }, overrides);
-    }, [overrides]);
+    }, [locale.datePicker.popoverAriaLabel, overrides]);
     var displayValue = React.useMemo(function () { return defaultFormatDisplayValue(value) || ''; }, [value, defaultFormatDisplayValue]);
     var handleDateChange = React.useCallback(function (data) {
         onChange === null || onChange === void 0 ? void 0 : onChange({ value: data.date });
@@ -130,8 +131,8 @@ export var StatelessDatePicker = function (_a) {
     var _o = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput), 2), InputComponent = _o[0], inputProps = _o[1];
     var _p = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, Popover), 2), PopoverComponent = _p[0], popoverProps = _p[1];
     var _q = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, StyledInputWrapper), 2), InputWrapper = _q[0], inputWrapperProps = _q[1];
-    var placeholder = (_b = props.placeholder) !== null && _b !== void 0 ? _b : 'MM/DD/YYYY';
-    return (_jsxs(_Fragment, { children: [_jsx(PopoverComponent, __assign({ focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, onClick: props.disabled ? _noop : onFocus, content: _jsx(DatePickerContent, __assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale }), void 0) }, popoverProps, { children: _jsx(InputWrapper, __assign({}, inputWrapperProps, { children: _jsx(InputComponent, __assign({ "aria-disabled": props.disabled, "aria-label": (_c = props['aria-label']) !== null && _c !== void 0 ? _c : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-required": props.required || null, disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
+    var placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'MM/DD/YYYY';
+    return (_jsxs(_Fragment, { children: [_jsx(PopoverComponent, __assign({ focusLock: true, returnFocus: true, mountNode: props.mountNode, placement: PLACEMENT.auto, isOpen: isOpen, onClickOutside: onClose, onEsc: onClose, showArrow: false, triggerType: "click", onClick: props.disabled ? _noop : onFocus, content: _jsx(DatePickerContent, __assign({}, props, { value: value, onChange: handleDateChange, overrides: mergedOverrides, autoFocusCalendar: autoFocusCalendar, onClose: onClose, formatString: formatString, adapter: adapter, locale: dateFnsLocale }), void 0) }, popoverProps, { children: _jsx(InputWrapper, __assign({}, inputWrapperProps, { children: _jsx(InputComponent, __assign({ "aria-disabled": props.disabled, "aria-label": (_b = props['aria-label']) !== null && _b !== void 0 ? _b : locale.timeRangePicker.ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": props['aria-labelledby'], "aria-required": props.required || null, disabled: props.disabled, size: size, variant: variant, intent: error ? 'error' : intent, value: displayValue, 
                         // onFocus={onFocus}
                         onKeyDown: handleKeyDown, onChange: handleInputChange, placeholder: placeholder, required: props.required, clearable: clearable, isOpen: isOpen, autoSizeInput: autoSizeInput }, inputProps), void 0) }), void 0) }), void 0), _jsx(Typography, __assign({ id: ariaDescribedBy, style: accessibilityStyles }, { children: locale.timeRangePicker.screenReaderMessageInput }), void 0), _jsx(Typography, __assign({ "aria-live": "assertive", style: accessibilityStyles }, { children: dateAriaLabel }), void 0)] }, void 0));
 };

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

@@ -1,12 +1,15 @@
 /// <reference types="react" />
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import { DateIOAdapter } from 'baseui/datepicker/utils/types';
 declare type TimeInputProps = {
     time?: Date | null;
     overrides?: any;
     onChange: (date: Date) => void;
-    dateHelpers: DateHelpers;
+    dateHelpers: DateHelpers<Date>;
     minTime?: Date;
     maxTime?: Date;
+    disabled?: boolean;
+    adapter: DateIOAdapter<Date>;
 };
-export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, }: TimeInputProps) => JSX.Element;
+export declare const TimeInput: ({ overrides, time, onChange, dateHelpers, minTime, maxTime, disabled, adapter, }: TimeInputProps) => JSX.Element;
 export {};

package/esm/date-picker/TimeInput.js

@@ -4,8 +4,10 @@ import { useState, useEffect, useMemo } from 'react';
 import { TimePicker as DefaultTimePicker } from '../time-picker';
 import { mergeOverrides, useOverrides } from '../overrides';
 import { isTimeInRange } from './utils';
+var MS_IN_5_MINUTES = 60 * 1000 * 5;
+var roundUpTime = function (minTime) { return new Date(Math.ceil(minTime.getTime() / MS_IN_5_MINUTES) * MS_IN_5_MINUTES); };
 export var TimeInput = function (_a) {
-    var overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime;
+    var overrides = _a.overrides, time = _a.time, onChange = _a.onChange, dateHelpers = _a.dateHelpers, minTime = _a.minTime, maxTime = _a.maxTime, disabled = _a.disabled, adapter = _a.adapter;
     var _b = __read(useState(time), 2), value = _b[0], setValue = _b[1];
     var _c = __read(useState(false), 2), error = _c[0], setError = _c[1];
     useEffect(function () {
@@ -65,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({ size: "sm", value: value, onChange: handleChange, creatable: true, clearable: true }, timeSelectProps), void 0);
+    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));
 };

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

@@ -7,4 +7,5 @@ export { DatePickerInput };
 export { StatelessDatePicker } from './StatelessDatePicker';
 export { useDatePickerState } from './useDatePickerState';
 export { formatDate } from './utils';
+export { DateTimeContainer as DateTimeRangeInputs } from './DateTimeContainer';
 export * from './types';

package/esm/date-picker/index.js

@@ -7,4 +7,5 @@ export { DatePickerInput };
 export { StatelessDatePicker } from './StatelessDatePicker';
 export { useDatePickerState } from './useDatePickerState';
 export { formatDate } from './utils';
+export { DateTimeContainer as DateTimeRangeInputs } from './DateTimeContainer';
 export * from './types';

package/esm/date-picker/stateful-container.d.ts

@@ -3,7 +3,7 @@ import { StatefulContainerProps } from './types';
 declare const StatefulContainer: {
     ({ adapter, onChange, value, startOpen, ...props }: StatefulContainerProps): ReactElement;
     defaultProps: {
-        adapter: any;
+        adapter: import("baseui/datepicker/utils/types").DateIOAdapter<Date>;
     };
 };
 export default StatefulContainer;

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

@@ -2,7 +2,6 @@ import { SharedStyleProps } from './types';
 import { StyleFn, Styles } from '../types';
 export declare const StyledInputWrapper: import("../style/styled").StyledComponent;
 export declare const getDayStyles: (todaySOD: any) => Styles;
-export declare const StyledWeekdayHeader: import("../style/styled").StyledComponent;
 export declare const StyledFooter: import("../style/styled").StyledComponent;
 export declare const StyledFooterBeforeEnhancer: import("../style/styled").StyledComponent;
 export declare const getCalendarContainerStyles: StyleFn<SharedStyleProps>;

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

@@ -1,30 +1,8 @@
 import { __assign } from "tslib";
-import { getWeekdayInLocale } from 'baseui/datepicker/utils';
 import getDayStateCode from 'baseui/datepicker/utils/day-state';
 import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
 import { styled } from '../style';
 export var StyledInputWrapper = styled('div');
-var getWeekdayHeaderStyle = function (utils, props) {
-    var getStyle = utils.getStyle, px2rem = utils.px2rem, theme = utils.theme;
-    var _a = props.$date, $date = _a === void 0 ? [new Date()] : _a, alt = props.alt, range = props.range;
-    // no highlight required if range is true or no date is selected
-    var isHighlighted;
-    if (range || !$date[0]) {
-        isHighlighted = false;
-    }
-    else {
-        isHighlighted = getWeekdayInLocale(Array.isArray($date) ? $date[0] : $date) === alt;
-    }
-    return getStyle('border-b-2 box-border cursor-default h-9 inline-block m-0 pb-2 pt-2 relative text-center w-9', {
-        marginBottom: '-1px',
-        borderBottomStyle: 'solid',
-        borderBottomColor: isHighlighted ? theme.spr.ui04 : 'transparent',
-        color: isHighlighted ? theme.spr.text04 : 'inherit',
-        lineHeight: px2rem(20),
-        paddingLeft: px2rem(6),
-        paddingRight: px2rem(6),
-    });
-};
 var getEdgeDayBeforeStyle = function (code, firstChild, peekNextMonth) {
     var firstChildStyle = firstChild ? { content: 'none' } : {};
     var lastChildStyle = firstChild ? {} : { content: 'none' };
@@ -119,7 +97,6 @@ export var getDayStyles = function (todaySOD) { return [
         })), ($outsideMonth && { color: theme.spr.text03 }));
     },
 ]; };
-export var StyledWeekdayHeader = styled('div', getWeekdayHeaderStyle);
 export var StyledFooter = styled('div', 'flex px-4 py-3');
 export var StyledFooterBeforeEnhancer = styled('div', 'flex-none');
 export var getCalendarContainerStyles = function (_a) {

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

@@ -53,7 +53,7 @@ export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSe
     variant?: InputVariant;
     value: Date | Date[] | undefined;
     onChange?: (data: {
-        value?: (Date | undefined)[] | Date | null;
+        value?: (Date | undefined | null)[] | Date | null;
     }) => any;
     size?: InputSize;
     overrides?: DatepickerOverrides;

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

@@ -1,20 +1,21 @@
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 import { Locale } from '../locale';
 interface FormatDateParams {
     date: Date | Date[] | undefined;
     formatString?: string;
     locale: any;
-    dateHelpers?: any;
+    dateHelpers?: DateHelpers<Date>;
 }
 export declare const normalizeDashes: (formatString: string) => string;
-export declare const formatDate: (params: FormatDateParams) => any;
-export declare const getAriaLabel: (value: Date | Date[] | undefined, formatDisplayValue: (date?: Date | Date[] | undefined) => string | undefined, locale: Locale) => string;
+export declare const formatDate: (params: FormatDateParams) => string;
+export declare const getAriaLabel: (value: Date | Date[] | undefined, formatDisplayValue: (date?: Date | Date[] | undefined) => string, locale: Locale) => string;
 export declare const prepareLocale: (locale?: globalThis.Locale, options?: {
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
 } | undefined) => any;
-export declare const isTimeInRange: (date: Date | Date[] | null | undefined, { minDate, maxDate, dateHelpers, }: {
-    minDate?: Date | undefined;
-    maxDate?: Date | undefined;
-    dateHelpers?: any;
+export declare const isTimeInRange: (date: Date | Array<Date | undefined | null> | null | undefined, { minDate, maxDate, dateHelpers, }: {
+    minDate?: Date | null | undefined;
+    maxDate?: Date | null | undefined;
+    dateHelpers?: DateHelpers<Date> | undefined;
 }) => boolean;
 export declare const isDayInRange: (date: Date | Date[] | null | undefined, { minDate, maxDate, dateHelpers, }: {
     minDate?: Date | undefined;

package/esm/date-picker/utils.js

@@ -57,7 +57,10 @@ export var isTimeInRange = function (date, _a) {
         return true;
     }
     if (Array.isArray(date)) {
-        return date.every(function (_date) { return (!minDate || !dateHelpers.isBefore(_date, minDate)) && (!maxDate || !dateHelpers.isAfter(_date, maxDate)); });
+        return date.every(function (_date) {
+            return (!minDate || !_date || !dateHelpers.isBefore(_date, minDate)) &&
+                (!maxDate || !_date || !dateHelpers.isAfter(_date, maxDate));
+        });
     }
     return (!minDate || !dateHelpers.isBefore(date, minDate)) && (!maxDate || !dateHelpers.isAfter(date, maxDate));
 };

package/esm/form-control/context.d.ts

@@ -1,22 +1,15 @@
 /// <reference types="react" />
 import { Intent } from '../types';
-export declare const formControlContext: import("react").Context<{
-    intent?: Intent | undefined;
-}>;
-export declare const FormControlProvider: import("react").Provider<{
-    intent?: Intent | undefined;
-}>;
-export declare const FormControlConsumer: import("react").Consumer<{
-    intent?: Intent | undefined;
-}>;
-export declare const useFormControl: () => {
+declare type FormControlContextValueType = {
     intent?: Intent;
 };
+export declare const FormControlProvider: import("react").Provider<FormControlContextValueType>;
+export declare const FormControlConsumer: import("react").Consumer<FormControlContextValueType>;
+export declare const useFormControl: () => FormControlContextValueType;
 /**
  * @param props
  * uses form values to be passed using context to child components
  * this hook can be scaled to incorporate multiple props
  */
-export declare const useContextualFormProps: <T extends {
-    intent?: Intent;
-}>(props: T) => T;
+export declare const useContextualFormProps: <T extends FormControlContextValueType>(props: T, defaultProps?: FormControlContextValueType) => T;
+export {};

package/esm/form-control/context.js

@@ -1,18 +1,19 @@
 import { __assign } from "tslib";
 import { createContext, useContext } from 'react';
-export var formControlContext = createContext({ intent: 'default' });
-formControlContext.displayName = 'FormControlContext';
-export var FormControlProvider = formControlContext.Provider;
-export var FormControlConsumer = formControlContext.Consumer;
-export var useFormControl = function () { return useContext(formControlContext); };
+var FormControlContext = createContext({ intent: 'default' });
+FormControlContext.displayName = 'FormControlContext';
+export var FormControlProvider = FormControlContext.Provider;
+export var FormControlConsumer = FormControlContext.Consumer;
+export var useFormControl = function () { return useContext(FormControlContext); };
 /**
  * @param props
  * uses form values to be passed using context to child components
  * this hook can be scaled to incorporate multiple props
  */
-export var useContextualFormProps = function (props) {
-    var _a;
-    var contextProps = useFormControl();
-    var intent = (_a = props.intent) !== null && _a !== void 0 ? _a : contextProps.intent;
+export var useContextualFormProps = function (props, defaultProps) {
+    var _a, _b;
+    if (defaultProps === void 0) { defaultProps = {}; }
+    var formControlValue = useFormControl();
+    var intent = (_b = (_a = props.intent) !== null && _a !== void 0 ? _a : formControlValue.intent) !== null && _b !== void 0 ? _b : defaultProps.intent;
     return __assign(__assign({}, props), { intent: intent });
 };

package/esm/form-control/styled-component.js

@@ -20,14 +20,14 @@ export var StyledInfoIconContainer = styled('div', 'spr-ui-03 rounded-full flex
     return ({ height: px2rem(14), width: px2rem(14) });
 });
 export var StyledRequiredDot = styled('span', 'ml-1 spr-support-error rounded-full h-1 w-1 flex-shrink-0');
-export var StyledRoot = styled('div', 'mb-4 flex', function (utils, _a) {
+export var StyledRoot = styled('div', 'flex', function (utils, _a) {
     var $layout = _a.$layout;
     return $layout === 'horizontal' ? 'flex-row items-baseline' : 'flex-col';
 });
 export var StyledCaption = styled('div', 'typography-l2 my-1', getIntentColor);
-export var StyledLabelContainer = styled('div', 'flex items-center my-1 w-full', function (utils, _a) {
+export var StyledLabelContainer = styled('div', 'flex items-center mb-1 w-full', function (utils, _a) {
     var $layout = _a.$layout;
     return $layout === 'horizontal' ? 'w-4/24 mr-2' : '';
 });
-export var StyledLabel = styled('label', 'typography-l2 spr-text-02');
+export var StyledLabel = styled('label', 'typography-l1 text-14 spr-text-02');
 export var StyledControlContainer = styled('div', 'w-full');

package/esm/helpers/baseui/withThemeOverride.js

@@ -12,7 +12,7 @@ var withThemeOverride = function (Component, mapSpaceThemeToBaseTheme) {
     var ThemeOverridenComponent = React.forwardRef(function ThemeOverride(props, ref) {
         var theme = useStyle().theme;
         var _a = __read(useMemoizedStyletron(), 2), styletronTheme = _a[1];
-        var updatedTheme = createTheme(styletronTheme, mapSpaceThemeToBaseTheme(theme));
+        var updatedTheme = React.useMemo(function () { return createTheme(styletronTheme, mapSpaceThemeToBaseTheme(theme)); }, [styletronTheme, theme]);
         return (_jsx(ThemeProvider, __assign({ theme: updatedTheme }, { children: _jsx(Component, __assign({ ref: ref }, props), void 0) }), void 0));
     });
     ThemeOverridenComponent.displayName = "withThemeOverride(".concat(Component.displayName || Component.name, ")");

package/esm/helpers/commonStyles.d.ts

@@ -9,8 +9,8 @@ export declare const chevronStyles: StyleFn<{
 export declare const transparentScrollbarStyles: StyleObject;
 export declare type OutlineProps = {
     $outlineColor?: string;
-    $outlineWidth?: string | number;
-    $outlineOffset?: string | number;
+    $outlineWidth?: StyleObject['outlineWidth'];
+    $outlineOffset?: StyleObject['outlineOffset'];
     $outlineStyle?: string;
 };
 export declare const getOutlineStyles: ({ theme }: StyleUtils, props?: OutlineProps | undefined) => StyleObject;

package/esm/helpers/styletron.d.ts

@@ -1,12 +1,23 @@
+/// <reference types="react" />
 /**
  * @deprecated use spaceweb/styled
  */
-export declare const styled: import("baseui").StyledFn<ThemeT>;
+export declare const styled: {
+    <C extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
+        $theme: Theme;
+    }) => import("styletron-standard").StyleObject)): import("styletron-react").StyletronComponent<C, P>;
+    <C_1 extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>>(component: C_1, style: import("styletron-standard").StyleObject): import("styletron-react").StyletronComponent<C_1, {}>;
+};
 /**
  * @deprecated
  */
-export declare const withStyle: import("baseui").WithStyleFn<ThemeT>;
+export declare const withStyle: {
+    <C extends import("styletron-react").StyletronComponent<any, any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
+        $theme: Theme;
+    } & (C extends import("styletron-react").StyletronComponent<infer CC, infer PP> ? PP : never)) => import("styletron-standard").StyleObject)): C extends import("styletron-react").StyletronComponent<infer CC_1, infer PP_1> ? import("styletron-react").StyletronComponent<CC_1, P & PP_1> : never;
+    <C_1 extends import("styletron-react").StyletronComponent<any, any>>(component: C_1, style: import("styletron-standard").StyleObject): C_1;
+};
 /**
  * @deprecated use spaceweb/useStyle
  */
-export declare const useStyletron: () => [(arg: import("styletron-standard").StyleObject) => string, ThemeT];
+export declare const useStyletron: () => [(a: import("styletron-standard").StyleObject) => string, ThemeT];

package/esm/hooks/useAutoFocus.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import { InputProps } from '../input';
-import { TextareaProps } from '../textarea';
-declare type UseAutoFocus = {
-    (props: Pick<InputProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLInputElement>;
-    (props: Pick<TextareaProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLTextAreaElement>;
+import { RefObject, Ref } from 'react';
+import { FocusPosition } from '../input';
+declare type Params<T> = {
+    autoFocus?: FocusPosition;
+    inputRef?: Ref<T>;
 };
-declare const useAutoFocus: UseAutoFocus;
+declare const useAutoFocus: <T extends HTMLTextAreaElement | HTMLInputElement>({ autoFocus, inputRef, }: Params<T>) => RefObject<T>;
 export default useAutoFocus;

package/esm/hooks/useAutoFocus.js

@@ -1,26 +1,26 @@
-import * as React from 'react';
+import { useEffect } from 'react';
+import { useCombineRefObjects } from './useCombinedRef';
 var __DEV__ = process.env.NODE_ENV !== 'production';
 var useAutoFocus = function (_a) {
     var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
-    var ownRef = React.useRef(null);
-    var ref = inputRef !== null && inputRef !== void 0 ? inputRef : ownRef;
-    React.useEffect(function () {
-        if (!ref.current || typeof autoFocus === 'undefined') {
+    var refObj = useCombineRefObjects(inputRef);
+    useEffect(function () {
+        if (!refObj.current || typeof autoFocus === 'undefined') {
             return;
         }
         var position;
         switch (typeof autoFocus) {
             case 'boolean':
                 if (autoFocus) {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
                 }
                 break;
             case 'number':
-                if (autoFocus >= ref.current.value.length) {
-                    position = ref.current.value.length;
+                if (autoFocus >= refObj.current.value.length) {
+                    position = refObj.current.value.length;
                 }
                 else if (autoFocus >= 0) {
                     position = autoFocus;
@@ -34,7 +34,7 @@ var useAutoFocus = function (_a) {
                     position = 0;
                 }
                 else if (autoFocus === 'end') {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
@@ -44,15 +44,15 @@ var useAutoFocus = function (_a) {
                 position = 0;
         }
         try {
-            ref.current.focus();
-            ref.current.setSelectionRange(position, position);
+            refObj.current.focus({ preventScroll: true });
+            refObj.current.setSelectionRange(position, position);
         }
         catch (err) {
             if (__DEV__) {
                 console.error(err);
             }
         }
-    }, [autoFocus]);
-    return ref;
+    }, [autoFocus, refObj]);
+    return refObj;
 };
 export default useAutoFocus;

package/esm/hooks/useCombinedRef.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 export declare type Ref<T> = React.RefCallback<T> | React.MutableRefObject<T> | null;
 declare type Refs<T> = (Ref<T | null> | null | undefined)[];
 export declare function combineRefs<T>(...refs: Refs<T>): (element: T) => void;
+export declare function useCombineRefObjects<T>(...refs: Refs<T>): React.RefObject<T>;
 declare function useCombinedRefs<T>(...refs: Refs<T>): React.RefCallback<T | null>;
 export default useCombinedRefs;

package/esm/hooks/useCombinedRef.js

@@ -1,5 +1,6 @@
 import { __read, __spreadArray } from "tslib";
 import { useCallback } from 'react';
+import * as React from 'react';
 export function combineRefs() {
     var refs = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -18,6 +19,38 @@ export function combineRefs() {
         });
     };
 }
+export function useCombineRefObjects() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    var targetRef = React.useRef(null);
+    React.useEffect(function () {
+        refs.forEach(function (ref) {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(targetRef.current);
+            }
+            else {
+                ref.current = targetRef.current;
+            }
+        });
+        return function () {
+            refs.forEach(function (ref) {
+                if (!ref)
+                    return;
+                if (typeof ref === 'function') {
+                    ref(targetRef.current);
+                }
+                else {
+                    ref.current = targetRef.current;
+                }
+            });
+        };
+    }, __spreadArray([], __read(refs), false)); // eslint-disable-line react-hooks/exhaustive-deps
+    return targetRef;
+}
 /*
  * combines multiple refs to single MutableRefObject - when one wants to assign same element/instance to multiple refs
  * https://github.com/facebook/react/issues/13029#issue-331682836

package/esm/hooks/useIsMobileDevice.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobileDevice: () => boolean;

package/esm/hooks/useIsMobileDevice.js

@@ -0,0 +1,6 @@
+import { useTheme } from '../theme';
+import useMedia from './useMatchMedia';
+export var useIsMobileDevice = function () {
+    var currentTheme = useTheme();
+    return useMedia("(max-width: ".concat(currentTheme.theme.screens.md, ")"), false);
+};

package/esm/hooks/useMatchMedia.d.ts

@@ -0,0 +1,3 @@
+export declare const isBrowser: boolean;
+declare const useMedia: (query: string, defaultState?: boolean | undefined) => boolean;
+export default useMedia;

package/esm/hooks/useMatchMedia.js

@@ -0,0 +1,38 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+export var isBrowser = typeof window !== 'undefined';
+var getInitialState = function (query, defaultState) {
+    // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
+    if (defaultState !== undefined) {
+        return defaultState;
+    }
+    if (isBrowser) {
+        return window.matchMedia(query).matches;
+    }
+    // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn('`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
+    }
+    return false;
+};
+var useMedia = function (query, defaultState) {
+    var _a = __read(useState(getInitialState(query, defaultState)), 2), state = _a[0], setState = _a[1];
+    useEffect(function () {
+        var mounted = true;
+        var mediaQueryList = window.matchMedia(query);
+        var onChange = function () {
+            if (!mounted) {
+                return;
+            }
+            setState(!!mediaQueryList.matches);
+        };
+        mediaQueryList.addEventListener('change', onChange);
+        setState(mediaQueryList.matches);
+        return function () {
+            mounted = false;
+            mediaQueryList.removeEventListener('change', onChange);
+        };
+    }, [query]);
+    return state;
+};
+export default useMedia;

package/esm/input/basewebAdapters.d.ts

@@ -2,6 +2,6 @@ import { InputProps, StatefulInputProps } from './types';
 import { BaseInputOverrides } from 'baseui/input';
 declare type AdapterProps = Omit<InputProps | StatefulInputProps, 'autoFocus'>;
 declare const useInputBasewebAdapter: (props: AdapterProps) => Omit<AdapterProps, "size" | "style" | "className" | "overrides" | "variant" | "intent"> & {
-    overrides?: BaseInputOverrides<any> | undefined;
+    overrides?: BaseInputOverrides | undefined;
 };
 export default useInputBasewebAdapter;

package/esm/input/index.d.ts

@@ -1,4 +1,5 @@
 export { StatefulContainer, StyledRoot, StyledInputEnhancer, StyledStartEnhancer, StyledEndEnhancer, StyledInputContainer, StyledInput, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE, } from 'baseui/input';
-export type { BaseInput, ENHANCER_POSITION, BaseInputOverrides, BaseInputProps, State, InternalState, StatefulContainerProps, } from 'baseui/input';
+export type { BaseInput, BaseInputOverrides, BaseInputProps, State, InternalState, StatefulContainerProps, } from 'baseui/input';
+export { ENHANCER_POSITION } from 'baseui/input/constants';
 export { Input, StatefulInput, MaskedInput } from './input';
 export * from './types';

package/esm/input/index.js

@@ -1,3 +1,4 @@
 export { StatefulContainer, StyledRoot, StyledInputEnhancer, StyledStartEnhancer, StyledEndEnhancer, StyledInputContainer, StyledInput, STATE_CHANGE_TYPE, ADJOINED, CUSTOM_INPUT_TYPE, } from 'baseui/input';
+export { ENHANCER_POSITION } from 'baseui/input/constants';
 export { Input, StatefulInput, MaskedInput } from './input';
 export * from './types';

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

@@ -3,4 +3,4 @@ import { SharedProps } from './types';
 export declare const getInputContainerStyles: Styles;
 export declare const getEnhancerStyles: Styles;
 export declare const getPlaceholderTypography: Styles;
-export declare const getInputStyles: StyleFn<SharedProps>;
+export declare const getInputStyles: StyleFn<Partial<Pick<SharedProps, '$size' | '$disabled' | '$variant'>>>;