@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/avatar/styled-component.d.ts

@@ -1,35 +1,7 @@
-export declare const avatarSizeConfig: {
-    sm: {
-        size: string;
-        rectangleBorderRadius: string;
-        fontSize: string;
-    };
-    md: {
-        size: string;
-        rectangleBorderRadius: string;
-        fontSize: string;
-    };
-    lg: {
-        size: string;
-        rectangleBorderRadius: string;
-        fontSize: string;
-    };
-    xl: {
-        size: string;
-        rectangleBorderRadius: string;
-        fontSize: string;
-    };
-    xxl: {
-        size: string;
-        rectangleBorderRadius: string;
-        fontSize: string;
-    };
-    xxxl: {
-        size: string;
-        rectangleBorderRadius: string;
-        fontSize: string;
-    };
-};
+import { Size } from './types';
+export declare const getAvatarSize: (size: Size | number) => string;
+export declare const getAvatarBorderRadius: (size: Size | undefined) => string;
+export declare const getFontSize: (size: number | Size, isSingleLetterInitial: boolean) => string;
 export declare const StyledAvatarGroup: import("../style/styled").StyledComponent;
 export declare const StyledRoot: import("../style/styled").StyledComponent;
 export declare const StyledInitials: import("../style/styled").StyledComponent;

package/avatar/styled-component.js

@@ -1,26 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledAvatar = exports.StyledInitials = exports.StyledRoot = exports.StyledAvatarGroup = exports.avatarSizeConfig = void 0;
+exports.StyledAvatar = exports.StyledInitials = exports.StyledRoot = exports.StyledAvatarGroup = exports.getFontSize = exports.getAvatarBorderRadius = exports.getAvatarSize = void 0;
 var tslib_1 = require("tslib");
-var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
-var longHandHelpers_1 = require("../helpers/longHandHelpers");
-exports.avatarSizeConfig = {
-    sm: { size: '24px', rectangleBorderRadius: '6px', fontSize: '12px' },
-    md: { size: '34px', rectangleBorderRadius: '8px', fontSize: '17px' },
-    lg: { size: '40px', rectangleBorderRadius: '8px', fontSize: '20px' },
-    xl: { size: '48px', rectangleBorderRadius: '8px', fontSize: '24px' },
-    xxl: { size: '84px', rectangleBorderRadius: '12px', fontSize: '42px' },
-    xxxl: { size: '96px', rectangleBorderRadius: '12px', fontSize: '48px' },
-};
-var getRectangleBorderRadius = function (size) {
-    var _a, _b;
-    if (typeof size === 'number') {
-        return "".concat(Math.ceil(Number(size) / 4), "px");
-    }
-    return (_b = (_a = exports.avatarSizeConfig[size]) === null || _a === void 0 ? void 0 : _a.rectangleBorderRadius) !== null && _b !== void 0 ? _b : exports.avatarSizeConfig.md.rectangleBorderRadius;
+var styled_1 = tslib_1.__importDefault(require("../style/styled"));
+var constants_1 = require("./constants");
+var getAvatarSize = function (size) { var _a; return typeof size === 'string' ? (_a = constants_1.AVATAR_SIZE_MAP[size]) !== null && _a !== void 0 ? _a : constants_1.DEPRECATED_AVATAR_SIZE_MAP[size] : "".concat(size, "px"); };
+exports.getAvatarSize = getAvatarSize;
+var getAvatarBorderRadius = function (size) {
+    var _a;
+    return typeof size === 'string'
+        ? (_a = constants_1.AVATAR_BORDER_RADIUS_MAP[size]) !== null && _a !== void 0 ? _a : constants_1.DEPRECATED_AVATAR_BORDER_RADIUS_MAP[size]
+        : constants_1.AVATAR_BORDER_RADIUS_MAP.medium;
 };
+exports.getAvatarBorderRadius = getAvatarBorderRadius;
 var getFontSize = function (size, isSingleLetterInitial) {
-    var _size = typeof size === 'number' ? size : parseFloat(exports.avatarSizeConfig[size].size);
+    var _size = parseFloat((0, exports.getAvatarSize)(size));
     if (isSingleLetterInitial) {
         return _size > 17 ? "".concat(Math.max(13, _size * 0.6), "px") : "".concat(_size * 0.75, "px");
     }
@@ -28,20 +22,24 @@ var getFontSize = function (size, isSingleLetterInitial) {
         return "".concat(_size / 2, "px");
     }
 };
+exports.getFontSize = getFontSize;
 exports.StyledAvatarGroup = (0, styled_1.default)('div', 'flex');
 exports.StyledRoot = (0, styled_1.default)('div', 'box-border inline-block', function (_, _a) {
-    var $shape = _a.$shape, $color = _a.$color, $didImageFailToLoad = _a.$didImageFailToLoad, $avatarSize = _a.$avatarSize, $size = _a.$size;
-    var borderRadius = $shape === 'circle' ? '50%' : getRectangleBorderRadius($avatarSize);
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderRadius)(borderRadius)), { background: $didImageFailToLoad ? $color : undefined, height: $didImageFailToLoad ? $size : undefined, width: $didImageFailToLoad ? $size : undefined });
+    var $didImageFailToLoad = _a.$didImageFailToLoad;
+    return $didImageFailToLoad ? 'bg-[--sw-bg] h-[--sw-height] w-[--sw-width] forced-colors:border-1' : '';
+}, function (_, _a) {
+    var $shape = _a.$shape, $size = _a.$size;
+    if ($shape === 'circle')
+        return 'rounded-full';
+    return typeof $size === 'number' ? 'rounded-[--sw-rounded]' : (0, exports.getAvatarBorderRadius)($size);
 });
-exports.StyledInitials = (0, styled_1.default)('div', 'items-center justify-center h-full flex font-medium spr-text-01', function (_, _a) {
-    var $avatarSize = _a.$avatarSize, $isSingleLetterInitial = _a.$isSingleLetterInitial;
-    return ({
-        fontSize: getFontSize($avatarSize, $isSingleLetterInitial),
-    });
+exports.StyledInitials = (0, styled_1.default)('div', 'items-center justify-center h-full flex font-400 spr-text-primary', function (_, _a) {
+    var _b;
+    var $size = _a.$size;
+    return (_b = constants_1.AVATAR_FONT_SIZE_MAP[$size]) !== null && _b !== void 0 ? _b : 'text-[--sw-font-size]';
 });
 // borderRadius should be inherited
-exports.StyledAvatar = (0, styled_1.default)('img', 'box-border object-cover', function (_, _a) {
-    var $size = _a.$size, $imageLoaded = _a.$imageLoaded;
-    return ((0, tslib_1.__assign)({ display: $imageLoaded ? 'block' : 'none', height: $size, width: $size }, (0, longHandHelpers_1.borderRadius)('inherit')));
+exports.StyledAvatar = (0, styled_1.default)('img', 'box-border object-cover h-[--sw-height] w-[--sw-width] rounded-inherit', function (_, _a) {
+    var $imageLoaded = _a.$imageLoaded;
+    return ($imageLoaded ? 'block' : 'hidden');
 });

package/avatar/types.d.ts

@@ -1,51 +1,55 @@
 /// <reference types="react" />
 import { Override } from '../overrides';
-import { ClassName } from '../types';
-export declare type Shape = 'circle' | 'rectangle';
-export declare type Spacing = 'sm' | 'md' | 'none' | 'lg';
-export declare type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
-export declare type AvatarGroupProps = {
-    className?: ClassName;
+import { SpacewebComponentProps } from '../types';
+export type Shape = 'circle' | 'rectangle';
+export type Spacing = 'sm' | 'md' | 'none' | 'lg';
+/** @deprecated */
+type DeprecatedSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+export type Size = 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | DeprecatedSize;
+export type AvatarGroupOverrides = {
+    Root?: Override<AvatarGroupSharedProps & Record<string, any>>;
+    ExtraAvatar?: Override<AvatarProps & Record<string, any>>;
+};
+export type AvatarGroupProps = SpacewebComponentProps<{
+    variant?: 'linear' | 'grid';
     spacing?: Spacing;
     max?: number;
     size?: Size | number;
     shape?: Shape;
-    overrides?: {
-        Root?: Override<AvatarGroupSharedProps & Record<string, any>>;
-        ExtraAvatar?: Override<AvatarProps & Record<string, any>>;
-    };
+    overrides?: AvatarGroupOverrides;
     children?: React.ReactNode;
-};
-export declare type AvatarGroupSharedProps = {
+}>;
+export type AvatarGroupSharedProps = {
     $spacing: Spacing;
+    $variant?: 'linear' | 'grid';
     $size?: Size | number;
     $shape?: Shape;
     $max: number;
     $extraAvatar: boolean;
 };
-export declare type AvatarSharedProps = {
+export type AvatarSharedProps = {
     $didImageFailToLoad: boolean;
-    $size?: string;
+    $size: Size | number;
     $shape: Shape;
     $color?: string;
     $avatarSize: string;
     $isSingleLetterInitial: boolean;
+    $imageLoaded: boolean;
 };
-declare type AvatarOverrides = {
+type AvatarOverrides = {
     Root?: Override<AvatarSharedProps & Record<string, any>>;
     Avatar?: Override<AvatarSharedProps & Record<string, any>>;
     Initials?: Override<AvatarSharedProps & Record<string, any>>;
     UserIcon?: Override<AvatarSharedProps & Record<string, any>>;
 };
-export declare type AvatarProps = {
+export type AvatarProps = SpacewebComponentProps<{
     name: string;
     src?: string;
-    className?: ClassName;
     shape?: Shape;
     size?: Size | number;
     initials?: string;
     color?: string;
     overrides?: AvatarOverrides;
     allowPhoneInitials?: boolean;
-};
+}>;
 export {};

package/avatar/useAvatarColor.js

@@ -5,7 +5,7 @@ var react_1 = require("react");
 var constants_1 = require("./constants");
 var getLinearGradientColor = function (index) {
     var gradientColor = constants_1.AVATAR_GRADIENT_COLORS[index];
-    return "".concat("linear-gradient(137deg,".concat(gradientColor[0], " 0%, ").concat(gradientColor[1], " 96%"), " )");
+    return "linear-gradient(137deg,".concat(gradientColor[0], " 0%, ").concat(gradientColor[1], " 96% )");
 };
 var getRandomBgColor = function () {
     return getLinearGradientColor(Math.floor(Math.random() * constants_1.AVATAR_GRADIENT_COLORS.length));

package/avatar/utils/avatarGroupHelpers.d.ts

@@ -0,0 +1,13 @@
+import { AvatarGroupProps } from '../types';
+export declare const getColProps: (index: number, childrenToRender: number, totalChildren: number, avatarSizeInPixels: number) => {
+    rowSpan: number;
+    colSpan: number;
+    size: number;
+};
+export declare const getSharedProps: ({ spacing, size, variant, shape, max }: AvatarGroupProps) => {
+    $spacing: import("../types").Spacing;
+    $size: number | import("../types").Size | undefined;
+    $variant: "grid" | "linear";
+    $shape: import("../types").Shape | undefined;
+    $max: number;
+};

package/avatar/utils/avatarGroupHelpers.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSharedProps = exports.getColProps = void 0;
+var getColProps = function (index, childrenToRender, totalChildren, avatarSizeInPixels) {
+    if (index === 0) {
+        return {
+            rowSpan: childrenToRender > 2 ? 1 : 2,
+            colSpan: childrenToRender === 1 ? 2 : 1,
+            size: childrenToRender > 2 ? avatarSizeInPixels / 2 : avatarSizeInPixels,
+        };
+    }
+    if (index === 1 && totalChildren > 12) {
+        return {
+            rowSpan: 1,
+            colSpan: 1,
+            size: avatarSizeInPixels / 2,
+        };
+    }
+    if (index === 1) {
+        return {
+            rowSpan: childrenToRender > 3 ? 1 : 2,
+            colSpan: 1,
+            size: childrenToRender > 3 ? avatarSizeInPixels / 2 : avatarSizeInPixels,
+        };
+    }
+    if (index === 2 && totalChildren > 12) {
+        return { rowSpan: 1, colSpan: 2, size: avatarSizeInPixels };
+    }
+    // default
+    return { rowSpan: 1, colSpan: 1, size: avatarSizeInPixels / 2 };
+};
+exports.getColProps = getColProps;
+var getSharedProps = function (_a) {
+    var _b = _a.spacing, spacing = _b === void 0 ? 'sm' : _b, size = _a.size, _c = _a.variant, variant = _c === void 0 ? 'linear' : _c, shape = _a.shape, max = _a.max;
+    return ({
+        $spacing: spacing,
+        $size: size,
+        $variant: variant,
+        $shape: shape,
+        $max: variant === 'linear' ? max !== null && max !== void 0 ? max : 5 : 3,
+    });
+};
+exports.getSharedProps = getSharedProps;

package/avatar/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { getColProps, getSharedProps } from './avatarGroupHelpers';
+export { cleanupDisplayName } from './cleanupDisplayName';

package/avatar/utils/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cleanupDisplayName = exports.getSharedProps = exports.getColProps = void 0;
+var avatarGroupHelpers_1 = require("./avatarGroupHelpers");
+Object.defineProperty(exports, "getColProps", { enumerable: true, get: function () { return avatarGroupHelpers_1.getColProps; } });
+Object.defineProperty(exports, "getSharedProps", { enumerable: true, get: function () { return avatarGroupHelpers_1.getSharedProps; } });
+var cleanupDisplayName_1 = require("./cleanupDisplayName");
+Object.defineProperty(exports, "cleanupDisplayName", { enumerable: true, get: function () { return cleanupDisplayName_1.cleanupDisplayName; } });

package/badge/badge.d.ts

@@ -1,4 +1,7 @@
 import { PropsWithChildren, ReactElement } from 'react';
 import { BadgeProps } from './types';
-declare const Badge: ({ children, overrides, content, size, intent, horizontalPosition, verticalPosition, overlap, }: PropsWithChildren<BadgeProps>) => ReactElement;
+declare const Badge: {
+    ({ children, overrides, content, size, intent, horizontalPosition, verticalPosition, overlap, }: PropsWithChildren<BadgeProps>): ReactElement;
+    __standard: string;
+};
 export default Badge;

package/badge/badge.js

@@ -4,18 +4,54 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var useOverrides_1 = require("../overrides/useOverrides");
 var styled_component_1 = require("./styled-component");
+var style_1 = require("../style");
+function getHorizontalPosition(isRTL, horizontalPosition) {
+    if (!isRTL)
+        return horizontalPosition;
+    return horizontalPosition === 'right' ? 'left' : 'right';
+}
+// eslint-disable-next-line consistent-return -- variable needed for HDS 2.0 sizes only
+var getAnchorMinWidth = function (size, hasContent) {
+    if (size === 'small')
+        return hasContent ? 12 : 8;
+    if (size === 'medium')
+        return hasContent ? 16 : 12;
+    if (size === 'large')
+        return hasContent ? 20 : 16;
+};
 var Badge = function (_a) {
-    var children = _a.children, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, content = _a.content, _c = _a.size, size = _c === void 0 ? 'lg' : _c, _d = _a.intent, intent = _d === void 0 ? 'error' : _d, _e = _a.horizontalPosition, horizontalPosition = _e === void 0 ? 'right' : _e, _f = _a.verticalPosition, verticalPosition = _f === void 0 ? 'bottom' : _f, _g = _a.overlap, overlap = _g === void 0 ? 'rectangle' : _g;
-    var _h = (0, tslib_1.__read)((0, useOverrides_1.useOverrides)(overrides.Root, styled_component_1.StyledRoot), 2), Root = _h[0], rootProps = _h[1];
-    var _j = (0, tslib_1.__read)((0, useOverrides_1.useOverrides)(overrides.Anchor, styled_component_1.StyledAnchor), 2), Anchor = _j[0], anchorProps = _j[1];
+    var _b, _c;
+    var children = _a.children, _d = _a.overrides, overrides = _d === void 0 ? {} : _d, content = _a.content, _e = _a.size, size = _e === void 0 ? 'lg' : _e, _f = _a.intent, intent = _f === void 0 ? 'error' : _f, _g = _a.horizontalPosition, horizontalPosition = _g === void 0 ? 'right' : _g, _h = _a.verticalPosition, verticalPosition = _h === void 0 ? 'bottom' : _h, _j = _a.overlap, overlap = _j === void 0 ? 'rectangle' : _j;
+    var _k = tslib_1.__read((0, useOverrides_1.useOverrides)(overrides.Root, styled_component_1.StyledRoot), 2), Root = _k[0], rootProps = _k[1];
+    var _l = tslib_1.__read((0, useOverrides_1.useOverrides)(overrides.Anchor, styled_component_1.StyledAnchor), 2), Anchor = _l[0], anchorProps = _l[1];
+    var _m = (0, style_1.useStyle)(), isRTL = _m.isRTL, px2rem = _m.px2rem;
+    var hasContent = (0, styled_component_1.isCustomContent)(content) ? false : !!content;
     var sharedProps = {
         $size: size,
         $intent: intent,
-        $content: content,
+        $content: hasContent,
         $horizontalPosition: horizontalPosition,
         $verticalPosition: verticalPosition,
         $overlap: overlap,
+        $isCustomContent: (0, styled_component_1.isCustomContent)(content),
     };
-    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "badge" }, rootProps, sharedProps, { children: [children, (0, jsx_runtime_1.jsx)(Anchor, (0, tslib_1.__assign)({}, anchorProps, sharedProps, { children: typeof content === 'function' ? content(sharedProps) : content }), void 0)] }), void 0));
+    var swBadgeTranslateX, swBadgeTranslateY;
+    var rtlHorizontalPosition = getHorizontalPosition(isRTL, horizontalPosition);
+    var anchorMinWidth = getAnchorMinWidth(size, hasContent);
+    if (verticalPosition === 'top') {
+        _b = tslib_1.__read(rtlHorizontalPosition === 'left'
+            ? ['calc(-100% + min(1rem, 50%))', '-50%']
+            : ['calc(100% - min(1rem, 50%))', '-50%'], 2), swBadgeTranslateX = _b[0], swBadgeTranslateY = _b[1];
+    }
+    else {
+        _c = tslib_1.__read(rtlHorizontalPosition === 'left'
+            ? ['calc(-100% + min(1rem, 50%))', '50%']
+            : ['calc(100% - min(1rem, 50%))', '50%'], 2), swBadgeTranslateX = _c[0], swBadgeTranslateY = _c[1];
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "data-spaceweb": "badge" }, rootProps, sharedProps, { children: [children, (0, jsx_runtime_1.jsx)(Anchor, tslib_1.__assign({}, anchorProps, { style: [
+                    tslib_1.__assign({ '--sw-translate-x': swBadgeTranslateX, '--sw-translate-y': swBadgeTranslateY, '--sw-rounded': '50rem' }, (anchorMinWidth ? { '--sw-min-width': px2rem(anchorMinWidth) } : {})),
+                    anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.style,
+                ] }, sharedProps, { children: typeof content === 'function' ? content(sharedProps) : content }))] })));
 };
+Badge.__standard = 'Component';
 exports.default = Badge;

package/badge/cvaConfigs.d.ts

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

package/badge/cvaConfigs.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.badgeAnchorCVA = void 0;
+var cvaWrapper_1 = require("../style/cvaWrapper");
+exports.badgeAnchorCVA = (0, cvaWrapper_1.cvaWrapper)('badge', 'anchor', [
+    'absolute flex items-center justify-center spr-text-05 text-xs box-border border border-solid spr-border-inverse' +
+        ' text-12 leading-4 font-400 translate-[--sw-translate] rounded-[--sw-rounded] min-w-[--sw-min-width]',
+    {
+        variants: {
+            $size: {
+                sm: 'h-7/20 min-w-7/20 px-0.5',
+                lg: 'h-1/2 min-w-1/2 px-1.5',
+                small: 'h-2 px-0.5 py-1.25 text-10 leading-2 font-700 spr-text-inverse',
+                medium: 'h-3 px-0.5 py-1.75 text-12 leading-150 font-700 spr-text-inverse',
+                large: 'h-4 px-0.5 py-2.25 text-14 leading-150 font-700 spr-text-inverse',
+            },
+            $content: {
+                true: '',
+                false: 'p-0',
+            },
+            $intent: {
+                success: 'spr-bg-success',
+                error: 'spr-bg-error',
+                warning: 'spr-bg-warning',
+                neutral: 'spr-bg-neutral',
+                info: 'spr-interactive-01',
+            },
+            $isCustomContent: {
+                true: 'p-0 bg-transparent',
+            },
+        },
+        compoundVariants: [
+            { $overlap: 'rectangle', $horizontalPosition: 'left', $verticalPosition: 'top', className: 'left-0 top-0' },
+            { $overlap: 'rectangle', $horizontalPosition: 'left', $verticalPosition: 'bottom', className: 'left-0 bottom-0' },
+            { $overlap: 'rectangle', $horizontalPosition: 'right', $verticalPosition: 'top', className: 'right-0 top-0' },
+            {
+                $overlap: 'rectangle',
+                $horizontalPosition: 'right',
+                $verticalPosition: 'bottom',
+                className: 'right-0 bottom-0',
+            },
+            { $overlap: 'circle', $horizontalPosition: 'left', $verticalPosition: 'top', className: 'left-7/50 top-7/50' },
+            {
+                $overlap: 'circle',
+                $horizontalPosition: 'left',
+                $verticalPosition: 'bottom',
+                className: 'left-7/50 bottom-7/50',
+            },
+            { $overlap: 'circle', $horizontalPosition: 'right', $verticalPosition: 'top', className: 'right-7/50 top-7/50' },
+            {
+                $overlap: 'circle',
+                $horizontalPosition: 'right',
+                $verticalPosition: 'bottom',
+                className: 'right-7/50 bottom-7/50',
+            },
+        ],
+        defaultVariants: {
+            $intent: 'error',
+            $size: 'lg',
+            $horizontalPosition: 'right',
+            $verticalPosition: 'bottom',
+            $overlap: 'rectangle',
+        },
+    },
+]);

package/badge/styled-component.d.ts

@@ -1,2 +1,4 @@
-export declare const StyledRoot: import("../style/styled").StyledComponent;
-export declare const StyledAnchor: import("../style/styled").StyledComponent;
+import type { BadgeProps } from './types';
+export declare const StyledRoot: import("../style").StyledComponent;
+export declare const isCustomContent: (content: BadgeProps['content']) => boolean;
+export declare const StyledAnchor: import("../style").StyledComponent;

package/badge/styled-component.js

@@ -1,61 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledAnchor = exports.StyledRoot = void 0;
-var tslib_1 = require("tslib");
+exports.StyledAnchor = exports.isCustomContent = exports.StyledRoot = void 0;
 var style_1 = require("../style");
-var longHandHelpers_1 = require("../helpers/longHandHelpers");
-exports.StyledRoot = (0, style_1.styled)('div', {
-    position: 'relative',
-    display: 'inline-flex',
-});
-var sizeMap = {
-    sm: '35%',
-    lg: '50%',
-};
+var cvaConfigs_1 = require("./cvaConfigs");
+exports.StyledRoot = (0, style_1.styled)('div', 'relative inline-flex');
 var isCustomContent = function (content) { return typeof content === 'function'; };
-var anchorOffset = function (_a, _b) {
-    var isRTL = _a.isRTL;
-    var $horizontalPosition = _b.$horizontalPosition, $verticalPosition = _b.$verticalPosition, $overlap = _b.$overlap;
-    var offset = $overlap === 'rectangle' ? 0 : '14%';
-    var horizontalOffset = $horizontalPosition === 'left' ? { left: offset } : { right: offset };
-    var verticalOffset = $verticalPosition === 'top' ? { top: offset } : { bottom: offset };
-    var rtlHorizontalPosition = isRTL ? ($horizontalPosition === 'right' ? 'left' : 'right') : $horizontalPosition;
-    var transform = $verticalPosition === 'top'
-        ? {
-            transform: rtlHorizontalPosition === 'left'
-                ? 'translate(calc(-100% + min(1rem, 50%)), -50%) /* @noflip */' // min of 1rem( for large elements ) and 50%( for small elements )
-                : 'translate(calc(100% - min(1rem, 50%)), -50%) /* @noflip */',
-        }
-        : {
-            transform: rtlHorizontalPosition === 'left'
-                ? 'translate(calc(-100% + min(1rem, 50%)), 50%) /* @noflip */'
-                : 'translate(calc(100% - min(1rem, 50%)), 50%) /* @noflip */',
-        };
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, horizontalOffset), verticalOffset), transform);
-};
-var backgroundColor = function (_a, _b) {
-    var theme = _a.theme;
-    var $intent = _b.$intent, $content = _b.$content;
-    var bgColor;
-    // when custom content provided, colorVariant should not have any effect.
-    if (isCustomContent($content))
-        bgColor = 'transparent';
-    else if ($intent === 'success')
-        bgColor = theme.spr.supportSuccess;
-    else if ($intent === 'error')
-        bgColor = theme.spr.supportError;
-    else
-        bgColor = theme.spr.supportWarning;
-    return { backgroundColor: bgColor };
-};
-var padding = function (_, _a) {
-    var $size = _a.$size, $content = _a.$content;
-    if (isCustomContent($content))
-        return {}; // no padding for customContent
-    var p = $size === 'sm' ? '2px' : '6px';
-    return { paddingLeft: p, paddingRight: p };
-};
-exports.StyledAnchor = (0, style_1.styled)('span', 'absolute flex items-center justify-center spr-text-05 text-xs border border-solid spr-border-05 box-border typography-l2', anchorOffset, backgroundColor, function (utils, props) {
-    var $size = props.$size;
-    return (0, tslib_1.__assign)({ minWidth: sizeMap[$size], height: sizeMap[$size] }, (0, longHandHelpers_1.borderRadius)('50rem'));
-}, padding);
+exports.isCustomContent = isCustomContent;
+exports.StyledAnchor = (0, style_1.styled)('span', cvaConfigs_1.badgeAnchorCVA);

package/badge/types.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Override } from '../overrides/types';
-export declare type Intent = 'success' | 'error' | 'warning';
-export declare type Overlap = 'circle' | 'rectangle';
-export declare type Size = 'sm' | 'lg';
-export declare type BadgeProps = {
+export type Intent = 'success' | 'error' | 'warning' | 'neutral' | 'info';
+export type Overlap = 'circle' | 'rectangle';
+export type Size = 'sm' | 'lg' | 'small' | 'medium' | 'large';
+export type BadgeProps = {
     horizontalPosition?: 'left' | 'right';
     verticalPosition?: 'top' | 'bottom';
     overlap?: Overlap;
@@ -13,13 +13,15 @@ export declare type BadgeProps = {
     overrides?: {
         Root?: Override<unknown>;
         Anchor?: Override<unknown>;
+        AnchorContainer?: Override<unknown>;
     };
 };
-export declare type SharedProps = {
-    $content?: BadgeProps['content'];
+export type SharedProps = {
+    $content: boolean;
     $horizontalPosition: 'left' | 'right';
     $verticalPosition: 'top' | 'bottom';
     $overlap: Overlap;
     $size: Size;
     $intent?: Intent;
+    $isCustomContent: boolean;
 };

package/banner/banner-item.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
-    $as?: import("react").ElementType<any> | undefined;
-    className?: import("..").Styles;
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("..").ClassName;
     style?: import("..").Styles;
 } & {
     children?: import("react").ReactNode;

package/banner/banner-item.js

@@ -6,9 +6,9 @@ var react_1 = require("react");
 var overrides_1 = require("../overrides");
 var styled_component_1 = require("./styled-component");
 var BannerItem = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, restProps = (0, tslib_1.__rest)(_a, ["overrides", "children"]);
-    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledBannerItem), 2), Root = _c[0], rootProps = _c[1];
-    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "banner-item", role: "listitem" }, rootProps, restProps, { ref: ref }, { children: children }), void 0));
+    var _b = _a.overrides, overrides = _b === void 0 ? {} : _b, children = _a.children, restProps = tslib_1.__rest(_a, ["overrides", "children"]);
+    var _c = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledBannerItem), 2), Root = _c[0], rootProps = _c[1];
+    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "data-spaceweb": "banner-item", role: "listitem" }, rootProps, restProps, { ref: ref }, { children: children })));
 });
 BannerItem.displayName = 'BannerItem';
 exports.default = (0, react_1.memo)(BannerItem);

package/banner/banner.d.ts

@@ -1,19 +1,4 @@
-import * as React from 'react';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../types").SpacewebComponentProps<React.AllHTMLAttributes<HTMLElement>>, "title"> & {
-    intent?: "success" | "warning" | "error" | undefined;
-    $as?: string | undefined;
-    collapsible?: boolean | undefined;
-    title: React.ReactNode;
-    children?: React.ReactNode;
-    maxItemContainerHeight?: string | undefined;
-    overrides?: {
-        Root?: import("../overrides").Override<Record<string, any>> | undefined;
-        BannerItemContainer?: import("../overrides").Override<Record<string, any>> | undefined;
-        HeaderTitle?: import("../overrides").Override<Record<string, any>> | undefined;
-        HeaderIcon?: import("../overrides").Override<Record<string, any>> | undefined;
-        HeaderContainer?: import("../overrides").Override<Record<string, any>> | undefined;
-        TitleContainer?: import("../overrides").Override<Record<string, any>> | undefined;
-        ToggleButton?: import("../overrides").Override<Record<string, any>> | undefined;
-    } | undefined;
-} & React.RefAttributes<HTMLElement>>>;
+/// <reference types="react" />
+import { BannerProps } from './types';
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<BannerProps & import("react").RefAttributes<HTMLElement>>>;
 export default _default;