@sprinklrjs/spaceweb 10.1.0 → 12.14.4

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)[] | 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

@@ -1,20 +1,23 @@
+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>;
+    timezone?: string;
+    showTimezone?: boolean;
 }
 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: ({ 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;
 } | 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

@@ -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
@@ -57,7 +62,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/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/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/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 StyledRoot = styled('div', 'mb-4 flex', function (utils, _a) {
+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 my-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-l2 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;

package/esm/helpers/StyledTombstone.js

@@ -0,0 +1,17 @@
+import styled from '../style/styled';
+export var StyledTombstone = styled('div', 'spr-ui-03 h-full w-full', {
+    animationDuration: '1s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'ease-in-out',
+    animationName: {
+        '0%': {
+            opacity: '1',
+        },
+        '50%': {
+            opacity: '0.4',
+        },
+        '100%': {
+            opacity: '1',
+        },
+    },
+});

package/esm/helpers/baseui/useConvertOverrides.js

@@ -1,10 +1,15 @@
 import { __assign, __read, __spreadArray } from "tslib";
 import _reduce from 'lodash/reduce';
 import { useMemo } from 'react';
+import rtlCSSJS from 'rtl-css-js';
 import { mergeOverrides } from '../../overrides';
 import _getStyleWithProps from '../../style/_getStyleWithProps';
 import useStyle from '../../style/useStyle';
-var convertOverrideObject = function (override, utils) { return (__assign(__assign({}, override), { style: function (props) { return _getStyleWithProps(utils, props, override.style); } })); };
+var identity = function (x) { return x; };
+var convertOverrideObject = function (override, utils) { return (__assign(__assign({}, override), { style: function (props) {
+        var decorator = utils.isRTL ? rtlCSSJS : identity;
+        return decorator(_getStyleWithProps(utils, props, override.style));
+    } })); };
 var mergeAndConvertOverrides = function (target, source, utils) {
     if (source === void 0) { source = {}; }
     var mergedOverrides = mergeOverrides(target, source);

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/commonStyles.js

@@ -1,3 +1,5 @@
+import { __assign } from "tslib";
+import { borderColor, borderRadius, borderStyle, borderWidth } from './longHandHelpers';
 export var chevronStyles = function (_a, _b) {
     var theme = _a.theme, px2rem = _a.px2rem;
     var $isOpen = _b.$isOpen;
@@ -21,12 +23,7 @@ export var transparentScrollbarStyles = {
     '::-webkit-scrollbar': {
         backgroundColor: 'transparent',
     },
-    '::-webkit-scrollbar-thumb': {
-        backgroundColor: 'darkgrey',
-        border: '4px solid transparent',
-        borderRadius: '8px',
-        backgroundClip: 'padding-box',
-    },
+    '::-webkit-scrollbar-thumb': __assign(__assign(__assign(__assign(__assign({ backgroundColor: 'darkgrey' }, borderRadius('8px')), borderWidth('4px')), borderStyle('solid')), borderColor('transparent')), { backgroundClip: 'padding-box' }),
 };
 export var getOutlineStyles = function (_a, props) {
     var theme = _a.theme;

package/esm/helpers/index.d.ts

@@ -17,6 +17,7 @@ export declare const add$props: (props: Record<string, unknown>) => Record<strin
  * @param value
  */
 export declare const covertCSSVariablesToValue: <T extends string | object>(value: T) => T;
+export declare const themeTokenToHex: (token: string) => string | null;
 /**
  * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color

package/esm/helpers/index.js

@@ -44,6 +44,14 @@ export var covertCSSVariablesToValue = function (value) {
     }
     return value;
 };
+export var themeTokenToHex = function (token) {
+    var hex = covertCSSVariablesToValue(token);
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    return parsed;
+};
 /**
  * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color

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/helpers/themeHelpers.d.ts

@@ -2,3 +2,4 @@ import { Theme } from '@sprinklrjs/spaceweb-themes/types';
 import { Size } from '../types';
 export declare const getComponentTheme: (theme: Theme, componentName: string) => any;
 export declare const getComponentSizeTheme: (theme: Theme, componentName: string, size: Size | undefined, defaultSize: Size) => any;
+export declare const getDefaultSize: (theme: Theme) => 'md' | 'xxxs';