@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/esm/tag/avatar-tag.js

@@ -2,23 +2,30 @@ import { __assign, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { Avatar } from '../avatar';
-import { borderRadius } from '../helpers/longHandHelpers';
-import { getComponentTheme } from '../helpers/themeHelpers';
 import Tag from './tag';
-var tagRootStyles = function (_a) {
-    var theme = _a.theme, px2rem = _a.px2rem;
-    var tagBorderRadius = getComponentTheme(theme, 'multiSelect').tagBorderRadius;
-    return __assign(__assign({}, (tagBorderRadius && borderRadius(tagBorderRadius))), { marginLeft: px2rem(4) });
-};
-var avatarRootStyles = function (_a) {
-    var theme = _a.theme;
-    var avatarMarginLeft = getComponentTheme(theme, 'tag').avatarMarginLeft;
-    return { marginLeft: avatarMarginLeft };
-};
+import { useStyle } from '../style';
+import { getDefaultTagSize, getTagSizeTheme } from './utils';
 var AvatarTag = function (props) {
-    var avatarProps = props.avatarProps, startEnhancer = props.startEnhancer, className = props.className, tagProps = __rest(props, ["avatarProps", "startEnhancer", "className"]);
-    var startEnhancerOverride = useCallback(function (sharedProps) { return (_jsxs(_Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer, _jsx(Avatar, __assign({ size: "sm" }, avatarProps, { className: [avatarRootStyles, avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className] }), void 0)] }, void 0)); }, [avatarProps, startEnhancer]);
-    var mergedClassName = useMemo(function () { return [tagRootStyles, className]; }, [className]);
-    return _jsx(Tag, __assign({ size: "lg", startEnhancer: startEnhancerOverride, className: mergedClassName }, tagProps), void 0);
+    var avatarProps = props.avatarProps, startEnhancer = props.startEnhancer, className = props.className, _size = props.size, tagProps = __rest(props, ["avatarProps", "startEnhancer", "className", "size"]);
+    var theme = useStyle().theme;
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultTagSize(theme);
+    var avatarIconSize = getTagSizeTheme(theme, size).avatarIconSize;
+    var customTagOverrides = {
+        StartEnhancer: {
+            style: function (_a, _b) {
+                var $size = _b.$size;
+                return ($size === 'lg' ? { marginLeft: '8px' } : {});
+            },
+        },
+        Action: {
+            style: function (_a, _b) {
+                var $size = _b.$size;
+                return ($size === 'lg' ? { marginRight: '4px' } : {});
+            },
+        },
+    };
+    var startEnhancerOverride = useCallback(function (sharedProps) { return (_jsxs(_Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer, _jsx(Avatar, __assign({ size: avatarIconSize }, avatarProps, { className: [avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className] }), void 0)] }, void 0)); }, [avatarProps, startEnhancer, avatarIconSize]);
+    var mergedClassName = useMemo(function () { return [className]; }, [className]);
+    return (_jsx(Tag, __assign({ overrides: customTagOverrides, size: size, startEnhancer: startEnhancerOverride, className: mergedClassName }, tagProps), void 0));
 };
 export default AvatarTag;

package/esm/tag/styled-components.js

@@ -1,46 +1,51 @@
 import { __assign } from "tslib";
 import { borderRadius as borderRadiusLonghand, borderStyle, borderColor, borderWidth, margin, } from '../helpers/longHandHelpers';
-import { getComponentSizeTheme, getComponentTheme } from '../helpers/themeHelpers';
 import { getFocusVisibleStyles } from '../helpers/commonStyles';
 import { styled } from '../style';
 import { getIntentStyles } from './intentStyles';
-export var StyledStartEnhancer = styled('div', 'inline-flex items-center', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
-        marginRight: px2rem(6),
-    });
+import { getTagSizeTheme } from './utils';
+export var StyledStartEnhancer = styled('div', 'inline-flex items-center', function (_a, _b) {
+    var px2rem = _a.px2rem, theme = _a.theme;
+    var $size = _b.$size;
+    var _c = getTagSizeTheme(theme, $size), startEnhancerMarginLeft = _c.startEnhancerMarginLeft, startEnhancerMarginRight = _c.startEnhancerMarginRight;
+    return {
+        marginRight: startEnhancerMarginRight,
+        marginLeft: startEnhancerMarginLeft,
+    };
 });
 export var StyledRoot = styled('span', 'inline-flex items-center box-border', function (utils, _a) {
     var _b;
     var $withStartEnhancer = _a.$withStartEnhancer, $size = _a.$size, $closeable = _a.$closeable, $intent = _a.$intent, $variant = _a.$variant, $clickable = _a.$clickable, $isFocusVisible = _a.$isFocusVisible;
-    var direction = utils.direction, theme = utils.theme, px2rem = utils.px2rem;
-    var paddingStartDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
-    var paddingEndDir = direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
-    var borderRadius = getComponentTheme(theme, 'tag').borderRadius;
-    var height = getComponentSizeTheme(theme, 'tag', $size, 'lg').height;
-    var paddingStart = $size === 'sm' ? px2rem(10) : theme.padding['3'];
-    if ($withStartEnhancer)
-        paddingStart = theme.padding['1'];
-    var paddingEnd = $closeable ? '0' : paddingStart;
+    var theme = utils.theme;
+    var paddingStartDir = 'paddingLeft';
+    var paddingEndDir = 'paddingRight';
+    var _c = getTagSizeTheme(theme, $size), height = _c.height, borderRadius = _c.borderRadius, paddingX = _c.paddingX, paddingY = _c.paddingY;
+    var paddingStart = $withStartEnhancer ? '0' : paddingX;
+    var paddingEnd = $closeable ? '0' : paddingX;
     var typographyStyles = $intent === 'default'
         ? __assign(__assign({}, theme.typography.l2), { fontWeight: theme.fontWeight.normal }) : __assign(__assign({}, theme.typography.l2), { fontWeight: theme.fontWeight.semibold });
     var hoverStyles = __assign({ boxShadow: 'inset 0px 0px 100px rgba(0, 0, 0, 0.08)' }, borderColor(theme.spr.border06));
     var activeStyles = __assign({}, borderColor(theme.spr.interactive01));
-    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign((_b = { height: height }, _b[paddingStartDir] = paddingStart, _b[paddingEndDir] = paddingEnd, _b.maxWidth = 'none', _b), typographyStyles), margin(0)), borderStyle('solid')), borderColor(theme.borderColor.transparent)), borderWidth('1px')), borderRadiusLonghand(borderRadius)), getIntentStyles(theme, $intent, $variant)), ($clickable && __assign({ cursor: 'pointer', 
+    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign((_b = { height: height }, _b[paddingStartDir] = paddingStart, _b[paddingEndDir] = paddingEnd, _b.paddingTop = paddingY, _b.paddingBottom = paddingY, _b.maxWidth = 'none', _b), typographyStyles), margin(0)), borderStyle('solid')), borderColor(theme.borderColor.transparent)), borderWidth('1px')), borderRadiusLonghand(borderRadius)), getIntentStyles(theme, $intent, $variant)), ($clickable && __assign({ cursor: 'pointer', 
         // temporary boxShadow onHover
         ':hover': hoverStyles, ':active': activeStyles }, getFocusVisibleStyles(utils)))), { ':focus': __assign({}, ($isFocusVisible && hoverStyles)) });
 });
-export var StyledAction = styled('span', 'cursor-pointer inline-flex items-center justify-center pl-2 pr-2', function (_a) {
-    var _b;
-    var px2rem = _a.px2rem, direction = _a.direction;
-    var marginStartDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
-    return _b = {},
-        _b[marginStartDir] = px2rem(6),
-        _b;
+export var StyledAction = styled('span', 'cursor-pointer inline-flex items-center justify-center', function (_a, _b) {
+    var theme = _a.theme;
+    var $size = _b.$size;
+    var clearableIconMarginX = getTagSizeTheme(theme, $size).clearableIconMarginX;
+    return {
+        marginRight: clearableIconMarginX,
+        marginLeft: clearableIconMarginX,
+    };
 });
-export var StyledText = styled('span', 'truncate', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
+export var StyledText = styled('span', 'truncate', function (_a, _b) {
+    var px2rem = _a.px2rem, theme = _a.theme;
+    var $size = _b.$size;
+    var _c = getTagSizeTheme(theme, $size), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
+    return {
         maxWidth: px2rem(128),
-    });
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+    };
 });

package/esm/tag/tag.js

@@ -1,18 +1,21 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback } from 'react';
+import _omit from 'lodash/omit';
 import { IconButton } from '../button';
-import { getComponentTheme } from '../helpers/themeHelpers';
 import { useFocusVisible } from '../hooks/useFocusVisible';
 import CloseIcon from '../icon/components/close';
 import { useOverrides } from '../overrides';
 import { useStyle } from '../style';
 import { StyledAction, StyledRoot, StyledStartEnhancer, StyledText } from './styled-components';
-import { getTextFromChildren } from './utils';
+import { getDefaultTagSize, getTagSizeTheme, getTextFromChildren } from './utils';
+import { useLocale } from '../locale';
+import { borderRadius } from '../helpers/longHandHelpers';
 var Tag = forwardRef(function (props, ref) {
-    var children = props.children, _a = props.closeable, closeable = _a === void 0 ? true : _a, _b = props.size, size = _b === void 0 ? 'lg' : _b, _c = props.isFocused, isFocused = _c === void 0 ? false : _c, _d = props.isHovered, isHovered = _d === void 0 ? false : _d, onActionClick = props.onActionClick, onActionKeyDown = props.onActionKeyDown, _e = props.onClick, onClick = _e === void 0 ? null : _e, _f = props.onKeyDown, onKeyDown = _f === void 0 ? null : _f, overrides = props.overrides, title = props.title, _g = props.variant, variant = _g === void 0 ? 'light' : _g, _h = props.intent, intent = _h === void 0 ? 'default' : _h, className = props.className, startEnhancer = props.startEnhancer, restProps = __rest(props, ["children", "closeable", "size", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "className", "startEnhancer"]);
-    var _j = useFocusVisible(), $isFocusVisible = _j.$isFocusVisible, onBlur = _j.onBlur, onFocus = _j.onFocus;
+    var children = props.children, _a = props.closeable, closeable = _a === void 0 ? true : _a, _size = props.size, _b = props.isFocused, isFocused = _b === void 0 ? false : _b, _c = props.isHovered, isHovered = _c === void 0 ? false : _c, onActionClick = props.onActionClick, onActionKeyDown = props.onActionKeyDown, _d = props.onClick, onClick = _d === void 0 ? null : _d, _e = props.onKeyDown, onKeyDown = _e === void 0 ? null : _e, overrides = props.overrides, title = props.title, _f = props.variant, variant = _f === void 0 ? 'light' : _f, _g = props.intent, intent = _g === void 0 ? 'default' : _g, className = props.className, startEnhancer = props.startEnhancer, restProps = __rest(props, ["children", "closeable", "size", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "className", "startEnhancer"]);
+    var _h = useFocusVisible(), $isFocusVisible = _h.$isFocusVisible, onBlur = _h.onBlur, onFocus = _h.onFocus;
     var theme = useStyle().theme;
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultTagSize(theme);
     var handleKeyDown = useCallback(function (event) {
         if (event.currentTarget !== event.target) {
             return;
@@ -29,11 +32,11 @@ var Tag = forwardRef(function (props, ref) {
             onKeyDown(event);
         }
     }, [closeable, onActionClick, onActionKeyDown, onClick, onKeyDown]);
-    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _k[0], rootProps = _k[1];
-    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Action, StyledAction), 2), Action = _l[0], actionProps = _l[1];
-    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ActionIcon, CloseIcon), 2), ActionIcon = _m[0], actionIconProps = _m[1];
-    var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Text, StyledText), 2), Text = _o[0], textProps = _o[1];
-    var _p = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _p[0], startEnhancerProps = _p[1];
+    var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _j[0], rootProps = _j[1];
+    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Action, StyledAction), 2), Action = _k[0], actionProps = _k[1];
+    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ActionIcon, CloseIcon), 2), ActionIcon = _l[0], actionIconProps = _l[1];
+    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Text, StyledText), 2), Text = _m[0], textProps = _m[1];
+    var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _o[0], startEnhancerProps = _o[1];
     var clickable = typeof onClick === 'function';
     var sharedProps = {
         $clickable: clickable,
@@ -47,9 +50,14 @@ var Tag = forwardRef(function (props, ref) {
         $intent: intent,
     };
     var titleText = title || getTextFromChildren(children);
-    var actionSize = 8;
-    var actionButtonBorderRadius = getComponentTheme(theme, 'tag').actionButtonBorderRadius;
-    return (_jsxs(Root, __assign({ ref: ref, "data-spaceweb": "tag", role: clickable ? 'button' : null, tabIndex: clickable ? 0 : null, onFocus: onFocus, onBlur: onBlur, className: className, onClick: onClick, onKeyDown: handleKeyDown }, sharedProps, restProps, rootProps, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }), void 0)), _jsx(Text, __assign({ title: titleText }, sharedProps, textProps, { children: children }), void 0), closeable ? (_jsx(Action, __assign({ "aria-hidden": true, role: "presentation", onClick: onActionClick }, sharedProps, actionProps, { children: _jsx(IconButton, __assign({ type: "button", size: "xxxs", shape: "square", className: "hover:spr-clr-grey" }, { children: _jsx(ActionIcon, __assign({}, actionIconProps), void 0) }), void 0) }), void 0)) : null] }), void 0));
+    var _p = getTagSizeTheme(theme, size), clearableIconSize = _p.clearableIconSize, clearableIconButtonSize = _p.clearableIconButtonSize, clearableIconButtonBorderRadius = _p.clearableIconButtonBorderRadius;
+    var actionIconButtonOverrides = {
+        BaseButton: {
+            style: __assign({ height: clearableIconButtonSize, width: clearableIconButtonSize }, borderRadius(clearableIconButtonBorderRadius)),
+        },
+    };
+    var locale = useLocale();
+    return (_jsxs(Root, __assign({ ref: ref, "data-spaceweb": "tag", role: clickable ? 'button' : null, tabIndex: clickable ? 0 : null, onFocus: onFocus, onBlur: onBlur, className: className, onClick: onClick, onKeyDown: handleKeyDown }, sharedProps, restProps, rootProps, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }), void 0)), _jsx(Text, __assign({ title: titleText }, sharedProps, textProps, { children: children }), void 0), closeable ? (_jsx(Action, __assign({ "aria-hidden": true, role: "presentation", onClick: onActionClick }, sharedProps, _omit(actionProps, 'tabIndex'), { children: _jsx(IconButton, __assign({ shape: "square", type: "button", className: "hover:spr-clr-grey", "aria-label": locale.tag.closeAriaLabel, overrides: actionIconButtonOverrides, tabIndex: actionProps === null || actionProps === void 0 ? void 0 : actionProps.tabIndex }, { children: _jsx(ActionIcon, __assign({ size: clearableIconSize }, actionIconProps), void 0) }), void 0) }), void 0)) : null] }), void 0));
 });
 Tag.displayName = 'Tag';
 export default Tag;

package/esm/tag/types.d.ts

@@ -4,7 +4,7 @@ import { Override } from '../overrides';
 import { ClassName } from '../types';
 export declare type Intent = 'success' | 'error' | 'warning' | 'info' | 'default';
 export declare type Variant = 'solid' | 'light';
-export declare type Size = 'sm' | 'lg';
+export declare type Size = 'xxxs' | 'sm' | 'lg';
 export declare type TagOverrides = {
     Root?: Override<SharedProps & Record<string, any>>;
     Action?: Override<SharedProps & Record<string, any>>;
@@ -34,7 +34,7 @@ export declare type TagProps = {
     variant?: Variant;
     size?: Size;
 };
-export declare type AvatarTagProps = Omit<TagProps, 'size' | 'overrides'> & {
+export declare type AvatarTagProps = Omit<TagProps, 'overrides'> & {
     avatarProps: AvatarProps;
     overrides?: TagProps['overrides'] & {
         StartEnhancer?: Override<Record<string, any>>;

package/esm/tag/utils.d.ts

@@ -1,2 +1,52 @@
 import * as React from 'react';
+import { Theme } from '@sprinklrjs/spaceweb-themes/types';
 export declare function getTextFromChildren(children: React.ReactNode): string | null;
+export declare const getDefaultTagSize: (theme: Theme) => 'xxxs' | 'sm' | 'lg';
+export declare const tagSizeMap: {
+    xxxs: {
+        paddingY: string;
+        paddingX: string;
+        height: string;
+        fontSize: string;
+        lineHeight: string;
+        borderRadius: string;
+        avatarIconSize: number;
+        clearableIconSize: string;
+        clearableIconButtonSize: string;
+        clearableIconButtonBorderRadius: string;
+        clearableIconMarginX: string;
+        startEnhancerMarginLeft: string;
+        startEnhancerMarginRight: string;
+    };
+    sm: {
+        paddingY: string;
+        paddingX: string;
+        height: string;
+        fontSize: string;
+        lineHeight: string;
+        borderRadius: string;
+        avatarIconSize: number;
+        clearableIconSize: string;
+        clearableIconButtonSize: string;
+        clearableIconButtonBorderRadius: string;
+        clearableIconMarginX: string;
+        startEnhancerMarginLeft: string;
+        startEnhancerMarginRight: string;
+    };
+    lg: {
+        paddingY: string;
+        paddingX: string;
+        height: string;
+        fontSize: string;
+        lineHeight: string;
+        borderRadius: string;
+        avatarIconSize: number;
+        clearableIconSize: string;
+        clearableIconButtonSize: string;
+        clearableIconButtonBorderRadius: string;
+        clearableIconMarginX: string;
+        startEnhancerMarginLeft: string;
+        startEnhancerMarginRight: string;
+    };
+};
+export declare const getTagSizeTheme: (theme: any, size: any) => any;

package/esm/tag/utils.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { getComponentSizeTheme } from '../helpers/themeHelpers';
 var JOINABLE_TYPES = new Set(['string', 'number']);
 // Checks the children of a React component to ensure every value is a number
 // or a string. If they are, they are joined and returned. Useful for collecting
@@ -17,3 +18,66 @@ export function getTextFromChildren(children) {
     // <Tag>foo {'bar'} baz</Tag> => 'foo bar baz'
     return childList.join('');
 }
+export var getDefaultTagSize = function (theme) {
+    switch (theme.density) {
+        case 'COMFORTABLE':
+            return 'sm';
+        case 'SPACIOUS':
+            return 'sm';
+        case 'COMPACT':
+            return 'xxxs';
+        default:
+            return 'lg';
+    }
+};
+export var tagSizeMap = {
+    xxxs: {
+        paddingY: '1px',
+        paddingX: '6px',
+        height: '18px',
+        fontSize: '13px',
+        lineHeight: '16px',
+        borderRadius: '4px',
+        avatarIconSize: 12,
+        clearableIconSize: '8px',
+        clearableIconButtonSize: '14px',
+        clearableIconButtonBorderRadius: '2px',
+        clearableIconMarginX: '3px',
+        startEnhancerMarginLeft: '6px',
+        startEnhancerMarginRight: '2px',
+    },
+    sm: {
+        paddingY: '2px',
+        paddingX: '8px',
+        height: '22px',
+        fontSize: '14px',
+        lineHeight: '18px',
+        borderRadius: '5px',
+        avatarIconSize: 14,
+        clearableIconSize: '9px',
+        clearableIconButtonSize: '16px',
+        clearableIconButtonBorderRadius: '3px',
+        clearableIconMarginX: '5px',
+        startEnhancerMarginLeft: '8px',
+        startEnhancerMarginRight: '3px',
+    },
+    lg: {
+        paddingY: '7px',
+        paddingX: '12px',
+        height: '34px',
+        fontSize: '16px',
+        lineHeight: '18px',
+        borderRadius: '6px',
+        avatarIconSize: 20,
+        clearableIconSize: '10px',
+        clearableIconButtonSize: '18px',
+        clearableIconButtonBorderRadius: '3px',
+        clearableIconMarginX: '7px',
+        startEnhancerMarginLeft: '12px',
+        startEnhancerMarginRight: '4px',
+    },
+};
+export var getTagSizeTheme = function (theme, size) {
+    var _a, _b;
+    return (_b = (_a = getComponentSizeTheme(theme, 'tag', size, getDefaultTagSize(theme))) !== null && _a !== void 0 ? _a : tagSizeMap[size]) !== null && _b !== void 0 ? _b : tagSizeMap[getDefaultTagSize(theme)];
+};

package/esm/textarea/basewebAdapters.js

@@ -1,6 +1,6 @@
 import { __assign, __rest } from "tslib";
 import { useMemo } from 'react';
-import { borderStyle } from '../helpers/longHandHelpers';
+import { borderRadius, borderStyle } from '../helpers/longHandHelpers';
 import { getTextareaInputContainerStyles, getTextareaInputStyles } from './styled-components';
 import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { add$props } from '../helpers';
@@ -15,7 +15,7 @@ function useTextareaAdapter(props) {
     var handleChange = useDebouncedEventHandler((_a = props.debouncedOnChange) !== null && _a !== void 0 ? _a : _noop, props.onChange, props.debounceInterval || 200);
     var overrides = useConvertOverrides({
         Root: {
-            style: [__assign({ backgroundColor: 'transparent' }, borderStyle('none'))],
+            style: [__assign(__assign({ backgroundColor: 'transparent' }, borderStyle('none')), borderRadius('0px'))], // overriding baseweb borderRadius
         },
         InputContainer: {
             style: inputContainerStyles,
@@ -23,10 +23,10 @@ function useTextareaAdapter(props) {
         },
         Input: {
             style: getTextareaInputStyles,
-            props: __assign({ onChange: handleChange, $autoSize: autoSize }, sharedProps),
+            props: __assign({ $autoSize: autoSize, 'aria-required': restProps['aria-required'] }, sharedProps),
         },
     }, restProps.overrides);
     var rows = autoSize && !restProps.rows ? 1 : restProps.rows;
-    return __assign(__assign({}, restProps), { overrides: overrides, rows: rows });
+    return __assign(__assign({}, restProps), { overrides: overrides, rows: rows, onChange: handleChange });
 }
 export default useTextareaAdapter;

package/esm/textarea/styled-components.d.ts

@@ -1,4 +1,4 @@
-export declare const getTextareaInputStyles: (import("..").StyleFn<import("../input").SharedProps> | (({}: {}, { $autoSize }: {
+export declare const getTextareaInputStyles: (import("..").StyleFn<Partial<Pick<import("../input").SharedProps, "$disabled" | "$size" | "$variant">>> | (({}: {}, { $autoSize }: {
     $autoSize: any;
 }) => "overflow-hidden" | "resize") | (({ theme }: {
     theme: any;

package/esm/textarea/textarea.js

@@ -1,11 +1,12 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Textarea as BaseTextarea, StatefulTextarea as BaseStatefulTextarea } from 'baseui/textarea';
+import { Textarea as BaseTextarea, StatefulTextarea as BaseStatefulTextarea, } from 'baseui/textarea';
 import useTextareaAdapter from './basewebAdapters';
 import useAutoFocus from '../hooks/useAutoFocus';
 import useAutoSizeTextarea from './useAutoSizeTextarea';
 // @ts-ignore
 BaseTextarea.displayName = 'BaseUITextarea';
+// @ts-ignore
 BaseStatefulTextarea.displayName = 'BaseUIStatefulTextarea';
 export var Textarea = function (props) {
     var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
@@ -16,18 +17,13 @@ export var Textarea = function (props) {
         inputRef: autoFocusRef,
     });
     var adaptedProps = useTextareaAdapter(restProps);
-    return _jsx(BaseTextarea, __assign({}, adaptedProps, { inputRef: inputRef }), void 0);
+    return (_jsx(BaseTextarea, __assign({}, adaptedProps, { overrides: adaptedProps.overrides, inputRef: inputRef }), void 0));
 };
 Textarea.displayName = 'Textarea';
 export var StatefulTextarea = function (props) {
     var autoFocus = props.autoFocus, restProps = __rest(props, ["autoFocus"]);
     var autoFocusRef = useAutoFocus({ autoFocus: autoFocus, inputRef: restProps.inputRef });
-    var inputRef = useAutoSizeTextarea({
-        value: restProps.value,
-        autoSize: restProps.autoSize,
-        inputRef: autoFocusRef,
-    });
     var adaptedProps = useTextareaAdapter(restProps);
-    return _jsx(BaseStatefulTextarea, __assign({}, adaptedProps, { inputRef: inputRef }), void 0);
+    return (_jsx(BaseStatefulTextarea, __assign({}, adaptedProps, { overrides: adaptedProps.overrides, inputRef: autoFocusRef }), void 0));
 };
 StatefulTextarea.displayName = 'StatefulTextarea';

package/esm/textarea/types.d.ts

@@ -1,27 +1,29 @@
+import { Ref } from 'react';
 import { TextareaProps as BaseTextareaProps, StatefulTextareaProps as BaseStatefulTextareaProps } from 'baseui/textarea';
 import { InputSize, InputVariant, FocusPosition } from '../input';
 import { Intent, SpacewebComponentProps } from '../types';
 import { Override } from '../overrides';
-export declare type TextareaProps = SpacewebComponentProps<Omit<BaseTextareaProps, 'size' | 'overrides' | 'autoFocus'>> & {
+export declare type TextareaProps = SpacewebComponentProps<Omit<BaseTextareaProps, 'size' | 'overrides' | 'autoFocus' | 'inputRef'>> & {
     size?: InputSize;
     variant?: InputVariant;
     overrides?: {
-        [key in keyof BaseTextareaProps['overrides']]?: Override<any>;
+        [key in keyof Required<BaseTextareaProps>['overrides']]?: Override<any>;
     };
     intent?: Intent;
     debouncedOnChange?: BaseTextareaProps['onChange'];
     debounceInterval?: number;
     autoFocus?: FocusPosition;
     autoSize?: boolean;
+    inputRef?: Ref<HTMLTextAreaElement>;
 };
-export declare type StatefulTextareaProps = SpacewebComponentProps<Omit<BaseStatefulTextareaProps, 'size' | 'overrides' | 'autoFocus'>> & {
+export declare type StatefulTextareaProps = SpacewebComponentProps<Omit<BaseStatefulTextareaProps, 'size' | 'overrides' | 'autoFocus' | 'inputRef'>> & {
     size?: InputSize;
     variant?: InputVariant;
     overrides?: {
-        [key in keyof BaseStatefulTextareaProps['overrides']]?: Override<any>;
+        [key in keyof Required<BaseStatefulTextareaProps>['overrides']]?: Override<any>;
     };
     debouncedOnChange?: BaseStatefulTextareaProps['onChange'];
     debounceInterval?: number;
     autoFocus?: FocusPosition;
-    autoSize?: boolean;
+    inputRef?: Ref<HTMLTextAreaElement>;
 };

package/esm/theme/Provider.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { ThemeProviderT } from './types';
+import type { Density } from '@sprinklrjs/spaceweb-themes/types';
+declare type Props = PropsWithChildren<{
+    theme?: ThemeProviderT;
+    containerElement?: HTMLElement | null;
+    density?: Density;
+}>;
+export declare const ThemeProvider: (props: Props) => ReactElement;
+export {};

package/esm/theme/Provider.js

@@ -0,0 +1,61 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import _merge from 'lodash/merge';
+import { ThemeProvider as BaseUIThemProvider } from 'baseui';
+import usePrevious from '../hooks/usePrevious';
+import useMemoizedStyletron from '../style/useMemoizedStyletron';
+import SPACEWEB_THEME_VS_BASEUI_THEME from '../themes';
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
+import { themeContext, useTheme } from './context';
+var THEME_NAMES = ['hyperspace-light', 'space-light', 'space-dark', 'hyperspace-dark'];
+var addDensityToTheme = function (theme, density) {
+    var _a;
+    return (__assign(__assign({}, theme), { theme: __assign(__assign({}, theme.theme), { density: density || ((_a = theme.theme) === null || _a === void 0 ? void 0 : _a.density) }) }));
+};
+export var ThemeProvider = function (props) {
+    var theme = props.theme, children = props.children, elementToApplyClass = props.containerElement, density = props.density;
+    var _a = __read(useState(null), 2), containerElementRef = _a[0], setContainerElementRef = _a[1];
+    var outerTheme = useTheme();
+    var _b = __read(useMemoizedStyletron(), 2), baseUITheme = _b[1];
+    if (typeof outerTheme === 'undefined' && typeof theme === 'undefined') {
+        throw new Error('No Theme present in context & props');
+    }
+    var Provider = themeContext.Provider;
+    var value = useMemo(function () {
+        var _a, _b;
+        if (theme) {
+            var newTheme = void 0;
+            if (typeof theme === 'function') {
+                newTheme = theme(outerTheme);
+            }
+            else {
+                var newThemeName = (_a = theme.theme) === null || _a === void 0 ? void 0 : _a.name, outerThemeName = (_b = outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.theme) === null || _b === void 0 ? void 0 : _b.name, 
+                // theme should be merged if both the outerTheme & themeToOverride has same name
+                shouldMergeThemes = !newThemeName || !outerThemeName || newThemeName === outerThemeName;
+                if (shouldMergeThemes) {
+                    newTheme = _merge({}, outerTheme, theme);
+                }
+                else {
+                    newTheme = __assign({ direction: outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.direction }, theme);
+                }
+            }
+            if (typeof newTheme !== 'object') {
+                throw new Error('theme has to be an object of shape {theme : {}, classes : {}}');
+            }
+            return addDensityToTheme(newTheme, density);
+        }
+        return addDensityToTheme(outerTheme, density);
+    }, [theme, outerTheme, density]);
+    var themeName = value.theme.name, prevThemName = usePrevious(themeName), containerElement = elementToApplyClass !== null && elementToApplyClass !== void 0 ? elementToApplyClass : containerElementRef, prevContainerElement = usePrevious(containerElement);
+    useIsomorphicLayoutEffect(function () {
+        prevThemName && (prevContainerElement === null || prevContainerElement === void 0 ? void 0 : prevContainerElement.classList.remove(prevThemName));
+        THEME_NAMES.forEach(function (name) { return containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.remove(name); });
+        containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.add(themeName);
+    }, [themeName, prevThemName, containerElement, prevContainerElement]);
+    var baseuiThemeWithDirection = useMemo(function () { return (__assign(__assign({}, SPACEWEB_THEME_VS_BASEUI_THEME[themeName]), { direction: value.direction || 'ltr' })); }, [value.direction, themeName]);
+    /**
+     * Box component/styled cannot be used here as styletron might not be initialized when ThemeProvider renders for the first time.
+     */
+    return (_jsx("div", __assign({ "data-testid": "theme-provider-container", style: { display: 'contents' }, ref: setContainerElementRef }, { children: _jsx(BaseUIThemProvider, __assign({ theme: baseuiThemeWithDirection !== null && baseuiThemeWithDirection !== void 0 ? baseuiThemeWithDirection : baseUITheme }, { children: _jsx(Provider, __assign({ value: value }, { children: children }), void 0) }), void 0) }), void 0));
+};

package/esm/theme/context.d.ts

@@ -1,14 +1,5 @@
-import { ReactElement, PropsWithChildren } from 'react';
+/// <reference types="react" />
 import { ThemeContext } from '../types';
-import { ThemeProviderT } from './types';
-import type { Density } from '@sprinklrjs/spaceweb-themes/types';
 export declare const themeContext: import("react").Context<ThemeContext>;
 export declare const useTheme: () => ThemeContext;
-declare type Props = PropsWithChildren<{
-    theme?: ThemeProviderT;
-    containerElement?: HTMLElement | null;
-    density?: Density;
-}>;
-export declare const ThemeProvider: (props: Props) => ReactElement;
 export declare const ThemeConsumer: import("react").Consumer<ThemeContext>;
-export {};

package/esm/theme/context.js

@@ -1,65 +1,5 @@
-import { __assign, __read } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useState } from 'react';
-import _merge from 'lodash/merge';
+import { createContext, useContext } from 'react';
 import hyperspaceLight from '@sprinklrjs/spaceweb-themes/hyperspace/light';
-import { ThemeProvider as BaseUIThemProvider } from 'baseui';
-import usePrevious from '../hooks/usePrevious';
-import useMemoizedStyletron from '../style/useMemoizedStyletron';
-import SPACEWEB_THEME_VS_BASEUI_THEME from '../themes';
-import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
-//todo: remove default sprLight, too many tests failing on removal
 export var themeContext = createContext(hyperspaceLight);
 export var useTheme = function () { return useContext(themeContext); };
-var THEME_NAMES = ['hyperspace-light', 'space-light', 'space-dark', 'hyperspace-dark'];
-var addDensityToTheme = function (theme, density) {
-    var _a;
-    return (__assign(__assign({}, theme), { theme: __assign(__assign({}, theme.theme), { density: density || ((_a = theme.theme) === null || _a === void 0 ? void 0 : _a.density) }) }));
-};
-export var ThemeProvider = function (props) {
-    var _a;
-    var theme = props.theme, children = props.children, elementToApplyClass = props.containerElement, density = props.density;
-    var _b = __read(useState(null), 2), containerElementRef = _b[0], setContainerElementRef = _b[1];
-    var outerTheme = useTheme();
-    var _c = __read(useMemoizedStyletron(), 2), baseUITheme = _c[1];
-    if (typeof outerTheme === 'undefined' && typeof theme === 'undefined') {
-        throw new Error('No Theme present in context & props');
-    }
-    var Provider = themeContext.Provider;
-    var value = useMemo(function () {
-        var _a, _b;
-        if (theme) {
-            var newTheme = void 0;
-            if (typeof theme === 'function') {
-                newTheme = theme(outerTheme);
-            }
-            else {
-                var newThemeName = (_a = theme.theme) === null || _a === void 0 ? void 0 : _a.name, outerThemeName = (_b = outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.theme) === null || _b === void 0 ? void 0 : _b.name, 
-                // theme should be merged if both the outerTheme & themeToOverride has same name
-                shouldMergeThemes = !newThemeName || !outerThemeName || newThemeName === outerThemeName;
-                if (shouldMergeThemes) {
-                    newTheme = _merge({}, outerTheme, theme);
-                }
-                else {
-                    newTheme = __assign({ direction: outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.direction }, theme);
-                }
-            }
-            if (typeof newTheme !== 'object') {
-                throw new Error('theme has to be an object of shape {theme : {}, classes : {}}');
-            }
-            return addDensityToTheme(newTheme, density);
-        }
-        return addDensityToTheme(outerTheme, density);
-    }, [theme, outerTheme, density]);
-    var themeName = value.theme.name, prevThemName = usePrevious(themeName), containerElement = elementToApplyClass !== null && elementToApplyClass !== void 0 ? elementToApplyClass : containerElementRef, prevContainerElement = usePrevious(containerElement);
-    useIsomorphicLayoutEffect(function () {
-        prevThemName && (prevContainerElement === null || prevContainerElement === void 0 ? void 0 : prevContainerElement.classList.remove(prevThemName));
-        THEME_NAMES.forEach(function (name) { return containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.remove(name); });
-        containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.add(themeName);
-    }, [themeName, prevThemName, containerElement, prevContainerElement]);
-    /**
-     * Box component/styled cannot be used here as styletron might not be initialized when ThemeProvider renders for the first time.
-     */
-    return (_jsx("div", __assign({ "data-testid": "theme-provider-container", style: { display: 'contents' }, ref: setContainerElementRef }, { children: _jsx(BaseUIThemProvider, __assign({ theme: (_a = SPACEWEB_THEME_VS_BASEUI_THEME[themeName]) !== null && _a !== void 0 ? _a : baseUITheme }, { children: _jsx(Provider, __assign({ value: value }, { children: children }), void 0) }), void 0) }), void 0));
-};
 export var ThemeConsumer = themeContext.Consumer;

package/esm/theme/index.d.ts

@@ -1,2 +1,3 @@
+export * from './Provider';
 export * from './context';
 export * from './types';

package/esm/theme/index.js

@@ -1,2 +1,3 @@
+export * from './Provider';
 export * from './context';
 export * from './types';

package/esm/themes/index.js

@@ -14,5 +14,5 @@ var SPACEWEB_THEME_VS_BASEUI_THEME = {
 };
 export default SPACEWEB_THEME_VS_BASEUI_THEME;
 export function createTheme(theme, overrides) {
-    return _merge(theme, overrides);
+    return _merge({}, theme, overrides);
 }