@sprinklrjs/spaceweb 10.1.0

package/esm/asyncSelect/hooks/useAsyncOptionHandlers.js

@@ -0,0 +1,99 @@
+import { __awaiter, __generator, __read, __spreadArray } from "tslib";
+/**
+ *  Created by Aneree on 15/01/21.
+ */
+import { useRef, useCallback } from 'react';
+//hooks
+import { useLatest } from '../../hooks/useLatest';
+//helpers
+import { shouldPaginate, addOptionsInMap, getInputValue } from '../helpers';
+var useAsyncOptionHandlers = function (_a) {
+    var inputRef = _a.inputRef, valueKey = _a.valueKey, isLoading = _a.isLoading, setOptions = _a.setOptions, loadOptions = _a.loadOptions, minimumInput = _a.minimumInput, setIsLoading = _a.setIsLoading, paginationBuffer = _a.paginationBuffer, setAllOptionsMap = _a.setAllOptionsMap, propsCreateOption = _a.createOption;
+    var pageRef = useRef(0);
+    var completeRef = useRef(false);
+    var isPaginatingRef = useRef(false);
+    var valueKeyRef = useLatest(valueKey);
+    var loadOptionsRef = useLatest(loadOptions);
+    var minimumInputRef = useLatest(minimumInput);
+    var paginationBufferRef = useLatest(paginationBuffer);
+    var fetchOptions = useCallback(function (pageNumber) { return __awaiter(void 0, void 0, void 0, function () {
+        var timeoutId, _a, options_1, complete;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    timeoutId = setTimeout(function () { return setIsLoading(true); }, 500);
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, , 3, 4]);
+                    return [4 /*yield*/, loadOptionsRef.current(getInputValue(inputRef), pageNumber)];
+                case 2:
+                    _a = _b.sent(), options_1 = _a.options, complete = _a.complete;
+                    setAllOptionsMap(function (prevOptions) { return addOptionsInMap(prevOptions, options_1, valueKeyRef.current); });
+                    //Merge options when it's not the first page
+                    setOptions(function (prevOptions) { return (pageNumber ? __spreadArray(__spreadArray([], __read(prevOptions), false), __read(options_1), false) : options_1); });
+                    completeRef.current = complete;
+                    pageRef.current = pageNumber;
+                    isPaginatingRef.current = false;
+                    return [3 /*break*/, 4];
+                case 3:
+                    clearTimeout(timeoutId);
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    var onPaginate = useCallback(function (event) {
+        if (!isLoading &&
+            !isPaginatingRef.current &&
+            !completeRef.current &&
+            shouldPaginate(event.target, paginationBufferRef.current)) {
+            isPaginatingRef.current = true;
+            fetchOptions(pageRef.current + 1);
+        }
+    }, [fetchOptions, isLoading]);
+    var onInputChange = useCallback(function () {
+        if (getInputValue(inputRef).length < minimumInputRef.current) {
+            //reset state
+            setIsLoading(false);
+            setOptions([]);
+            pageRef.current = 0;
+            completeRef.current = false;
+            return;
+        }
+        fetchOptions(0);
+    }, [fetchOptions]);
+    var createOption = useCallback(function (label) { return __awaiter(void 0, void 0, void 0, function () {
+        var createdOptions, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!propsCreateOption) {
+                        throw 'Spaceweb: [AsyncSelect] `createOption` is not defined';
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, propsCreateOption(label)];
+                case 2:
+                    createdOptions = _a.sent();
+                    return [2 /*return*/, createdOptions];
+                case 3:
+                    err_1 = _a.sent();
+                    throw err_1;
+                case 4:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [propsCreateOption, setIsLoading]);
+    return {
+        onPaginate: onPaginate,
+        onInputChange: onInputChange,
+        fetchOptions: fetchOptions,
+        createOption: propsCreateOption ? createOption : undefined,
+    };
+};
+export { useAsyncOptionHandlers };

package/esm/asyncSelect/hooks/useInputChangeHandler.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { AsyncSelectProps } from '../types';
+declare type InputEventHandler = React.FormEventHandler<HTMLInputElement>;
+declare type OnInputChange = AsyncSelectProps['onInputChange'];
+interface UseInputChangeHandlerArgs {
+    inputElement: HTMLInputElement | null;
+    listenAllInputChanges: boolean;
+    debounceInterval?: number;
+    onInputChange: OnInputChange;
+    inputChangeHandlerToDebounce: InputEventHandler;
+}
+declare const useInputChangeHandler: ({ inputElement, listenAllInputChanges, onInputChange, inputChangeHandlerToDebounce, debounceInterval, }: UseInputChangeHandlerArgs) => OnInputChange;
+export { useInputChangeHandler };

package/esm/asyncSelect/hooks/useInputChangeHandler.js

@@ -0,0 +1,37 @@
+/**
+ *  Created by Aneree on 22/04/21.
+ */
+import { useEffect } from 'react';
+//hooks
+import { useLatest } from '../../hooks/useLatest';
+import { useDebouncedEventHandler } from '../../hooks/useDebouncedEventHandler';
+var EMPTY_OBJECT = {};
+var useInputChangeHandler = function (_a) {
+    // When listenAllInputChanges is true, we want to listen to all the setStates of input value
+    // triggered within baseweb/select (achieved using mutation observer). In such a scenario, we don't want to trigger
+    // onInputChange received from props on input value changes that are not made by user.
+    // When listenAllInputChanges is false, we just want to intercept the input changes made by user and also propagate
+    // the same to consumers of AsyncSelect by invoking onInputChange from props
+    var inputElement = _a.inputElement, listenAllInputChanges = _a.listenAllInputChanges, onInputChange = _a.onInputChange, inputChangeHandlerToDebounce = _a.inputChangeHandlerToDebounce, debounceInterval = _a.debounceInterval;
+    var onDebouncedInputChange = useDebouncedEventHandler(inputChangeHandlerToDebounce, listenAllInputChanges ? undefined : onInputChange, debounceInterval);
+    var onDebouncedInputChangeRef = useLatest(onDebouncedInputChange);
+    useEffect(function () {
+        if (listenAllInputChanges && inputElement) {
+            var observer_1 = new MutationObserver(function (mutations) {
+                mutations.forEach(function (mutation) {
+                    if (mutation.type === 'attributes') {
+                        onDebouncedInputChangeRef.current(EMPTY_OBJECT);
+                    }
+                });
+            });
+            observer_1.observe(inputElement, {
+                attributeFilter: ['value'],
+            });
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+    }, [inputElement, listenAllInputChanges]);
+    return listenAllInputChanges ? onInputChange : onDebouncedInputChange;
+};
+export { useInputChangeHandler };

package/esm/asyncSelect/hooks/useResolveSelectedOptions.d.ts

@@ -0,0 +1,18 @@
+/**
+ *  Created by Aneree on 15/01/21.
+ */
+import { MutableRefObject } from 'react';
+import { Option, Value } from '../../select';
+import { SetStateFunc, AllOptionsMap } from '../types';
+interface UseResolveSelectedOptionsArgs {
+    value?: Value;
+    valueKey: string;
+    allOptionsMap: AllOptionsMap;
+    resolveSelectedOptions?: (unresolvedValueKeys: Array<string | number>) => Promise<Array<Option>>;
+    inputRef: MutableRefObject<HTMLInputElement | null>;
+    setIsLoading: SetStateFunc<boolean>;
+    setOptions: SetStateFunc<Array<Option>>;
+    setAllOptionsMap: SetStateFunc<AllOptionsMap>;
+}
+declare const useResolveSelectedOptions: ({ value, valueKey, allOptionsMap, resolveSelectedOptions, inputRef, setIsLoading, setOptions, setAllOptionsMap, }: UseResolveSelectedOptionsArgs) => void;
+export { useResolveSelectedOptions };

package/esm/asyncSelect/hooks/useResolveSelectedOptions.js

@@ -0,0 +1,61 @@
+import { __awaiter, __generator, __read, __spreadArray } from "tslib";
+/**
+ *  Created by Aneree on 15/01/21.
+ */
+import { useRef, useCallback, useEffect } from 'react';
+import _uniqBy from 'lodash/uniqBy';
+//hooks
+import { useLatest } from '../../hooks/useLatest';
+//helpers
+import { addOptionsInMap, getInputValue } from '../helpers';
+var useResolveSelectedOptions = function (_a) {
+    var value = _a.value, valueKey = _a.valueKey, allOptionsMap = _a.allOptionsMap, resolveSelectedOptions = _a.resolveSelectedOptions, inputRef = _a.inputRef, setIsLoading = _a.setIsLoading, setOptions = _a.setOptions, setAllOptionsMap = _a.setAllOptionsMap;
+    var valueRef = useLatest(value);
+    var valueKeyRef = useLatest(valueKey);
+    var resolveSelectedOptionsRef = useLatest(resolveSelectedOptions);
+    var allOptionsMapRef = useRef(allOptionsMap);
+    var fetchUnresolvedValueKeys = useCallback(function (unresolvedValueKeys) { return __awaiter(void 0, void 0, void 0, function () {
+        var options_1, e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, resolveSelectedOptionsRef.current(unresolvedValueKeys)];
+                case 2:
+                    options_1 = _a.sent();
+                    setAllOptionsMap(function (prevOptions) { return addOptionsInMap(prevOptions, options_1, valueKeyRef.current); });
+                    //Inject the resolved selected options into the options state
+                    // 1. Only if currently shown options are not filtered i.e. user input text is empty (All options need to be shown)
+                    if (!getInputValue(inputRef)) {
+                        setOptions(function (prevOptions) {
+                            // 2. Only if they are not already present in the state
+                            var combinedOptions = __spreadArray(__spreadArray([], __read(prevOptions), false), __read(options_1), false), uniqueOptions = _uniqBy(combinedOptions, valueKeyRef.current);
+                            return prevOptions.length === uniqueOptions.length ? prevOptions : uniqueOptions;
+                        });
+                    }
+                    setIsLoading(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    e_1 = _a.sent();
+                    setIsLoading(false);
+                    throw e_1;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    useEffect(function () {
+        var _a, _b;
+        //Check on mount if there are any unresolved values
+        if (((_a = valueRef.current) === null || _a === void 0 ? void 0 : _a.length) && resolveSelectedOptionsRef.current) {
+            var _valueKey_1 = valueKeyRef.current;
+            var unresolvedValueKeys = (_b = valueRef.current) === null || _b === void 0 ? void 0 : _b.filter(function (valueOption) { return !allOptionsMapRef.current[valueOption[_valueKey_1]]; }).map(function (valueOption) { return valueOption[_valueKey_1]; });
+            if (unresolvedValueKeys.length) {
+                fetchUnresolvedValueKeys(unresolvedValueKeys);
+            }
+        }
+    }, []);
+};
+export { useResolveSelectedOptions };

package/esm/asyncSelect/index.d.ts

@@ -0,0 +1,3 @@
+export type { Value, Option, AsyncSelectProps } from './types';
+export * from './locale';
+export * from './asyncSelect';

package/esm/asyncSelect/index.js

@@ -0,0 +1,2 @@
+export * from './locale';
+export * from './asyncSelect';

package/esm/asyncSelect/locale.d.ts

@@ -0,0 +1,7 @@
+/**
+ *  Created by Aneree on 10/12/20.
+ */
+export interface AsyncSelectLocale {
+    searchingText: string;
+    emptyInputMsg: string;
+}

package/esm/asyncSelect/locale.js

@@ -0,0 +1 @@
+export {};

package/esm/asyncSelect/types.d.ts

@@ -0,0 +1,29 @@
+/**
+ *  Created by Aneree on 03/11/20.
+ */
+import { Dispatch, MutableRefObject, RefCallback, SetStateAction } from 'react';
+import { SelectProps, Option, Value } from '../select/types';
+export declare type SetStateFunc<S> = Dispatch<SetStateAction<S>>;
+export declare type AllOptionsMap = Record<string | number, Option>;
+/**
+ * NOTE:
+ *   AsyncSelect does not support select all option
+ *   removed the support of these props in AsyncSelect
+ */
+export declare type AsyncSelectProps = Omit<SelectProps, 'isLoading' | 'options' | 'hideSelectAll' | 'controlRef'> & {
+    loadOptions: (input: string, page: number) => Promise<{
+        options: Array<Option>;
+        complete: boolean;
+    }>;
+    paginationBuffer?: number;
+    searchingText?: string;
+    minimumInput?: number;
+    debounceInterval?: number;
+    initialOptions?: Array<Option>;
+    resolveSelectedOptions?: (unresolvedValueKeys: Array<string | number>) => Promise<Array<Option>>;
+    loadOnFocus?: boolean;
+    loadOnMount?: boolean;
+    controlRef?: MutableRefObject<HTMLInputElement> | RefCallback<HTMLInputElement> | null;
+    listenAllInputChanges?: boolean;
+};
+export type { Value, Option };

package/esm/asyncSelect/types.js

@@ -0,0 +1 @@
+export {};

package/esm/avatar/avatar-group.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { AvatarGroupProps } from './types';
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLElement>>;
+export { AvatarGroup };

package/esm/avatar/avatar-group.js

@@ -0,0 +1,50 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint import/prefer-default-export: 0 */
+import * as React from 'react';
+import { useOverrides } from '../overrides/useOverrides';
+import { mergeOverrides } from '../overrides/mergeOverrides';
+import { useStyle } from '../style';
+import { Avatar } from './avatar';
+import { StyledAvatarGroup } from './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 = useStyle();
+    var theme = utils.theme;
+    var _e = __read(useOverrides(overrides.Root, StyledAvatarGroup), 2), Root = _e[0], rootProps = _e[1];
+    var _f = __read(useOverrides(overrides.ExtraAvatar, 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(_jsx(ExtraAvatar, __assign({}, props, { name: "+".concat(extraAvatars), initials: "+".concat(extraAvatars), color: theme.spr.ui05, overrides: mergeOverrides({ Initials: { style: __assign({}, theme.typography.l2) } }, props.overrides) }), void 0));
+    }
+    return (_jsx(Root, __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: mergeOverrides({
+                    Root: {
+                        style: { marginLeft: index !== 0 ? spacingVsMargin[spacing] : 0 },
+                    },
+                }, (child.props.overrides || {})),
+            });
+        }) }), void 0));
+});
+AvatarGroup.displayName = 'AvatarGroup';
+export { AvatarGroup };

package/esm/avatar/avatar.d.ts

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

package/esm/avatar/avatar.js

@@ -0,0 +1,65 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '../box';
+import DefaultUserIcon from '../icon/components/user';
+import { StyledAvatar, StyledRoot, StyledInitials, avatarSizeConfig } from './styled-component';
+import { useAvatarColor } from './useAvatarColor';
+import { useStyle } from '../style';
+import { add$props } from '../helpers';
+import { cleanupDisplayName } from './utils/cleanupDisplayName';
+import { useOverrides } from '../overrides';
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
+/**
+ * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
+ * and number has been trimmed for whitespaces
+ */
+var PHONENUMBER_REGEX = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
+function getInitials(name) {
+    var words = name.split(' ');
+    var initials = words.map(function (word) { return word[0]; });
+    return initials.slice(0, 2).join('').toUpperCase();
+}
+var Icon = function (_a) {
+    var overrides = _a.overrides, className = _a.className, props = __rest(_a, ["overrides", "className"]);
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.UserIcon, DefaultUserIcon), 2), UserIcon = _b[0], iconProps = _b[1];
+    return (_jsx(Box, __assign({ className: ['h-full w-full flex items-center justify-center', className] }, props, { children: _jsx(UserIcon, __assign({ "data-testid": "user-icon", className: "w-1/2 h-1/2" }, iconProps), void 0) }), void 0));
+};
+var Avatar = function (props) {
+    var _a = __read(useState(null), 2), imageRef = _a[0], setImageRef = _a[1];
+    var _b = __read(useState(false), 2), imageLoaded = _b[0], setImageLoaded = _b[1];
+    var _c = props.shape, shape = _c === void 0 ? 'circle' : _c, _d = props.size, size = _d === void 0 ? 'md' : _d, className = props.className, color = props.color, allowPhoneInitials = props.allowPhoneInitials, name = props.name, overrides = props.overrides, initials = props.initials, src = props.src;
+    var displayName = cleanupDisplayName(name);
+    var randomBgColor = useAvatarColor(displayName);
+    var isPhoneNumber = PHONENUMBER_REGEX.test(displayName);
+    var px2rem = useStyle().px2rem;
+    var avatarSize = typeof size === 'string' ? avatarSizeConfig[size].size : px2rem(size);
+    var sharedProps = __assign({ $avatarSize: size, $color: color || randomBgColor, $didImageFailToLoad: !imageLoaded }, add$props({ shape: shape, imageLoaded: imageLoaded }));
+    useIsomorphicLayoutEffect(function () {
+        if (!imageRef || !src) {
+            setImageLoaded(false);
+            return undefined;
+        }
+        if (imageRef) {
+            imageRef.onload = function () { return setImageLoaded(true); };
+            imageRef.onerror = function () { return setImageLoaded(false); };
+            /**
+             * Important to set src once onload listener is attached.
+             * In some cases, image loads before these listeners are attached.
+             */
+            imageRef.src = src;
+        }
+        return function () {
+            if (imageRef) {
+                imageRef.onload = null;
+                imageRef.onerror = null;
+            }
+        };
+    }, [src, imageRef]);
+    var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _e[0], rootProps = _e[1];
+    var _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Avatar, StyledAvatar), 2), AvatarImage = _f[0], avatarImageProps = _f[1];
+    var _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Initials, StyledInitials), 2), Initials = _g[0], initialsProps = _g[1];
+    return (_jsxs(Root, __assign({ "aria-label": imageLoaded ? null : name, className: className, "data-spaceweb": "avatar", "$size": avatarSize }, sharedProps, rootProps, { children: [!imageLoaded &&
+                (isPhoneNumber && !allowPhoneInitials ? (_jsx(Icon, __assign({ overrides: overrides }, sharedProps, initialsProps), void 0)) : (_jsx(Initials, __assign({}, sharedProps, initialsProps, { children: initials || getInitials(displayName) }), void 0))), _jsx(AvatarImage, __assign({ ref: setImageRef, src: src, alt: name, "$size": avatarSize }, sharedProps, avatarImageProps), void 0)] }), void 0));
+};
+export { Avatar };

package/esm/avatar/constants.d.ts

@@ -0,0 +1 @@
+export declare const AVATAR_GRADIENT_COLORS: string[][];

package/esm/avatar/constants.js

@@ -0,0 +1,58 @@
+export var AVATAR_GRADIENT_COLORS = [
+    // Avatar User Default/Orange-Pink
+    ['#FBAB32', '#E65299'],
+    // Avatar User Default/Green-Blue
+    ['#7EC565', '#31C7ED'],
+    // Avatar User Default/Light-Blue
+    ['#31C7ED', '#2996D0'],
+    // Avatar User Default/Lime-Green
+    ['#CED54A', '#7EC565'],
+    // Avatar User Default/Magenta-Purple
+    ['#E1549B', '#B960A7'],
+    // Avatar User Default/Green-Yellow
+    ['#CED54A', '#FBAB32'],
+    // Avatar User Default/Yellow-Green
+    ['#CED54A', '#31C7ED'],
+    // Avatar User Default/Chartreuse
+    ['#E9ECAF', '#C9D036'],
+    // Avatar User Default/Green
+    ['#C6E5BB', '#70BF54'],
+    // Avatar User Default/Orange
+    ['#FDDAA4', '#FAA21B'],
+    // Avatar User Default/Pink
+    ['#F3A9CC', '#E0277F'],
+    // Avatar User Default/Blue
+    ['#A0D0EA', '#118ACB'],
+    // Avatar User Default/Purple
+    ['#DFE386', '#AA519F'],
+    // Avatar User Default/Aqua
+    ['#99E3F6', '#00BAE9'],
+    // Avatar User Default/Lavender-Yellow
+    ['#CFB0FF', '#FFD04F'],
+    // Avatar User Default/Yellow-Pink
+    ['#FFCF4A', '#FF6594'],
+    // Avatar User Default/Pink-Purple
+    ['#FF6993', '#D3B3F2'],
+    // Avatar User Default/Turquoise-Yellow
+    ['#8FECCD', '#FFD27A'],
+    // Avatar User Default/Turquoise-Pink
+    ['#C2F0E0', '#FF7788'],
+    // Avatar User Default/Turquoise-Blue
+    ['#9FE9C2', '#61AAFF'],
+    // Avatar User Default/Yellow-Green
+    ['#FFEA4F', '#2E9975'],
+    // Avatar User Default/Blue-Turquoise
+    ['#54BEEE', '#5CC8C3'],
+    // Avatar User Default/Coral
+    ['#FB8F53', '#FF6594'],
+    // Avatar User Default/Pink-Purple
+    ['#F59DED', '#B2A5FF'],
+    // Avatar User Default/Orange-Pink
+    ['#FFD27A', '#FF70F2'],
+    // Avatar User Default/LightBlue-Purple
+    ['#76EFE9', '#917EFF'],
+    // Avatar User Default/Turquoise-Fuscia
+    ['#7BF2ED', '#FA70ED'],
+    // Avatar User Default/Turquoise
+    ['#C2F0E0', '#38A5A0'],
+];

package/esm/avatar/index.d.ts

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

package/esm/avatar/index.js

@@ -0,0 +1,4 @@
+export { Avatar } from './avatar';
+export { AvatarGroup } from './avatar-group';
+export { StyledAvatarGroup, StyledAvatar, StyledInitials, StyledRoot } from './styled-component';
+export { useAvatarColor } from './useAvatarColor';

package/esm/avatar/styled-component.d.ts

@@ -0,0 +1,36 @@
+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;
+    };
+};
+export declare const StyledAvatarGroup: import("../style/styled").StyledComponent;
+export declare const StyledRoot: import("../style/styled").StyledComponent;
+export declare const StyledInitials: import("../style/styled").StyledComponent;
+export declare const StyledAvatar: import("../style/styled").StyledComponent;

package/esm/avatar/styled-component.js

@@ -0,0 +1,47 @@
+import { __assign } from "tslib";
+import styled from '../style/styled';
+import { borderRadius as borderRadiusHelper } from '../helpers/longHandHelpers';
+export var avatarSizeConfig = {
+    sm: { size: '24px', rectangleBorderRadius: '6px', fontSize: '8px' },
+    md: { size: '34px', rectangleBorderRadius: '8px', fontSize: '10px' },
+    lg: { size: '40px', rectangleBorderRadius: '8px', fontSize: '12px' },
+    xl: { size: '48px', rectangleBorderRadius: '8px', fontSize: '16px' },
+    xxl: { size: '84px', rectangleBorderRadius: '12px', fontSize: '16px' },
+    xxxl: { size: '96px', rectangleBorderRadius: '12px', fontSize: '16px' },
+};
+var getSizeConfig = function (size) { var _a; return (_a = avatarSizeConfig[size]) !== null && _a !== void 0 ? _a : avatarSizeConfig.md; };
+var getFontSize = function (size) {
+    if (size < 24)
+        return '8px';
+    else if (size < 36)
+        return '12px';
+    else if (size < 48)
+        return '16px';
+    else if (size < 60)
+        return '20px';
+    else if (size < 72)
+        return '24px';
+    else if (size < 84)
+        return '28px';
+    else
+        return '36px';
+};
+export var StyledAvatarGroup = styled('div', 'flex');
+export var StyledRoot = styled('div', 'box-border inline-block', function (_, _a) {
+    var $shape = _a.$shape, $color = _a.$color, $didImageFailToLoad = _a.$didImageFailToLoad, $avatarSize = _a.$avatarSize, $size = _a.$size;
+    var avatarSizeTheme = getSizeConfig($avatarSize);
+    var borderRadius = $shape === 'circle' ? '50%' : avatarSizeTheme.rectangleBorderRadius;
+    return __assign(__assign({}, borderRadiusHelper(borderRadius)), { background: $didImageFailToLoad ? $color : undefined, height: $didImageFailToLoad ? $size : undefined, width: $didImageFailToLoad ? $size : undefined });
+});
+export var StyledInitials = styled('div', 'items-center justify-center h-full flex font-semibold spr-text-01', function (_, _a) {
+    var $avatarSize = _a.$avatarSize;
+    var fontSize = typeof $avatarSize === 'number' ? getFontSize($avatarSize) : getSizeConfig($avatarSize).fontSize;
+    return {
+        fontSize: fontSize,
+    };
+});
+// borderRadius should be inherited
+export var StyledAvatar = styled('img', 'box-border object-cover', function (_, _a) {
+    var $size = _a.$size, $imageLoaded = _a.$imageLoaded;
+    return (__assign({ display: $imageLoaded ? 'block' : 'none', height: $size, width: $size }, borderRadiusHelper('inherit')));
+});

package/esm/avatar/types.d.ts

@@ -0,0 +1,50 @@
+/// <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;
+    spacing?: Spacing;
+    max?: number;
+    size?: Size | number;
+    shape?: Shape;
+    overrides?: {
+        Root?: Override<AvatarGroupSharedProps & Record<string, any>>;
+        ExtraAvatar?: Override<AvatarProps & Record<string, any>>;
+    };
+    children?: React.ReactNode;
+};
+export declare type AvatarGroupSharedProps = {
+    $spacing: Spacing;
+    $size?: Size | number;
+    $shape?: Shape;
+    $max: number;
+    $extraAvatar: boolean;
+};
+export declare type AvatarSharedProps = {
+    $didImageFailToLoad: boolean;
+    $size?: string;
+    $shape: Shape;
+    $color?: string;
+    $avatarSize: string;
+};
+declare 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 = {
+    name: string;
+    src?: string;
+    className?: ClassName;
+    shape?: Shape;
+    size?: Size | number;
+    initials?: string;
+    color?: string;
+    overrides?: AvatarOverrides;
+    allowPhoneInitials?: boolean;
+};
+export type { AvatarState } from 'baseui/avatar';

package/esm/avatar/types.js

@@ -0,0 +1 @@
+export {};

package/esm/avatar/useAvatarColor.d.ts

@@ -0,0 +1 @@
+export declare const useAvatarColor: (name: string) => string;