@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/esm/truncateWithTooltip/types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ClassName } from '../types';
+import { TooltipProps } from '../tooltip';
+import { Override } from '../overrides';
+export declare type TruncateWithTooltipProps = {
+    className?: ClassName;
+    tooltipClassName?: ClassName;
+    prefixEl?: React.ReactElement | null;
+    suffixEl?: React.ReactElement | null;
+    children: string;
+    overrides?: {
+        Tooltip?: Override<TooltipProps & Record<string, any>>;
+    };
+} & ({
+    maxLines: number;
+    maxWidth?: never;
+} | {
+    maxWidth: number;
+    maxLines?: never;
+});

package/esm/truncateWithTooltip/types.js

@@ -0,0 +1 @@
+export {};

package/esm/types.d.ts

@@ -1,5 +1,4 @@
 import { AllHTMLAttributes, ElementType } from 'react';
-import { Theme as BaseTheme } from 'baseui/theme';
 import { StyleObject as StyletronStyleObject } from 'styletron-react';
 import { StandardEngine as StyletronStandardEngine } from 'styletron-standard';
 import { Direction, Theme, ThemeClassNames } from '@sprinklrjs/spaceweb-themes/types';
@@ -11,9 +10,7 @@ export declare type StandardEngine = StyletronStandardEngine;
  * TODO: Replace `any` for `unknown`, the change will cause several
  * components to fail.
  */
-export declare type StyleFn<P = any> = (utils: StyleUtils, props: {
-    $theme?: BaseTheme;
-} & P) => StyleObject | string | undefined;
+export declare type StyleFn<P = any> = (utils: StyleUtils, props: P) => StyleObject | string | undefined;
 declare type RecursiveArray<T> = Array<T | RecursiveArray<T>>;
 /**
  * CSS in JS object
@@ -60,11 +57,11 @@ export declare type Variant = 'primary' | 'secondary' | 'tertiary' | 'minimal';
 /**
  * Size Options
  */
-export declare type Size = 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type Size = 'xxxxs' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Intent Options
  */
-export declare type Intent = 'default' | 'success' | 'warning' | 'error';
+export declare type Intent = 'default' | 'success' | 'warning' | 'error' | 'ai';
 /**
  * Gets Styletron's generated class names from `StyleArg`s
  */
@@ -77,6 +74,7 @@ export declare type Px2Rem = (px: number | string) => string;
  * `useStyle` return type
  */
 export declare type StyleUtils = ThemeContext & {
+    isRTL?: boolean;
     css: CSSFunc;
     getStyle: GetStyle;
     px2rem: Px2Rem;

package/esm/typography/Typography.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { TruncateWithTooltipProps } from '../truncateWithTooltip';
 declare const Typography: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
     $as?: import("react").ElementType<any> | undefined;
     className?: import("..").Styles;
@@ -8,5 +9,10 @@ declare const Typography: import("react").ForwardRefExoticComponent<Omit<import(
 } & {
     variant?: import("./types").TypographyVariant | undefined;
     weight?: import("./types").FontWeight | undefined;
+    overrides?: {
+        TruncateWithTooltip?: import("../overrides").Override<TruncateWithTooltipProps & Record<string, any>> | undefined;
+    } | undefined;
+    maxLines?: number | undefined;
+    maxWidth?: number | undefined;
 } & import("react").RefAttributes<HTMLElement>>;
 export default Typography;

package/esm/typography/Typography.js

@@ -1,8 +1,11 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import _isNumber from 'lodash/isNumber';
 import { add$props } from '../helpers';
 import { StyledTypography } from './styled-components';
+import { TruncateWithTooltip as BaseTruncateWithTooltip } from '../truncateWithTooltip';
+import { useOverrides } from '../overrides';
 var defaultVariantToHTMLTagMapping = {
     h1: 'div',
     h2: 'div',
@@ -17,11 +20,26 @@ var defaultVariantToHTMLTagMapping = {
     bl1: 'p',
     bl2: 'p',
     bl3: 'p',
+    'body-8': 'span',
+    'body-10': 'span',
+    'body-12': 'span',
+    'body-13': 'span',
+    'body-14': 'span',
+    'body-16': 'span',
+    'display-18': 'h6',
+    'display-20': 'h5',
+    'display-24': 'h4',
+    'display-28': 'h3',
+    'display-32': 'h2',
+    'display-40': 'h1',
+    'display-42': 'h1',
 };
 var Typography = forwardRef(function (_a, ref) {
-    var $as = _a.$as, _b = _a.variant, variant = _b === void 0 ? 'l1' : _b, weight = _a.weight, restProps = __rest(_a, ["$as", "variant", "weight"]);
+    var $as = _a.$as, _b = _a.variant, variant = _b === void 0 ? 'body-14' : _b, weight = _a.weight, overrides = _a.overrides, children = _a.children, maxLines = _a.maxLines, maxWidth = _a.maxWidth, restProps = __rest(_a, ["$as", "variant", "weight", "overrides", "children", "maxLines", "maxWidth"]);
     var sharedProps = add$props({ variant: variant, weight: weight });
-    return (_jsx(StyledTypography, __assign({ ref: ref, "data-spaceweb": "typography-".concat(variant), "$as": $as || defaultVariantToHTMLTagMapping[variant] }, restProps, sharedProps), void 0));
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.TruncateWithTooltip, BaseTruncateWithTooltip), 2), TruncateWithTooltip = _c[0], truncateWithTooltipProps = _c[1];
+    var mergedTruncateWithTooltipProps = __assign(__assign(__assign({}, truncateWithTooltipProps), (_isNumber(maxWidth) && { maxWidth: maxWidth })), (_isNumber(maxLines) && { maxLines: maxLines }));
+    return (_jsx(StyledTypography, __assign({ ref: ref, "data-spaceweb": "typography-".concat(variant), "$as": $as || defaultVariantToHTMLTagMapping[variant] }, restProps, sharedProps, { children: _isNumber(maxWidth) || _isNumber(maxLines) ? (_jsx(TruncateWithTooltip, __assign({}, mergedTruncateWithTooltipProps, { children: children }), void 0)) : (children) }), void 0));
 });
 Typography.displayName = 'Typography';
 export default Typography;

package/esm/typography/constants.d.ts

@@ -4,3 +4,59 @@ export declare const WEIGHT: Readonly<{
     semibold: number;
     bold: number;
 }>;
+export declare const DEFAULT_BODY_WEIGHT = 400;
+export declare const DEFAULT_DISPLAY_WEIGHT = 600;
+export declare const TYPOGRAPHY_VARIANT_MAP: {
+    'body-8': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-10': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-12': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-13': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-14': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-16': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-18': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-20': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-24': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-28': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-32': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-40': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-42': {
+        fontSize: string;
+        lineHeight: string;
+    };
+};

package/esm/typography/constants.js

@@ -4,3 +4,59 @@ export var WEIGHT = Object.freeze({
     semibold: 600,
     bold: 700,
 });
+export var DEFAULT_BODY_WEIGHT = 400;
+export var DEFAULT_DISPLAY_WEIGHT = 600;
+export var TYPOGRAPHY_VARIANT_MAP = {
+    'body-8': {
+        fontSize: '8px',
+        lineHeight: '10px',
+    },
+    'body-10': {
+        fontSize: '10px',
+        lineHeight: '12px',
+    },
+    'body-12': {
+        fontSize: '12px',
+        lineHeight: '15px',
+    },
+    'body-13': {
+        fontSize: '13px',
+        lineHeight: '16px',
+    },
+    'body-14': {
+        fontSize: '14px',
+        lineHeight: '18px',
+    },
+    'body-16': {
+        fontSize: '16px',
+        lineHeight: '20px',
+    },
+    'display-18': {
+        fontSize: '18px',
+        lineHeight: '24px',
+    },
+    'display-20': {
+        fontSize: '20px',
+        lineHeight: '26px',
+    },
+    'display-24': {
+        fontSize: '24px',
+        lineHeight: '34px',
+    },
+    'display-28': {
+        fontSize: '28px',
+        lineHeight: '34px',
+    },
+    'display-32': {
+        fontSize: '32px',
+        lineHeight: '38px',
+    },
+    'display-40': {
+        fontSize: '40px',
+        lineHeight: '46px',
+    },
+    'display-42': {
+        fontSize: '42px',
+        lineHeight: '48px',
+    },
+};

package/esm/typography/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Typography } from './Typography';
+export { TYPOGRAPHY_VARIANT_MAP } from './constants';
 export type { TypographyProps, FontWeight, TypographyVariant } from './types';

package/esm/typography/index.js

@@ -1 +1,2 @@
 export { default as Typography } from './Typography';
+export { TYPOGRAPHY_VARIANT_MAP } from './constants';

package/esm/typography/styled-components.js

@@ -1,10 +1,18 @@
 import { styled } from '../style';
-import { WEIGHT as WeightAlias } from './constants';
+import { WEIGHT as WeightAlias, TYPOGRAPHY_VARIANT_MAP, DEFAULT_BODY_WEIGHT, DEFAULT_DISPLAY_WEIGHT, } from './constants';
+var getTypographyWeight = function ($variant) {
+    return $variant.includes('body')
+        ? DEFAULT_BODY_WEIGHT
+        : $variant.includes('display')
+            ? DEFAULT_DISPLAY_WEIGHT
+            : WeightAlias.regular;
+};
 export var StyledTypography = styled('span', function (_a, _b) {
-    var theme = _a.theme;
+    var _c, _d;
+    var theme = _a.theme, classes = _a.classes;
     var $variant = _b.$variant, $weight = _b.$weight;
-    var variantStyles = theme.typography[$variant] || theme.typography.l3;
+    var variantStyles = (_d = (_c = TYPOGRAPHY_VARIANT_MAP[$variant]) !== null && _c !== void 0 ? _c : theme.typography[$variant]) !== null && _d !== void 0 ? _d : theme.typography['l1'];
     var fontSize = variantStyles.fontSize, lineHeight = variantStyles.lineHeight, variantFontWeight = variantStyles.fontWeight;
-    var fontWeight = $weight ? "".concat(WeightAlias[$weight]) : variantFontWeight;
+    var fontWeight = $weight ? "".concat(WeightAlias[$weight]) : variantFontWeight !== null && variantFontWeight !== void 0 ? variantFontWeight : getTypographyWeight($variant);
     return { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight };
 });

package/esm/typography/types.d.ts

@@ -1,9 +1,15 @@
 import { PropsWithChildren } from 'react';
 import { SpacewebComponentProps } from '../types';
-export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'bl1' | 'bl2' | 'bl3' | 'bs1' | 'bs2' | 'bs3' | 'l1' | 'l2' | 'l3' | 'l4';
+import { Override } from '../overrides';
+import { TruncateWithTooltipProps } from '../truncateWithTooltip';
+export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'bl1' | 'bl2' | 'bl3' | 'bs1' | 'bs2' | 'bs3' | 'l1' | 'l2' | 'l3' | 'l4' | 'body-8' | 'body-10' | 'body-12' | 'body-13' | 'body-14' | 'body-16' | 'display-18' | 'display-20' | 'display-24' | 'display-28' | 'display-32' | 'display-40' | 'display-42';
 export declare type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 export declare type TypographyProps = PropsWithChildren<SpacewebComponentProps> & {
-    /** variant of typography element */
     variant?: TypographyVariant;
     weight?: FontWeight;
+    overrides?: {
+        TruncateWithTooltip?: Override<TruncateWithTooltipProps & Record<string, any>>;
+    };
+    maxLines?: number;
+    maxWidth?: number;
 };

package/esm/utils/intlNumberFormatUtils/index.d.ts

@@ -0,0 +1,7 @@
+import { NumberVariant } from './types';
+export declare const getFormattedNumber: ({ value, locale, variant, numberOptions, }: {
+    value: number;
+    locale: string;
+    variant: NumberVariant;
+    numberOptions?: Intl.NumberFormatOptions | undefined;
+}) => string;

package/esm/utils/intlNumberFormatUtils/index.js

@@ -0,0 +1,38 @@
+import { __assign } from "tslib";
+import { NUMBER_VARIANTS } from './types';
+export var getFormattedNumber = function (_a) {
+    var value = _a.value, locale = _a.locale, variant = _a.variant, numberOptions = _a.numberOptions;
+    var absValue = Math.abs(value);
+    var betweenZeroAndOne = absValue > 0 && absValue < 1;
+    var maximumFractionDigits, notation;
+    switch (variant.type) {
+        case NUMBER_VARIANTS.EXPANDED_AUTO_FORMAT: {
+            var decimalDigits = betweenZeroAndOne ? 4 : 2;
+            maximumFractionDigits = decimalDigits;
+            notation = 'standard';
+            break;
+        }
+        case NUMBER_VARIANTS.EXPANDED_DECIMAL_FORMAT: {
+            maximumFractionDigits = variant.decimalDigits;
+            notation = 'standard';
+            break;
+        }
+        case NUMBER_VARIANTS.COMPACT_AUTO_FORMAT: {
+            var decimalDigits = betweenZeroAndOne ? 4 : 2;
+            maximumFractionDigits = decimalDigits;
+            notation = 'compact';
+            break;
+        }
+        case NUMBER_VARIANTS.COMPACT_DECIMAL_FORMAT: {
+            maximumFractionDigits = variant.decimalDigits;
+            notation = 'compact';
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    return Intl.NumberFormat(locale, __assign({ minimumFractionDigits: 0, maximumFractionDigits: maximumFractionDigits, 
+        // @ts-ignore -- yarn migration
+        notation: notation }, numberOptions)).format(value);
+};

package/esm/utils/intlNumberFormatUtils/types.d.ts

@@ -0,0 +1,21 @@
+export declare const NUMBER_VARIANTS: {
+    readonly EXPANDED_AUTO_FORMAT: "expandedAutoFormat";
+    readonly COMPACT_AUTO_FORMAT: "compactAutoFormat";
+    readonly EXPANDED_DECIMAL_FORMAT: "expandedDecimalFormat";
+    readonly COMPACT_DECIMAL_FORMAT: "compactDecimalFormat";
+};
+export declare type ExpandedAutoFormat = {
+    type: typeof NUMBER_VARIANTS.EXPANDED_AUTO_FORMAT;
+};
+export declare type CompactAutoFormat = {
+    type: typeof NUMBER_VARIANTS.COMPACT_AUTO_FORMAT;
+};
+export declare type ExpandedDecimalFormat = {
+    type: typeof NUMBER_VARIANTS.EXPANDED_DECIMAL_FORMAT;
+    decimalDigits: number;
+};
+export declare type CompactDecimalFormat = {
+    type: typeof NUMBER_VARIANTS.COMPACT_DECIMAL_FORMAT;
+    decimalDigits: number;
+};
+export declare type NumberVariant = ExpandedAutoFormat | CompactAutoFormat | ExpandedDecimalFormat | CompactDecimalFormat;

package/esm/utils/intlNumberFormatUtils/types.js

@@ -0,0 +1,6 @@
+export var NUMBER_VARIANTS = {
+    EXPANDED_AUTO_FORMAT: 'expandedAutoFormat',
+    COMPACT_AUTO_FORMAT: 'compactAutoFormat',
+    EXPANDED_DECIMAL_FORMAT: 'expandedDecimalFormat',
+    COMPACT_DECIMAL_FORMAT: 'compactDecimalFormat',
+};

package/esm/video/Video.js

@@ -24,7 +24,8 @@ var Video = forwardRef(function (props, ref) {
     var _c = __read(useOverrides(mergedOverrides.Root, StyledRoot), 2), Root = _c[0], rootProps = _c[1];
     var _d = __read(useOverrides(mergedOverrides.Video, StyledVideo), 2), Vid = _d[0], videoProps = _d[1];
     var _e = __read(useOverrides(mergedOverrides.PlayButton, Play), 2), PlayButton = _e[0], playButtonProps = _e[1];
-    var _f = __read(useOverrides(mergedOverrides.PosterImage, Image), 2), PosterImage = _f[0], posterImageProps = _f[1];
+    var _f = __read(useOverrides(mergedOverrides.VideoDisabledIcon, VideoDisabled), 2), VideoDisabledIcon = _f[0], VideoDisabledIconProps = _f[1];
+    var _g = __read(useOverrides(mergedOverrides.PosterImage, Image), 2), PosterImage = _g[0], posterImageProps = _g[1];
     var onPlay = videoProps.onPlay;
     var onClickPlay = useCallback(function (event) {
         startPlay(true);
@@ -34,7 +35,7 @@ var Video = forwardRef(function (props, ref) {
     return played || !videoProps.poster ? (_jsx(Root, __assign({ "data-spaceweb": "video" }, rootProps, { children: _jsx(Vid, __assign({ ref: ref, "data-testid": "video" }, videoProps, { autoPlay: played }, { children: children }), void 0) }), void 0)) : (_jsxs(Root, __assign({ "data-spaceweb": "video" }, rootProps, { className: "flex items-center relative justify-center ".concat(classNames({ 'cursor-pointer': !videoProps.disabled })) }, { children: [_jsx(PosterImage, __assign({}, videoProps, { src: videoProps.poster, alt: "Thumbnail", overrides: {
                     Image: { style: videoProps.$style },
                     Root: { style: rootProps.$style },
-                }, onClick: videoProps.disabled ? _noop : onClickPlay }, posterImageProps), void 0), _jsx("div", __assign({ className: css('absolute') }, { children: videoProps.disabled ? (_jsx(VideoDisabled, { className: "w-8 h-8 cursor-not-allowed spr-icon-05" }, void 0)) : (_jsx(PlayButton, __assign({ className: "w-8 h-8 spr-icon-05", onClick: onClickPlay }, playButtonProps), void 0)) }), void 0)] }), void 0));
+                }, onClick: videoProps.disabled ? _noop : onClickPlay }, posterImageProps), void 0), _jsx("div", __assign({ className: css('absolute') }, { children: videoProps.disabled ? (_jsx(VideoDisabledIcon, __assign({ className: "w-8 h-8 cursor-not-allowed spr-icon-05" }, VideoDisabledIconProps), void 0)) : (_jsx(PlayButton, __assign({ className: "w-8 h-8 spr-icon-05", onClick: onClickPlay }, playButtonProps), void 0)) }), void 0)] }), void 0));
 });
 Video.displayName = 'Video';
 export default Video;

package/esm/video/types.d.ts

@@ -7,6 +7,7 @@ export declare type VideoOverrides = {
     Video?: Override<{}>;
     PlayButton?: Override<{}>;
     PosterImage?: Override<{}>;
+    VideoDisabledIcon?: Override<{}>;
 };
 export declare type VideoProps = SpacewebComponentProps<React.VideoHTMLAttributes<HTMLVideoElement>> & {
     children?: ReactChildren;

package/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/form-control/form-control.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormControl = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var uniqueId_1 = (0, tslib_1.__importDefault)(require("lodash/uniqueId"));
 var react_1 = require("react");
 var React = (0, tslib_1.__importStar)(require("react"));
 var helpers_1 = require("../helpers");
@@ -14,6 +13,7 @@ var overrides_1 = require("../overrides");
 var tooltip_1 = require("../tooltip");
 var context_1 = require("./context");
 var styled_component_1 = require("./styled-component");
+var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
 function chooseRenderedHint(caption, error, positive, sharedProps) {
     if (error && typeof error !== 'boolean') {
         return typeof error === 'function' ? error(sharedProps) : error;
@@ -26,32 +26,38 @@ function chooseRenderedHint(caption, error, positive, sharedProps) {
     }
     return null;
 }
-var FormControl = function (_a) {
+var FormControl = (0, react_1.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 = (0, react_1.useRef)((0, uniqueId_1.default)('sw-id-'));
+    var a11yCaptionId = (0, useUniqueId_1.default)();
+    var a11LabelId = (0, useUniqueId_1.default)();
+    var a11SubTextId = (0, useUniqueId_1.default)();
+    var fieldUniqueId = (0, useUniqueId_1.default)();
     // First try to infer id from props or children. Create new id if needed.
-    var a11yFieldId = (0, react_1.useRef)(htmlFor || onlyChildProps.id || (0, uniqueId_1.default)('sw-id-'));
-    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ required: required, layout: layout, intent: intent, disabled: disabled })), { $error: !!error, $positive: !!positive });
+    var a11yFieldId = htmlFor || onlyChildProps.id || fieldUniqueId;
+    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, helpers_1.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) ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 2, shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_clr_1.default, { size: 14 }, void 0), (0, jsx_runtime_1.jsx)(stack_1.StackItem, { children: hint }, void 0)] }), void 0)) : (hint);
     var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, styled_component_1.StyledLabelContainer), 2), LabelContainer = _b[0], labelContainerProps = _b[1], _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _c[0], labelProps = _c[1], _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.RequiredDot, styled_component_1.StyledRequiredDot), 2), RequiredDot = _d[0], requiredDotProps = _d[1], _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1], _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubText, styled_component_1.StyledSubText), 2), SubText = _f[0], subTextProps = _f[1], _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer, styled_component_1.StyledInfoIconContainer), 2), InfoIconContainer = _g[0], infoIconContainerProps = _g[1], _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ControlContainer, styled_component_1.StyledControlContainer), 2), ControlContainer = _h[0], controlContainerProps = _h[1], _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Caption, styled_component_1.StyledCaption), 2), Caption = _j[0], captionProps = _j[1], _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip, tooltip_1.StatefulTooltip), 2), SubTextTooltip = _k[0], subTextTooltipProps = _k[1];
     var formControlProviderValue = (0, react_1.useMemo)(function () { return ({ intent: intent }); }, [intent]);
     var shouldRenderSubTextInTooltip = layout === 'horizontal' || subTextAsIcon;
-    return ((0, jsx_runtime_1.jsx)(context_1.FormControlProvider, (0, tslib_1.__assign)({ value: formControlProviderValue }, { children: (0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && ((0, jsx_runtime_1.jsxs)(LabelContainer, (0, tslib_1.__assign)({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [(0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-label", htmlFor: a11yFieldId.current }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && (0, jsx_runtime_1.jsx)(RequiredDot, (0, tslib_1.__assign)({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubTextTooltip, (0, tslib_1.__assign)({ content: subText, size: "md" }, subTextTooltipProps, { children: (0, jsx_runtime_1.jsx)(InfoIconContainer, (0, tslib_1.__assign)({}, infoIconContainerProps, { children: (0, jsx_runtime_1.jsx)(info_1.default, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubText, (0, tslib_1.__assign)({}, subTextProps, { children: typeof subText === 'function' ? subText(sharedProps) : subText }), void 0)) : null, (0, jsx_runtime_1.jsxs)(ControlContainer, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
+    var subTextToRender = typeof subText === 'function' ? subText(sharedProps) : subText;
+    return ((0, jsx_runtime_1.jsx)(context_1.FormControlProvider, (0, tslib_1.__assign)({ value: formControlProviderValue }, { children: (0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ ref: ref, "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && ((0, jsx_runtime_1.jsxs)(LabelContainer, (0, tslib_1.__assign)({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [(0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({ id: a11LabelId, "data-spaceweb": "form-control-label", htmlFor: a11yFieldId }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && (0, jsx_runtime_1.jsx)(RequiredDot, (0, tslib_1.__assign)({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubTextTooltip, (0, tslib_1.__assign)({ content: subTextToRender, size: "md" }, subTextTooltipProps, { children: (0, jsx_runtime_1.jsx)(InfoIconContainer, (0, tslib_1.__assign)({}, infoIconContainerProps, { children: (0, jsx_runtime_1.jsx)(info_1.default, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubText, (0, tslib_1.__assign)({ id: a11SubTextId }, subTextProps, { children: subTextToRender }), void 0)) : null, (0, jsx_runtime_1.jsxs)(ControlContainer, (0, tslib_1.__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) && ((0, jsx_runtime_1.jsx)(Caption, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-caption", id: a11yCaptionId.current }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
-};
+                        }), (caption || error || positive) && ((0, jsx_runtime_1.jsx)(Caption, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-caption", id: a11yCaptionId }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
+});
 exports.FormControl = FormControl;

package/form-control/styled-component.js

@@ -17,20 +17,31 @@ var getIntentColor = function (_a, _b) {
             return { color: theme.spr.text02 };
     }
 };
-exports.StyledSubText = (0, style_1.styled)('div', 'spr-text-02 typography-l3 mb-1');
+exports.StyledSubText = (0, style_1.styled)('div', 'spr-text-02 mb-1', {
+    fontSize: '13px',
+    lineHeight: '16px',
+    fontWeight: 400,
+});
 exports.StyledInfoIconContainer = (0, style_1.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) });
 });
-exports.StyledRequiredDot = (0, style_1.styled)('span', 'ml-1 spr-support-error rounded-full h-1 w-1 flex-shrink-0');
+exports.StyledRequiredDot = (0, style_1.styled)('span', 'spr-support-error rounded-full h-1 w-1 flex-shrink-0 ml-1');
 exports.StyledRoot = (0, style_1.styled)('div', 'flex', function (utils, _a) {
     var $layout = _a.$layout;
     return $layout === 'horizontal' ? 'flex-row items-baseline' : 'flex-col';
 });
-exports.StyledCaption = (0, style_1.styled)('div', 'typography-l2 my-1', getIntentColor);
-exports.StyledLabelContainer = (0, style_1.styled)('div', 'flex items-center mb-1 w-full', function (utils, _a) {
+exports.StyledCaption = (0, style_1.styled)('div', 'typography-l2 mt-1', getIntentColor);
+exports.StyledLabelContainer = (0, style_1.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' : '');
+});
+exports.StyledLabel = (0, style_1.styled)('label', 'spr-text-02', {
+    fontSize: '14px',
+    lineHeight: '18px',
+    fontWeight: 400,
 });
-exports.StyledLabel = (0, style_1.styled)('label', 'typography-l1 text-14 spr-text-02');
 exports.StyledControlContainer = (0, style_1.styled)('div', 'w-full');

package/form-control/types.d.ts

@@ -16,16 +16,16 @@ 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;
+    caption?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     error?: boolean | React.ReactNode;
     positive?: React.ReactNode;
     htmlFor?: string;
@@ -43,4 +43,6 @@ export declare type SharedProps = {
     $required: boolean;
     $layout: layout;
     $intent: Intent;
+    $hasSubText: boolean;
+    $subTextAsIcon?: boolean;
 };

package/grid/Col.js

@@ -10,24 +10,34 @@ var react_1 = require("react");
 var box_1 = require("../box");
 var useStyle_1 = (0, tslib_1.__importDefault)(require("../style/useStyle"));
 var utils_1 = require("./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;
 };
 var Col = function (props) {
     var theme = (0, useStyle_1.default)().theme;
@@ -35,10 +45,10 @@ var Col = function (props) {
     var className = props.className, style = props.style, children = props.children;
     var classList = [];
     var breakpoints = (0, react_1.useMemo)(function () { return Object.keys(screens); }, [screens]);
-    classList = classList.concat.apply(classList, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(getClassList(props)), false));
+    classList.push(getGridRange(props));
     breakpoints.forEach(function (breakpoint) {
         if (props[breakpoint]) {
-            classList = classList.concat.apply(classList, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(getClassList(props[breakpoint], breakpoint)), false));
+            classList.push(getGridRange(props[breakpoint], screens[breakpoint]));
         }
     });
     return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ "data-testid": "col" }, (0, utils_1.filterOwnProps)(breakpoints, props), { className: [classList, className, style] }, { children: children }), void 0));

package/helpers/ClearIconButton.js

@@ -4,9 +4,11 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var IconButton_1 = (0, tslib_1.__importDefault)(require("../button/IconButton"));
 var close_1 = (0, tslib_1.__importDefault)(require("../icon/components/close"));
+var locale_1 = require("../locale");
 var ClearIconButton = function (_a) {
     var size = _a.size, $size = _a.$size, $isOpen = _a.$isOpen, props = (0, tslib_1.__rest)(_a, ["size", "$size", "$isOpen"]);
-    return ((0, jsx_runtime_1.jsx)(IconButton_1.default, (0, tslib_1.__assign)({}, props, { overrides: {
+    var locale = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsx)(IconButton_1.default, (0, tslib_1.__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',