@sprinklrjs/spaceweb 12.33.2 → 14.11.0

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

@@ -1,22 +1,25 @@
 /// <reference types="react" />
 import { CalendarProps as BaseCalendarProps, DatepickerProps as BaseDatepickerProps, SharedStylePropsT } from '../baseui/datepicker';
 import { TimePickerProps } from '../time-picker';
+import { TimezonePickerProps } from '../time-zone-picker';
 import { InputSize, InputVariant } from '../input';
 import { Override } from '../overrides/types';
 import { Intent } from '../types';
-export declare type FormatString = string;
-export declare type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-export declare type CalendarProps = Omit<BaseCalendarProps, 'overrides'> & {
+export type FormatString = string;
+export type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type CalendarProps = Omit<BaseCalendarProps, 'overrides'> & {
     formatString?: FormatString;
     overrides?: DatepickerOverrides;
     adapter?: any;
     weekStartsOn?: WeekStartsOn;
+    getDefaultTime?: (date: Date) => Date;
+    formatDisplayValue?: (date: Date) => string;
 };
-export declare type TimeSelect = 'start' | 'end';
-export declare type DateTimeSelectSharedProps = {
+export type TimeSelect = 'start' | 'end';
+export type DateTimeSelectSharedProps = {
     $timeSelect: TimeSelect;
 };
-export declare type DatepickerOverrides<T = SharedStyleProps> = {
+export type DatepickerOverrides<T = SharedStyleProps> = {
     CalendarContainer?: Override<T>;
     CalendarHeader?: Override<T>;
     TimezonePicker?: Override<T>;
@@ -45,11 +48,13 @@ 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'> & {
+export type Nullable<T> = T | null | undefined;
+export type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSelectStart' | 'timeSelectEnd' | 'value' | 'onChange' | 'quickSelect' | 'quickSelectOptions' | 'size' | 'overrides' | 'onDayClick' | 'onDayMouseOver' | 'onDayMouseLeave' | 'onMonthChange' | 'onYearChange' | 'formatString' | 'peekNextMonth' | 'fixedHeight'> & {
+    disableTimezoneSwitch?: boolean;
     id?: string;
     showTimezone?: boolean;
     timezone?: string;
+    timezoneOptions?: TimezonePickerProps['timezoneOptions'];
     intent?: Intent;
     timeSelect?: boolean;
     onBlur?: () => void;
@@ -61,12 +66,14 @@ export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSe
     onChange?: (data: {
         value?: Nullable<Date>[] | Nullable<Date>;
         timezone?: string;
+        shouldClosePopover?: boolean;
     }) => any;
     size?: InputSize;
     overrides?: DatepickerOverrides;
     autoSizeInput?: boolean;
     formatString?: string;
-    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    getDefaultTime?: (date: Date) => Date;
+    weekStartsOn?: WeekStartsOn;
     /**
      * @deprecated This will be removed in next major release. Spaceweb will handle this prop.
      */
@@ -76,7 +83,7 @@ export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSe
      */
     fixedHeight?: boolean;
 };
-export declare type StatefulContainerProps = {
+export type StatefulContainerProps = {
     children: (props: StatelessDatePickerProps) => JSX.Element;
     adapter?: any;
     value?: Date;
@@ -88,9 +95,9 @@ export declare type StatefulContainerProps = {
     showTimezone?: boolean;
     timezone?: string;
 };
-export declare type DatePickerProps = Omit<StatelessDatePickerProps, 'value' | 'range'> & Omit<StatefulContainerProps, 'children'>;
-export declare type DatePickerSharedProps = SharedStylePropsT;
-export declare type SharedStyleProps = {
+export type DatePickerProps = Omit<StatelessDatePickerProps, 'value' | 'range'> & Omit<StatefulContainerProps, 'children'>;
+export type DatePickerSharedProps = SharedStylePropsT;
+export type SharedStyleProps = {
     $date: Date;
     $disabled?: boolean;
     $endDate?: boolean;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type UseDatePickerStateType = {
+type UseDatePickerStateType = {
     onClose?: () => void;
     onOpen?: () => void;
     startOpen?: boolean;

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

@@ -1,5 +1,6 @@
 import DateHelpers from '../baseui/datepicker/utils/date-helpers';
-import { Locale } from '../locale';
+import type { Locale } from '../locale';
+import type { TimeRange } from '../baseui/datepicker';
 interface FormatDateParams {
     date: Date | Date[] | undefined;
     formatString?: string;
@@ -8,20 +9,27 @@ interface FormatDateParams {
     timezone?: string;
     showTimezone?: boolean;
 }
+export declare const getDateInsideMinMaxBoundary: (date: Date | undefined, minDate: Date | undefined, maxDate: Date | undefined) => Date | undefined;
 export declare const normalizeDashes: (formatString: string) => 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 getAriaLabel: (value: Date | Date[] | undefined, formatDisplayValue: (date?: Date | Date[]) => string, locale: Locale) => string;
 export declare const prepareLocale: (locale?: globalThis.Locale, options?: {
-    weekStartsOn?: 0 | 2 | 1 | 3 | 4 | 5 | 6 | undefined;
-} | undefined) => any;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}) => 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 isDateInTimeRange: (date: Date, timeRanges: TimeRange[]) => boolean;
 export declare const isDayInRange: (date: Date | Date[] | null | undefined, { minDate, maxDate, dateHelpers, }: {
     minDate?: Date | undefined;
     maxDate?: Date | undefined;
     dateHelpers?: any;
 }) => boolean;
+export declare const getTimePartsFromMilliseconds: (milliseconds: number) => {
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
 export {};

package/esm/date-picker/utils.js

@@ -1,9 +1,24 @@
 import { __assign, __rest } from "tslib";
+// eslint-disable-next-line import/no-duplicates -- required for date-fns
 import en from 'date-fns/locale/en-US';
 import getInterpolatedString from '../baseui/helpers/i18n-interpolation';
 import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import dateFnsAdapter from '../baseui/datepicker/utils/date-fns-adapter';
-import { DEFAULT_FORMAT_STRING } from './constants';
+// eslint-disable-next-line import/no-duplicates -- required for date-fns
+import min from 'date-fns/fp/min';
+// eslint-disable-next-line import/no-duplicates -- required for date-fns
+import max from 'date-fns/fp/max';
+import { DEFAULT_FORMAT_STRING, MS_IN_DAY, MS_IN_HOUR, MS_IN_MINUTE, MS_IN_SECOND } from './constants';
+export var getDateInsideMinMaxBoundary = function (date, minDate, maxDate) {
+    if (!date)
+        return date;
+    var newDateInsideMinandMax = date;
+    if (minDate)
+        newDateInsideMinandMax = max([date, minDate]);
+    if (maxDate)
+        newDateInsideMinandMax = min([newDateInsideMinandMax, maxDate]);
+    return newDateInsideMinandMax;
+};
 // replacing both hyphens and em-dashes with en-dashes
 export var normalizeDashes = function (formatString) { return formatString.replace(/-/g, '–').replace(/—/g, '–'); };
 export var formatDate = function (_a) {
@@ -69,6 +84,11 @@ export var isTimeInRange = function (date, _a) {
     }
     return (!minDate || !dateHelpers.isBefore(date, minDate)) && (!maxDate || !dateHelpers.isAfter(date, maxDate));
 };
+// checks whether a given date's extracted time is in the given time ranges
+export var isDateInTimeRange = function (date, timeRanges) {
+    var msInDay = (date.getTime() - date.getTimezoneOffset() * MS_IN_MINUTE) % MS_IN_DAY;
+    return timeRanges.some(function (range) { return range.from <= msInDay && msInDay < range.upto; });
+};
 // checks whether given date(only day) is in [minDate, maxDate] range.
 export var isDayInRange = function (date, _a) {
     var minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.dateHelpers, dateHelpers = _b === void 0 ? new DateHelpers(dateFnsAdapter) : _b;
@@ -80,3 +100,12 @@ export var isDayInRange = function (date, _a) {
     }
     return !dateHelpers.isDayDisabled(date, { minDate: minDate, maxDate: maxDate });
 };
+export var getTimePartsFromMilliseconds = function (milliseconds) {
+    var remainingTime = milliseconds;
+    var hours = Math.floor(remainingTime / MS_IN_HOUR);
+    remainingTime -= hours * MS_IN_HOUR;
+    var minutes = Math.floor(remainingTime / MS_IN_MINUTE);
+    remainingTime -= minutes * MS_IN_MINUTE;
+    var seconds = Math.floor(remainingTime / MS_IN_SECOND);
+    return { hours: hours, minutes: minutes, seconds: seconds };
+};

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

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

package/esm/date-time/DateTime.js

@@ -4,5 +4,6 @@ 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);
+    return _jsx(_Fragment, { children: formattedDate });
 };
+DateTime.__standard = 'Component';

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

@@ -14,7 +14,7 @@ export declare const DATE_TIME_VARIANTS: {
     readonly FULL_DATE_TIME: "fullDateTime";
     readonly CUSTOM: "custom";
 };
-export declare type DateTimeProps = {
+export type DateTimeProps = {
     date: Date | number;
     variant: ValueOf<typeof DATE_TIME_VARIANTS>;
     dateTimeOptions?: Intl.DateTimeFormatOptions;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Intent } from '../types';
-declare type FormControlContextValueType = {
+type FormControlContextValueType = {
     intent?: Intent;
 };
 export declare const FormControlProvider: import("react").Provider<FormControlContextValueType>;

package/esm/form-control/context.js

@@ -1,6 +1,7 @@
 import { __assign } from "tslib";
-import { createContext, useContext } from 'react';
-var FormControlContext = createContext({ intent: 'default' });
+import { useContext } from 'react';
+import { createSingletonContext } from '@sprinklrjs/spaceweb/singleton/createSingletonContext';
+var FormControlContext = createSingletonContext({ intent: 'default' }, 'FormControlContext');
 FormControlContext.displayName = 'FormControlContext';
 export var FormControlProvider = FormControlContext.Provider;
 export var FormControlConsumer = FormControlContext.Consumer;

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

@@ -1,60 +1,77 @@
 import { __assign, __read } from "tslib";
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, forwardRef } from 'react';
 import * as React from 'react';
 import { add$props } from '../helpers';
 import { Stack, StackItem } from '../stack';
-import InfoIcon from '../icon/components/info';
-import ErrorIcon from '../icon/components/error-clr';
+import { Box } from '../box';
+import InfoIcon from './info-icon';
+import WarningIcon from '../icon/components/warning-solid';
+import AlertIcon from '../icon/components/alert-solid';
+import TickCircleIcon from '../icon/components/tickCircle-solid';
 import { useOverrides } from '../overrides';
 import { StatefulTooltip } from '../tooltip';
 import { FormControlProvider } from './context';
-import { StyledCaption, StyledControlContainer, StyledInfoIconContainer, StyledLabel, StyledLabelContainer, StyledRequiredDot, StyledRoot, StyledSubText, } from './styled-component';
+import { StyledCaption, StyledControlContainer, StyledLabel, StyledLabelContainer, StyledRequiredDot, StyledRoot, StyledSubText, getIntentColor, } from './styled-component';
 import useUniqueId from '../hooks/useUniqueId';
-function chooseRenderedHint(caption, error, positive, sharedProps) {
-    if (error && typeof error !== 'boolean') {
-        return typeof error === 'function' ? error(sharedProps) : error;
-    }
-    if (positive && typeof positive !== 'boolean') {
-        return typeof positive === 'function' ? positive(sharedProps) : positive;
-    }
-    if (caption) {
-        return typeof caption === 'function' ? caption(sharedProps) : caption;
-    }
-    return null;
-}
+import classNames from '../classNames';
+import { getTextFromNode } from '../utils/generalUtils';
+var addConditionalIds = classNames;
+var intentToIconMap = {
+    error: AlertIcon,
+    warning: WarningIcon,
+    success: TickCircleIcon,
+};
+var renderWithIcon = function (intent, message) {
+    var IntentIcon = intentToIconMap[intent];
+    return (_jsxs(Stack, __assign({ direction: "horizontal", gap: 1, shrink: true }, { children: [IntentIcon ? (
+            // font-size * 1.5 = line-height
+            _jsx(StackItem, __assign({ style: { height: '1.5em' }, className: "flex items-center" }, { children: _jsx(IntentIcon, { "$intent": intent, className: getIntentColor, size: 14 }) }))) : null, _jsx(StackItem, { children: message })] })));
+};
 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 _b = _a.size, size = _b === void 0 ? 'medium' : _b, overrides = _a.overrides, label = _a.label, caption = _a.caption, disabled = _a.disabled, error = _a.error, positive = _a.positive, htmlFor = _a.htmlFor, children = _a.children, _c = _a.intent, intent = _c === void 0 ? 'default' : _c, required = _a.required, _d = _a.layout, layout = _d === void 0 ? 'vertical' : _d, $as = _a.$as, className = _a.className, style = _a.style, subText = _a.subText, subTextAsIcon = _a.subTextAsIcon, disabledTooltip = _a.disabledTooltip;
     var onlyChildProps = React.Children.only(children).props;
     var a11yCaptionId = useUniqueId();
-    var a11LabelId = useUniqueId();
-    var a11SubTextId = useUniqueId();
+    var a11yErrorMessageId = useUniqueId();
+    var a11yLabelId = useUniqueId();
+    var a11ySubTextId = useUniqueId();
+    var a11yDisabledTooltipId = useUniqueId();
     var fieldUniqueId = useUniqueId();
+    var intentMessageNode = error !== null && error !== void 0 ? error : positive;
     // First try to infer id from props or children. Create new id if needed.
     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;
+    var shouldDescribeSubText = !!subText && !shouldRenderSubTextInTooltip;
+    var sharedProps = __assign(__assign({}, add$props({ required: required, layout: layout, intent: intent, disabled: disabled, size: size })), { $hasSubText: !!subText, $subTextAsIcon: shouldRenderSubTextInTooltip });
+    var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, StyledLabelContainer), 2), LabelContainer = _e[0], labelContainerProps = _e[1], _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _f[0], labelProps = _f[1], _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.RequiredDot, StyledRequiredDot), 2), RequiredDot = _g[0], requiredDotProps = _g[1], _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _h[0], rootProps = _h[1], _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SubText, StyledSubText), 2), SubText = _j[0], subTextProps = _j[1], _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ControlContainer, StyledControlContainer), 2), ControlContainer = _k[0], controlContainerProps = _k[1], _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Caption, StyledCaption), 2), Caption = _l[0], captionProps = _l[1], _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ErrCaption, StyledCaption), 2), ErrCaption = _m[0], errCaptionProps = _m[1], _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DisabledTooltip, StatefulTooltip), 2), DisabledTooltip = _o[0], disabledTooltipProps = _o[1];
+    var formControlProviderValue = useMemo(function () { return ({ intent: intent }); }, [intent]);
+    var captionMessage = typeof caption === 'function' ? caption(sharedProps) : caption;
     var subTextToRender = typeof subText === 'function' ? subText(sharedProps) : subText;
-    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: subTextToRender, 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: subTextToRender }), 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,
-                                '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 }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
+    var labelNode = typeof label === 'function' ? label(sharedProps) : label;
+    var infoIconAriaLabel = getTextFromNode(labelNode) || undefined;
+    var invalidInput = !!(error || (intent === 'error' && captionMessage));
+    var shouldShowDisabledTooltip = disabled && disabledTooltip;
+    return (_jsx(FormControlProvider, __assign({ value: formControlProviderValue }, { children: _jsxs(Root, __assign({ ref: ref, "data-testid": "form-control", "data-spaceweb": "form-control", "$as": $as }, sharedProps, rootProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [label && (_jsxs(LabelContainer, __assign({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [_createElement(Label, __assign({ id: a11yLabelId, "data-spaceweb": "form-control-label", htmlFor: a11yFieldId }, sharedProps, labelProps, { key: "CheckCompliance<FormControl>" }), labelNode), required && _jsx(RequiredDot, __assign({ "data-testid": "form-required" }, requiredDotProps)), subText && shouldRenderSubTextInTooltip ? (_jsx(InfoIcon, { content: subTextToRender, className: "ml-1", ariaLabel: infoIconAriaLabel, overrides: {
+                                SubTextTooltip: overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip,
+                                InfoIconContainer: overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer,
+                            } }, "CheckCompliance<FormControl>;SubText")) : null] }))), subText && !shouldRenderSubTextInTooltip ? (_jsx(SubText, __assign({ id: a11ySubTextId }, sharedProps, subTextProps, { children: subTextToRender }))) : null, _createElement(ControlContainer, __assign({ "data-spaceweb": "form-control-container", "data-sw-form-error": invalidInput }, sharedProps, controlContainerProps, { key: "CheckCompliance<FormControl>;ControlContainer" }),
+                    shouldShowDisabledTooltip && (_jsx(Box, __assign({ id: a11yDisabledTooltipId, className: "sr-only", "data-spaceweb": "form-control-disabled-tooltip" }, { children: disabledTooltip }))),
+                    React.Children.map(children, function (child, index) {
+                        var _a;
+                        if (!child)
+                            return null;
+                        var key = child.key || String(index);
+                        var ariaDescribedBy = addConditionalIds((_a = {},
+                            _a[a11ySubTextId] = shouldDescribeSubText,
+                            _a[a11yCaptionId] = captionMessage,
+                            _a[a11yErrorMessageId] = intentMessageNode,
+                            _a[a11yDisabledTooltipId] = shouldShowDisabledTooltip,
+                            _a));
+                        var childElement = React.cloneElement(child, __assign(__assign(__assign(__assign({ key: key, id: a11yFieldId, 'aria-invalid': invalidInput }, (invalidInput ? { 'aria-errormessage': error ? a11yErrorMessageId : a11yCaptionId } : {})), { 'aria-labelledby': a11yLabelId }), (ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : {})), { 'aria-required': required ? 'true' : 'false', size: onlyChildProps.size || size, disabled: onlyChildProps.disabled || disabled, required: onlyChildProps.required || required }));
+                        return shouldShowDisabledTooltip ? (_jsx(DisabledTooltip, __assign({ content: disabledTooltip }, disabledTooltipProps, { children: _jsx(Box, __assign({ className: "inline-block w-full" }, { children: childElement })) }), "disabled-tooltip-".concat(key))) : (childElement);
+                    }),
+                    captionMessage ? (_jsx(Caption, __assign({ "data-spaceweb": "form-control-caption", id: a11yCaptionId }, sharedProps, captionProps, { children: renderWithIcon(intent, captionMessage) }))) : null,
+                    intentMessageNode ? (_jsx(ErrCaption, __assign({ "data-spaceweb": "form-control-errormessage", id: a11yErrorMessageId }, sharedProps, { "$intent": error ? 'error' : 'success' }, errCaptionProps, { children: error ? renderWithIcon('error', intentMessageNode) : intentMessageNode }))) : null)] })) })));
 });
 export { FormControl };

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

@@ -1,3 +1,6 @@
-export type { FormControlOverrides, FormControlProps, layout } from './types';
-export { StyledLabel, StyledCaption, StyledControlContainer, StyledInfoIconContainer, StyledSubText, StyledRoot, StyledLabelContainer, StyledRequiredDot, } from './styled-component';
+export type { FormControlOverrides, FormControlProps, layout, SharedProps } from './types';
+export { StyledLabel, StyledCaption, StyledControlContainer, 
+/** @deprecated Instead use the standard info-icon for focusable tooltips */
+DeprecatedStyledInfoIconContainer as StyledInfoIconContainer, StyledSubText, StyledRoot, StyledLabelContainer, StyledRequiredDot, } from './styled-component';
 export { FormControl } from './form-control';
+export { default as InfoIcon } from './info-icon';

package/esm/form-control/index.js

@@ -1,2 +1,5 @@
-export { StyledLabel, StyledCaption, StyledControlContainer, StyledInfoIconContainer, StyledSubText, StyledRoot, StyledLabelContainer, StyledRequiredDot, } from './styled-component';
+export { StyledLabel, StyledCaption, StyledControlContainer, 
+/** @deprecated Instead use the standard info-icon for focusable tooltips */
+DeprecatedStyledInfoIconContainer as StyledInfoIconContainer, StyledSubText, StyledRoot, StyledLabelContainer, StyledRequiredDot, } from './styled-component';
 export { FormControl } from './form-control';
+export { default as InfoIcon } from './info-icon';

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

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import { TooltipProps } from '../tooltip';
+import { IconProps } from '../icon';
+import { ClassName } from '../types';
+import { FormControlOverrides } from '@sprinklrjs/spaceweb/form-control/types';
+type InfoIconOverrides = {
+    SubTextTooltip?: FormControlOverrides['SubTextTooltip'];
+    InfoIconContainer?: FormControlOverrides['InfoIconContainer'];
+};
+declare const InfoIcon: ({ content, iconSize, placement, overrides, ariaLabel, className, }: {
+    content: ReactNode;
+    iconSize?: IconProps['size'];
+    className?: ClassName;
+    placement?: TooltipProps['placement'];
+    overrides?: InfoIconOverrides | undefined;
+    ariaLabel?: string | undefined;
+}) => React.ReactElement;
+export default InfoIcon;

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

@@ -0,0 +1,14 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+// components
+import { StatefulTooltip } from '../tooltip';
+import InfoIconSVG from '../icon/components/alert-warning';
+import { useOverrides } from '../overrides';
+import { InternalStyledInfoIconContainer } from './styled-component';
+var InfoIcon = function (_a) {
+    var content = _a.content, _b = _a.iconSize, iconSize = _b === void 0 ? 12 : _b, _c = _a.placement, placement = _c === void 0 ? 'right' : _c, overrides = _a.overrides, ariaLabel = _a.ariaLabel, className = _a.className;
+    var _d = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip, StatefulTooltip), 2), Tooltip = _d[0], tooltipProps = _d[1];
+    var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer, InternalStyledInfoIconContainer), 2), Container = _e[0], containerProps = _e[1];
+    return (_jsx(Tooltip, __assign({}, tooltipProps, { placement: placement, content: content }, { children: _jsx(Container, __assign({ role: "button", "aria-label": ariaLabel, tabIndex: 0, className: className }, containerProps, { children: _jsx(InfoIconSVG, { size: iconSize }) })) })));
+};
+export default InfoIcon;

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

@@ -1,8 +1,14 @@
-export declare const StyledSubText: import("../style/styled").StyledComponent;
-export declare const StyledInfoIconContainer: import("../style/styled").StyledComponent;
-export declare const StyledRequiredDot: import("../style/styled").StyledComponent;
-export declare const StyledRoot: import("../style/styled").StyledComponent;
-export declare const StyledCaption: import("../style/styled").StyledComponent;
-export declare const StyledLabelContainer: import("../style/styled").StyledComponent;
-export declare const StyledLabel: import("../style/styled").StyledComponent;
-export declare const StyledControlContainer: import("../style/styled").StyledComponent;
+export declare const getIntentColor: ({ theme }: {
+    theme: any;
+}, { $intent }: {
+    $intent: any;
+}) => string;
+export declare const StyledSubText: import("../style").StyledComponent;
+export declare const InternalStyledInfoIconContainer: import("../style").StyledComponent;
+export declare const DeprecatedStyledInfoIconContainer: import("../style").StyledComponent;
+export declare const StyledRequiredDot: import("../style").StyledComponent;
+export declare const StyledRoot: import("../style").StyledComponent;
+export declare const StyledCaption: import("../style").StyledComponent;
+export declare const StyledLabelContainer: import("../style").StyledComponent;
+export declare const StyledLabel: import("../style").StyledComponent;
+export declare const StyledControlContainer: import("../style").StyledComponent;

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

@@ -1,44 +1,53 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isDarkTheme } from '../helpers/themeHelpers';
 import { styled } from '../style';
-var getIntentColor = function (_a, _b) {
+export var getIntentColor = function (_a, _b) {
     var theme = _a.theme;
     var $intent = _b.$intent;
+    var isDark = isDarkTheme(theme);
     switch ($intent) {
         case 'success':
-            return { color: theme.spr.supportSuccess };
+            return 'spr-text-success';
         case 'warning':
-            return { color: theme.spr.supportWarning };
+            return "spr-icon-warning ".concat(isDark ? 'spr-text-inverse' : 'spr-text-secondary');
         case 'error':
-            return { color: theme.spr.text01 };
+            return 'spr-text-error';
         case 'default':
         default:
-            return { color: theme.spr.text02 };
+            return 'spr-text-02';
     }
 };
-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', 'spr-support-error rounded-full h-1 w-1 flex-shrink-0 ml-1');
+export var StyledSubText = styled('div', function (_, _a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 'forced-colors:text-disabled spr-text-secondary' : '');
+}, 'mb-1 spr-text-02 text-13 leading-4 font-normal');
+var commonIconContainerClasses = 'flex items-center justify-center focus-visible:outline-2  focus-visible:outline-[--spr-focus-01] focus-visible:outline-offset-1' +
+    ' focus-visible:outline shrink-0 rounded-full';
+export var InternalStyledInfoIconContainer = styled('div', commonIconContainerClasses, 'spr-bg-primary');
+InternalStyledInfoIconContainer.__standard = 'Ignore';
+export var DeprecatedStyledInfoIconContainer = styled('div', commonIconContainerClasses, 'spr-ui-03 ml-1 h-3 w-3');
+DeprecatedStyledInfoIconContainer.__standard = 'Ignore';
+var RequiredDot = function (props) { return _jsx("span", __assign({}, props, { children: "*" })); };
+export var StyledRequiredDot = styled(RequiredDot, 'spr-text-error shrink-0 text-14 font-400 leading-150');
+StyledRequiredDot.__standard = 'Ignore';
 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 mt-1', getIntentColor);
-export var StyledLabelContainer = styled('div', 'flex items-center w-full', function (utils, _a) {
+export var StyledCaption = styled('div', 'mt-1 text-14 font-400 leading-150 spr-text-primary', function (_, _a) {
+    var $disabled = _a.$disabled;
+    return $disabled ? 'forced-colors:text-disabled spr-text-secondary opacity-40' : '';
+});
+export var StyledLabelContainer = styled('div', 'flex items-center w-full', function (_, _a) {
     var $layout = _a.$layout;
     return ($layout === 'horizontal' ? 'w-4/24 mr-2' : '');
-}, function (utils, _a) {
-    var $hasSubText = _a.$hasSubText, $subTextAsIcon = _a.$subTextAsIcon;
-    return (!$hasSubText || $subTextAsIcon ? 'mb-1' : '');
+}, function (_, _a) {
+    var $hasSubText = _a.$hasSubText, $subTextAsIcon = _a.$subTextAsIcon, $layout = _a.$layout;
+    return $layout !== 'horizontal' && (!$hasSubText || $subTextAsIcon) ? 'mb-1' : '';
 });
-export var StyledLabel = styled('label', 'spr-text-02', {
-    fontSize: '14px',
-    lineHeight: '18px',
-    fontWeight: 400,
+export var StyledLabel = styled('label', 'text-14 font-400 leading-150 spr-text-primary', function (_, _a) {
+    var $disabled = _a.$disabled;
+    return $disabled ? 'forced-colors:text-disabled spr-text-secondary opacity-40' : '';
 });
 export var StyledControlContainer = styled('div', 'w-full');

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

@@ -1,20 +1,25 @@
 import * as React from 'react';
-import { Override } from '../overrides';
-import { ClassName, Intent } from '../types';
-export declare type layout = 'vertical' | 'horizontal' | 'inline';
-export declare type FormControlOverrides = {
+import type { Override } from '../overrides';
+import { ClassName, Intent, Styles } from '../types';
+import { ElementType } from 'react';
+export type layout = 'vertical' | 'horizontal' | 'inline';
+export type Size = 'small' | 'medium';
+export type FormControlOverrides = {
     LabelContainer?: Override<Record<string, any>>;
     Label?: Override<Record<string, any>>;
     RequiredDot?: Override<Record<string, any>>;
     Caption?: Override<Record<string, any>>;
+    ErrCaption?: Override<Record<string, any>>;
     ControlContainer?: Override<Record<string, any>>;
     Root?: Override<Record<string, any>>;
     SubText?: Override<Record<string, any>>;
     InfoIconContainer?: Override<Record<string, any>>;
     SubTextTooltip?: Override<Record<string, any>>;
+    DisabledTooltip?: Override<Record<string, any>>;
 };
-export declare type FormControlProps = {
+export type FormControlProps = {
     children: React.ReactElement;
+    size?: Size;
     disabled?: boolean;
     label?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     /**
@@ -26,17 +31,20 @@ export declare type FormControlProps = {
      */
     subTextAsIcon?: boolean;
     caption?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
-    error?: boolean | React.ReactNode;
+    error?: React.ReactNode;
     positive?: React.ReactNode;
     htmlFor?: string;
-    className?: ClassName;
-    $as?: React.ElementType;
+    /** @deprecated defaults to vertical */
     layout?: layout;
     overrides?: FormControlOverrides;
     required?: boolean;
     intent?: Intent;
+    disabledTooltip?: React.ReactNode;
+    $as?: ElementType;
+    className?: ClassName;
+    style?: Styles;
 };
-export declare type SharedProps = {
+export type SharedProps = {
     $disabled: boolean;
     $error: boolean;
     $positive: boolean;

package/esm/grid/Col.d.ts

@@ -1,6 +1,3 @@
-/**
- * @author Ivan Torres
- */
 import { PropsWithChildren, ReactElement } from 'react';
 import { ColProps } from './types';
 export declare const Col: {