@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

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) {
@@ -73,12 +66,10 @@ var getLabelOverrides = function (_a, _b) {
     var styles = {
         fontSize: px2rem(13),
         color: $disabled ? theme.spr.text02 : theme.spr.text01,
-        paddingLeft: px2rem(8),
         wordBreak: 'break-word',
     };
     if ($size === 'lg') {
         styles.fontSize = px2rem(14);
-        styles.paddingLeft = px2rem(10);
     }
     if ($size === 'sm') {
         styles.fontSize = px2rem(12);

package/switch/switch.js

@@ -4,17 +4,20 @@ exports.StatefulSwitch = exports.Switch = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var checkbox_1 = require("../checkbox");
-var checkbox_2 = require("baseui/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 { SharedProps as BaseSharedProps } from 'baseui/input';
-import { OutlineProps } from '../helpers/commonStyles';
+import { CheckboxProps as BaseSwitchProps, StatefulCheckboxProps as BaseStatefulSwitchProps } from '../checkbox';
+import { SharedProps as BaseSharedProps } from '../baseui/input';
 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/tabs/contexts.d.ts

@@ -8,5 +8,5 @@ export declare const useStatefulTabsContext: () => {
     activeTabId: Key;
     onChange: ChangEventHandler;
 };
-export declare const TabListContext: import("react").Context<Pick<TabListProps, "position" | "overrides" | "onChange" | "variant" | "activeTabId">>;
-export declare const useTabListContext: () => Pick<TabListProps, "position" | "overrides" | "onChange" | "variant" | "activeTabId">;
+export declare const TabListContext: import("react").Context<Pick<TabListProps, "position" | "onChange" | "overrides" | "variant" | "activeTabId">>;
+export declare const useTabListContext: () => Pick<TabListProps, "position" | "onChange" | "overrides" | "variant" | "activeTabId">;

package/tabs/styled-components.d.ts

@@ -5,6 +5,6 @@ export declare const Root: (props: PropsWithChildren<SharedPropsTabs>) => ReactE
 export declare const tabsStyles: (utils: any, { $variant, $position }: {
     $variant: any;
     $position: any;
-}) => string;
+}) => any;
 export declare const tabStyle: StyleFn<SharedPropsTab>;
 export declare const StyledTabsPanel: import("../style/styled").StyledComponent;

package/tabs/tab-list.js

@@ -37,7 +37,8 @@ var TabList = function (props) {
             })
             : null;
     }, [handleKeyDown, activeTabId, statefulTabsContext]);
-    return ((0, jsx_runtime_1.jsx)(contexts_1.TabListContext.Provider, (0, tslib_1.__assign)({ value: contextValue }, { children: (0, jsx_runtime_1.jsx)(TabListComp, (0, tslib_1.__assign)({ "data-spaceweb": "tablist", role: "tablist", ref: parentElementRef }, restProps, sharedProps, tabListProps, { className: [styled_components_1.tabsStyles, className] }, { children: react_1.Children.map(props.children, renderTabChild) }), void 0) }), void 0));
+    var validChildren = react_1.Children.toArray(props.children).filter(react_1.isValidElement);
+    return ((0, jsx_runtime_1.jsx)(contexts_1.TabListContext.Provider, (0, tslib_1.__assign)({ value: contextValue }, { children: (0, jsx_runtime_1.jsx)(TabListComp, (0, tslib_1.__assign)({ "data-spaceweb": "tablist", role: "tablist", ref: parentElementRef }, restProps, sharedProps, tabListProps, { className: [styled_components_1.tabsStyles, className] }, { children: validChildren.map(renderTabChild) }), void 0) }), void 0));
 };
 exports.TabList = TabList;
 exports.TabList.displayName = 'TabList';

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/intentStyles.d.ts

@@ -1,4 +1,8 @@
 import { Theme } from '@sprinklrjs/spaceweb-themes/types';
 import { StyleObject } from '../types';
 import { Intent, Variant } from './types';
-export declare const getIntentStyles: (theme: Theme, intent: Intent, variant: Variant) => StyleObject;
+export declare const getIntentStyles: (theme: Theme, intent: Intent, variant: Variant) => {
+    styles: StyleObject;
+    hoverStyles: StyleObject;
+    activeStyles: StyleObject;
+};

package/tag/intentStyles.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getIntentStyles = void 0;
+var tslib_1 = require("tslib");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var getColorMap = function (theme) { return ({
     default: {
         solid: {
@@ -72,18 +74,42 @@ var getColorMap = function (theme) { return ({
             fontHover: theme.spr.clrOrange,
         },
     },
+    ai: {
+        solid: {
+            bg: theme.spr.ui01,
+            bgHover: theme.ai.highlight,
+            bgActive: theme.spr.ui01,
+            borderHover: theme.spr.clrViolet,
+            borderActive: theme.spr.clrViolet,
+            boxShadowActive: 'none',
+            boxShadowHover: 'none',
+            font: theme.spr.text01,
+            fontHover: theme.spr.text01,
+        },
+        light: {
+            bg: theme.spr.ui01,
+            bgHover: theme.ai.highlight,
+            bgActive: theme.spr.ui01,
+            borderHover: theme.spr.clrViolet,
+            borderActive: theme.spr.clrViolet,
+            boxShadowActive: 'none',
+            boxShadowHover: 'none',
+            font: theme.spr.text01,
+            fontHover: theme.spr.text01,
+        },
+    },
 }); };
 var getIntentStyles = function (theme, intent, variant) {
     var _a;
     var colorMap = getColorMap(theme);
     var variantStyles = (_a = colorMap[intent]) === null || _a === void 0 ? void 0 : _a[variant];
     return {
-        backgroundColor: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bg,
-        color: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.font,
-        '&:hover': {
-            backgroundColor: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bgHover,
-            color: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.fontHover,
+        styles: {
+            backgroundColor: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bg,
+            color: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.font,
         },
+        hoverStyles: (0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bgHover, color: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.fontHover }, ((variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.borderHover) && (0, longHandHelpers_1.borderColor)(variantStyles.borderHover))), ((variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.boxShadowHover) && { boxShadow: variantStyles.boxShadowHover })),
+        activeStyles: (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, ((variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.borderActive) && (0, longHandHelpers_1.borderColor)(variantStyles.borderActive))), ((variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bgActive) && { backgroundColor: variantStyles.bgActive })), ((variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.boxShadowActive) && { boxShadow: variantStyles.boxShadowActive })),
     };
 };
 exports.getIntentStyles = getIntentStyles;

package/tag/styled-components.js

@@ -3,47 +3,53 @@ 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 typographyStyles = $intent === 'default'
+    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' || $intent === 'ai'
         ? (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', 
+    var _d = (0, intentStyles_1.getIntentStyles)(theme, $intent, $variant), intentStyles = _d.styles, intentHoverStyles = _d.hoverStyles, intentActiveStyles = _d.activeStyles;
+    var hoverStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({ boxShadow: 'inset 0px 0px 100px rgba(0, 0, 0, 0.08)' }, (0, longHandHelpers_1.borderColor)(theme.spr.border06)), intentHoverStyles);
+    var activeStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(theme.spr.interactive01)), intentActiveStyles);
+    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)), intentStyles), ($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 button_1 = require("../button");
-var themeHelpers_1 = require("../helpers/themeHelpers");
+var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
 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 base_button_1 = require("../base-button");
 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,10 @@ 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 = (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)(base_button_1.BaseButton, (0, tslib_1.__assign)({ type: "button", className: ['hover:spr-clr-grey', actionIconButtonOverrides], "aria-label": locale.tag.closeAriaLabel, 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

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { AvatarProps } from '../avatar';
 import { Override } from '../overrides';
 import { ClassName } from '../types';
-export declare type Intent = 'success' | 'error' | 'warning' | 'info' | 'default';
+export declare type Intent = 'success' | 'error' | 'warning' | 'info' | 'default' | 'ai';
 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;