@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/tag/styled-components.js

@@ -3,47 +3,52 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledText = exports.StyledAction = exports.StyledRoot = exports.StyledStartEnhancer = void 0;
 var tslib_1 = require("tslib");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
-var themeHelpers_1 = require("../helpers/themeHelpers");
 var commonStyles_1 = require("../helpers/commonStyles");
 var style_1 = require("../style");
 var intentStyles_1 = require("./intentStyles");
-exports.StyledStartEnhancer = (0, style_1.styled)('div', 'inline-flex items-center', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
-        marginRight: px2rem(6),
-    });
+var utils_1 = require("./utils");
+exports.StyledStartEnhancer = (0, style_1.styled)('div', 'inline-flex items-center', function (_a, _b) {
+    var px2rem = _a.px2rem, theme = _a.theme;
+    var $size = _b.$size;
+    var _c = (0, utils_1.getTagSizeTheme)(theme, $size), startEnhancerMarginLeft = _c.startEnhancerMarginLeft, startEnhancerMarginRight = _c.startEnhancerMarginRight;
+    return {
+        marginRight: startEnhancerMarginRight,
+        marginLeft: startEnhancerMarginLeft,
+    };
 });
 exports.StyledRoot = (0, style_1.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 = (0, themeHelpers_1.getComponentTheme)(theme, 'tag').borderRadius;
-    var height = (0, themeHelpers_1.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 = (0, utils_1.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'
         ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.typography.l2), { fontWeight: theme.fontWeight.normal }) : (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.typography.l2), { fontWeight: theme.fontWeight.semibold });
     var hoverStyles = (0, tslib_1.__assign)({ boxShadow: 'inset 0px 0px 100px rgba(0, 0, 0, 0.08)' }, (0, longHandHelpers_1.borderColor)(theme.spr.border06));
     var activeStyles = (0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(theme.spr.interactive01));
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((_b = { height: height }, _b[paddingStartDir] = paddingStart, _b[paddingEndDir] = paddingEnd, _b.maxWidth = 'none', _b), typographyStyles), (0, longHandHelpers_1.margin)(0)), (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)(theme.borderColor.transparent)), (0, longHandHelpers_1.borderWidth)('1px')), (0, longHandHelpers_1.borderRadius)(borderRadius)), (0, intentStyles_1.getIntentStyles)(theme, $intent, $variant)), ($clickable && (0, tslib_1.__assign)({ cursor: 'pointer', 
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((_b = { height: height }, _b[paddingStartDir] = paddingStart, _b[paddingEndDir] = paddingEnd, _b.paddingTop = paddingY, _b.paddingBottom = paddingY, _b.maxWidth = 'none', _b), typographyStyles), (0, longHandHelpers_1.margin)(0)), (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)(theme.borderColor.transparent)), (0, longHandHelpers_1.borderWidth)('1px')), (0, longHandHelpers_1.borderRadius)(borderRadius)), (0, intentStyles_1.getIntentStyles)(theme, $intent, $variant)), ($clickable && (0, tslib_1.__assign)({ cursor: 'pointer', 
         // temporary boxShadow onHover
         ':hover': hoverStyles, ':active': activeStyles }, (0, commonStyles_1.getFocusVisibleStyles)(utils)))), { ':focus': (0, tslib_1.__assign)({}, ($isFocusVisible && hoverStyles)) });
 });
-exports.StyledAction = (0, style_1.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;
+exports.StyledAction = (0, style_1.styled)('span', 'cursor-pointer inline-flex items-center justify-center', function (_a, _b) {
+    var theme = _a.theme;
+    var $size = _b.$size;
+    var clearableIconMarginX = (0, utils_1.getTagSizeTheme)(theme, $size).clearableIconMarginX;
+    return {
+        marginRight: clearableIconMarginX,
+        marginLeft: clearableIconMarginX,
+    };
 });
-exports.StyledText = (0, style_1.styled)('span', 'truncate', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
+exports.StyledText = (0, style_1.styled)('span', 'truncate', function (_a, _b) {
+    var px2rem = _a.px2rem, theme = _a.theme;
+    var $size = _b.$size;
+    var _c = (0, utils_1.getTagSizeTheme)(theme, $size), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
+    return {
         maxWidth: px2rem(128),
-    });
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+    };
 });

package/tag/tag.js

@@ -3,18 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
 var button_1 = require("../button");
-var themeHelpers_1 = require("../helpers/themeHelpers");
 var useFocusVisible_1 = require("../hooks/useFocusVisible");
 var close_1 = (0, tslib_1.__importDefault)(require("../icon/components/close"));
 var overrides_1 = require("../overrides");
 var style_1 = require("../style");
 var styled_components_1 = require("./styled-components");
 var utils_1 = require("./utils");
+var locale_1 = require("../locale");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var Tag = (0, react_1.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 = (0, tslib_1.__rest)(props, ["children", "closeable", "size", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "className", "startEnhancer"]);
-    var _j = (0, useFocusVisible_1.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 = (0, tslib_1.__rest)(props, ["children", "closeable", "size", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "className", "startEnhancer"]);
+    var _h = (0, useFocusVisible_1.useFocusVisible)(), $isFocusVisible = _h.$isFocusVisible, onBlur = _h.onBlur, onFocus = _h.onFocus;
     var theme = (0, style_1.useStyle)().theme;
+    var size = _size !== null && _size !== void 0 ? _size : (0, utils_1.getDefaultTagSize)(theme);
     var handleKeyDown = (0, react_1.useCallback)(function (event) {
         if (event.currentTarget !== event.target) {
             return;
@@ -31,11 +34,11 @@ var Tag = (0, react_1.forwardRef)(function (props, ref) {
             onKeyDown(event);
         }
     }, [closeable, onActionClick, onActionKeyDown, onClick, onKeyDown]);
-    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_components_1.StyledRoot), 2), Root = _k[0], rootProps = _k[1];
-    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Action, styled_components_1.StyledAction), 2), Action = _l[0], actionProps = _l[1];
-    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ActionIcon, close_1.default), 2), ActionIcon = _m[0], actionIconProps = _m[1];
-    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Text, styled_components_1.StyledText), 2), Text = _o[0], textProps = _o[1];
-    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer, styled_components_1.StyledStartEnhancer), 2), StartEnhancer = _p[0], startEnhancerProps = _p[1];
+    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_components_1.StyledRoot), 2), Root = _j[0], rootProps = _j[1];
+    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Action, styled_components_1.StyledAction), 2), Action = _k[0], actionProps = _k[1];
+    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ActionIcon, close_1.default), 2), ActionIcon = _l[0], actionIconProps = _l[1];
+    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Text, styled_components_1.StyledText), 2), Text = _m[0], textProps = _m[1];
+    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer, styled_components_1.StyledStartEnhancer), 2), StartEnhancer = _o[0], startEnhancerProps = _o[1];
     var clickable = typeof onClick === 'function';
     var sharedProps = {
         $clickable: clickable,
@@ -49,9 +52,14 @@ var Tag = (0, react_1.forwardRef)(function (props, ref) {
         $intent: intent,
     };
     var titleText = title || (0, utils_1.getTextFromChildren)(children);
-    var actionSize = 8;
-    var actionButtonBorderRadius = (0, themeHelpers_1.getComponentTheme)(theme, 'tag').actionButtonBorderRadius;
-    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__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 && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({}, sharedProps, startEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }), void 0)), (0, jsx_runtime_1.jsx)(Text, (0, tslib_1.__assign)({ title: titleText }, sharedProps, textProps, { children: children }), void 0), closeable ? ((0, jsx_runtime_1.jsx)(Action, (0, tslib_1.__assign)({ "aria-hidden": true, role: "presentation", onClick: onActionClick }, sharedProps, actionProps, { children: (0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({ type: "button", size: "xxxs", shape: "square", className: "hover:spr-clr-grey" }, { children: (0, jsx_runtime_1.jsx)(ActionIcon, (0, tslib_1.__assign)({}, actionIconProps), void 0) }), void 0) }), void 0)) : null] }), void 0));
+    var _p = (0, utils_1.getTagSizeTheme)(theme, size), clearableIconSize = _p.clearableIconSize, clearableIconButtonSize = _p.clearableIconButtonSize, clearableIconButtonBorderRadius = _p.clearableIconButtonBorderRadius;
+    var actionIconButtonOverrides = {
+        BaseButton: {
+            style: (0, tslib_1.__assign)({ height: clearableIconButtonSize, width: clearableIconButtonSize }, (0, longHandHelpers_1.borderRadius)(clearableIconButtonBorderRadius)),
+        },
+    };
+    var locale = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__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 && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({}, sharedProps, startEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }), void 0)), (0, jsx_runtime_1.jsx)(Text, (0, tslib_1.__assign)({ title: titleText }, sharedProps, textProps, { children: children }), void 0), closeable ? ((0, jsx_runtime_1.jsx)(Action, (0, tslib_1.__assign)({ "aria-hidden": true, role: "presentation", onClick: onActionClick }, sharedProps, (0, omit_1.default)(actionProps, 'tabIndex'), { children: (0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__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: (0, jsx_runtime_1.jsx)(ActionIcon, (0, tslib_1.__assign)({ size: clearableIconSize }, actionIconProps), void 0) }), void 0) }), void 0)) : null] }), void 0));
 });
 Tag.displayName = 'Tag';
 exports.default = Tag;

package/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/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/tag/utils.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTextFromChildren = void 0;
+exports.getTagSizeTheme = exports.tagSizeMap = exports.getDefaultTagSize = exports.getTextFromChildren = void 0;
 var tslib_1 = require("tslib");
 var React = (0, tslib_1.__importStar)(require("react"));
+var themeHelpers_1 = require("../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
@@ -22,3 +23,68 @@ function getTextFromChildren(children) {
     return childList.join('');
 }
 exports.getTextFromChildren = getTextFromChildren;
+var getDefaultTagSize = function (theme) {
+    switch (theme.density) {
+        case 'COMFORTABLE':
+            return 'sm';
+        case 'SPACIOUS':
+            return 'sm';
+        case 'COMPACT':
+            return 'xxxs';
+        default:
+            return 'lg';
+    }
+};
+exports.getDefaultTagSize = getDefaultTagSize;
+exports.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',
+    },
+};
+var getTagSizeTheme = function (theme, size) {
+    var _a, _b;
+    return (_b = (_a = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'tag', size, (0, exports.getDefaultTagSize)(theme))) !== null && _a !== void 0 ? _a : exports.tagSizeMap[size]) !== null && _b !== void 0 ? _b : exports.tagSizeMap[(0, exports.getDefaultTagSize)(theme)];
+};
+exports.getTagSizeTheme = getTagSizeTheme;

package/textarea/basewebAdapters.js

@@ -17,7 +17,7 @@ function useTextareaAdapter(props) {
     var handleChange = (0, useDebouncedEventHandler_1.useDebouncedEventHandler)((_a = props.debouncedOnChange) !== null && _a !== void 0 ? _a : noop_1.default, props.onChange, props.debounceInterval || 200);
     var overrides = (0, useConvertOverrides_1.useConvertOverrides)({
         Root: {
-            style: [(0, tslib_1.__assign)({ backgroundColor: 'transparent' }, (0, longHandHelpers_1.borderStyle)('none'))],
+            style: [(0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: 'transparent' }, (0, longHandHelpers_1.borderStyle)('none')), (0, longHandHelpers_1.borderRadius)('0px'))], // overriding baseweb borderRadius
         },
         InputContainer: {
             style: inputContainerStyles,
@@ -25,7 +25,7 @@ function useTextareaAdapter(props) {
         },
         Input: {
             style: styled_components_1.getTextareaInputStyles,
-            props: (0, tslib_1.__assign)({ $autoSize: autoSize }, sharedProps),
+            props: (0, tslib_1.__assign)({ $autoSize: autoSize, 'aria-required': restProps['aria-required'] }, sharedProps),
         },
     }, restProps.overrides);
     var rows = autoSize && !restProps.rows ? 1 : restProps.rows;

package/textarea/textarea.js

@@ -20,7 +20,7 @@ var Textarea = function (props) {
         inputRef: autoFocusRef,
     });
     var adaptedProps = (0, basewebAdapters_1.default)(restProps);
-    return (0, jsx_runtime_1.jsx)(textarea_1.Textarea, (0, tslib_1.__assign)({}, adaptedProps, { inputRef: inputRef }), void 0);
+    return ((0, jsx_runtime_1.jsx)(textarea_1.Textarea, (0, tslib_1.__assign)({}, adaptedProps, { overrides: adaptedProps.overrides, inputRef: inputRef }), void 0));
 };
 exports.Textarea = Textarea;
 exports.Textarea.displayName = 'Textarea';
@@ -28,7 +28,7 @@ var StatefulTextarea = function (props) {
     var autoFocus = props.autoFocus, restProps = (0, tslib_1.__rest)(props, ["autoFocus"]);
     var autoFocusRef = (0, useAutoFocus_1.default)({ autoFocus: autoFocus, inputRef: restProps.inputRef });
     var adaptedProps = (0, basewebAdapters_1.default)(restProps);
-    return (0, jsx_runtime_1.jsx)(textarea_1.StatefulTextarea, (0, tslib_1.__assign)({}, adaptedProps, { inputRef: autoFocusRef }), void 0);
+    return ((0, jsx_runtime_1.jsx)(textarea_1.StatefulTextarea, (0, tslib_1.__assign)({}, adaptedProps, { overrides: adaptedProps.overrides, inputRef: autoFocusRef }), void 0));
 };
 exports.StatefulTextarea = StatefulTextarea;
 exports.StatefulTextarea.displayName = 'StatefulTextarea';

package/textarea/types.d.ts

@@ -7,7 +7,7 @@ export declare type TextareaProps = SpacewebComponentProps<Omit<BaseTextareaProp
     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'];
@@ -20,7 +20,7 @@ export declare type StatefulTextareaProps = SpacewebComponentProps<Omit<BaseStat
     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;

package/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/theme/Provider.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var merge_1 = (0, tslib_1.__importDefault)(require("lodash/merge"));
+var baseui_1 = require("baseui");
+var usePrevious_1 = (0, tslib_1.__importDefault)(require("../hooks/usePrevious"));
+var useMemoizedStyletron_1 = (0, tslib_1.__importDefault)(require("../style/useMemoizedStyletron"));
+var themes_1 = (0, tslib_1.__importDefault)(require("../themes"));
+var useIsomorphicLayoutEffect_1 = require("../hooks/useIsomorphicLayoutEffect");
+var context_1 = require("./context");
+var THEME_NAMES = ['hyperspace-light', 'space-light', 'space-dark', 'hyperspace-dark'];
+var addDensityToTheme = function (theme, density) {
+    var _a;
+    return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme), { theme: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.theme), { density: density || ((_a = theme.theme) === null || _a === void 0 ? void 0 : _a.density) }) }));
+};
+var ThemeProvider = function (props) {
+    var theme = props.theme, children = props.children, elementToApplyClass = props.containerElement, density = props.density;
+    var _a = (0, tslib_1.__read)((0, react_1.useState)(null), 2), containerElementRef = _a[0], setContainerElementRef = _a[1];
+    var outerTheme = (0, context_1.useTheme)();
+    var _b = (0, tslib_1.__read)((0, useMemoizedStyletron_1.default)(), 2), baseUITheme = _b[1];
+    if (typeof outerTheme === 'undefined' && typeof theme === 'undefined') {
+        throw new Error('No Theme present in context & props');
+    }
+    var Provider = context_1.themeContext.Provider;
+    var value = (0, react_1.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 = (0, merge_1.default)({}, outerTheme, theme);
+                }
+                else {
+                    newTheme = (0, tslib_1.__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 = (0, usePrevious_1.default)(themeName), containerElement = elementToApplyClass !== null && elementToApplyClass !== void 0 ? elementToApplyClass : containerElementRef, prevContainerElement = (0, usePrevious_1.default)(containerElement);
+    (0, useIsomorphicLayoutEffect_1.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 = (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, themes_1.default[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 ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ "data-testid": "theme-provider-container", style: { display: 'contents' }, ref: setContainerElementRef }, { children: (0, jsx_runtime_1.jsx)(baseui_1.ThemeProvider, (0, tslib_1.__assign)({ theme: baseuiThemeWithDirection !== null && baseuiThemeWithDirection !== void 0 ? baseuiThemeWithDirection : baseUITheme }, { children: (0, jsx_runtime_1.jsx)(Provider, (0, tslib_1.__assign)({ value: value }, { children: children }), void 0) }), void 0) }), void 0));
+};
+exports.ThemeProvider = ThemeProvider;

package/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/theme/context.js

@@ -1,70 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeConsumer = exports.ThemeProvider = exports.useTheme = exports.themeContext = void 0;
+exports.ThemeConsumer = exports.useTheme = exports.themeContext = void 0;
 var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var merge_1 = (0, tslib_1.__importDefault)(require("lodash/merge"));
 var light_1 = (0, tslib_1.__importDefault)(require("@sprinklrjs/spaceweb-themes/hyperspace/light"));
-var baseui_1 = require("baseui");
-var usePrevious_1 = (0, tslib_1.__importDefault)(require("../hooks/usePrevious"));
-var useMemoizedStyletron_1 = (0, tslib_1.__importDefault)(require("../style/useMemoizedStyletron"));
-var themes_1 = (0, tslib_1.__importDefault)(require("../themes"));
-var useIsomorphicLayoutEffect_1 = require("../hooks/useIsomorphicLayoutEffect");
-//todo: remove default sprLight, too many tests failing on removal
 exports.themeContext = (0, react_1.createContext)(light_1.default);
 var useTheme = function () { return (0, react_1.useContext)(exports.themeContext); };
 exports.useTheme = useTheme;
-var THEME_NAMES = ['hyperspace-light', 'space-light', 'space-dark', 'hyperspace-dark'];
-var addDensityToTheme = function (theme, density) {
-    var _a;
-    return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme), { theme: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.theme), { density: density || ((_a = theme.theme) === null || _a === void 0 ? void 0 : _a.density) }) }));
-};
-var ThemeProvider = function (props) {
-    var _a;
-    var theme = props.theme, children = props.children, elementToApplyClass = props.containerElement, density = props.density;
-    var _b = (0, tslib_1.__read)((0, react_1.useState)(null), 2), containerElementRef = _b[0], setContainerElementRef = _b[1];
-    var outerTheme = (0, exports.useTheme)();
-    var _c = (0, tslib_1.__read)((0, useMemoizedStyletron_1.default)(), 2), baseUITheme = _c[1];
-    if (typeof outerTheme === 'undefined' && typeof theme === 'undefined') {
-        throw new Error('No Theme present in context & props');
-    }
-    var Provider = exports.themeContext.Provider;
-    var value = (0, react_1.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 = (0, merge_1.default)({}, outerTheme, theme);
-                }
-                else {
-                    newTheme = (0, tslib_1.__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 = (0, usePrevious_1.default)(themeName), containerElement = elementToApplyClass !== null && elementToApplyClass !== void 0 ? elementToApplyClass : containerElementRef, prevContainerElement = (0, usePrevious_1.default)(containerElement);
-    (0, useIsomorphicLayoutEffect_1.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 ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ "data-testid": "theme-provider-container", style: { display: 'contents' }, ref: setContainerElementRef }, { children: (0, jsx_runtime_1.jsx)(baseui_1.ThemeProvider, (0, tslib_1.__assign)({ theme: (_a = themes_1.default[themeName]) !== null && _a !== void 0 ? _a : baseUITheme }, { children: (0, jsx_runtime_1.jsx)(Provider, (0, tslib_1.__assign)({ value: value }, { children: children }), void 0) }), void 0) }), void 0));
-};
-exports.ThemeProvider = ThemeProvider;
 exports.ThemeConsumer = exports.themeContext.Consumer;

package/theme/index.d.ts

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

package/theme/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+(0, tslib_1.__exportStar)(require("./Provider"), exports);
 (0, tslib_1.__exportStar)(require("./context"), exports);
 (0, tslib_1.__exportStar)(require("./types"), exports);

package/time-picker/TimePicker.js

@@ -7,8 +7,11 @@ var timepicker_1 = require("baseui/timepicker");
 var select_1 = require("../select");
 var context_1 = require("../form-control/context");
 var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var style_1 = require("../style");
 var useTimePickerBasewebAdapter = function (props) {
-    var _a = (0, context_1.useContextualFormProps)(props), _b = _a.size, size = _b === void 0 ? 'md' : _b, className = _a.className, style = _a.style, intent = _a.intent, overrides = _a.overrides, clearable = _a.clearable, restProps = (0, tslib_1.__rest)(_a, ["size", "className", "style", "intent", "overrides", "clearable"]);
+    var theme = (0, style_1.useStyle)().theme;
+    var _a = (0, context_1.useContextualFormProps)(props), _b = _a.size, size = _b === void 0 ? (0, themeHelpers_1.getDefaultSize)(theme) : _b, className = _a.className, style = _a.style, intent = _a.intent, overrides = _a.overrides, clearable = _a.clearable, restProps = (0, tslib_1.__rest)(_a, ["size", "className", "style", "intent", "overrides", "clearable"]);
     var convertedOverrides = (0, useConvertOverrides_1.useConvertOverrides)({
         Select: {
             component: select_1.Select,

package/time-range-picker/RangeSelectorContainer.js

@@ -97,7 +97,7 @@ var RangeSelectorContainer = function (_a) {
                         });
                     },
                 ] }, void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ className: "my-0", variant: "bs3" }, { children: errMsg }), void 0)] }), void 0)) : null;
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, (0, tslib_1.__assign)({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, (0, tslib_1.__assign)({ variant: "bs1", "$as": "span", weight: "medium", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel }), void 0), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, (0, tslib_1.__assign)({ setTimezone: setTimezone, timezone: timezone }, timezonePickerProps), void 0))] }), void 0), (0, jsx_runtime_1.jsx)(RangeSelector_1.default, { overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown }, void 0), (0, jsx_runtime_1.jsxs)(Footer, (0, tslib_1.__assign)({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: "justify-between" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, (0, tslib_1.__assign)({}, footerBeforeEnhancerProps), void 0), (0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: [(0, classNames_1.default)({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, (0, tslib_1.__assign)({ className: "flex self-end" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ size: "sm", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), (0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ size: "sm", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0), monthsShown === 1 ? errorEl : null] }), void 0)] }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, (0, tslib_1.__assign)({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, (0, tslib_1.__assign)({ variant: "bs1", "$as": "span", weight: "medium", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel }), void 0), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, (0, tslib_1.__assign)({ setTimezone: setTimezone, timezone: timezone }, timezonePickerProps), void 0))] }), void 0), (0, jsx_runtime_1.jsx)(RangeSelector_1.default, { overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown }, void 0), (0, jsx_runtime_1.jsx)(Footer, (0, tslib_1.__assign)({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "justify-between w-0 flex-grow flex" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, (0, tslib_1.__assign)({}, footerBeforeEnhancerProps), void 0), (0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: [(0, classNames_1.default)({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, (0, tslib_1.__assign)({ className: "flex self-end" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ size: "sm", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), (0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ size: "sm", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0), monthsShown === 1 ? errorEl : null] }), void 0)] }), void 0) }), void 0)] }), void 0));
 };
 RangeSelectorContainer.displayName = 'RangeSelectorContainer';
 exports.default = RangeSelectorContainer;