@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/asyncSelect/types.d.ts

@@ -1,13 +1,14 @@
 /**
  *  Created by Aneree on 03/11/20.
  */
+import * as React from 'react';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
-import { SelectProps, Option, Value, OnChangeParams } from '../select/types';
-export declare type SetStateFunc<S> = Dispatch<SetStateAction<S>>;
-export declare type Id = string | number;
-export declare type AllOptionsMap = Record<Id, Option>;
-export declare type GroupedOptions = Record<string, Array<Option>>;
-export declare type LoadOptions = (input: string, groupFilters: {
+import { Id, OnChangeParams, Option, SelectProps, Value } from '../select/types';
+import { Merge, SimpleUnionOmit } from '../type-utils';
+export type SetStateFunc<S> = Dispatch<SetStateAction<S>>;
+export type AllOptionsMap = Record<Id, Option>;
+export type GroupedOptions = Record<string, Array<Option>>;
+export type LoadOptions = (input: string, groupFilters: {
     group: string;
     pageNumber: number;
 }[]) => Promise<{
@@ -18,8 +19,8 @@ export declare type LoadOptions = (input: string, groupFilters: {
         count?: number;
     }>;
 }>;
-export declare type AsyncSelectValue = Array<Id | Option> | Value;
-declare type BaseAsyncSelectProps = Omit<SelectProps, 'isLoading' | 'options' | 'value' | 'onChange' | 'scrollContainer'> & {
+export type AsyncSelectValue = Array<Id | Option> | Value;
+type BaseAsyncSelectProps = Merge<SimpleUnionOmit<SelectProps, 'isLoading' | 'scrollContainer'>, {
     paginationBuffer?: number;
     searchingText?: ReactNode;
     minimumInput?: number;
@@ -34,8 +35,8 @@ declare type BaseAsyncSelectProps = Omit<SelectProps, 'isLoading' | 'options' |
     resolveValuesOnUpdate?: boolean;
     hideUnresolvedValues?: boolean;
     moveSelectedOptionsToTop?: boolean;
-};
-export declare type AsyncSelectProps = BaseAsyncSelectProps & {
+}>;
+export type AsyncSelectProps = BaseAsyncSelectProps & {
     loadOptions: (input: string, page: number) => Promise<{
         options: Array<Option>;
         complete: boolean;
@@ -43,12 +44,17 @@ export declare type AsyncSelectProps = BaseAsyncSelectProps & {
     initialOptions?: Array<Option>;
     resolveSelectedOptions?: (unresolvedValueKeys: Array<Id>) => Promise<Array<Option>>;
 };
-export declare type GroupConfig = Array<{
+export type GroupConfig = Array<{
+    id: string;
+    label: string;
+}>;
+export type GroupConfigWithCount = Array<{
     id: string;
     label: string;
+    count?: number;
 }>;
-export declare type GroupedValue = Record<string, AsyncSelectValue>;
-export declare type GroupedAsyncSelectProps = Omit<BaseAsyncSelectProps, 'creatable' | 'onChange' | 'value'> & {
+export type GroupedValue = Record<string, AsyncSelectValue>;
+export type GroupedAsyncSelectProps = Merge<SimpleUnionOmit<BaseAsyncSelectProps, 'creatable'>, {
     loadOptions: (input: string, groupFilters: Array<{
         group: string;
         pageNumber: number;
@@ -65,11 +71,16 @@ export declare type GroupedAsyncSelectProps = Omit<BaseAsyncSelectProps, 'creata
     initialExpandedCount?: number;
     resolveSelectedOptions?: (groupVsUnresolvedValueKeys: Record<string, Array<Id>>) => Promise<GroupedOptions>;
     value?: GroupedValue;
-    onChange?: (params: Omit<OnChangeParams, 'value'> & {
+    onChange?: (params: Omit<OnChangeParams, 'value' | 'valueKeys'> & {
         value: GroupedOptions;
         valueKeys: Record<string, Id[]>;
     }) => unknown;
     showSelectAll?: boolean;
     selectAllSelected?: boolean;
+    refetchOnGroupConfigChange?: boolean;
+}>;
+type InputEvent = React.FormEvent<HTMLInputElement>;
+export type CustomInputEvent = InputEvent & {
+    value?: string;
 };
-export type { Value, Option };
+export type { Value, Option, Id };

package/asyncSelect/utils/defaultAsyncSelectFilterOptions.d.ts

@@ -0,0 +1,2 @@
+import defaultProps from '../../select/default-props';
+export declare const defaultAsyncSelectFilterOptions: NonNullable<typeof defaultProps.filterOptions>;

package/asyncSelect/utils/defaultAsyncSelectFilterOptions.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultAsyncSelectFilterOptions = void 0;
+var tslib_1 = require("tslib");
+var default_props_1 = tslib_1.__importDefault(require("../../select/default-props"));
+var defaultAsyncSelectFilterOptions = function (options, filterValue, excludeOptions, props) { return default_props_1.default.filterOptions(options, filterValue, excludeOptions, tslib_1.__assign(tslib_1.__assign({}, props), { filterOnlyCreated: true })); };
+exports.defaultAsyncSelectFilterOptions = defaultAsyncSelectFilterOptions;

package/asyncSelect/utils/defaultCreateOption.d.ts

@@ -0,0 +1,5 @@
+import { Options } from '../../baseui/select';
+export declare const defaultCreateOption: (label: string, { labelKey, valueKey }?: {
+    labelKey?: string | undefined;
+    valueKey?: string | undefined;
+}) => Options;

package/asyncSelect/utils/defaultCreateOption.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultCreateOption = void 0;
+var tslib_1 = require("tslib");
+var select_1 = require("../../baseui/select");
+var default_props_1 = tslib_1.__importDefault(require("../../select/default-props"));
+var defaultCreateOption = function (label, _a) {
+    var _b;
+    var _c = _a === void 0 ? {} : _a, _d = _c.labelKey, labelKey = _d === void 0 ? default_props_1.default.labelKey : _d, _e = _c.valueKey, valueKey = _e === void 0 ? default_props_1.default.valueKey : _e;
+    return [(_b = {}, _b[labelKey] = label.trim(), _b[valueKey] = label.trim(), _b[select_1.CREATED_KEY] = true, _b)];
+};
+exports.defaultCreateOption = defaultCreateOption;

package/avatar/avatar-group.d.ts

@@ -1,4 +1,15 @@
-import * as React from 'react';
-import { AvatarGroupProps } from './types';
-declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLElement>>;
+/// <reference types="react" />
+declare const AvatarGroup: import("react").ForwardRefExoticComponent<Omit<{
+    variant?: "grid" | "linear" | undefined;
+    spacing?: import("./types").Spacing | undefined;
+    max?: number | undefined;
+    size?: number | import("./types").Size | undefined;
+    shape?: import("./types").Shape | undefined;
+    overrides?: import("./types").AvatarGroupOverrides | undefined;
+    children?: import("react").ReactNode;
+}, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("..").ClassName;
+    style?: import("..").Styles;
+} & import("react").RefAttributes<HTMLElement>>;
 export { AvatarGroup };

package/avatar/avatar-group.js

@@ -3,51 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarGroup = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint import/prefer-default-export: 0 */
-var React = (0, tslib_1.__importStar)(require("react"));
-var useOverrides_1 = require("../overrides/useOverrides");
-var mergeOverrides_1 = require("../overrides/mergeOverrides");
-var style_1 = require("../style");
-var avatar_1 = require("./avatar");
-var styled_component_1 = require("./styled-component");
-var spacingVsMargin = {
-    sm: '-12px',
-    md: '-8px',
-    none: '0',
-    lg: '6px',
-};
-var AvatarGroup = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.max, max = _b === void 0 ? 5 : _b, size = _a.size, shape = _a.shape, _c = _a.spacing, spacing = _c === void 0 ? 'sm' : _c, _d = _a.overrides, overrides = _d === void 0 ? {} : _d, className = _a.className;
-    var utils = (0, style_1.useStyle)();
-    var theme = utils.theme;
-    var _e = (0, tslib_1.__read)((0, useOverrides_1.useOverrides)(overrides.Root, styled_component_1.StyledAvatarGroup), 2), Root = _e[0], rootProps = _e[1];
-    var _f = (0, tslib_1.__read)((0, useOverrides_1.useOverrides)(overrides.ExtraAvatar, avatar_1.Avatar), 2), ExtraAvatar = _f[0], extraAvatarProps = _f[1];
-    var sharedProps = {
-        $spacing: spacing,
-        $size: size,
-        $shape: shape,
-        $max: max,
-        $extraAvatar: false,
-    };
-    var validChildren = React.Children.toArray(children).filter(React.isValidElement);
-    var extraAvatars = validChildren.length > max ? validChildren.length - max : 0;
-    var childToRender = validChildren.slice(0, validChildren.length - extraAvatars);
-    if (extraAvatars > 0) {
-        var props = extraAvatarProps;
-        childToRender.push((0, jsx_runtime_1.jsx)(ExtraAvatar, (0, tslib_1.__assign)({}, props, { name: "+".concat(extraAvatars), initials: "+".concat(extraAvatars), color: theme.spr.ui05, overrides: (0, mergeOverrides_1.mergeOverrides)({ Initials: { style: (0, tslib_1.__assign)({}, theme.typography.l2) } }, props.overrides) }), void 0));
-    }
-    return ((0, jsx_runtime_1.jsx)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "avatar-group", className: className }, sharedProps, rootProps, { ref: ref }, { children: childToRender.map(function (child, index) {
-            return React.cloneElement(child, {
-                key: String(index),
-                size: child.props.size || size,
-                shape: child.props.shape || shape,
-                overrides: (0, mergeOverrides_1.mergeOverrides)({
-                    Root: {
-                        style: { marginLeft: index !== 0 ? spacingVsMargin[spacing] : 0 },
-                    },
-                }, (child.props.overrides || {})),
-            });
-        }) }), void 0));
+// lib
+var react_1 = require("react");
+// components
+var grid_variant_1 = tslib_1.__importDefault(require("./components/grid-variant"));
+var linear_variant_1 = tslib_1.__importDefault(require("./components/linear-variant"));
+var AvatarGroup = (0, react_1.forwardRef)(function (props, ref) {
+    return (props === null || props === void 0 ? void 0 : props.variant) === 'grid' ? (0, jsx_runtime_1.jsx)(grid_variant_1.default, tslib_1.__assign({ ref: ref }, props)) : (0, jsx_runtime_1.jsx)(linear_variant_1.default, tslib_1.__assign({ ref: ref }, props));
 });
 exports.AvatarGroup = AvatarGroup;
 AvatarGroup.displayName = 'AvatarGroup';

package/avatar/avatar.d.ts

@@ -1,4 +1,7 @@
 import { ReactElement } from 'react';
 import { AvatarProps } from './types';
-declare const Avatar: (props: AvatarProps) => ReactElement;
+declare const Avatar: {
+    (props: AvatarProps): ReactElement;
+    __standard: string;
+};
 export { Avatar };

package/avatar/avatar.js

@@ -5,12 +5,10 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var box_1 = require("../box");
-var user_1 = (0, tslib_1.__importDefault)(require("../icon/components/user"));
+var user_1 = tslib_1.__importDefault(require("../icon/components/user"));
 var styled_component_1 = require("./styled-component");
 var useAvatarColor_1 = require("./useAvatarColor");
-var style_1 = require("../style");
-var helpers_1 = require("../helpers");
-var cleanupDisplayName_1 = require("./utils/cleanupDisplayName");
+var utils_1 = require("./utils");
 var overrides_1 = require("../overrides");
 var useIsomorphicLayoutEffect_1 = require("../hooks/useIsomorphicLayoutEffect");
 /**
@@ -33,21 +31,28 @@ var getIsImageLoaded = function (src) {
     return imageEl.complete;
 };
 var Icon = function (_a) {
-    var overrides = _a.overrides, className = _a.className, props = (0, tslib_1.__rest)(_a, ["overrides", "className"]);
-    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.UserIcon, user_1.default), 2), UserIcon = _b[0], iconProps = _b[1];
-    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: ['h-full w-full flex items-center justify-center', className] }, props, { children: (0, jsx_runtime_1.jsx)(UserIcon, (0, tslib_1.__assign)({ "data-testid": "user-icon", className: "w-1/2 h-1/2" }, iconProps), void 0) }), void 0));
+    var overrides = _a.overrides, className = _a.className, props = tslib_1.__rest(_a, ["overrides", "className"]);
+    var _b = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.UserIcon, user_1.default), 2), UserIcon = _b[0], iconProps = _b[1];
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ className: ['h-full w-full flex items-center justify-center', className] }, props, { children: (0, jsx_runtime_1.jsx)(UserIcon, tslib_1.__assign({ "data-testid": "user-icon", className: "w-1/2 h-1/2" }, iconProps)) })));
 };
 var Avatar = function (props) {
-    var _a = (0, tslib_1.__read)((0, react_1.useState)(null), 2), imageEl = _a[0], setImageEl = _a[1];
-    var _b = props.shape, shape = _b === void 0 ? 'circle' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, className = props.className, color = props.color, allowPhoneInitials = props.allowPhoneInitials, name = props.name, overrides = props.overrides, initials = props.initials, src = props.src;
-    var _d = (0, tslib_1.__read)((0, react_1.useState)(), 2), imageLoaded = _d[0], setImageLoaded = _d[1];
-    var displayName = (0, cleanupDisplayName_1.cleanupDisplayName)(name);
+    var _a = tslib_1.__read((0, react_1.useState)(null), 2), imageEl = _a[0], setImageEl = _a[1];
+    var _b = props.shape, shape = _b === void 0 ? 'circle' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, style = props.style, className = props.className, color = props.color, allowPhoneInitials = props.allowPhoneInitials, name = props.name, overrides = props.overrides, initials = props.initials, src = props.src;
+    var _d = tslib_1.__read((0, react_1.useState)(false), 2), imageLoaded = _d[0], setImageLoaded = _d[1];
+    var displayName = (0, utils_1.cleanupDisplayName)(name);
     var randomBgColor = (0, useAvatarColor_1.useAvatarColor)(displayName);
     var isPhoneNumber = PHONENUMBER_REGEX.test(displayName);
-    var px2rem = (0, style_1.useStyle)().px2rem;
-    var avatarSize = typeof size === 'string' ? styled_component_1.avatarSizeConfig[size].size : px2rem(size);
+    var avatarSize = (0, styled_component_1.getAvatarSize)(size);
     var _initials = initials || getInitials(displayName);
-    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({ $avatarSize: size, $color: color || randomBgColor, $didImageFailToLoad: !imageLoaded }, (0, helpers_1.add$props)({ shape: shape, imageLoaded: imageLoaded })), { $isSingleLetterInitial: _initials.length === 1 });
+    var sharedProps = {
+        $size: size,
+        $avatarSize: avatarSize,
+        $shape: shape,
+        $color: color || randomBgColor,
+        $didImageFailToLoad: !imageLoaded,
+        $imageLoaded: imageLoaded,
+        $isSingleLetterInitial: _initials.length === 1,
+    };
     (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
         if (!imageEl) {
             setImageLoaded(getIsImageLoaded(src));
@@ -73,10 +78,21 @@ var Avatar = function (props) {
             }
         };
     }, [src, imageEl]);
-    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1];
-    var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Avatar, styled_component_1.StyledAvatar), 2), AvatarImage = _f[0], avatarImageProps = _f[1];
-    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Initials, styled_component_1.StyledInitials), 2), Initials = _g[0], initialsProps = _g[1];
-    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "aria-label": imageLoaded ? null : name, className: className, "data-spaceweb": "avatar", "$size": avatarSize }, sharedProps, rootProps, { children: [!imageLoaded &&
-                (isPhoneNumber && !allowPhoneInitials ? ((0, jsx_runtime_1.jsx)(Icon, (0, tslib_1.__assign)({ overrides: overrides }, sharedProps, initialsProps), void 0)) : ((0, jsx_runtime_1.jsx)(Initials, (0, tslib_1.__assign)({}, sharedProps, initialsProps, { children: _initials }), void 0))), (0, jsx_runtime_1.jsx)(AvatarImage, (0, tslib_1.__assign)({ ref: setImageEl, src: src, alt: name, "$size": avatarSize }, sharedProps, avatarImageProps), void 0)] }), void 0));
+    var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1];
+    var _f = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Avatar, styled_component_1.StyledAvatar), 2), AvatarImage = _f[0], avatarImageProps = _f[1];
+    var _g = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Initials, styled_component_1.StyledInitials), 2), Initials = _g[0], initialsProps = _g[1];
+    return ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ "aria-label": imageLoaded ? null : name, "data-spaceweb": "avatar" }, sharedProps, rootProps, { className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className], style: [
+            {
+                '--sw-width': avatarSize,
+                '--sw-height': avatarSize,
+                '--sw-rounded': "".concat(parseFloat(avatarSize) / 4, "px"),
+                '--sw-bg': color || randomBgColor,
+                '--sw-font-size': (0, styled_component_1.getFontSize)(size, sharedProps.$isSingleLetterInitial),
+            },
+            style,
+            rootProps === null || rootProps === void 0 ? void 0 : rootProps.style,
+        ] }, { children: [!imageLoaded &&
+                (isPhoneNumber && !allowPhoneInitials ? ((0, jsx_runtime_1.jsx)(Icon, tslib_1.__assign({ overrides: overrides }, sharedProps, initialsProps))) : ((0, jsx_runtime_1.jsx)(Initials, tslib_1.__assign({}, sharedProps, initialsProps, { children: _initials })))), (0, jsx_runtime_1.jsx)(AvatarImage, tslib_1.__assign({ ref: setImageEl, src: src, alt: name }, sharedProps, avatarImageProps))] })));
 };
 exports.Avatar = Avatar;
+Avatar.__standard = 'Component';

package/avatar/components/grid-variant.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { AvatarProps } from '../types';
+export declare const GridAvatarCell: ({ index, childrenToRender, totalChildren, avatarSizeInPixels, }: {
+    index: number;
+    childrenToRender: ReactElement<AvatarProps>[];
+    totalChildren: number;
+    avatarSizeInPixels: number;
+}) => ReactElement | null;
+declare const GridVariant: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLElement>>;
+export default GridVariant;

package/avatar/components/grid-variant.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridAvatarCell = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+// libs
+var react_1 = require("react");
+// components
+var grid_1 = require("../../grid");
+// hooks
+var useAvatarGroupChildren_1 = require("../hooks/useAvatarGroupChildren");
+// utils
+var utils_1 = require("../utils");
+var overrides_1 = require("../../overrides");
+var styled_component_1 = require("../styled-component");
+// constants
+var constants_1 = require("../constants");
+var GridAvatarCell = function (_a) {
+    var _b;
+    var index = _a.index, childrenToRender = _a.childrenToRender, totalChildren = _a.totalChildren, avatarSizeInPixels = _a.avatarSizeInPixels;
+    var _c = (0, utils_1.getColProps)(index, childrenToRender.length, totalChildren, avatarSizeInPixels), rowSpan = _c.rowSpan, colSpan = _c.colSpan, size = _c.size;
+    return index < childrenToRender.length ? ((0, jsx_runtime_1.jsx)(grid_1.Col, tslib_1.__assign({ rowSpan: rowSpan, colSpan: colSpan, className: "overflow-hidden flex items-center justify-center" }, { children: (0, react_1.cloneElement)(childrenToRender[index], {
+            size: size,
+            className: ['rounded-0', (_b = childrenToRender[index].props) === null || _b === void 0 ? void 0 : _b.className],
+        }) }))) : null;
+};
+exports.GridAvatarCell = GridAvatarCell;
+var GridVariant = (0, react_1.forwardRef)(function (props, ref) {
+    var _a;
+    var _b = props.overrides, overrides = _b === void 0 ? {} : _b, className = props.className, style = props.style, size = props.size, children = props.children;
+    var avatarSizeValue = (0, styled_component_1.getAvatarSize)(size || 'md');
+    var _c = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, grid_1.Grid), 2), Root = _c[0], rootProps = _c[1];
+    var childCount = react_1.Children.count(children);
+    var _d = (0, useAvatarGroupChildren_1.useAvatarGroupChildren)({
+        children: children,
+        max: childCount === 4 ? 4 : 3,
+        overrides: overrides,
+        size: size,
+        variant: 'grid',
+    }), childrenToRender = _d.childrenToRender, totalChildren = _d.totalChildren;
+    var sharedProps = (0, utils_1.getSharedProps)(props);
+    var gridGap = typeof size === 'string' ? (_a = constants_1.AVATAR_GROUP_GAP_MAP[size]) !== null && _a !== void 0 ? _a : 0.25 : 0.25;
+    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "data-spaceweb": "avatar-group" }, sharedProps, rootProps, { style: [
+            {
+                '--sw-width': avatarSizeValue,
+                '--sw-height': avatarSizeValue,
+                '--sw-rounded': "".concat(parseFloat(avatarSizeValue) / 4, "px"),
+            },
+            style,
+            rootProps === null || rootProps === void 0 ? void 0 : rootProps.style,
+        ], className: [
+            'h-full overflow-hidden h-[--sw-height] w-[--sw-width]',
+            function (_, _a) {
+                var $size = _a.$size;
+                return (typeof $size === 'number' ? 'rounded-[--sw-rounded]' : (0, styled_component_1.getAvatarBorderRadius)($size));
+            },
+            className,
+            rootProps === null || rootProps === void 0 ? void 0 : rootProps.className,
+        ], ref: ref, rowGap: gridGap, colGap: gridGap, cols: 2 }, { children: childrenToRender.map(function (child, index) {
+            var _a, _b, _c;
+            return ((0, jsx_runtime_1.jsx)(exports.GridAvatarCell, { index: index, childrenToRender: childrenToRender, totalChildren: totalChildren, avatarSizeInPixels: parseFloat(avatarSizeValue) }, "".concat((_c = (_a = childrenToRender[index].key) !== null && _a !== void 0 ? _a : (_b = childrenToRender[index].props) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : index)));
+        }) })));
+});
+exports.default = GridVariant;

package/avatar/components/linear-variant.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const LinearVariant: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLElement>>;
+export default LinearVariant;

package/avatar/components/linear-variant.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+// libs
+var react_1 = require("react");
+// components
+var styled_component_1 = require("../styled-component");
+// utils
+var overrides_1 = require("../../overrides");
+// constants
+var constants_1 = require("../constants");
+var useAvatarGroupChildren_1 = require("../hooks/useAvatarGroupChildren");
+var utils_1 = require("../utils");
+var LinearVariant = (0, react_1.forwardRef)(function (props, ref) {
+    var _a = props.spacing, spacing = _a === void 0 ? 'sm' : _a, size = props.size, shape = props.shape, style = props.style, className = props.className, _b = props.max, max = _b === void 0 ? 5 : _b, _c = props.overrides, overrides = _c === void 0 ? {} : _c, children = props.children;
+    var _d = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Root, styled_component_1.StyledAvatarGroup), 2), Root = _d[0], rootProps = _d[1];
+    var childrenToRender = (0, useAvatarGroupChildren_1.useAvatarGroupChildren)({ children: children, max: max, overrides: overrides, size: size, variant: 'linear' }).childrenToRender;
+    var sharedProps = (0, utils_1.getSharedProps)(props);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "data-spaceweb": "avatar-group" }, sharedProps, rootProps, { style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className], ref: ref }, { children: childrenToRender.map(function (child, index) {
+                return (0, react_1.cloneElement)(child, {
+                    key: String(index),
+                    size: child.props.size || size,
+                    shape: child.props.shape || shape,
+                    overrides: (0, overrides_1.mergeOverrides)({
+                        Root: {
+                            style: { marginInlineStart: index !== 0 ? constants_1.SPACING_VS_MARGIN[spacing] : 0 },
+                        },
+                    }, (child.props.overrides || {})),
+                });
+            }) })) }));
+});
+exports.default = LinearVariant;

package/avatar/constants.d.ts

@@ -1 +1,48 @@
+import { Spacing } from './types';
 export declare const AVATAR_GRADIENT_COLORS: string[][];
+export declare const SPACING_VS_MARGIN: Record<Spacing, string>;
+/** @deprecated */
+export declare const DEPRECATED_AVATAR_BORDER_RADIUS_MAP: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+};
+export declare const AVATAR_BORDER_RADIUS_MAP: {
+    'x-small': string;
+    small: string;
+    medium: string;
+    large: string;
+    'x-large': string;
+};
+/** @deprecated */
+export declare const DEPRECATED_AVATAR_SIZE_MAP: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+};
+export declare const AVATAR_SIZE_MAP: {
+    'x-small': string;
+    small: string;
+    medium: string;
+    large: string;
+    'x-large': string;
+};
+export declare const AVATAR_FONT_SIZE_MAP: {
+    'x-small': string;
+    small: string;
+    medium: string;
+    large: string;
+    'x-large': string;
+};
+export declare const AVATAR_GROUP_GAP_MAP: {
+    small: number;
+    medium: number;
+    large: number;
+    'x-large': number;
+};

package/avatar/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AVATAR_GRADIENT_COLORS = void 0;
+exports.AVATAR_GROUP_GAP_MAP = exports.AVATAR_FONT_SIZE_MAP = exports.AVATAR_SIZE_MAP = exports.DEPRECATED_AVATAR_SIZE_MAP = exports.AVATAR_BORDER_RADIUS_MAP = exports.DEPRECATED_AVATAR_BORDER_RADIUS_MAP = exports.SPACING_VS_MARGIN = exports.AVATAR_GRADIENT_COLORS = void 0;
 exports.AVATAR_GRADIENT_COLORS = [
     // Avatar User Default/Orange-Pink
     ['#FBAB32', '#E65299'],
@@ -59,3 +59,54 @@ exports.AVATAR_GRADIENT_COLORS = [
     // Avatar User Default/Turquoise
     ['#C2F0E0', '#38A5A0'],
 ];
+exports.SPACING_VS_MARGIN = {
+    sm: '-12px',
+    md: '-8px',
+    none: '0',
+    lg: '8px',
+};
+/** @deprecated */
+exports.DEPRECATED_AVATAR_BORDER_RADIUS_MAP = {
+    sm: 'rounded-6',
+    md: 'rounded-8',
+    lg: 'rounded-8',
+    xl: 'rounded-8',
+    xxl: 'rounded-12',
+    xxxl: 'rounded-12',
+};
+exports.AVATAR_BORDER_RADIUS_MAP = {
+    'x-small': 'rounded-4',
+    small: 'rounded-4',
+    medium: 'rounded-8',
+    large: 'rounded-8',
+    'x-large': 'rounded-12',
+};
+/** @deprecated */
+exports.DEPRECATED_AVATAR_SIZE_MAP = {
+    sm: '24px',
+    md: '34px',
+    lg: '40px',
+    xl: '48px',
+    xxl: '84px',
+    xxxl: '96px',
+};
+exports.AVATAR_SIZE_MAP = {
+    'x-small': '16px',
+    small: '24px',
+    medium: '40px',
+    large: '64px',
+    'x-large': '96px',
+};
+exports.AVATAR_FONT_SIZE_MAP = {
+    'x-small': 'text-8 leading-150',
+    small: 'text-12 leading-150',
+    medium: 'text-16 leading-150',
+    large: 'text-24 leading-140',
+    'x-large': 'text-32 leading-130',
+};
+exports.AVATAR_GROUP_GAP_MAP = {
+    small: 0.5,
+    medium: 0.75,
+    large: 1,
+    'x-large': 1.25,
+};

package/avatar/hooks/useAvatarGroupChildren.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement, ReactNode } from 'react';
+import { AvatarGroupOverrides, AvatarProps, Size } from '../types';
+export declare const getFontSize: (size: number | Size) => string;
+export declare const useAvatarGroupChildren: ({ children, max, overrides, size, variant, }: {
+    children: ReactNode;
+    max: number;
+    overrides: AvatarGroupOverrides;
+    size: number | Size | undefined;
+    variant: 'linear' | 'grid';
+}) => {
+    childrenToRender: ReactElement<AvatarProps>[];
+    totalChildren: number;
+};

package/avatar/hooks/useAvatarGroupChildren.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAvatarGroupChildren = exports.getFontSize = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+// libs
+var react_1 = require("react");
+// hooks
+var style_1 = require("../../style");
+var number_1 = require("../../number");
+// components
+var avatar_1 = require("../avatar");
+// utils
+var overrides_1 = require("../../overrides");
+var styled_component_1 = require("../styled-component");
+var getFontSize = function (size) {
+    if (size === 'small')
+        return '6px';
+    if (size === 'medium')
+        return '12px';
+    var _size = parseFloat((0, styled_component_1.getAvatarSize)(size));
+    return "".concat(_size / 4, "px");
+};
+exports.getFontSize = getFontSize;
+var useAvatarGroupChildren = function (_a) {
+    var children = _a.children, max = _a.max, overrides = _a.overrides, size = _a.size, variant = _a.variant;
+    var _b = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ExtraAvatar, avatar_1.Avatar), 2), ExtraAvatar = _b[0], extraAvatarProps = _b[1];
+    var theme = (0, style_1.useStyle)().theme;
+    var validChildren = react_1.Children.toArray(children).filter(react_1.isValidElement);
+    var extraAvatars = validChildren.length > max ? validChildren.length - max : 0;
+    if (validChildren.length > 12) {
+        extraAvatars += 1;
+    }
+    var _initials = (0, number_1.useNumber)({
+        value: extraAvatars,
+        variant: {
+            type: number_1.NUMBER_VARIANTS.COMPACT_DECIMAL_FORMAT,
+            decimalDigits: 0,
+        },
+    });
+    var childrenToRender = validChildren.slice(0, validChildren.length - extraAvatars);
+    if (extraAvatars > 0) {
+        var props = extraAvatarProps;
+        childrenToRender.push((0, jsx_runtime_1.jsx)(ExtraAvatar, tslib_1.__assign({}, props, { name: "+".concat(extraAvatars), initials: "+".concat(_initials), color: theme.spr.bgSecondary, allowPhoneInitials: true, overrides: (0, overrides_1.mergeOverrides)({
+                Initials: {
+                    // @ts-ignore -- CSS variables declaration
+                    style: variant === 'grid' ? { '--sw-font-size': (0, exports.getFontSize)(size) } : {},
+                },
+            }, props.overrides) })));
+    }
+    return { childrenToRender: childrenToRender, totalChildren: validChildren.length };
+};
+exports.useAvatarGroupChildren = useAvatarGroupChildren;

package/avatar/index.d.ts

@@ -1,5 +1,5 @@
 export { Avatar } from './avatar';
 export { AvatarGroup } from './avatar-group';
-export { StyledAvatarGroup, StyledAvatar, StyledInitials, StyledRoot } from './styled-component';
+export { StyledAvatarGroup, StyledAvatar, StyledInitials, StyledRoot, getAvatarSize } from './styled-component';
 export { useAvatarColor } from './useAvatarColor';
-export type { Spacing, Shape, Size, AvatarGroupProps, AvatarSharedProps, AvatarProps, } from './types';
+export type { Spacing, Shape, Size, AvatarGroupProps, AvatarSharedProps, AvatarProps } from './types';

package/avatar/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAvatarColor = exports.StyledRoot = exports.StyledInitials = exports.StyledAvatar = exports.StyledAvatarGroup = exports.AvatarGroup = exports.Avatar = void 0;
+exports.useAvatarColor = exports.getAvatarSize = exports.StyledRoot = exports.StyledInitials = exports.StyledAvatar = exports.StyledAvatarGroup = exports.AvatarGroup = exports.Avatar = void 0;
 var avatar_1 = require("./avatar");
 Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });
 var avatar_group_1 = require("./avatar-group");
@@ -10,5 +10,6 @@ Object.defineProperty(exports, "StyledAvatarGroup", { enumerable: true, get: fun
 Object.defineProperty(exports, "StyledAvatar", { enumerable: true, get: function () { return styled_component_1.StyledAvatar; } });
 Object.defineProperty(exports, "StyledInitials", { enumerable: true, get: function () { return styled_component_1.StyledInitials; } });
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_component_1.StyledRoot; } });
+Object.defineProperty(exports, "getAvatarSize", { enumerable: true, get: function () { return styled_component_1.getAvatarSize; } });
 var useAvatarColor_1 = require("./useAvatarColor");
 Object.defineProperty(exports, "useAvatarColor", { enumerable: true, get: function () { return useAvatarColor_1.useAvatarColor; } });