@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/typography/types.d.ts

@@ -1,6 +1,6 @@
 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';
+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 */

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,36 @@
+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, 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

@@ -23,16 +23,18 @@ var Video = forwardRef(function (props, ref) {
     }, overrides || {});
     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 onPlay = videoProps.onPlay;
     var onClickPlay = useCallback(function (event) {
         startPlay(true);
         if (_isFunction(onPlay))
             onPlay(event);
     }, [onPlay]);
-    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(Image, __assign({}, videoProps, { src: videoProps.poster, alt: "Thumbnail", overrides: {
+    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 }), 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(Play, { className: "w-8 h-8 spr-icon-05", onClick: onClickPlay }, void 0)) }), void 0)] }), void 0));
+                }, 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));
 });
 Video.displayName = 'Video';
 export default Video;

package/esm/video/types.d.ts

@@ -5,6 +5,8 @@ import { SpacewebComponentProps } from '../types';
 export declare type VideoOverrides = {
     Root?: Override<{}>;
     Video?: Override<{}>;
+    PlayButton?: Override<{}>;
+    PosterImage?: Override<{}>;
 };
 export declare type VideoProps = SpacewebComponentProps<React.VideoHTMLAttributes<HTMLVideoElement>> & {
     children?: ReactChildren;

package/form-control/context.d.ts

@@ -1,22 +1,15 @@
 /// <reference types="react" />
 import { Intent } from '../types';
-export declare const formControlContext: import("react").Context<{
-    intent?: Intent | undefined;
-}>;
-export declare const FormControlProvider: import("react").Provider<{
-    intent?: Intent | undefined;
-}>;
-export declare const FormControlConsumer: import("react").Consumer<{
-    intent?: Intent | undefined;
-}>;
-export declare const useFormControl: () => {
+declare type FormControlContextValueType = {
     intent?: Intent;
 };
+export declare const FormControlProvider: import("react").Provider<FormControlContextValueType>;
+export declare const FormControlConsumer: import("react").Consumer<FormControlContextValueType>;
+export declare const useFormControl: () => FormControlContextValueType;
 /**
  * @param props
  * uses form values to be passed using context to child components
  * this hook can be scaled to incorporate multiple props
  */
-export declare const useContextualFormProps: <T extends {
-    intent?: Intent;
-}>(props: T) => T;
+export declare const useContextualFormProps: <T extends FormControlContextValueType>(props: T, defaultProps?: FormControlContextValueType) => T;
+export {};

package/form-control/context.js

@@ -1,23 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useContextualFormProps = exports.useFormControl = exports.FormControlConsumer = exports.FormControlProvider = exports.formControlContext = void 0;
+exports.useContextualFormProps = exports.useFormControl = exports.FormControlConsumer = exports.FormControlProvider = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-exports.formControlContext = (0, react_1.createContext)({ intent: 'default' });
-exports.formControlContext.displayName = 'FormControlContext';
-exports.FormControlProvider = exports.formControlContext.Provider;
-exports.FormControlConsumer = exports.formControlContext.Consumer;
-var useFormControl = function () { return (0, react_1.useContext)(exports.formControlContext); };
+var FormControlContext = (0, react_1.createContext)({ intent: 'default' });
+FormControlContext.displayName = 'FormControlContext';
+exports.FormControlProvider = FormControlContext.Provider;
+exports.FormControlConsumer = FormControlContext.Consumer;
+var useFormControl = function () { return (0, react_1.useContext)(FormControlContext); };
 exports.useFormControl = useFormControl;
 /**
  * @param props
  * uses form values to be passed using context to child components
  * this hook can be scaled to incorporate multiple props
  */
-var useContextualFormProps = function (props) {
-    var _a;
-    var contextProps = (0, exports.useFormControl)();
-    var intent = (_a = props.intent) !== null && _a !== void 0 ? _a : contextProps.intent;
+var useContextualFormProps = function (props, defaultProps) {
+    var _a, _b;
+    if (defaultProps === void 0) { defaultProps = {}; }
+    var formControlValue = (0, exports.useFormControl)();
+    var intent = (_b = (_a = props.intent) !== null && _a !== void 0 ? _a : formControlValue.intent) !== null && _b !== void 0 ? _b : defaultProps.intent;
     return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { intent: intent });
 };
 exports.useContextualFormProps = useContextualFormProps;

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,9 +3,9 @@ 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 react_uid_1 = require("react-uid");
 var helpers_1 = require("../helpers");
 var stack_1 = require("../stack");
 var info_1 = (0, tslib_1.__importDefault)(require("../icon/components/info"));
@@ -26,32 +26,37 @@ 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, react_uid_1.useUID)();
+    var a11LabelId = (0, react_uid_1.useUID)();
+    var a11SubTextId = (0, react_uid_1.useUID)();
+    var fieldUniqueId = (0, react_uid_1.useUID)();
     // 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) {
+    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: 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)({ id: a11SubTextId }, 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) {
                             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.StyledRoot = (0, style_1.styled)('div', 'mb-4 flex', function (utils, _a) {
+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 my-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-l2 spr-text-02');
 exports.StyledControlContainer = (0, style_1.styled)('div', 'w-full');

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',

package/helpers/StyledTombstone.d.ts

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

package/helpers/StyledTombstone.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTombstone = void 0;
+var tslib_1 = require("tslib");
+var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
+exports.StyledTombstone = (0, styled_1.default)('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/helpers/baseui/useConvertOverrides.js

@@ -4,10 +4,15 @@ exports.convertOverrideObject = exports.mergeAndConvertOverrides = exports.useCo
 var tslib_1 = require("tslib");
 var reduce_1 = (0, tslib_1.__importDefault)(require("lodash/reduce"));
 var react_1 = require("react");
+var rtl_css_js_1 = (0, tslib_1.__importDefault)(require("rtl-css-js"));
 var overrides_1 = require("../../overrides");
 var _getStyleWithProps_1 = (0, tslib_1.__importDefault)(require("../../style/_getStyleWithProps"));
 var useStyle_1 = (0, tslib_1.__importDefault)(require("../../style/useStyle"));
-var convertOverrideObject = function (override, utils) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, override), { style: function (props) { return (0, _getStyleWithProps_1.default)(utils, props, override.style); } })); };
+var identity = function (x) { return x; };
+var convertOverrideObject = function (override, utils) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, override), { style: function (props) {
+        var decorator = utils.isRTL ? rtl_css_js_1.default : identity;
+        return decorator((0, _getStyleWithProps_1.default)(utils, props, override.style));
+    } })); };
 exports.convertOverrideObject = convertOverrideObject;
 var mergeAndConvertOverrides = function (target, source, utils) {
     if (source === void 0) { source = {}; }

package/helpers/baseui/withThemeOverride.js

@@ -14,7 +14,7 @@ var withThemeOverride = function (Component, mapSpaceThemeToBaseTheme) {
     var ThemeOverridenComponent = React.forwardRef(function ThemeOverride(props, ref) {
         var theme = (0, useStyle_1.default)().theme;
         var _a = (0, tslib_1.__read)((0, useMemoizedStyletron_1.default)(), 2), styletronTheme = _a[1];
-        var updatedTheme = (0, themes_1.createTheme)(styletronTheme, mapSpaceThemeToBaseTheme(theme));
+        var updatedTheme = React.useMemo(function () { return (0, themes_1.createTheme)(styletronTheme, mapSpaceThemeToBaseTheme(theme)); }, [styletronTheme, theme]);
         return ((0, jsx_runtime_1.jsx)(baseui_1.ThemeProvider, (0, tslib_1.__assign)({ theme: updatedTheme }, { children: (0, jsx_runtime_1.jsx)(Component, (0, tslib_1.__assign)({ ref: ref }, props), void 0) }), void 0));
     });
     ThemeOverridenComponent.displayName = "withThemeOverride(".concat(Component.displayName || Component.name, ")");

package/helpers/commonStyles.d.ts

@@ -9,8 +9,8 @@ export declare const chevronStyles: StyleFn<{
 export declare const transparentScrollbarStyles: StyleObject;
 export declare type OutlineProps = {
     $outlineColor?: string;
-    $outlineWidth?: string | number;
-    $outlineOffset?: string | number;
+    $outlineWidth?: StyleObject['outlineWidth'];
+    $outlineOffset?: StyleObject['outlineOffset'];
     $outlineStyle?: string;
 };
 export declare const getOutlineStyles: ({ theme }: StyleUtils, props?: OutlineProps | undefined) => StyleObject;

package/helpers/commonStyles.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFocusVisibleStyles = exports.getOutlineStyles = exports.transparentScrollbarStyles = exports.chevronStyles = void 0;
+var tslib_1 = require("tslib");
+var longHandHelpers_1 = require("./longHandHelpers");
 var chevronStyles = function (_a, _b) {
     var theme = _a.theme, px2rem = _a.px2rem;
     var $isOpen = _b.$isOpen;
@@ -25,12 +27,7 @@ exports.transparentScrollbarStyles = {
     '::-webkit-scrollbar': {
         backgroundColor: 'transparent',
     },
-    '::-webkit-scrollbar-thumb': {
-        backgroundColor: 'darkgrey',
-        border: '4px solid transparent',
-        borderRadius: '8px',
-        backgroundClip: 'padding-box',
-    },
+    '::-webkit-scrollbar-thumb': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: 'darkgrey' }, (0, longHandHelpers_1.borderRadius)('8px')), (0, longHandHelpers_1.borderWidth)('4px')), (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)('transparent')), { backgroundClip: 'padding-box' }),
 };
 var getOutlineStyles = function (_a, props) {
     var theme = _a.theme;

package/helpers/index.d.ts

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

package/helpers/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hex2rgb = exports.covertCSSVariablesToValue = exports.add$props = exports.omit$props = void 0;
+exports.hex2rgb = exports.themeTokenToHex = exports.covertCSSVariablesToValue = exports.add$props = exports.omit$props = void 0;
 var tslib_1 = require("tslib");
 /**
  * Omits properties that starts with `$` (Styletron)
@@ -50,6 +50,15 @@ var covertCSSVariablesToValue = function (value) {
     return value;
 };
 exports.covertCSSVariablesToValue = covertCSSVariablesToValue;
+var themeTokenToHex = function (token) {
+    var hex = (0, exports.covertCSSVariablesToValue)(token);
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    return parsed;
+};
+exports.themeTokenToHex = themeTokenToHex;
 /**
  * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color

package/helpers/styletron.d.ts

@@ -1,12 +1,23 @@
+/// <reference types="react" />
 /**
  * @deprecated use spaceweb/styled
  */
-export declare const styled: import("baseui").StyledFn<ThemeT>;
+export declare const styled: {
+    <C extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
+        $theme: Theme;
+    }) => import("styletron-standard").StyleObject)): import("styletron-react").StyletronComponent<C, P>;
+    <C_1 extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>>(component: C_1, style: import("styletron-standard").StyleObject): import("styletron-react").StyletronComponent<C_1, {}>;
+};
 /**
  * @deprecated
  */
-export declare const withStyle: import("baseui").WithStyleFn<ThemeT>;
+export declare const withStyle: {
+    <C extends import("styletron-react").StyletronComponent<any, any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
+        $theme: Theme;
+    } & (C extends import("styletron-react").StyletronComponent<infer CC, infer PP> ? PP : never)) => import("styletron-standard").StyleObject)): C extends import("styletron-react").StyletronComponent<infer CC_1, infer PP_1> ? import("styletron-react").StyletronComponent<CC_1, P & PP_1> : never;
+    <C_1 extends import("styletron-react").StyletronComponent<any, any>>(component: C_1, style: import("styletron-standard").StyleObject): C_1;
+};
 /**
  * @deprecated use spaceweb/useStyle
  */
-export declare const useStyletron: () => [(arg: import("styletron-standard").StyleObject) => string, ThemeT];
+export declare const useStyletron: () => [(a: import("styletron-standard").StyleObject) => string, ThemeT];

package/helpers/themeHelpers.d.ts

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

package/helpers/themeHelpers.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponentSizeTheme = exports.getComponentTheme = void 0;
+exports.getDefaultSize = exports.getComponentSizeTheme = exports.getComponentTheme = void 0;
 var getComponentTheme = function (theme, componentName) { return theme[componentName]; };
 exports.getComponentTheme = getComponentTheme;
 var sizeAdapter = {
+    xxxxs: 'sizeXxxxs',
     xxxs: 'sizeXxxs',
     xxs: 'sizeXxs',
     xs: 'sizeXs',
@@ -22,3 +23,16 @@ var getComponentSizeTheme = function (theme, componentName, size, defaultSize) {
     return (_b = componentTheme[sizeAdapter[size !== null && size !== void 0 ? size : defaultSize]]) !== null && _b !== void 0 ? _b : componentTheme[sizeAdapter[defaultSize]];
 };
 exports.getComponentSizeTheme = getComponentSizeTheme;
+var getDefaultSize = function (theme) {
+    switch (theme.density) {
+        case 'COMFORTABLE':
+            return 'md';
+        case 'SPACIOUS':
+            return 'md';
+        case 'COMPACT':
+            return 'xxxs';
+        default:
+            return 'md';
+    }
+};
+exports.getDefaultSize = getDefaultSize;

package/hooks/useAutoFocus.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import { InputProps } from '../input';
-import { TextareaProps } from '../textarea';
-declare type UseAutoFocus = {
-    (props: Pick<InputProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLInputElement>;
-    (props: Pick<TextareaProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLTextAreaElement>;
+import { RefObject, Ref } from 'react';
+import { FocusPosition } from '../input';
+declare type Params<T> = {
+    autoFocus?: FocusPosition;
+    inputRef?: Ref<T>;
 };
-declare const useAutoFocus: UseAutoFocus;
+declare const useAutoFocus: <T extends HTMLTextAreaElement | HTMLInputElement>({ autoFocus, inputRef, }: Params<T>) => RefObject<T>;
 export default useAutoFocus;

package/hooks/useAutoFocus.js

@@ -1,29 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = (0, tslib_1.__importStar)(require("react"));
+var react_1 = require("react");
+var useCombinedRef_1 = require("./useCombinedRef");
 var __DEV__ = process.env.NODE_ENV !== 'production';
 var useAutoFocus = function (_a) {
     var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
-    var ownRef = React.useRef(null);
-    var ref = inputRef !== null && inputRef !== void 0 ? inputRef : ownRef;
-    React.useEffect(function () {
-        if (!ref.current || typeof autoFocus === 'undefined') {
+    var refObj = (0, useCombinedRef_1.useCombineRefObjects)(inputRef);
+    (0, react_1.useEffect)(function () {
+        if (!refObj.current || typeof autoFocus === 'undefined') {
             return;
         }
         var position;
         switch (typeof autoFocus) {
             case 'boolean':
                 if (autoFocus) {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
                 }
                 break;
             case 'number':
-                if (autoFocus >= ref.current.value.length) {
-                    position = ref.current.value.length;
+                if (autoFocus >= refObj.current.value.length) {
+                    position = refObj.current.value.length;
                 }
                 else if (autoFocus >= 0) {
                     position = autoFocus;
@@ -37,7 +36,7 @@ var useAutoFocus = function (_a) {
                     position = 0;
                 }
                 else if (autoFocus === 'end') {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
@@ -47,15 +46,21 @@ var useAutoFocus = function (_a) {
                 position = 0;
         }
         try {
-            ref.current.focus();
-            ref.current.setSelectionRange(position, position);
+            refObj.current.focus({ preventScroll: true });
+            refObj.current.setSelectionRange(position, position);
+            // moves cursor at the end of the text in input & textarea
+            // this would have been handled by browser, but we have to do it explicitly because of preventScroll option in ref.focus
+            if (position === refObj.current.value.length) {
+                refObj.current.scrollLeft = refObj.current.scrollWidth;
+                refObj.current.scrollTop = refObj.current.scrollHeight;
+            }
         }
         catch (err) {
             if (__DEV__) {
                 console.error(err);
             }
         }
-    }, [autoFocus]);
-    return ref;
+    }, [autoFocus, refObj]);
+    return refObj;
 };
 exports.default = useAutoFocus;

package/hooks/useCombinedRef.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 export declare type Ref<T> = React.RefCallback<T> | React.MutableRefObject<T> | null;
 declare type Refs<T> = (Ref<T | null> | null | undefined)[];
 export declare function combineRefs<T>(...refs: Refs<T>): (element: T) => void;
+export declare function useCombineRefObjects<T>(...refs: Refs<T>): React.RefObject<T>;
 declare function useCombinedRefs<T>(...refs: Refs<T>): React.RefCallback<T | null>;
 export default useCombinedRefs;