@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/esm/date-picker/StatelessDatePicker.js

@@ -2,6 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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';
@@ -16,6 +17,9 @@ import { mergeOverrides, useOverrides } from '../overrides';
 import { DEFAULT_FORMAT_STRING } from './constants';
 import { formatDate, getAriaLabel, isTimeInRange, normalizeDashes, prepareLocale } from './utils';
 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',
@@ -32,14 +36,24 @@ var accessibilityStyles = {
 // eslint-disable-next-line max-statements
 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 theme = useStyle().theme;
+    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 ? getDefaultSize(theme) : _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, _k = _c.timezone, timezone = _k === void 0 ? getSystemTzName() : _k, _l = _c.showTimezone, showTimezone = _l === void 0 ? false : _l, props = __rest(_c, ["onChange", "onBlur", "adapter", "size", "formatString", "isOpen", "onFocus", "clearable", "displayValueAtRangeIndex", "variant", "overrides", "intent", "value", "formatDisplayValue", "autoSizeInput", "weekStartsOn", "timezone", "showTimezone"]);
     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]);
+    var value = React.useMemo(function () {
+        if (Array.isArray(_value)) {
+            return _compact(_value).map(function (date) { return new Date(convertDateFromSystemTzToTargetTz(date, timezone)); });
+        }
+        if (_value) {
+            return new Date(convertDateFromSystemTzToTargetTz(_value, timezone));
+        }
+        return undefined;
+    }, [_value, timezone]);
     // this state is required for a11y of calendar, this will be set to true when user first press down arrow key on opened calendar
     // and we will set this to false when calendar will be closed.
-    var _k = __read(React.useState(false), 2), autoFocusCalendar = _k[0], setAutoFocusCalendar = _k[1];
-    var _l = __read(React.useState(false), 2), error = _l[0], setError = _l[1];
+    var _m = __read(React.useState(false), 2), autoFocusCalendar = _m[0], setAutoFocusCalendar = _m[1];
+    var _o = __read(React.useState(false), 2), error = _o[0], setError = _o[1];
     React.useEffect(function () {
         if (isTimeInRange(value, { minDate: props.minDate, maxDate: props.maxDate, dateHelpers: dateHelpers })) {
             setError(false);
@@ -49,7 +63,7 @@ export var StatelessDatePicker = function (_props) {
         }
     }, [value, props.minDate, props.maxDate, dateHelpers]);
     var screenReaderMsgId = useUniqueId();
-    var _m = props["aria-describedby"], ariaDescribedBy = _m === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _m;
+    var _p = props["aria-describedby"], ariaDescribedBy = _p === void 0 ? "datepicker--screenreader--message--input-".concat(screenReaderMsgId) : _p;
     var defaultFormatDisplayValue = React.useCallback(function (date) {
         var normalizedFormatString = normalizeDashes(formatString);
         if (formatDisplayValue) {
@@ -58,8 +72,15 @@ export var StatelessDatePicker = function (_props) {
             }
             return formatDisplayValue(date, normalizedFormatString);
         }
-        return formatDate({ date: date, dateHelpers: dateHelpers, formatString: normalizedFormatString, locale: dateFnsLocale });
-    }, [formatString, formatDisplayValue, dateHelpers, dateFnsLocale]);
+        return formatDate({
+            date: date,
+            dateHelpers: dateHelpers,
+            formatString: normalizedFormatString,
+            locale: dateFnsLocale,
+            timezone: timezone,
+            showTimezone: showTimezone,
+        });
+    }, [formatString, formatDisplayValue, dateHelpers, dateFnsLocale, timezone, showTimezone]);
     var mergedOverrides = React.useMemo(function () {
         return mergeOverrides({
             Popover: {
@@ -94,8 +115,8 @@ export var StatelessDatePicker = function (_props) {
     }, [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 });
-    }, [onChange]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(showTimezone ? { value: data.date, timezone: data.timezone } : { value: data.date });
+    }, [onChange, showTimezone]);
     var onClose = React.useCallback(function () {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
         setAutoFocusCalendar(false);
@@ -122,17 +143,15 @@ export var StatelessDatePicker = function (_props) {
     var handleInputChange = React.useCallback(function (e) {
         var inputValue = e.currentTarget.value;
         if (clearable && inputValue.length === 0) {
-            onChange === null || onChange === void 0 ? void 0 : onChange({
-                value: undefined,
-            });
+            onChange === null || onChange === void 0 ? void 0 : onChange(showTimezone ? { value: undefined, timezone: timezone } : { value: undefined });
         }
-    }, [clearable, onChange]);
+    }, [clearable, onChange, timezone, showTimezone]);
     var dateAriaLabel = React.useMemo(function () { return getAriaLabel(value, defaultFormatDisplayValue, locale); }, [value, defaultFormatDisplayValue, locale]);
-    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 _q = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Input, DatePickerInput), 2), InputComponent = _q[0], inputProps = _q[1];
+    var _r = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Popover, Popover), 2), PopoverComponent = _r[0], popoverProps = _r[1];
+    var _s = __read(useOverrides(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.InputWrapper, StyledInputWrapper), 2), InputWrapper = _s[0], inputWrapperProps = _s[1];
     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, 
+    return (_jsxs(_Fragment, { children: [_jsx(PopoverComponent, __assign({ accessibilityType: "none", 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, showTimezone: showTimezone, timezone: timezone }), void 0) }, popoverProps, { children: _jsx(InputWrapper, __assign({}, inputWrapperProps, { children: _jsx(InputComponent, __assign({ id: props.id, "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/locale.d.ts

@@ -1,3 +1,5 @@
 export declare type DatePickerLocale = {
     popoverAriaLabel: string;
+    timezonePickerLabel: string;
+    timezonePickerPlaceholder: string;
 };

package/esm/date-picker/stateful-container.js

@@ -2,23 +2,26 @@ import { __assign, __read, __rest } from "tslib";
 import * as React from 'react';
 import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
 import { useDatePickerState } from './useDatePickerState';
+import { getSystemTzName } from '../time-range-picker/utils';
 var StatefulContainer = function (_a) {
-    var _b;
-    var adapter = _a.adapter, onChange = _a.onChange, value = _a.value, _c = _a.startOpen, startOpen = _c === void 0 ? false : _c, props = __rest(_a, ["adapter", "onChange", "value", "startOpen"]);
-    var _d = __read(React.useState(value), 2), date = _d[0], setDate = _d[1];
-    var _e = useDatePickerState({ startOpen: startOpen }), isOpen = _e.isOpen, handleOpen = _e.handleOpen, handleClose = _e.handleClose, setIsOpen = _e.setIsOpen;
+    var _b, _c;
+    var adapter = _a.adapter, onChange = _a.onChange, value = _a.value, _d = _a.startOpen, startOpen = _d === void 0 ? false : _d, props = __rest(_a, ["adapter", "onChange", "value", "startOpen"]);
+    var _e = __read(React.useState(value), 2), date = _e[0], setDate = _e[1];
+    var _f = __read(React.useState((_b = props.timezone) !== null && _b !== void 0 ? _b : getSystemTzName()), 2), timezone = _f[0], setTimezone = _f[1];
+    var _g = useDatePickerState({ startOpen: startOpen }), isOpen = _g.isOpen, handleOpen = _g.handleOpen, handleClose = _g.handleClose, setIsOpen = _g.setIsOpen;
     React.useEffect(function () {
         setDate(value);
     }, [value]);
     var handleDateChange = React.useCallback(function (_a) {
-        var _value = _a.value;
+        var _value = _a.value, _timezone = _a.timezone;
         var prevValue = date;
         setDate(_value);
-        onChange === null || onChange === void 0 ? void 0 : onChange({ value: _value });
+        setTimezone(_timezone);
+        onChange === null || onChange === void 0 ? void 0 : onChange(props.showTimezone ? { value: _value, timezone: _timezone } : { value: _value });
         setIsOpen(false);
-    }, [setDate, setIsOpen, onChange, date]);
+    }, [setDate, setIsOpen, onChange, date, props.showTimezone]);
     var children = props.children, restProps = __rest(props, ["children"]);
-    return (_b = props.children) === null || _b === void 0 ? void 0 : _b.call(props, __assign(__assign({}, restProps), { value: date, adapter: adapter, onChange: handleDateChange, onFocus: handleOpen, onBlur: handleClose, isOpen: isOpen, range: false }));
+    return (_c = props.children) === null || _c === void 0 ? void 0 : _c.call(props, __assign(__assign({}, restProps), { value: date, adapter: adapter, onChange: handleDateChange, onFocus: handleOpen, onBlur: handleClose, isOpen: isOpen, range: false, timezone: timezone }));
 };
 StatefulContainer.defaultProps = {
     adapter: dateFnsAdapter,

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

@@ -51,6 +51,56 @@ var getEdgeDayBeforeStyle = function (code, firstChild, peekNextMonth) {
         '101010010000010': !peekNextMonth && firstChild ? { content: 'none' } : pseudoSelectedStyle,
     }[code] || {});
 };
+function generateDayStyles(defaultCode, defaultStyle) {
+    var _a;
+    var codeForSM = "".concat(defaultCode.substr(0, 12), "1").concat(defaultCode.substr(12 + 1));
+    var codeForEM = "".concat(defaultCode.substr(0, 13), "1").concat(defaultCode.substr(13 + 1));
+    return _a = {},
+        _a[defaultCode] = defaultStyle,
+        _a[codeForSM] = defaultStyle,
+        _a[codeForEM] = defaultStyle,
+        _a;
+}
+var getTempRTLAdaptedStyles = function (code) {
+    var dayStyles = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, generateDayStyles('100110100000000', {
+        ':before': {
+            right: '0%',
+            left: '0%',
+        },
+    })), generateDayStyles('100100001001000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101000001010000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101110100000000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101111000000000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('100111000000000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('101000001001000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('100100001010000', {
+        ':before': {
+            left: '50%',
+        },
+    }));
+    return dayStyles[code] || {};
+};
 export var getDayStyles = function (todaySOD) { return [
     'text-12 leading-8 w-9',
     function (_a, props) {
@@ -73,7 +123,7 @@ export var getDayStyles = function (todaySOD) { return [
                 !$isHovered &&
                 !$hasRangeHighlighted && {
                 backgroundColor: 'transparent',
-            })), { backgroundColor: backgroundColor, height: '100%', top: 0 }), ':before': __assign(__assign(__assign(__assign({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($outsideMonthWithinRange ? { content: '' } : {})), ($startOfMonth
+            })), { backgroundColor: backgroundColor, height: '100%', top: 0 }), ':before': __assign(__assign(__assign(__assign(__assign({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($outsideMonthWithinRange ? { content: '' } : {})), ($startOfMonth
                 ? {
                     borderTopLeftRadius: '100%',
                     borderBottomLeftRadius: '100%',
@@ -83,7 +133,7 @@ export var getDayStyles = function (todaySOD) { return [
                     borderTopRightRadius: '100%',
                     borderBottomRightRadius: '100%',
                 }
-                : {})), ($outsideMonth ? { backgroundColor: 'transparent' } : {})), ':first-child': __assign({}, ($range
+                : {})), ($outsideMonth ? { backgroundColor: 'transparent' } : {})), (getTempRTLAdaptedStyles(code)[':before'] || {})), ':first-child': __assign({}, ($range
                 ? {
                     ':before': __assign({}, getEdgeDayBeforeStyle(code, true, props.$peekNextMonth)),
                 }
@@ -94,7 +144,7 @@ export var getDayStyles = function (todaySOD) { return [
                 : {})) }, (dateFnsAdapter.isEqual($date, todaySOD) &&
             !$selected && {
             color: theme.spr.text04,
-        })), ($outsideMonth && { color: theme.spr.text03 }));
+        })), ($outsideMonth && { color: $selected ? theme.spr.text05 : theme.spr.text03 }));
     },
 ]; };
 export var StyledFooter = styled('div', 'flex px-4 py-3');

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

@@ -19,6 +19,7 @@ export declare type DateTimeSelectSharedProps = {
 export declare type DatepickerOverrides<T = SharedStyleProps> = {
     CalendarContainer?: Override<T>;
     CalendarHeader?: Override<T>;
+    Calendar?: Override<CalendarProps & Record<string, any>>;
     Day?: Override<T>;
     Input?: Override<T>;
     InputWrapper?: Override<T>;
@@ -43,7 +44,11 @@ export declare type DatepickerOverrides<T = SharedStyleProps> = {
     Footer?: Override<T>;
     DateTimeSelect?: Override<DateTimeSelectSharedProps>;
 };
+export declare type Nullable<T> = T | null | undefined;
 export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSelectStart' | 'timeSelectEnd' | 'value' | 'onChange' | 'quickSelect' | 'quickSelectOptions' | 'size' | 'overrides' | 'onDayClick' | 'onDayMouseOver' | 'onDayMouseLeave' | 'onMonthChange' | 'onYearChange' | 'formatString' | 'peekNextMonth' | 'fixedHeight'> & {
+    id?: string;
+    showTimezone?: boolean;
+    timezone?: string;
     intent?: Intent;
     timeSelect?: boolean;
     onBlur?: () => void;
@@ -53,7 +58,8 @@ export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSe
     variant?: InputVariant;
     value: Date | Date[] | undefined;
     onChange?: (data: {
-        value?: (Date | undefined | null)[] | Date | null;
+        value?: Nullable<Date>[] | Nullable<Date>;
+        timezone?: string;
     }) => any;
     size?: InputSize;
     overrides?: DatepickerOverrides;
@@ -75,8 +81,11 @@ export declare type StatefulContainerProps = {
     value?: Date;
     onChange?: (data: {
         value?: Date | undefined | null;
+        timezone?: string;
     }) => any;
     startOpen?: boolean;
+    showTimezone?: boolean;
+    timezone?: string;
 };
 export declare type DatePickerProps = Omit<StatelessDatePickerProps, 'value' | 'range'> & Omit<StatefulContainerProps, 'children'>;
 export declare type DatePickerSharedProps = SharedStylePropsT;

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

@@ -5,9 +5,11 @@ interface FormatDateParams {
     formatString?: string;
     locale: any;
     dateHelpers?: DateHelpers<Date>;
+    timezone?: string;
+    showTimezone?: boolean;
 }
 export declare const normalizeDashes: (formatString: string) => string;
-export declare const formatDate: (params: FormatDateParams) => string;
+export declare const formatDate: ({ showTimezone, ...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;

package/esm/date-picker/utils.js

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { __assign, __rest } from "tslib";
 import en from 'date-fns/locale/en-US';
 import getInterpolatedString from 'baseui/helpers/i18n-interpolation';
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
@@ -6,7 +6,8 @@ import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
 import { DEFAULT_FORMAT_STRING } from './constants';
 // replacing both hyphens and em-dashes with en-dashes
 export var normalizeDashes = function (formatString) { return formatString.replace(/-/g, '–').replace(/—/g, '–'); };
-export var formatDate = function (params) {
+export var formatDate = function (_a) {
+    var _b = _a.showTimezone, showTimezone = _b === void 0 ? false : _b, params = __rest(_a, ["showTimezone"]);
     var date = params.date;
     var formatString = params.formatString || normalizeDashes(DEFAULT_FORMAT_STRING);
     var dateHelpers = params.dateHelpers || new DateHelpers(dateFnsAdapter);
@@ -18,10 +19,14 @@ export var formatDate = function (params) {
     if (Array.isArray(date) && !date[0] && !date[1]) {
         return '';
     }
+    var formattedDate;
     if (Array.isArray(date)) {
-        return date.map(function (day) { return format(day); }).join(' – ');
+        formattedDate = date.map(function (day) { return format(day); }).join(' – ');
     }
-    return format(date);
+    else {
+        formattedDate = format(date);
+    }
+    return "".concat(formattedDate).concat(params.timezone && showTimezone ? " | ".concat(params.timezone) : '');
 };
 export var getAriaLabel = function (value, formatDisplayValue, locale) {
     // No date selected

package/esm/date-time/DateTime.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DateTimeProps } from './types';
+export declare const DateTime: ({ date, variant, dateTimeOptions }: DateTimeProps) => JSX.Element;

package/esm/date-time/DateTime.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+//hooks
+import { useDateTime } from './useDateTime';
+export var DateTime = function (_a) {
+    var date = _a.date, variant = _a.variant, dateTimeOptions = _a.dateTimeOptions;
+    var formattedDate = useDateTime({ date: date, variant: variant, dateTimeOptions: dateTimeOptions });
+    return _jsx(_Fragment, { children: formattedDate }, void 0);
+};

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

@@ -0,0 +1,3 @@
+export { DateTime } from './DateTime';
+export { useDateTime } from './useDateTime';
+export * from './types';

package/esm/date-time/index.js

@@ -0,0 +1,3 @@
+export { DateTime } from './DateTime';
+export { useDateTime } from './useDateTime';
+export * from './types';

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

@@ -0,0 +1,21 @@
+import { ValueOf } from '../utility-types';
+export declare const DATE_TIME_VARIANTS: {
+    readonly SHORT_DATE: "shortDate";
+    readonly MEDIUM_DATE: "mediumDate";
+    readonly LONG_DATE: "longDate";
+    readonly FULL_DATE: "fullDate";
+    readonly SHORT_TIME: "shortTime";
+    readonly MEDIUM_TIME: "mediumTime";
+    readonly LONG_TIME: "longTime";
+    readonly FULL_TIME: "fullTime";
+    readonly SHORT_DATE_TIME: "shortDateTime";
+    readonly MEDIUM_DATE_TIME: "mediumDateTime";
+    readonly LONG_DATE_TIME: "longDateTime";
+    readonly FULL_DATE_TIME: "fullDateTime";
+    readonly CUSTOM: "custom";
+};
+export declare type DateTimeProps = {
+    date: Date | number;
+    variant: ValueOf<typeof DATE_TIME_VARIANTS>;
+    dateTimeOptions?: Intl.DateTimeFormatOptions;
+};

package/esm/date-time/types.js

@@ -0,0 +1,15 @@
+export var DATE_TIME_VARIANTS = {
+    SHORT_DATE: 'shortDate',
+    MEDIUM_DATE: 'mediumDate',
+    LONG_DATE: 'longDate',
+    FULL_DATE: 'fullDate',
+    SHORT_TIME: 'shortTime',
+    MEDIUM_TIME: 'mediumTime',
+    LONG_TIME: 'longTime',
+    FULL_TIME: 'fullTime',
+    SHORT_DATE_TIME: 'shortDateTime',
+    MEDIUM_DATE_TIME: 'mediumDateTime',
+    LONG_DATE_TIME: 'longDateTime',
+    FULL_DATE_TIME: 'fullDateTime',
+    CUSTOM: 'custom',
+};

package/esm/date-time/useDateTime.d.ts

@@ -0,0 +1,2 @@
+import { DateTimeProps } from './types';
+export declare const useDateTime: ({ date, variant, dateTimeOptions }: DateTimeProps) => string;

package/esm/date-time/useDateTime.js

@@ -0,0 +1,9 @@
+import { __assign } from "tslib";
+import { useLocale } from '../locale';
+import { VARIANTS_DATE_FORMAT_OPTIONS } from './variants';
+export var useDateTime = function (_a) {
+    var date = _a.date, variant = _a.variant, dateTimeOptions = _a.dateTimeOptions;
+    var variantOptions = VARIANTS_DATE_FORMAT_OPTIONS[variant];
+    var langCode = useLocale().langCode;
+    return Intl.DateTimeFormat(langCode, __assign(__assign({}, variantOptions), dateTimeOptions)).format(date);
+};

package/esm/date-time/variants.d.ts

@@ -0,0 +1,4 @@
+export declare const DEFAULT_VARIANT: "shortDate";
+export declare const VARIANTS_DATE_FORMAT_OPTIONS: {
+    [key: string]: Intl.DateTimeFormatOptions;
+};

package/esm/date-time/variants.js

@@ -0,0 +1,84 @@
+var _a;
+import { DATE_TIME_VARIANTS } from './types';
+export var DEFAULT_VARIANT = DATE_TIME_VARIANTS.SHORT_DATE; //dd/mm/yyyy in en_US
+export var VARIANTS_DATE_FORMAT_OPTIONS = (_a = {},
+    _a[DATE_TIME_VARIANTS.SHORT_DATE] = { year: 'numeric', month: 'numeric', day: 'numeric' },
+    _a[DATE_TIME_VARIANTS.MEDIUM_DATE] = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    },
+    _a[DATE_TIME_VARIANTS.LONG_DATE] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    },
+    _a[DATE_TIME_VARIANTS.FULL_DATE] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        weekday: 'long',
+    },
+    _a[DATE_TIME_VARIANTS.SHORT_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[DATE_TIME_VARIANTS.MEDIUM_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: true,
+    },
+    _a[DATE_TIME_VARIANTS.LONG_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'short',
+    },
+    _a[DATE_TIME_VARIANTS.FULL_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'long',
+    },
+    _a[DATE_TIME_VARIANTS.SHORT_DATE_TIME] = {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[DATE_TIME_VARIANTS.MEDIUM_DATE_TIME] = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[DATE_TIME_VARIANTS.LONG_DATE_TIME] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: true,
+        timeZoneName: 'short',
+    },
+    _a[DATE_TIME_VARIANTS.FULL_DATE_TIME] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        weekday: 'long',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'long',
+    },
+    _a);

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

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { FormControlProps } from './types';
-declare const FormControl: ({ overrides, label, caption, disabled, error, positive, htmlFor, children, intent, required, layout, $as, className, subText, subTextAsIcon, }: FormControlProps) => React.ReactElement;
+declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLElement>>;
 export { FormControl };

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

@@ -1,8 +1,8 @@
 import { __assign, __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import _uniqueId from 'lodash/uniqueId';
-import { useMemo, useRef } from 'react';
+import { useMemo, forwardRef } from 'react';
 import * as React from 'react';
+import { useUID } from 'react-uid';
 import { add$props } from '../helpers';
 import { Stack, StackItem } from '../stack';
 import InfoIcon from '../icon/components/info';
@@ -23,32 +23,37 @@ function chooseRenderedHint(caption, error, positive, sharedProps) {
     }
     return null;
 }
-var FormControl = function (_a) {
+var FormControl = forwardRef(function (_a, ref) {
     var overrides = _a.overrides, label = _a.label, caption = _a.caption, disabled = _a.disabled, error = _a.error, positive = _a.positive, htmlFor = _a.htmlFor, children = _a.children, intent = _a.intent, required = _a.required, layout = _a.layout, $as = _a.$as, className = _a.className, subText = _a.subText, subTextAsIcon = _a.subTextAsIcon;
     var onlyChildProps = React.Children.only(children).props;
-    var a11yCaptionId = useRef(_uniqueId('sw-id-'));
+    var a11yCaptionId = useUID();
+    var a11LabelId = useUID();
+    var a11SubTextId = useUID();
+    var fieldUniqueId = useUID();
     // First try to infer id from props or children. Create new id if needed.
-    var a11yFieldId = useRef(htmlFor || onlyChildProps.id || _uniqueId('sw-id-'));
-    var sharedProps = __assign(__assign({}, add$props({ required: required, layout: layout, intent: intent, disabled: disabled })), { $error: !!error, $positive: !!positive });
+    var a11yFieldId = htmlFor || onlyChildProps.id || fieldUniqueId;
+    var sharedProps = __assign(__assign({}, add$props({ required: required, layout: layout, intent: intent, disabled: disabled })), { $error: !!error, $positive: !!positive, $hasSubText: !!subText, $subTextAsIcon: subTextAsIcon });
     var hint = chooseRenderedHint(caption, error, positive, sharedProps);
     var hintEl = intent === 'error' && (caption || error) ? (_jsxs(Stack, __assign({ direction: "horizontal", gap: 2, shrink: true }, { children: [_jsx(ErrorIcon, { size: 14 }, void 0), _jsx(StackItem, { children: hint }, void 0)] }), void 0)) : (hint);
     var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, StyledLabelContainer), 2), LabelContainer = _b[0], labelContainerProps = _b[1], _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _c[0], labelProps = _c[1], _d = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.RequiredDot, StyledRequiredDot), 2), RequiredDot = _d[0], requiredDotProps = _d[1], _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _e[0], rootProps = _e[1], _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SubText, StyledSubText), 2), SubText = _f[0], subTextProps = _f[1], _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer, StyledInfoIconContainer), 2), InfoIconContainer = _g[0], infoIconContainerProps = _g[1], _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ControlContainer, StyledControlContainer), 2), ControlContainer = _h[0], controlContainerProps = _h[1], _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Caption, StyledCaption), 2), Caption = _j[0], captionProps = _j[1], _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip, StatefulTooltip), 2), SubTextTooltip = _k[0], subTextTooltipProps = _k[1];
     var formControlProviderValue = useMemo(function () { return ({ intent: intent }); }, [intent]);
     var shouldRenderSubTextInTooltip = layout === 'horizontal' || subTextAsIcon;
-    return (_jsx(FormControlProvider, __assign({ value: formControlProviderValue }, { children: _jsxs(Root, __assign({ "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && (_jsxs(LabelContainer, __assign({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [_jsx(Label, __assign({ "data-spaceweb": "form-control-label", htmlFor: a11yFieldId.current }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && _jsx(RequiredDot, __assign({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? (_jsx(SubTextTooltip, __assign({ content: subText, size: "md" }, subTextTooltipProps, { children: _jsx(InfoIconContainer, __assign({}, infoIconContainerProps, { children: _jsx(InfoIcon, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? (_jsx(SubText, __assign({}, subTextProps, { children: typeof subText === 'function' ? subText(sharedProps) : subText }), void 0)) : null, _jsxs(ControlContainer, __assign({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
+    return (_jsx(FormControlProvider, __assign({ value: formControlProviderValue }, { children: _jsxs(Root, __assign({ ref: ref, "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && (_jsxs(LabelContainer, __assign({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [_jsx(Label, __assign({ id: a11LabelId, "data-spaceweb": "form-control-label", htmlFor: a11yFieldId }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && _jsx(RequiredDot, __assign({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? (_jsx(SubTextTooltip, __assign({ content: subText, size: "md" }, subTextTooltipProps, { children: _jsx(InfoIconContainer, __assign({}, infoIconContainerProps, { children: _jsx(InfoIcon, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? (_jsx(SubText, __assign({ id: a11SubTextId }, subTextProps, { children: typeof subText === 'function' ? subText(sharedProps) : subText }), void 0)) : null, _jsxs(ControlContainer, __assign({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
                             if (!child)
                                 return null;
                             var key = child.key || String(index);
                             return React.cloneElement(child, {
                                 key: key,
-                                id: a11yFieldId.current,
-                                'aria-errormessage': error ? a11yCaptionId.current : null,
-                                'aria-describedby': caption || positive ? a11yCaptionId.current : null,
+                                id: a11yFieldId,
+                                'aria-errormessage': error ? a11yCaptionId : null,
+                                'aria-describedby': caption || positive || subText
+                                    ? "".concat(subText ? a11SubTextId : '', " ").concat(caption ? a11yCaptionId : '', " ")
+                                    : null,
                                 'aria-required': required ? 'true' : 'false',
                                 disabled: onlyChildProps.disabled || disabled,
                                 error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
                                 positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive,
                             });
-                        }), (caption || error || positive) && (_jsx(Caption, __assign({ "data-spaceweb": "form-control-caption", id: a11yCaptionId.current }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
-};
+                        }), (caption || error || positive) && (_jsx(Caption, __assign({ "data-spaceweb": "form-control-caption", id: a11yCaptionId }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
+});
 export { FormControl };

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

@@ -14,20 +14,31 @@ var getIntentColor = function (_a, _b) {
             return { color: theme.spr.text02 };
     }
 };
-export var StyledSubText = styled('div', 'spr-text-02 typography-l3 mb-1');
+export var StyledSubText = styled('div', 'spr-text-02 mb-1', {
+    fontSize: '13px',
+    lineHeight: '16px',
+    fontWeight: 400,
+});
 export var StyledInfoIconContainer = styled('div', 'spr-ui-03 rounded-full flex items-center justify-center ml-2 flex-shrink-0', function (_a) {
     var px2rem = _a.px2rem;
     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 StyledRequiredDot = styled('span', 'spr-support-error rounded-full h-1 w-1 flex-shrink-0 ml-1');
 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 mb-1 w-full', function (utils, _a) {
+export var StyledCaption = styled('div', 'typography-l2 mt-1', getIntentColor);
+export var StyledLabelContainer = styled('div', 'flex items-center w-full', function (utils, _a) {
     var $layout = _a.$layout;
-    return $layout === 'horizontal' ? 'w-4/24 mr-2' : '';
+    return ($layout === 'horizontal' ? 'w-4/24 mr-2' : '');
+}, function (utils, _a) {
+    var $hasSubText = _a.$hasSubText, $subTextAsIcon = _a.$subTextAsIcon;
+    return (!$hasSubText || $subTextAsIcon ? 'mb-1' : '');
+});
+export var StyledLabel = styled('label', 'spr-text-02', {
+    fontSize: '14px',
+    lineHeight: '18px',
+    fontWeight: 400,
 });
-export var StyledLabel = styled('label', 'typography-l1 text-14 spr-text-02');
 export var StyledControlContainer = styled('div', 'w-full');

package/esm/helpers/ClearIconButton.js

@@ -2,9 +2,11 @@ import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import IconButton from '../button/IconButton';
 import Close from '../icon/components/close';
+import { useLocale } from '../locale';
 var ClearIconButton = function (_a) {
     var size = _a.size, $size = _a.$size, $isOpen = _a.$isOpen, props = __rest(_a, ["size", "$size", "$isOpen"]);
-    return (_jsx(IconButton, __assign({}, props, { overrides: {
+    var locale = useLocale();
+    return (_jsx(IconButton, __assign({ "aria-label": locale.input.clearAriaLabel }, props, { overrides: {
             BaseButton: {
                 style: [
                     'h-5 w-5 spr-text-02 hover:spr-text-01 focus:spr-text-01 hover:spr-ui-03 focus:spr-ui-03 bg-transparent',

package/esm/helpers/StyledTombstone.d.ts

@@ -0,0 +1 @@
+export declare const StyledTombstone: import("../style/styled").StyledComponent;