@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/switch/styled-components.js

@@ -5,10 +5,9 @@ var tslib_1 = require("tslib");
 var helpers_1 = require("../helpers");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var intentHelper_1 = require("../helpers/intentHelper");
-var commonStyles_1 = require("../helpers/commonStyles");
 var getTrackBackgroundColor = function (utils, props) {
     var theme = utils.theme;
-    var $disabled = props.$disabled, $checked = props.$checked, $isFocusVisible = props.$isFocusVisible, $isHovered = props.$isHovered;
+    var $disabled = props.$disabled, $checked = props.$checked;
     if ($disabled) {
         if ($checked) {
             return (0, helpers_1.hex2rgb)((0, intentHelper_1.intentColor)(utils, props), '0.5');
@@ -18,19 +17,12 @@ var getTrackBackgroundColor = function (utils, props) {
     if ($checked) {
         return (0, intentHelper_1.intentColor)(utils, props);
     }
-    if ($isHovered || $isFocusVisible) {
-        return (0, helpers_1.hex2rgb)(theme.spr.interactive01, '0.2');
-    }
-    return theme.spr.ui03;
+    return theme.spr.icon03;
 };
 var getToggleTrackOverrides = function (utils, props) {
-    var px2rem = utils.px2rem;
-    var $size = props.$size, $isFocusVisible = props.$isFocusVisible;
-    var styles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ boxSizing: 'border-box', height: px2rem(16), width: px2rem(28), backgroundColor: getTrackBackgroundColor(utils, props) }, (0, longHandHelpers_1.borderRadius)(px2rem(27))), (0, longHandHelpers_1.margin)(0)), ($isFocusVisible
-        ? (0, tslib_1.__assign)({}, (0, commonStyles_1.getOutlineStyles)(utils, {
-            $outlineOffset: '2px',
-            $outlineWidth: '2px',
-        })) : {}));
+    var px2rem = utils.px2rem, getStyle = utils.getStyle;
+    var $size = props.$size, $isFocusVisible = props.$isFocusVisible, $isHovered = props.$isHovered, $checked = props.$checked, $disabled = props.$disabled;
+    var styles = (0, tslib_1.__assign)((0, tslib_1.__assign)({ height: px2rem(16), width: px2rem(28), backgroundColor: getTrackBackgroundColor(utils, props) }, (0, longHandHelpers_1.borderRadius)(px2rem(27))), { boxShadow: 'none' });
     switch ($size) {
         case 'lg':
             styles.height = px2rem(20);
@@ -43,17 +35,18 @@ var getToggleTrackOverrides = function (utils, props) {
         default:
             break;
     }
-    return styles;
+    return getStyle([
+        'box-border border-1 m-0 border-transparent border-solid flex-none',
+        ($isHovered || $isFocusVisible) && !$checked && !$disabled ? 'spr-border-06' : '',
+        $isFocusVisible ? 'outline-01' : '',
+        styles,
+    ]);
 };
 exports.getToggleTrackOverrides = getToggleTrackOverrides;
 var getToggleOverrides = function (utils, props) {
-    var px2rem = utils.px2rem, direction = utils.direction, theme = utils.theme;
+    var px2rem = utils.px2rem, theme = utils.theme, getStyle = utils.getStyle;
     var $size = props.$size, $checked = props.$checked, $disabled = props.$disabled, $isFocusVisible = props.$isFocusVisible;
-    var styles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ boxSizing: 'border-box', backgroundColor: $disabled ? theme.spr.ui03 : theme.spr.ui01, alignItems: 'center', display: 'flex', height: px2rem(12), width: px2rem(12) }, (0, longHandHelpers_1.margin)(px2rem(2))), (0, longHandHelpers_1.borderRadius)('50%')), { transform: $checked ? "translateX(".concat(direction === 'rtl' ? '-100%' : '100%', ")") : '', transition: 'transform 200ms' }), ($isFocusVisible
-        ? {
-            boxShadow: 'none',
-        }
-        : {}));
+    var styles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: $disabled ? theme.spr.ui03 : theme.spr.ui01, height: px2rem(12), width: px2rem(12) }, (0, longHandHelpers_1.margin)(px2rem(1))), (0, longHandHelpers_1.borderRadius)('50%')), { transform: $checked ? 'translateX(100%)' : '', transition: 'transform 200ms', boxShadow: 'none' });
     switch ($size) {
         case 'lg':
             styles.height = styles.width = px2rem(16);
@@ -64,7 +57,7 @@ var getToggleOverrides = function (utils, props) {
         default:
             break;
     }
-    return styles;
+    return getStyle(['flex items-center box-border', styles]);
 };
 exports.getToggleOverrides = getToggleOverrides;
 var getLabelOverrides = function (_a, _b) {

package/switch/switch.js

@@ -6,15 +6,18 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var checkbox_1 = require("../checkbox");
 var checkbox_2 = require("baseui/checkbox");
 var basewebAdapter_1 = require("./basewebAdapter");
+var useCombinedRef_1 = require("../hooks/useCombinedRef");
 var Switch = function (props) {
     var _a = (0, basewebAdapter_1.useSwitchAdapter)(props), overrides = _a.overrides, restProps = (0, tslib_1.__rest)(_a, ["overrides"]);
-    return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, (0, tslib_1.__assign)({ overrides: overrides, "data-spaceweb": "Switch", checkmarkType: checkbox_2.STYLE_TYPE.toggle_round, labelPlacement: "right" }, restProps), void 0));
+    var inputRefObj = (0, useCombinedRef_1.useCombineRefObjects)(props.inputRef);
+    return ((0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, (0, tslib_1.__assign)({ overrides: overrides, "data-spaceweb": "Switch", checkmarkType: checkbox_2.STYLE_TYPE.toggle_round, labelPlacement: "right" }, restProps, { inputRef: inputRefObj }), void 0));
 };
 exports.Switch = Switch;
 exports.Switch.displayName = 'Switch';
 var StatefulSwitch = function (props) {
     var _a = (0, basewebAdapter_1.useSwitchAdapter)(props), overrides = _a.overrides, restProps = (0, tslib_1.__rest)(_a, ["overrides"]);
-    return ((0, jsx_runtime_1.jsx)(checkbox_1.StatefulCheckbox, (0, tslib_1.__assign)({ overrides: overrides, "data-spaceweb": "StatefulSwitch", checkmarkType: checkbox_2.STYLE_TYPE.toggle_round, labelPlacement: "right" }, restProps), void 0));
+    var inputRefObj = (0, useCombinedRef_1.useCombineRefObjects)(props.inputRef);
+    return ((0, jsx_runtime_1.jsx)(checkbox_1.StatefulCheckbox, (0, tslib_1.__assign)({ overrides: overrides, "data-spaceweb": "StatefulSwitch", checkmarkType: checkbox_2.STYLE_TYPE.toggle_round, labelPlacement: "right" }, restProps, { inputRef: inputRefObj }), void 0));
 };
 exports.StatefulSwitch = StatefulSwitch;
 exports.StatefulSwitch.displayName = 'StatefulSwitch';

package/switch/types.d.ts

@@ -1,8 +1,7 @@
-import { CheckboxProps as BaseSwitchProps, StatefulCheckboxProps as BaseStatefulSwitchProps } from 'baseui/checkbox';
+import { CheckboxProps as BaseSwitchProps, StatefulCheckboxProps as BaseStatefulSwitchProps } from '../checkbox';
 import { SharedProps as BaseSharedProps } from 'baseui/input';
-import { OutlineProps } from '../helpers/commonStyles';
 import { Override } from '../overrides';
-import { Intent, SpacewebComponentProps } from '../types';
+import { Intent } from '../types';
 export declare type SwitchSize = 'sm' | 'md' | 'lg';
 export declare type LabelPlacement = 'left' | 'right' | 'top' | 'bottom';
 export declare type SharedProps = BaseSharedProps & {
@@ -12,17 +11,15 @@ export declare type SharedProps = BaseSharedProps & {
     $isHovered: boolean;
     $size: SwitchSize;
 };
-export declare type SwitchProps = SpacewebComponentProps<Omit<BaseSwitchProps, 'overrides' | 'size' | 'intent'>> & {
+export declare type SwitchProps = Omit<BaseSwitchProps, 'overrides' | 'size'> & {
     size?: SwitchSize;
-    intent?: Intent;
     overrides?: {
-        [key in keyof BaseSwitchProps['overrides']]?: Override<SharedProps>;
+        [key in keyof Required<BaseSwitchProps>['overrides']]?: Override<SharedProps>;
     };
-} & OutlineProps;
-export declare type StatefulSwitchProps = SpacewebComponentProps<Omit<BaseStatefulSwitchProps, 'overrides' | 'size' | 'intent'>> & {
+};
+export declare type StatefulSwitchProps = Omit<BaseStatefulSwitchProps, 'overrides' | 'size'> & {
     size?: SwitchSize;
-    intent?: Intent;
     overrides?: {
-        [key in keyof BaseStatefulSwitchProps['overrides']]?: Override<SharedProps>;
+        [key in keyof Required<BaseStatefulSwitchProps>['overrides']]?: Override<SharedProps>;
     };
-} & OutlineProps;
+};

package/tag/avatar-tag.js

@@ -4,23 +4,30 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var avatar_1 = require("../avatar");
-var longHandHelpers_1 = require("../helpers/longHandHelpers");
-var themeHelpers_1 = require("../helpers/themeHelpers");
 var tag_1 = (0, tslib_1.__importDefault)(require("./tag"));
-var tagRootStyles = function (_a) {
-    var theme = _a.theme, px2rem = _a.px2rem;
-    var tagBorderRadius = (0, themeHelpers_1.getComponentTheme)(theme, 'multiSelect').tagBorderRadius;
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (tagBorderRadius && (0, longHandHelpers_1.borderRadius)(tagBorderRadius))), { marginLeft: px2rem(4) });
-};
-var avatarRootStyles = function (_a) {
-    var theme = _a.theme;
-    var avatarMarginLeft = (0, themeHelpers_1.getComponentTheme)(theme, 'tag').avatarMarginLeft;
-    return { marginLeft: avatarMarginLeft };
-};
+var style_1 = require("../style");
+var utils_1 = require("./utils");
 var AvatarTag = function (props) {
-    var avatarProps = props.avatarProps, startEnhancer = props.startEnhancer, className = props.className, tagProps = (0, tslib_1.__rest)(props, ["avatarProps", "startEnhancer", "className"]);
-    var startEnhancerOverride = (0, react_1.useCallback)(function (sharedProps) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer, (0, jsx_runtime_1.jsx)(avatar_1.Avatar, (0, tslib_1.__assign)({ size: "sm" }, avatarProps, { className: [avatarRootStyles, avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className] }), void 0)] }, void 0)); }, [avatarProps, startEnhancer]);
-    var mergedClassName = (0, react_1.useMemo)(function () { return [tagRootStyles, className]; }, [className]);
-    return (0, jsx_runtime_1.jsx)(tag_1.default, (0, tslib_1.__assign)({ size: "lg", startEnhancer: startEnhancerOverride, className: mergedClassName }, tagProps), void 0);
+    var avatarProps = props.avatarProps, startEnhancer = props.startEnhancer, className = props.className, _size = props.size, tagProps = (0, tslib_1.__rest)(props, ["avatarProps", "startEnhancer", "className", "size"]);
+    var theme = (0, style_1.useStyle)().theme;
+    var size = _size !== null && _size !== void 0 ? _size : (0, utils_1.getDefaultTagSize)(theme);
+    var avatarIconSize = (0, utils_1.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 = (0, react_1.useCallback)(function (sharedProps) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer, (0, jsx_runtime_1.jsx)(avatar_1.Avatar, (0, tslib_1.__assign)({ size: avatarIconSize }, avatarProps, { className: [avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className] }), void 0)] }, void 0)); }, [avatarProps, startEnhancer, avatarIconSize]);
+    var mergedClassName = (0, react_1.useMemo)(function () { return [className]; }, [className]);
+    return ((0, jsx_runtime_1.jsx)(tag_1.default, (0, tslib_1.__assign)({ overrides: customTagOverrides, size: size, startEnhancer: startEnhancerOverride, className: mergedClassName }, tagProps), void 0));
 };
 exports.default = AvatarTag;

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,10 +25,10 @@ function useTextareaAdapter(props) {
         },
         Input: {
             style: styled_components_1.getTextareaInputStyles,
-            props: (0, tslib_1.__assign)({ onChange: handleChange, $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;
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: overrides, rows: rows });
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: overrides, rows: rows, onChange: handleChange });
 }
 exports.default = useTextareaAdapter;

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

@@ -9,6 +9,7 @@ var useAutoFocus_1 = (0, tslib_1.__importDefault)(require("../hooks/useAutoFocus
 var useAutoSizeTextarea_1 = (0, tslib_1.__importDefault)(require("./useAutoSizeTextarea"));
 // @ts-ignore
 textarea_1.Textarea.displayName = 'BaseUITextarea';
+// @ts-ignore
 textarea_1.StatefulTextarea.displayName = 'BaseUIStatefulTextarea';
 var Textarea = function (props) {
     var autoFocus = props.autoFocus, restProps = (0, tslib_1.__rest)(props, ["autoFocus"]);
@@ -19,20 +20,15 @@ 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';
 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 inputRef = (0, useAutoSizeTextarea_1.default)({
-        value: restProps.value,
-        autoSize: restProps.autoSize,
-        inputRef: autoFocusRef,
-    });
     var adaptedProps = (0, basewebAdapters_1.default)(restProps);
-    return (0, jsx_runtime_1.jsx)(textarea_1.StatefulTextarea, (0, tslib_1.__assign)({}, adaptedProps, { inputRef: inputRef }), 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

@@ -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/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 {};