@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/esm/date-picker/utils.js

@@ -1,12 +1,13 @@
-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';
-import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
+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';
 // 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,7 +1,6 @@
 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 { add$props } from '../helpers';
 import { Stack, StackItem } from '../stack';
@@ -10,45 +9,42 @@ import ErrorIcon from '../icon/components/error-clr';
 import { useOverrides } from '../overrides';
 import { StatefulTooltip } from '../tooltip';
 import { FormControlProvider } from './context';
-import { StyledCaption, StyledControlContainer, StyledInfoIconContainer, StyledLabel, StyledLabelContainer, StyledRequiredDot, StyledRoot, StyledSubText, } from './styled-component';
-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;
-}
-var FormControl = function (_a) {
+import { StyledCaption, StyledControlContainer, StyledIntentCaption, StyledInfoIconContainer, StyledLabel, StyledLabelContainer, StyledRequiredDot, StyledRoot, StyledSubText, } from './styled-component';
+import useUniqueId from '../hooks/useUniqueId';
+var withErrorIcon = function (message) { return (_jsxs(Stack, __assign({ direction: "horizontal", gap: 2, shrink: true }, { children: [_jsx(ErrorIcon, { size: 14 }, void 0), _jsx(StackItem, { children: message }, void 0)] }), void 0)); };
+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 = useUniqueId();
+    var a11yErrorMessageId = useUniqueId();
+    var a11LabelId = useUniqueId();
+    var a11SubTextId = 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 = 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 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 a11yFieldId = htmlFor || onlyChildProps.id || fieldUniqueId;
+    var sharedProps = __assign(__assign({}, add$props({ required: required, layout: layout, intent: intent, disabled: disabled })), { $hasSubText: !!subText, $subTextAsIcon: subTextAsIcon });
+    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.ErrCaption, StyledIntentCaption), 2), ErrCaption = _k[0], errCaptionProps = _k[1], _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip, StatefulTooltip), 2), SubTextTooltip = _l[0], subTextTooltipProps = _l[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) {
+    var captionMessage = typeof caption === 'function' ? caption(sharedProps) : caption;
+    var subTextToRender = typeof subText === 'function' ? subText(sharedProps) : subText;
+    var invalidInput = !!(error || (intent === 'error' && captionMessage));
+    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.current,
-                                'aria-errormessage': error ? a11yCaptionId.current : null,
-                                'aria-describedby': caption || positive ? a11yCaptionId.current : null,
+                                id: a11yFieldId,
+                                'aria-invalid': invalidInput,
+                                'aria-errormessage': invalidInput ? (error ? a11yErrorMessageId : a11yCaptionId) : null,
+                                'aria-describedby': captionMessage || intentMessageNode || subText
+                                    ? "".concat(subText ? a11SubTextId : '', " ").concat(captionMessage && !invalidInput ? a11yCaptionId : '', " ").concat(intentMessageNode && !invalidInput ? a11yErrorMessageId : '')
+                                    : 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));
-};
+                        }), captionMessage ? (_jsx(Caption, __assign({ "data-spaceweb": "form-control-caption", id: a11yCaptionId }, sharedProps, captionProps, { children: intent === 'error' ? withErrorIcon(captionMessage) : captionMessage }), void 0)) : null, intentMessageNode ? (_jsx(ErrCaption, __assign({ "data-spaceweb": "form-control-errormessage", id: a11yErrorMessageId }, sharedProps, { "$intent": error ? 'error' : 'success' }, errCaptionProps, { children: error ? withErrorIcon(intentMessageNode) : intentMessageNode }), void 0)) : null] }), void 0)] }), void 0) }), void 0));
+});
 export { FormControl };

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

@@ -3,6 +3,7 @@ export declare const StyledInfoIconContainer: import("../style/styled").StyledCo
 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 StyledIntentCaption: 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;

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

@@ -14,20 +14,32 @@ 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 StyledIntentCaption = 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/form-control/types.d.ts

@@ -7,6 +7,7 @@ export declare type FormControlOverrides = {
     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>>;
@@ -16,17 +17,17 @@ export declare type FormControlOverrides = {
 export declare type FormControlProps = {
     children: React.ReactElement;
     disabled?: boolean;
-    label?: React.ReactNode;
+    label?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     /**
      * Help text to render b/w Label and the form field.
      */
-    subText?: React.ReactNode;
+    subText?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     /**
      * If true, render info icon and display subText in Tooltip
      */
     subTextAsIcon?: boolean;
-    caption?: React.ReactNode;
-    error?: boolean | React.ReactNode;
+    caption?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
+    error?: React.ReactNode;
     positive?: React.ReactNode;
     htmlFor?: string;
     className?: ClassName;
@@ -43,4 +44,6 @@ export declare type SharedProps = {
     $required: boolean;
     $layout: layout;
     $intent: Intent;
+    $hasSubText: boolean;
+    $subTextAsIcon?: boolean;
 };

package/esm/grid/Col.js

@@ -1,4 +1,4 @@
-import { __assign, __read, __spreadArray } from "tslib";
+import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @author Ivan Torres
@@ -7,24 +7,34 @@ import { useMemo } from 'react';
 import { Box } from '../box';
 import useStyle from '../style/useStyle';
 import { filterOwnProps } from './utils';
-var getClassList = function (column, breakpoint) {
-    if (column === void 0) { column = {}; }
+var getGridRange = function (column, breakpointMinWidth) {
+    var _a;
     var colSpan = column.colSpan, colStart = column.colStart, colEnd = column.colEnd, rowSpan = column.rowSpan, rowStart = column.rowStart, rowEnd = column.rowEnd;
-    var classList = [];
-    var prefix = breakpoint ? "".concat(breakpoint, ":") : '';
-    if (colEnd)
-        classList.push("".concat(prefix, "col-end-").concat(colEnd));
-    if (colSpan)
-        classList.push("".concat(prefix, "col-span-").concat(colSpan));
-    if (colStart)
-        classList.push("".concat(prefix, "col-start-").concat(colStart));
-    if (rowEnd)
-        classList.push("".concat(prefix, "row-end-").concat(rowEnd));
-    if (rowSpan)
-        classList.push("".concat(prefix, "row-span-").concat(rowSpan));
-    if (rowStart)
-        classList.push("".concat(prefix, "row-start-").concat(rowStart));
-    return classList;
+    var gridRangeStyle = {};
+    if (typeof colSpan === 'number') {
+        gridRangeStyle.gridColumnStart = "span ".concat(colSpan);
+        gridRangeStyle.gridColumnEnd = "span ".concat(colSpan);
+    }
+    if (typeof rowSpan === 'number') {
+        gridRangeStyle.gridRowStart = "span ".concat(rowSpan);
+        gridRangeStyle.gridRowEnd = "span ".concat(rowSpan);
+    }
+    if (typeof colStart === 'number') {
+        gridRangeStyle.gridColumnStart = colStart;
+    }
+    if (typeof colEnd === 'number') {
+        gridRangeStyle.gridColumnEnd = colEnd;
+    }
+    if (typeof rowStart === 'number') {
+        gridRangeStyle.gridRowStart = rowStart;
+    }
+    if (typeof rowEnd === 'number') {
+        gridRangeStyle.gridRowEnd = rowEnd;
+    }
+    return breakpointMinWidth
+        ? (_a = {},
+            _a["@media screen and (min-width: ".concat(breakpointMinWidth, ")")] = gridRangeStyle,
+            _a) : gridRangeStyle;
 };
 export var Col = function (props) {
     var theme = useStyle().theme;
@@ -32,10 +42,10 @@ export var Col = function (props) {
     var className = props.className, style = props.style, children = props.children;
     var classList = [];
     var breakpoints = useMemo(function () { return Object.keys(screens); }, [screens]);
-    classList = classList.concat.apply(classList, __spreadArray([], __read(getClassList(props)), false));
+    classList.push(getGridRange(props));
     breakpoints.forEach(function (breakpoint) {
         if (props[breakpoint]) {
-            classList = classList.concat.apply(classList, __spreadArray([], __read(getClassList(props[breakpoint], breakpoint)), false));
+            classList.push(getGridRange(props[breakpoint], screens[breakpoint]));
         }
     });
     return (_jsx(Box, __assign({ "data-testid": "col" }, filterOwnProps(breakpoints, props), { className: [classList, className, style] }, { children: children }), void 0));

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

@@ -0,0 +1,11 @@
+/// <reference types="lodash" />
+export declare function hexToRgb(hex: string): [R: number, G: number, B: number];
+export declare function RgbToHex(rgb: readonly [number, number, number]): string;
+/**
+ * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
+ * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio
+ */
+export declare const getRelativeLuminance: ((rgb: readonly [number, number, number]) => number) & import("lodash").MemoizedFunction;
+export declare function getContrastRatio(color1: string, color2: string): number;
+export declare function RgbToHsl(rgb: readonly [number, number, number]): [H: number, S: number, L: number];
+export declare function HslToRgb(hsl: readonly [number, number, number]): [R: number, G: number, B: number];

package/esm/helpers/colors.js

@@ -0,0 +1,49 @@
+import { __read } from "tslib";
+import memoize from 'lodash/memoize';
+export function hexToRgb(hex) {
+    var r = parseInt(hex.substring(1, 3), 16);
+    var g = parseInt(hex.substring(3, 5), 16);
+    var b = parseInt(hex.substring(5, 7), 16);
+    return [r, g, b];
+}
+export function RgbToHex(rgb) {
+    return "#".concat(rgb.map(function (n) { return Math.round(n).toString(16).padStart(2, '0'); }).join(''));
+}
+/**
+ * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
+ * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio
+ */
+export var getRelativeLuminance = memoize(function (rgb) {
+    var _a = __read(rgb.map(function (c) { return c / 255; }).map(function (c) { return (c <= 0.04045 ? c / 12.92 : Math.pow(((c + 0.055) / 1.055), 2.4)); }), 3), r = _a[0], g = _a[1], b = _a[2];
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}, function (rgb) { return rgb.join(','); });
+export function getContrastRatio(color1, color2) {
+    var rgb1 = hexToRgb(color1);
+    var rgb2 = hexToRgb(color2);
+    var l1 = getRelativeLuminance(rgb1);
+    var l2 = getRelativeLuminance(rgb2);
+    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+// https://www.rapidtables.com/convert/color
+export function RgbToHsl(rgb) {
+    var _a = __read(rgb.map(function (n) { return n / 255; }), 3), R = _a[0], G = _a[1], B = _a[2];
+    var L = Math.max(R, G, B);
+    var S = L - Math.min(R, G, B);
+    // eslint-disable-next-line no-nested-ternary -- Can't really make this readable
+    var H = S ? (L === R ? (G - B) / S : L === G ? 2 + (B - R) / S : 4 + (R - G) / S) : 0;
+    return [
+        Math.round(60 * H < 0 ? 60 * H + 360 : 60 * H),
+        // eslint-disable-next-line no-nested-ternary -- Can't really make this readable
+        Math.round(100 * (S ? (L <= 0.5 ? S / (2 * L - S) : S / (2 - (2 * L - S))) : 0)),
+        Math.round((100 * (2 * L - S)) / 2),
+    ];
+}
+export function HslToRgb(hsl) {
+    var H = Math.round(hsl[0]);
+    var S = Math.round(hsl[1]) / 100;
+    var L = Math.round(hsl[2]) / 100;
+    var k = function (n) { return (n + H / 30) % 12; };
+    var A = S * Math.min(L, 1 - L);
+    var f = function (n) { return L - A * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); };
+    return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))];
+}

package/esm/helpers/commonStyles.d.ts

@@ -15,3 +15,4 @@ export declare type OutlineProps = {
 };
 export declare const getOutlineStyles: ({ theme }: StyleUtils, props?: OutlineProps | undefined) => StyleObject;
 export declare const getFocusVisibleStyles: (utils: StyleUtils, props?: OutlineProps | undefined) => StyleObject;
+export declare const accessibilityStyles: 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;
@@ -46,3 +43,16 @@ export var getFocusVisibleStyles = function (utils, props) {
         ':focus-visible': getOutlineStyles(utils, props),
     });
 };
+export var accessibilityStyles = {
+    position: 'fixed',
+    width: '0px',
+    height: '0px',
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    borderBottomWidth: 0,
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    clipPath: 'inset(100%)',
+};

package/esm/helpers/index.d.ts

@@ -17,9 +17,10 @@ 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
  * @param alpha opacity
  */
-export declare const hex2rgb: (_hex: string, alpha?: string | undefined) => string | null;
+export declare const hex2rgb: (hex: string, alpha?: string | undefined) => string | null;