@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/tag/avatar-tag.js

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

package/esm/tag/constants.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from '@sprinklrjs/spaceweb-themes/types';
+export declare const TAG_INTENT_TO_BG_COLOR: {
+    readonly info: (theme: Theme) => "#0E3386" | "#D3E8FF";
+    readonly review: (theme: Theme) => "#8A3700" | "#FFDFCA";
+};
+export declare const STATUS_ENHANCER_INTENT_TO_BG_COLOR: {
+    readonly default: (theme: Theme) => string;
+    readonly info: () => string;
+    readonly error: (theme: Theme) => string;
+    readonly warning: (theme: Theme) => string;
+    readonly success: (theme: Theme) => string;
+    readonly review: () => string;
+};

package/esm/tag/constants.js

@@ -0,0 +1,14 @@
+// intent to tag background color for non-standard intents
+export var TAG_INTENT_TO_BG_COLOR = {
+    info: function (theme) { var _a; return (((_a = theme.name) === null || _a === void 0 ? void 0 : _a.includes('dark')) ? '#0E3386' : '#D3E8FF'); },
+    review: function (theme) { var _a; return (((_a = theme.name) === null || _a === void 0 ? void 0 : _a.includes('dark')) ? '#8A3700' : '#FFDFCA'); },
+};
+// intent to background color for status enhancer, hardcoded values for non-standard intents
+export var STATUS_ENHANCER_INTENT_TO_BG_COLOR = {
+    default: function (theme) { return theme.spr.ui06; },
+    info: function () { return '#3188FF'; },
+    error: function (theme) { return theme.spr.bgError; },
+    warning: function (theme) { return theme.spr.bgWarning; },
+    success: function (theme) { return theme.spr.bgSuccess; },
+    review: function () { return '#FF7D26'; },
+};

package/esm/tag/cvaConfigs.d.ts

@@ -0,0 +1,5 @@
+export declare const tagActionCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const tagTextCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const tagRootCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const tagStartEnhancerCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const tagStatusEnhancerCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;

package/esm/tag/cvaConfigs.js

@@ -0,0 +1,221 @@
+import { cvaWrapper } from '../style/cvaWrapper';
+export var tagActionCVA = cvaWrapper('tag', 'action', [
+    'cursor-pointer inline-flex items-center justify-center',
+    {
+        variants: {
+            $size: {
+                xxxs: 'mx-0.75',
+                sm: 'mx-1.25',
+                lg: 'mx-1.75',
+                small: 'ml-1 -mr-px',
+                medium: 'ml-1',
+                large: 'ml-2',
+            },
+        },
+        defaultVariants: {
+            $size: 'lg',
+        },
+    },
+]);
+export var tagTextCVA = cvaWrapper('tag', 'text', [
+    'truncate max-w-32',
+    {
+        variants: {
+            $size: {
+                xxxs: 'text-13 leading-4',
+                sm: 'text-14 leading-4.5',
+                lg: 'text-16 leading-4.5',
+                small: 'text-14 leading-150',
+                medium: 'text-14 leading-150',
+                large: 'text-14 leading-150',
+            },
+        },
+        defaultVariants: {
+            $size: 'lg',
+        },
+    },
+]);
+export var tagRootCVA = cvaWrapper('tag', 'root', [
+    'inline-flex items-center box-border m-0 border-solid border-transparent border text-12 leading-4 font-400 max-w-none',
+    {
+        variants: {
+            $size: {
+                xxxs: 'py-px h-4.5 rounded-4 pl-1.5 pr-0',
+                sm: 'py-0.5 h-5.5 rounded-5 pl-2 pr-0',
+                lg: 'py-1.75 h-8.5 rounded-6 pl-3 pr-1',
+                small: 'h-6 rounded-4 pl-1',
+                medium: 'h-8 rounded-8 pl-2 pr-1',
+                large: 'h-10 rounded-8 pl-3 pr-2',
+            },
+            $shape: {
+                default: '',
+                pill: 'rounded-24',
+            },
+            $withStartEnhancer: {
+                true: 'pl-0',
+            },
+            $closeable: {
+                true: 'pr-0',
+            },
+            $intent: {
+                default: 'spr-bg-secondary spr-text-primary font-normal',
+                // these are classes for default 'light' variant
+                error: 'spr-bg-error-highlight spr-text-primary font-normal',
+                info: 'bg-[--sw-bg-color] spr-text-primary font-normal',
+                success: 'spr-bg-success-highlight spr-text-primary font-normal',
+                warning: 'spr-bg-warning-highlight spr-text-primary font-normal',
+                ai: 'spr-border-03 spr-text-02 spr-ui-01 font-normal',
+            },
+            $variant: {
+                solid: '',
+                light: '',
+            },
+            $appearance: {
+                gray: '',
+                white: '',
+                outline: 'spr-border-primary',
+            },
+            $clickable: {
+                true: 'cursor-pointer hover:spr-border-quaternary active:spr-border-quinary focus-visible:outline ' +
+                    'focus-visible:outline-offset-2 focus-visible:outline-2 focus-visible:outline-[--spr-focus-01]',
+            },
+            $isHovered: {
+                true: 'spr-border-quaternary',
+            },
+            $isFocused: {
+                true: 'spr-border-quinary',
+            },
+            $isFocusVisible: {
+                true: 'focus:spr-border-quaternary',
+            },
+        },
+        defaultVariants: {
+            $size: 'lg',
+            $closeable: true,
+            $withStartEnhancer: false,
+            $withChildren: true,
+            $intent: 'default',
+            $appearance: 'gray',
+            $variant: 'light',
+        },
+        compoundVariants: [
+            // pill styles
+            { $shape: 'pill', $size: 'small', className: 'pr-1 pl-2' },
+            { $shape: 'pill', $size: 'medium', className: 'pr-2 pl-3' },
+            { $shape: 'pill', $size: 'large', className: 'pr-2 pl-3' },
+            // closeable styles
+            { $shape: 'pill', $closeable: false, $size: 'small', className: 'pr-2' },
+            { $shape: 'pill', $closeable: false, $size: 'medium', className: 'pr-3' },
+            { $shape: 'pill', $closeable: false, $size: 'large', className: 'pr-3' },
+            { $shape: 'default', $closeable: false, $size: 'small', className: 'pr-1' },
+            { $shape: 'default', $closeable: false, $size: 'medium', className: 'pr-2' },
+            { $shape: 'default', $closeable: false, $size: 'large', className: 'pr-2' },
+            { $shape: 'pill', $closeable: true, $size: 'small', className: 'pr-1' },
+            { $shape: 'pill', $closeable: true, $size: 'medium', className: 'pr-2' },
+            { $shape: 'pill', $closeable: true, $size: 'large', className: 'pr-2' },
+            { $shape: 'default', $closeable: true, $size: 'small', className: 'pr-0' },
+            { $shape: 'default', $closeable: true, $size: 'medium', className: 'pr-1' },
+            { $shape: 'default', $closeable: true, $size: 'large', className: 'pr-1' },
+            { $closeable: false, $size: 'xxxs', className: 'pr-1.5' },
+            { $closeable: false, $size: 'sm', className: 'pr-2' },
+            { $closeable: false, $size: 'lg', className: 'pr-3' },
+            // appearance styles
+            { $appearance: 'white', $intent: 'default', className: 'spr-bg-primary' },
+            { $appearance: 'outline', $intent: 'default', className: 'spr-bg-primary' },
+            // solid styles
+            { $intent: 'error', $variant: ['solid'], className: 'spr-clr-red spr-text-05' },
+            { $intent: 'info', $variant: ['solid'], className: 'spr-clr-sea spr-text-primary' },
+            { $intent: 'success', $variant: ['solid'], className: 'spr-clr-green spr-text-primary' },
+            { $intent: 'warning', $variant: ['solid'], className: 'spr-clr-orange spr-text-primary' },
+            // --- :hover styles when clickable is true
+            {
+                $intent: 'error',
+                $variant: ['solid'],
+                $clickable: true,
+                className: 'hover:spr-clr-red hover:spr-text-05',
+            },
+            {
+                $intent: 'info',
+                $variant: ['solid'],
+                $clickable: true,
+                className: 'hover:spr-clr-sea hover:spr-text-01',
+            },
+            {
+                $intent: 'success',
+                $variant: ['solid'],
+                $clickable: true,
+                className: 'hover:spr-clr-green hover:spr-text-01',
+            },
+            {
+                $intent: 'warning',
+                $variant: ['solid'],
+                $clickable: true,
+                className: 'hover:spr-clr-orange hover:spr-text-01',
+            },
+            // --- :focus styles when $isFocusVisible is true
+            {
+                $intent: 'error',
+                $variant: ['solid'],
+                $isFocusVisible: true,
+                className: 'focus:spr-clr-red focus:spr-text-05',
+            },
+            {
+                $intent: 'info',
+                $variant: ['solid'],
+                $isFocusVisible: true,
+                className: 'focus:spr-clr-sea focus:spr-text-01',
+            },
+            {
+                $intent: 'success',
+                $variant: ['solid'],
+                $isFocusVisible: true,
+                className: 'focus:spr-clr-green focus:spr-text-01',
+            },
+            {
+                $intent: 'warning',
+                $variant: ['solid'],
+                $isFocusVisible: true,
+                className: 'focus:spr-clr-orange focus:spr-text-01',
+            },
+            // ai intent active styles
+            {
+                $intent: 'ai',
+                $clickable: true,
+                className: 'active:ai-ui-03 active:spr-text-01 hover:spr-text-01 hover:spr-ui-01 active:before:content-none active:after:content-none',
+            },
+            {
+                $intent: 'ai',
+                $isFocused: true,
+                className: 'ai-ui-03 spr-text-01 ai-border-02 active:before:content-none active:after:content-none',
+            },
+        ],
+    },
+]);
+export var tagStartEnhancerCVA = cvaWrapper('tag', 'startEnhancer', [
+    'inline-flex items-center',
+    {
+        variants: {
+            $size: {
+                xxxs: 'ml-1.5 mr-0.5',
+                sm: 'ml-2 mr-0.75',
+                lg: 'ml-3 mr-1',
+                small: 'ml-1 mr-1',
+                medium: 'ml-2 mr-1',
+                large: 'ml-2 mr-1',
+            },
+        },
+        defaultVariants: {
+            $size: 'lg',
+        },
+        compoundVariants: [{ $withChildren: false, className: 'mr-0' }],
+    },
+]);
+export var tagStatusEnhancerCVA = cvaWrapper('tag', 'statusEnhancer', [
+    'inline-block px-1 py-1 rounded-full bg-[--sw-bg-color]',
+    {
+        compoundVariants: [{ $size: 'small', className: 'ml-1' }],
+        defaultVariants: {
+            $intent: 'default',
+        },
+    },
+]);

package/esm/tag/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Tag } from './tag';
 export { default as AvatarTag } from './avatar-tag';
+export { default as StatusTag } from './status-tag';
 export { StyledText, StyledAction, StyledRoot, StyledStartEnhancer } from './styled-components';
-export type { TagProps, TagOverrides, SharedProps, Intent, Size, Variant } from './types';
+export type { TagProps, TagOverrides, SharedProps, Intent, Appearance, Size, Variant, AvatarTagProps } from './types';

package/esm/tag/index.js

@@ -1,3 +1,4 @@
 export { default as Tag } from './tag';
 export { default as AvatarTag } from './avatar-tag';
+export { default as StatusTag } from './status-tag';
 export { StyledText, StyledAction, StyledRoot, StyledStartEnhancer } from './styled-components';

package/esm/tag/status-tag.d.ts

@@ -0,0 +1,12 @@
+import { type ReactElement } from 'react';
+import { Override } from '../overrides';
+import type { TagProps, Intent } from './types';
+type StatusTagProps = Omit<TagProps, 'appearance' | 'intent' | 'variant'> & {
+    intent?: Intent | 'review';
+    variant?: 'default' | 'minimal';
+    overrides?: TagProps['overrides'] & {
+        StyledStatusEnhancer?: Override<Record<string, any>>;
+    };
+};
+declare const StatusTag: (props: StatusTagProps) => ReactElement;
+export default StatusTag;

package/esm/tag/status-tag.js

@@ -0,0 +1,26 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import Tag from './tag';
+import { StyledStatusEnhancer } from './styled-components';
+import { useOverrides } from '../overrides';
+import { useStyle } from '../style';
+import { getDefaultTagSize } from './utils';
+import { TAG_INTENT_TO_BG_COLOR } from './constants';
+var StatusTag = function (props) {
+    var startEnhancer = props.startEnhancer, _a = props.variant, variant = _a === void 0 ? 'default' : _a, _size = props.size, intent = props.intent, _b = props.closeable, closeable = _b === void 0 ? false : _b, overrides = props.overrides, className = props.className, tagProps = __rest(props, ["startEnhancer", "variant", "size", "intent", "closeable", "overrides", "className"]);
+    var theme = useStyle().theme;
+    var size = _size !== null && _size !== void 0 ? _size : getDefaultTagSize(theme);
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StyledStatusEnhancer, StyledStatusEnhancer), 2), StyledEnhancer = _c[0], styledEnhancerProps = _c[1];
+    var startEnhancerOverride = useCallback(function (sharedProps) { return (_jsxs(_Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer, _jsx(StyledEnhancer, __assign({}, sharedProps, { "$intent": intent }, styledEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }))] })); }, [StyledEnhancer, intent, startEnhancer, styledEnhancerProps]);
+    return (_jsx(Tag, __assign({ intent: variant === 'minimal' || intent === 'review' ? 'default' : intent, appearance: variant === 'minimal' ? 'white' : 'gray', size: size, closeable: closeable, startEnhancer: startEnhancerOverride, className: [
+            size === 'small' ? 'pr-2 pl-1' : '',
+            intent === 'review' && variant === 'default' ? 'bg-[--sw-bg-color]' : '',
+            className,
+        ], style: function () {
+            return intent === 'review' && variant === 'default'
+                ? { '--sw-bg-color': TAG_INTENT_TO_BG_COLOR[intent](theme) }
+                : undefined;
+        } }, tagProps)));
+};
+export default StatusTag;

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

@@ -1,4 +1,5 @@
-export declare const StyledStartEnhancer: import("../style/styled").StyledComponent;
-export declare const StyledRoot: import("../style/styled").StyledComponent;
-export declare const StyledAction: import("../style/styled").StyledComponent;
-export declare const StyledText: import("../style/styled").StyledComponent;
+export declare const StyledStartEnhancer: import("../style").StyledComponent;
+export declare const StyledRoot: import("../style").StyledComponent;
+export declare const StyledAction: import("../style").StyledComponent;
+export declare const StyledText: import("../style").StyledComponent;
+export declare const StyledStatusEnhancer: import("../style").StyledComponent;

package/esm/tag/styled-components.js

@@ -1,52 +1,29 @@
-import { __assign } from "tslib";
-import { borderRadius as borderRadiusLonghand, borderStyle, borderColor, borderWidth, margin, } from '../helpers/longHandHelpers';
-import { getFocusVisibleStyles } from '../helpers/commonStyles';
-import { styled } from '../style';
-import { getIntentStyles } from './intentStyles';
+import { styled, styledWithCssVariables } from '../style';
+import { tagActionCVA, tagRootCVA, tagStartEnhancerCVA, tagTextCVA, tagStatusEnhancerCVA } from './cvaConfigs';
 import { getTagSizeTheme } from './utils';
-export var StyledStartEnhancer = styled('div', 'inline-flex items-center', function (_a, _b) {
-    var px2rem = _a.px2rem, theme = _a.theme;
-    var $size = _b.$size;
-    var _c = getTagSizeTheme(theme, $size), startEnhancerMarginLeft = _c.startEnhancerMarginLeft, startEnhancerMarginRight = _c.startEnhancerMarginRight;
-    return {
-        marginRight: startEnhancerMarginRight,
-        marginLeft: startEnhancerMarginLeft,
-    };
-});
-export var StyledRoot = styled('span', 'inline-flex items-center box-border', function (utils, _a) {
-    var _b;
-    var $withStartEnhancer = _a.$withStartEnhancer, $size = _a.$size, $closeable = _a.$closeable, $intent = _a.$intent, $variant = _a.$variant, $clickable = _a.$clickable, $isFocusVisible = _a.$isFocusVisible;
-    var theme = utils.theme;
-    var paddingStartDir = 'paddingLeft';
-    var paddingEndDir = 'paddingRight';
-    var _c = getTagSizeTheme(theme, $size), height = _c.height, borderRadius = _c.borderRadius, paddingX = _c.paddingX, paddingY = _c.paddingY;
-    var paddingStart = $withStartEnhancer ? '0' : paddingX;
-    var paddingEnd = $closeable ? '0' : paddingX;
-    var typographyStyles = $intent === 'default' || $intent === 'ai'
-        ? __assign(__assign({}, theme.typography.l2), { fontWeight: theme.fontWeight.normal }) : __assign(__assign({}, theme.typography.l2), { fontWeight: theme.fontWeight.semibold });
-    var _d = getIntentStyles(theme, $intent, $variant), intentStyles = _d.styles, intentHoverStyles = _d.hoverStyles, intentActiveStyles = _d.activeStyles;
-    var hoverStyles = __assign(__assign({ boxShadow: 'inset 0px 0px 100px rgba(0, 0, 0, 0.08)' }, borderColor(theme.spr.border06)), intentHoverStyles);
-    var activeStyles = __assign(__assign({}, borderColor(theme.spr.interactive01)), intentActiveStyles);
-    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign((_b = { height: height }, _b[paddingStartDir] = paddingStart, _b[paddingEndDir] = paddingEnd, _b.paddingTop = paddingY, _b.paddingBottom = paddingY, _b.maxWidth = 'none', _b), typographyStyles), margin(0)), borderStyle('solid')), borderColor(theme.borderColor.transparent)), borderWidth('1px')), borderRadiusLonghand(borderRadius)), intentStyles), ($clickable && __assign({ cursor: 'pointer', 
-        // temporary boxShadow onHover
-        ':hover': hoverStyles, ':active': activeStyles }, getFocusVisibleStyles(utils)))), { ':focus': __assign({}, ($isFocusVisible && hoverStyles)) });
-});
-export var StyledAction = styled('span', 'cursor-pointer inline-flex items-center justify-center', function (_a, _b) {
+import { STATUS_ENHANCER_INTENT_TO_BG_COLOR, TAG_INTENT_TO_BG_COLOR } from './constants';
+export var StyledStartEnhancer = styled('div', tagStartEnhancerCVA);
+export var StyledRoot = styledWithCssVariables('span', function (_a, _b) {
     var theme = _a.theme;
-    var $size = _b.$size;
-    var clearableIconMarginX = getTagSizeTheme(theme, $size).clearableIconMarginX;
+    var $size = _b.$size, $intent = _b.$intent;
+    var beforeBorderRadius = getTagSizeTheme(theme, $size).borderRadius;
+    var afterBorderRadius = "calc(".concat(beforeBorderRadius, " - ").concat(theme.borderWidth.default, ")");
+    var getTagBgColor = $intent && TAG_INTENT_TO_BG_COLOR[$intent];
     return {
-        marginRight: clearableIconMarginX,
-        marginLeft: clearableIconMarginX,
+        '--sw-before-border-radius': beforeBorderRadius,
+        '--sw-after-border-radius': afterBorderRadius,
+        '--sw-animation-play-state': 'paused',
+        '--sw-before-left': '-1px',
+        '--sw-bg-color': getTagBgColor ? getTagBgColor(theme) : undefined,
+        '--sw-shadow-focus': 'inset 0px 0px 100px rgba(0, 0, 0, 0.08)',
     };
-});
-export var StyledText = styled('span', 'truncate', function (_a, _b) {
-    var px2rem = _a.px2rem, theme = _a.theme;
-    var $size = _b.$size;
-    var _c = getTagSizeTheme(theme, $size), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
-    return {
-        maxWidth: px2rem(128),
-        fontSize: fontSize,
-        lineHeight: lineHeight,
-    };
-});
+}, tagRootCVA);
+export var StyledAction = styled('span', tagActionCVA);
+export var StyledText = styled('span', tagTextCVA);
+export var StyledStatusEnhancer = styledWithCssVariables('span', function (_a, _b) {
+    var theme = _a.theme;
+    var _c = _b.$intent, $intent = _c === void 0 ? 'default' : _c;
+    return ({
+        '--sw-bg-color': STATUS_ENHANCER_INTENT_TO_BG_COLOR[$intent](theme),
+    });
+}, tagStatusEnhancerCVA);

package/esm/tag/tag.d.ts

@@ -1,4 +1,33 @@
 /// <reference types="react" />
-import { TagProps } from './types';
-declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLElement>>;
+declare const Tag: import("react").ForwardRefExoticComponent<Omit<{
+    closeable?: boolean | undefined;
+    isFocused?: boolean | undefined;
+    isHovered?: boolean | undefined;
+    children?: import("react").ReactNode;
+    title?: string | undefined;
+    onActionClick?: ((e: Event, children?: import("react").ReactNode) => any) | undefined;
+    onActionKeyDown?: ((e: Event, children?: import("react").ReactNode) => any) | undefined;
+    onClick?: ((event: Event) => any) | undefined;
+    onKeyDown?: ((event: Event) => any) | undefined;
+    className?: import("..").ClassName;
+    overrides?: import("./types").TagOverrides | undefined;
+    startEnhancer?: import("react").ReactNode | ((props: {
+        $withStartEnhancer: boolean;
+        $withChildren: boolean;
+        $size: import("./types").Size;
+        $intent: import("./types").Intent;
+        $appearance: import("./types").Appearance;
+        $variant: import("./types").Variant;
+    }) => import("react").ReactNode);
+    intent?: import("./types").Intent | undefined;
+    appearance?: import("./types").Appearance | undefined;
+    variant?: import("./types").Variant | undefined;
+    size?: import("./types").Size | undefined;
+    shape?: import("./types").Shape | undefined;
+    noTooltipOnTruncation?: boolean | undefined;
+}, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("..").ClassName;
+    style?: import("..").Styles;
+} & import("react").RefAttributes<HTMLElement>>;
 export default Tag;

package/esm/tag/tag.js

@@ -1,20 +1,26 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// libs
 import { forwardRef, useCallback } from 'react';
 import _omit from 'lodash/omit';
-import { useFocusVisible } from '../hooks/useFocusVisible';
+// components
 import CloseIcon from '../icon/components/close';
+import { StyledAction, StyledRoot, StyledStartEnhancer, StyledText } from './styled-components';
+import { BaseButton } from '../base-button';
+import { StatefulTooltip } from '../tooltip';
+import { Box } from '../box';
+// hooks
+import { useFocusVisible } from '../hooks/useFocusVisible';
 import { useOverrides } from '../overrides';
 import { useStyle } from '../style';
-import { StyledAction, StyledRoot, StyledStartEnhancer, StyledText } from './styled-components';
-import { getDefaultTagSize, getTagSizeTheme, getTextFromChildren } from './utils';
 import { useLocale } from '../locale';
-import { borderRadius } from '../helpers/longHandHelpers';
-import { BaseButton } from '../base-button';
+import { useTruncateWithTooltip } from '../truncateWithTooltip/hooks/useTruncateWithTooltip';
+import { getActionIconButtonOverrides, getDefaultTagSize, getTagSizeTheme, getTextFromChildren } from './utils';
 var Tag = forwardRef(function (props, ref) {
-    var children = props.children, _a = props.closeable, closeable = _a === void 0 ? true : _a, _size = props.size, _b = props.isFocused, isFocused = _b === void 0 ? false : _b, _c = props.isHovered, isHovered = _c === void 0 ? false : _c, onActionClick = props.onActionClick, onActionKeyDown = props.onActionKeyDown, _d = props.onClick, onClick = _d === void 0 ? null : _d, _e = props.onKeyDown, onKeyDown = _e === void 0 ? null : _e, overrides = props.overrides, title = props.title, _f = props.variant, variant = _f === void 0 ? 'light' : _f, _g = props.intent, intent = _g === void 0 ? 'default' : _g, className = props.className, startEnhancer = props.startEnhancer, restProps = __rest(props, ["children", "closeable", "size", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "className", "startEnhancer"]);
-    var _h = useFocusVisible(), $isFocusVisible = _h.$isFocusVisible, onBlur = _h.onBlur, onFocus = _h.onFocus;
+    var children = props.children, _a = props.closeable, closeable = _a === void 0 ? true : _a, _size = props.size, _b = props.shape, shape = _b === void 0 ? 'default' : _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, _j = props.appearance, appearance = _j === void 0 ? 'gray' : _j, className = props.className, startEnhancer = props.startEnhancer, noTooltipOnTruncation = props.noTooltipOnTruncation, restProps = __rest(props, ["children", "closeable", "size", "shape", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "appearance", "className", "startEnhancer", "noTooltipOnTruncation"]);
+    var _k = useFocusVisible(), $isFocusVisible = _k.$isFocusVisible, onBlur = _k.onBlur, onFocus = _k.onFocus;
     var theme = useStyle().theme;
+    var locale = useLocale();
     var size = _size !== null && _size !== void 0 ? _size : getDefaultTagSize(theme);
     var handleKeyDown = useCallback(function (event) {
         if (event.currentTarget !== event.target) {
@@ -28,15 +34,13 @@ var Tag = forwardRef(function (props, ref) {
             onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick(event);
             onActionKeyDown === null || onActionKeyDown === void 0 ? void 0 : onActionKeyDown(event);
         }
-        if (onKeyDown) {
-            onKeyDown(event);
-        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     }, [closeable, onActionClick, onActionKeyDown, onClick, onKeyDown]);
-    var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _j[0], rootProps = _j[1];
-    var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Action, StyledAction), 2), Action = _k[0], actionProps = _k[1];
-    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ActionIcon, CloseIcon), 2), ActionIcon = _l[0], actionIconProps = _l[1];
-    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Text, StyledText), 2), Text = _m[0], textProps = _m[1];
-    var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _o[0], startEnhancerProps = _o[1];
+    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _l[0], rootProps = _l[1];
+    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Action, StyledAction), 2), Action = _m[0], actionProps = _m[1];
+    var _o = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ActionIcon, CloseIcon), 2), ActionIcon = _o[0], actionIconProps = _o[1];
+    var _p = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Text, StyledText), 2), Text = _p[0], _q = _p[1], onMouseEnter = _q.onMouseEnter, onMouseLeave = _q.onMouseLeave, textProps = __rest(_q, ["onMouseEnter", "onMouseLeave"]);
+    var _r = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer, StyledStartEnhancer), 2), StartEnhancer = _r[0], startEnhancerProps = _r[1];
     var clickable = typeof onClick === 'function';
     var sharedProps = {
         $clickable: clickable,
@@ -46,14 +50,25 @@ var Tag = forwardRef(function (props, ref) {
         $variant: variant,
         $isFocusVisible: $isFocusVisible,
         $size: size,
+        $shape: shape,
         $withStartEnhancer: !!startEnhancer,
+        $withChildren: !!children,
         $intent: intent,
+        $appearance: appearance,
+        $addHoverStyles: clickable || $isFocusVisible,
     };
     var titleText = title || getTextFromChildren(children);
-    var _p = getTagSizeTheme(theme, size), clearableIconSize = _p.clearableIconSize, clearableIconButtonSize = _p.clearableIconButtonSize, clearableIconButtonBorderRadius = _p.clearableIconButtonBorderRadius;
-    var actionIconButtonOverrides = __assign({ height: clearableIconButtonSize, width: clearableIconButtonSize }, borderRadius(clearableIconButtonBorderRadius));
-    var locale = useLocale();
-    return (_jsxs(Root, __assign({ ref: ref, "data-spaceweb": "tag", role: clickable ? 'button' : null, tabIndex: clickable ? 0 : null, onFocus: onFocus, onBlur: onBlur, className: className, onClick: onClick, onKeyDown: handleKeyDown }, sharedProps, restProps, rootProps, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }), void 0)), _jsx(Text, __assign({ title: titleText }, sharedProps, textProps, { children: children }), void 0), closeable ? (_jsx(Action, __assign({ "aria-hidden": true, role: "presentation", onClick: onActionClick }, sharedProps, _omit(actionProps, 'tabIndex'), { children: _jsx(BaseButton, __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: _jsx(ActionIcon, __assign({ size: clearableIconSize }, actionIconProps), void 0) }), void 0) }), void 0)) : null] }), void 0));
+    var clearableIconSize = getTagSizeTheme(theme, size).clearableIconSize;
+    var actionIconButtonOverrides = getActionIconButtonOverrides(size);
+    var _s = useTruncateWithTooltip(noTooltipOnTruncation, onMouseEnter, onMouseLeave), mouseEventProps = _s.mouseEventProps, renderTooltip = _s.renderTooltip, elementRef = _s.elementRef;
+    var textElement = (_jsx(Text, __assign({ ref: elementRef }, sharedProps, textProps, { children: children })));
+    return (_jsxs(Root, __assign({ ref: ref, "data-spaceweb": "tag", role: clickable ? 'button' : null, tabIndex: clickable ? 0 : null, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onKeyDown: handleKeyDown }, sharedProps, restProps, rootProps, { className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [startEnhancer && (_jsx(StartEnhancer, __assign({}, sharedProps, startEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }))), _jsx(StatefulTooltip, __assign({ content: renderTooltip ? (_jsx(Box, __assign({ "data-testid": "tooltip", className: "max-w-2xl break-words" }, { children: props.children }))) : null, size: "50vw", placement: "bottom", onMouseEnterDelay: 0, onMouseLeaveDelay: 0, accessibilityType: "tooltip" }, mouseEventProps, { children: textElement })), closeable ? (_jsx(Action, __assign({ "aria-hidden": true, role: "presentation", onClick: onActionClick }, sharedProps, _omit(actionProps, 'tabIndex'), { children: _jsx(BaseButton, __assign({ type: "button", className: [
+                        'hover:spr-bg-quaternary hover:border border-solid spr-border-quaternary hover:spr-text-primary color-[--sw-color]',
+                        actionIconButtonOverrides,
+                    ], style: {
+                        '--sw-color': theme.spr.iconTertiary,
+                    }, "aria-label": locale.tag.closeAriaLabel, tabIndex: actionProps === null || actionProps === void 0 ? void 0 : actionProps.tabIndex }, { children: _jsx(ActionIcon, __assign({ size: clearableIconSize }, actionIconProps)) })) }))) : null] })));
 });
 Tag.displayName = 'Tag';
+Tag.__standard = 'Component';
 export default Tag;