@innovaccer/design-system
Version:
React components library project for Innovaccer Design System
926 lines (881 loc) • 1.62 MB
JavaScript
/**
* Generated on: 2025-12-10T17:37:19.511Z
* Package: @innovaccer/design-system
* Version: v4.17.1
* License: MIT
* Docs: https://mds.innovaccer.com
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('react-dom'), require('react-popper')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', 'react-dom', 'react-popper'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.inno = {}, global.React, global.classNames, global.ReactDOM, global.ReactPopper));
})(this, (function (exports, React, classNames, ReactDOM, reactPopper) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
var colorToHex = function colorToHex(color) {
return getComputedStyle(document.documentElement).getPropertyValue("--" + color);
};
var css = /*#__PURE__*/Object.freeze({
__proto__: null,
colorToHex: colorToHex
});
var _a$2;
var placeholders = (_a$2 = {}, _a$2['hh:mm'] = '--:--', _a$2['hh:mm AM'] = '--:-- AM', _a$2);
var isPlaceholderPresent = function isPlaceholderPresent(placeholderChar, time) {
return time && time.includes(placeholderChar);
};
var isFormat12hour = function isFormat12hour(format) {
return format === 'hh:mm AM';
};
var get12hourFormat = function get12hourFormat(hours) {
var AMPM = hours < 12 ? 'AM' : 'PM';
var hrs = hours % 12 || 12;
return {
hrs: hrs,
AMPM: AMPM
};
};
var get24hourFormat = function get24hourFormat(hours, am_pm) {
var convertedHours = hours;
if (am_pm) {
if (am_pm === 'PM' && hours < 12) {
convertedHours = hours + 12;
} else if (am_pm === 'AM' && hours === 12) {
convertedHours = hours - 12;
}
return convertedHours;
}
return hours;
};
var translateToTime = function translateToTime(format, time) {
if (!time) return '';
if (typeof time === 'number') {
var timeObj = getTimeObjectFromNumber(format, time);
return translateToString$1(format, timeObj);
}
return time;
};
var getTimeObjectFromNumber = function getTimeObjectFromNumber(format, time) {
var d = new Date(time);
var hrs = d.getHours();
var hours = isFormat12hour(format) ? get12hourFormat(hrs).hrs : hrs;
var am_pm = isFormat12hour(format) ? get12hourFormat(hrs).AMPM : '';
var minutes = d.getMinutes();
var seconds = d.getSeconds();
return {
hours: hours,
minutes: minutes,
seconds: seconds,
am_pm: am_pm
};
};
var getTimeObjFromStr = function getTimeObjFromStr(format, time) {
var separator = ':';
var hours = 0;
var minutes = 0;
var len = format.length;
var timeLength = time.length;
var lastChars = format.substring(len - 2, len);
var is12hrFormat = lastChars === 'AM' || lastChars === 'PM';
var am_pm = is12hrFormat ? time.substring(timeLength - 2, timeLength) : '';
var timeFormat = is12hrFormat ? time.substring(0, timeLength - 3) : time;
var inputFormat = is12hrFormat ? format.substring(0, len - 3) : format;
var v = timeFormat.split(separator);
inputFormat.split(separator).forEach(function (f, i) {
switch (f) {
case 'hh':
hours = +v[i] || 0;
break;
case 'mm':
minutes = +v[i] || 0;
break;
}
});
return {
hours: hours,
minutes: minutes,
am_pm: am_pm
};
};
var getOutputTimeString = function getOutputTimeString(inputFormat, outputFormat, time) {
if (inputFormat === outputFormat) return time;
var _a = getTimeObjFromStr(inputFormat, time),
hours = _a.hours,
minutes = _a.minutes,
am_pm = _a.am_pm;
var AMPM = isFormat12hour(outputFormat) ? get12hourFormat(hours).AMPM : '';
var hrs = isFormat12hour(outputFormat) ? get12hourFormat(hours).hrs : get24hourFormat(hours, am_pm);
var timeStr = translateToString$1(outputFormat, {
minutes: minutes,
hours: hrs,
am_pm: AMPM
});
return timeStr;
};
var translateToString$1 = function translateToString(format, time) {
var hours = time.hours,
minutes = time.minutes,
am_pm = time.am_pm;
var separator = ':';
var timeFormat = format.split(' ');
var v = timeFormat[0].split(separator);
var val = '';
v.forEach(function (f, i) {
switch (f) {
case 'hh':
val += hours < 10 ? "0" + hours : hours;
break;
case 'mm':
val += minutes < 10 ? "0" + minutes : minutes;
break;
}
if (i !== f.length - 1) val += separator;
});
val += isFormat12hour(format) && am_pm ? " " + am_pm : '';
return val;
};
var isValid = function isValid(validators) {
var value = [];
for (var _i = 1; _i < arguments.length; _i++) {
value[_i - 1] = arguments[_i];
}
var iterator = Array.isArray(validators) ? validators : [validators];
return iterator.every(function (validator) {
return validator.apply(void 0, value);
});
};
var date$1 = function date(val, format) {
var validate = function validate(date, month, year) {
var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (year % 400 == 0 || year % 100 != 0 && year % 4 == 0) monthLength[1] = 29;
return month <= 12 && date <= monthLength[month - 1];
};
if (val) {
switch (format) {
case 'dd/mm/yyyy':
{
var p = val.split('/');
var date_1 = +p[0] || 1;
var month = +p[1] || 1;
var year = +p[2] || 1900;
return validate(date_1, month, year);
}
case 'mm/dd/yyyy':
{
var p = val.split('/');
var date_2 = +p[1] || 1;
var month = +p[0] || 1;
var year = +p[2] || 1900;
return validate(date_2, month, year);
}
case 'yyyy/mm/dd':
{
var p = val.split('/');
var date_3 = +p[2] || 1;
var month = +p[1] || 1;
var year = +p[0] || 1900;
return validate(date_3, month, year);
}
case 'dd-mm-yyyy':
{
var p = val.split('-');
var date_4 = +p[0] || 1;
var month = +p[1] || 1;
var year = +p[2] || 1900;
return validate(date_4, month, year);
}
case 'mm-dd-yyyy':
{
var p = val.split('-');
var date_5 = +p[1] || 1;
var month = +p[0] || 1;
var year = +p[2] || 1900;
return validate(date_5, month, year);
}
case 'yyyy-mm-dd':
{
var p = val.split('-');
var date_6 = +p[2] || 1;
var month = +p[1] || 1;
var year = +p[0] || 1900;
return validate(date_6, month, year);
}
default:
return false;
}
}
return false;
};
var time$1 = function time(val, format) {
var _a = getTimeObjFromStr(format, val),
hours = _a.hours,
minutes = _a.minutes;
var hoursCond = isFormat12hour(format) ? hours <= 12 : hours < 24;
return hoursCond && minutes <= 60;
};
var isNaturalNumber = function isNaturalNumber(val) {
if (typeof val === 'string' && /[^0-9]/.test(val) || typeof val === 'number' && (val <= 0 || val - Math.floor(val) !== 0)) {
return false;
}
return true;
};
var validators = /*#__PURE__*/Object.freeze({
__proto__: null,
isValid: isValid,
date: date$1,
time: time$1,
isNaturalNumber: isNaturalNumber
});
var _a$1;
var date = {
'dd/mm/yyyy': [/[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
'mm/dd/yyyy': [/[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
'yyyy/mm/dd': [/\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/],
'dd-mm-yyyy': [/[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
'mm-dd-yyyy': [/[01]/, /\d/, '-', /[0123]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
'yyyy-mm-dd': [/\d/, /\d/, /\d/, /\d/, '-', /[01]/, /\d/, '-', /[0123]/, /\d/]
};
var rangeDate = {
'dd/mm/yyyy': [/[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
'mm/dd/yyyy': [/[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
'yyyy/mm/dd': [/\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/, ' ', '-', ' ', /\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/],
'dd-mm-yyyy': [/[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
'mm-dd-yyyy': [/[01]/, /\d/, '-', /[0123]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[01]/, /\d/, '-', /[0123]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
'yyyy-mm-dd': [/\d/, /\d/, /\d/, /\d/, '-', /[01]/, /\d/, '-', /[0123]/, /\d/, ' ', '-', ' ', /\d/, /\d/, /\d/, /\d/, '-', /[01]/, /\d/, '-', /[0123]/, /\d/]
};
var time = (_a$1 = {}, _a$1['hh:mm'] = [/[0-1-2]/, /\d/, ':', /[0-5]/, /\d/], _a$1['hh:mm AM'] = [/[0-1]/, /\d/, ':', /[0-5]/, /\d/, ' ', /[APap]/, 'M'], _a$1);
var masks = /*#__PURE__*/Object.freeze({
__proto__: null,
date: date,
rangeDate: rangeDate,
time: time
});
var index = /*#__PURE__*/Object.freeze({
__proto__: null,
css: css,
validators: validators,
masks: masks
});
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var extendStatics$1 = function(d, b) {
extendStatics$1 = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics$1(d, b);
};
function __extends$1(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics$1(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign$1 = function() {
__assign$1 = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign$1.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __awaiter$1(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator$1(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
/** @deprecated */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var extractBaseProps = function extractBaseProps(props) {
var baseProps = ['className', 'data-test'];
var basePropsObj = baseProps.reduce(function (acc, curr) {
var _a;
return props[curr] ? __assign$1(__assign$1({}, acc), (_a = {}, _a[curr] = props[curr], _a)) : __assign$1({}, acc);
}, {});
return basePropsObj;
};
var filterProps = function filterProps(props, propsList, include) {
return Object.entries(props).filter(function (obj) {
return include ? propsList.includes(obj[0]) : !propsList.includes(obj[0]);
}).reduce(function (acc, curr) {
acc[curr[0]] = curr[1];
return acc;
}, {});
};
var AvatarContext = /*#__PURE__*/React__namespace.createContext({
size: 'regular',
appearance: 'secondary',
firstName: '',
lastName: '',
darkAppearance: []
});
var AvatarProvider = AvatarContext.Provider;
var iconAppearanceMapper = {
secondary: 'inverse',
primary: 'primary_darker',
alert: 'alert_darker',
accent2: 'accent2_darker',
accent3: 'accent3_darker',
warning: 'warning_darker',
success: 'success_darker',
accent1: 'accent1_darker',
accent4: 'accent4_darker'
};
function styleInject$1(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$1k = "/* Avatar */\n\n.avatar-module-Avatar-D8RSu-4-17-1 {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n text-transform: uppercase;\n border-radius: var(--border-radius-full);\n cursor: default;\n position: relative;\n}\n\n.avatar-module-Avatar--default-0YGXC-4-17-1:focus,\n.avatar-module-Avatar--default-0YGXC-4-17-1:focus-visible {\n outline: 3px solid var(--primary-shadow);\n outline-offset: 3px;\n}\n\n.avatar-module-Avatar-wrapper--square--Pcj7-4-17-1 {\n padding: var(--spacing-2-5);\n box-sizing: border-box;\n}\n\n.avatar-module-Avatar--square-lGJGN-4-17-1 {\n width: 100%;\n height: 100%;\n border-radius: var(--border-radius-10);\n}\n\n.avatar-module-Avatar--regular-ewNzb-4-17-1 {\n height: var(--spacing-80);\n width: var(--spacing-80);\n}\n\n.avatar-module-Avatar--tiny-Veo-U-4-17-1 {\n height: var(--spacing-60);\n width: var(--spacing-60);\n}\n\n.avatar-module-Avatar--micro-H0bVd-4-17-1 {\n height: 20px;\n width: 20px;\n}\n\n.avatar-module-Avatar--noInitials-do2M4-4-17-1 {\n cursor: default;\n}\n\n.avatar-module-Avatar--disabled-7nTRh-4-17-1 {\n cursor: not-allowed;\n}\n\n.avatar-module-Avatar--disabled-7nTRh-4-17-1::after {\n opacity: var(--opacity-16);\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n position: absolute;\n pointer-events: none;\n content: '';\n background-color: var(--white);\n}\n\n.avatar-module-Avatar--primary-MthKO-4-17-1 {\n background: var(--primary-300);\n}\n\n.avatar-module-Avatar--secondary-Fru0H-4-17-1 {\n background: var(--secondary-light);\n}\n\n.avatar-module-Avatar--success-KErql-4-17-1 {\n background: var(--success-300);\n}\n\n.avatar-module-Avatar--alert-mtBzz-4-17-1 {\n background: var(--alert-300);\n}\n\n.avatar-module-Avatar--warning-OUu3j-4-17-1 {\n background: var(--warning-300);\n}\n\n.avatar-module-Avatar--accent1-Q0YGB-4-17-1 {\n background: var(--accent1-300);\n}\n\n.avatar-module-Avatar--accent2-70bqJ-4-17-1 {\n background: var(--accent2-300);\n}\n\n.avatar-module-Avatar--accent3-GEYFR-4-17-1 {\n background: var(--accent3-300);\n}\n\n.avatar-module-Avatar--accent4-PHVye-4-17-1 {\n background: var(--accent4-300);\n}\n\n.avatar-module-Avatar-content--tiny-ZKHWg-4-17-1 {\n line-height: var(--font-height-s) !important;\n font-size: 10px !important;\n}\n\n.avatar-module-Avatar-content--micro-qs9Ij-4-17-1 {\n line-height: var(--font-height-s) !important;\n font-size: 10px !important;\n}\n\n.avatar-module-Avatar-content--primary-APpou-4-17-1 {\n color: var(--primary-darker) !important;\n}\n\n.avatar-module-Avatar-content--secondary-otLfi-4-17-1 {\n color: var(--inverse) !important;\n}\n\n.avatar-module-Avatar-content--success-Zmxy6-4-17-1 {\n color: var(--success-darker) !important;\n}\n\n.avatar-module-Avatar-content--alert-ng-FC-4-17-1 {\n color: var(--alert-darker) !important;\n}\n\n.avatar-module-Avatar-content--warning-0Tidt-4-17-1 {\n color: var(--warning-darker) !important;\n}\n\n.avatar-module-Avatar-content--accent1-f6QRu-4-17-1 {\n color: var(--accent1-darker) !important;\n}\n\n.avatar-module-Avatar-content--accent2-y3plU-4-17-1 {\n color: var(--accent2-darker) !important;\n}\n\n.avatar-module-Avatar-content--accent3-SDOJJ-4-17-1 {\n color: var(--accent3-darker) !important;\n}\n\n.avatar-module-Avatar-content--accent4-Dgi83-4-17-1 {\n color: var(--accent4-darker) !important;\n}\n\n.avatar-module-Avatar-presence-ByKmm-4-17-1 {\n position: absolute;\n border-radius: var(--border-radius-full);\n width: var(--spacing-20);\n height: var(--spacing-20);\n right: 0;\n bottom: 0;\n}\n\n.avatar-module-Avatar-presence--active-AU4X3-4-17-1 {\n background: var(--success);\n}\n\n.avatar-module-Avatar-presence--away-CDNWs-4-17-1 {\n background: var(--secondary-dark);\n}\n\n.avatar-module-Avatar-status-03nd7-4-17-1 {\n top: calc(-1 * var(--spacing-05));\n right: calc(-1 * var(--spacing-05));\n width: var(--spacing-30);\n height: var(--spacing-30);\n border-radius: var(--border-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n cursor: pointer;\n overflow: hidden;\n}\n";
var avatarStyles = {"Avatar":"avatar-module-Avatar-D8RSu-4-17-1","Avatar--default":"avatar-module-Avatar--default-0YGXC-4-17-1","Avatar-wrapper--square":"avatar-module-Avatar-wrapper--square--Pcj7-4-17-1","Avatar--square":"avatar-module-Avatar--square-lGJGN-4-17-1","Avatar--regular":"avatar-module-Avatar--regular-ewNzb-4-17-1","Avatar--tiny":"avatar-module-Avatar--tiny-Veo-U-4-17-1","Avatar--micro":"avatar-module-Avatar--micro-H0bVd-4-17-1","Avatar--noInitials":"avatar-module-Avatar--noInitials-do2M4-4-17-1","Avatar--disabled":"avatar-module-Avatar--disabled-7nTRh-4-17-1","Avatar--primary":"avatar-module-Avatar--primary-MthKO-4-17-1","Avatar--secondary":"avatar-module-Avatar--secondary-Fru0H-4-17-1","Avatar--success":"avatar-module-Avatar--success-KErql-4-17-1","Avatar--alert":"avatar-module-Avatar--alert-mtBzz-4-17-1","Avatar--warning":"avatar-module-Avatar--warning-OUu3j-4-17-1","Avatar--accent1":"avatar-module-Avatar--accent1-Q0YGB-4-17-1","Avatar--accent2":"avatar-module-Avatar--accent2-70bqJ-4-17-1","Avatar--accent3":"avatar-module-Avatar--accent3-GEYFR-4-17-1","Avatar--accent4":"avatar-module-Avatar--accent4-PHVye-4-17-1","Avatar-content--tiny":"avatar-module-Avatar-content--tiny-ZKHWg-4-17-1","Avatar-content--micro":"avatar-module-Avatar-content--micro-qs9Ij-4-17-1","Avatar-content--primary":"avatar-module-Avatar-content--primary-APpou-4-17-1","Avatar-content--secondary":"avatar-module-Avatar-content--secondary-otLfi-4-17-1","Avatar-content--success":"avatar-module-Avatar-content--success-Zmxy6-4-17-1","Avatar-content--alert":"avatar-module-Avatar-content--alert-ng-FC-4-17-1","Avatar-content--warning":"avatar-module-Avatar-content--warning-0Tidt-4-17-1","Avatar-content--accent1":"avatar-module-Avatar-content--accent1-f6QRu-4-17-1","Avatar-content--accent2":"avatar-module-Avatar-content--accent2-y3plU-4-17-1","Avatar-content--accent3":"avatar-module-Avatar-content--accent3-SDOJJ-4-17-1","Avatar-content--accent4":"avatar-module-Avatar-content--accent4-Dgi83-4-17-1","Avatar-presence":"avatar-module-Avatar-presence-ByKmm-4-17-1","Avatar-presence--active":"avatar-module-Avatar-presence--active-AU4X3-4-17-1","Avatar-presence--away":"avatar-module-Avatar-presence--away-CDNWs-4-17-1","Avatar-status":"avatar-module-Avatar-status-03nd7-4-17-1"};
styleInject$1(css_248z$1k);
var AvatarIcon = function AvatarIcon(props) {
var _a;
var contextProp = React__namespace.useContext(AvatarContext);
var size = contextProp.size,
appearance = contextProp.appearance,
_b = contextProp.darkAppearance,
darkAppearance = _b === void 0 ? [] : _b;
var iconSize = size === 'regular' ? 20 : 16;
var iconAppearance = appearance && iconAppearanceMapper[appearance] || 'inverse';
var IconClassNames = classNames__default["default"]((_a = {}, _a[avatarStyles['Avatar-content']] = appearance && darkAppearance.includes(appearance), _a));
return /*#__PURE__*/React__namespace.createElement(Icon, __assign$1({}, props, {
size: iconSize,
appearance: iconAppearance,
className: IconClassNames
}));
};
var sizeMapper = {
regular: 32,
tiny: 24,
micro: 20
};
var AvatarImage = function AvatarImage(props) {
var _a, _b;
var children = props.children,
src = props.src;
var _c = React__namespace.useState(false),
error = _c[0],
setError = _c[1];
var contextProp = React__namespace.useContext(AvatarContext);
var size = contextProp.size,
appearance = contextProp.appearance,
firstName = contextProp.firstName,
lastName = contextProp.lastName,
darkAppearance = contextProp.darkAppearance;
var baseProps = extractBaseProps(props);
var initials = "" + (firstName ? firstName.trim()[0] : '') + (lastName ? lastName.trim()[0] : '');
var imgSize = size && sizeMapper[size];
var avatarAppearance = appearance || 'secondary';
var TextClassNames = classNames__default["default"]((_a = {}, _a[avatarStyles["Avatar-content--" + size]] = size, _a[avatarStyles["Avatar-content--" + avatarAppearance]] = avatarAppearance, _a));
var IconClassNames = classNames__default["default"]((_b = {}, _b[avatarStyles['Avatar-content']] = avatarAppearance && darkAppearance.includes(avatarAppearance), _b));
var iconAppearance = iconAppearanceMapper[avatarAppearance] || 'inverse';
var onError = function onError() {
setError(true);
};
if (children) {
return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, children);
}
if (error) {
if (initials) {
return /*#__PURE__*/React__namespace.createElement(Text, __assign$1({
weight: "medium",
className: TextClassNames
}, baseProps), initials);
}
return /*#__PURE__*/React__namespace.createElement(Icon, {
"data-test": "DesignSystem-Avatar--Icon",
name: "person",
size: size === 'regular' ? 20 : 16,
appearance: iconAppearance,
className: IconClassNames
});
}
return /*#__PURE__*/React__namespace.createElement("img", __assign$1({
"data-test": "DesignSystem-Image",
src: src,
alt: firstName
}, baseProps, {
height: imgSize,
width: imgSize,
onError: onError
}));
};
var initialsLength = 2;
var DefaultAppearance = 'secondary';
var colors = ['accent4', 'primary', 'accent3', 'alert', 'accent2', 'warning', 'accent1', 'success'];
var Avatar = function Avatar(props) {
var _a, _b, _c, _d;
var withTooltip = props.withTooltip,
tooltipPosition = props.tooltipPosition,
size = props.size,
children = props.children,
firstName = props.firstName,
lastName = props.lastName,
className = props.className,
appearance = props.appearance,
shape = props.shape,
disabled = props.disabled,
tooltipSuffix = props.tooltipSuffix,
tabIndex = props.tabIndex,
presence = props.presence,
status = props.status,
strokeColor = props.strokeColor,
_e = props.role,
role = _e === void 0 ? 'presentation' : _e;
var baseProps = extractBaseProps(props);
var initials = children && typeof children === 'string' ? children.trim().slice(0, initialsLength) : "" + (firstName ? firstName.trim()[0] : '') + (lastName ? lastName.trim()[0] : '');
var getTooltipName = function getTooltipName() {
if (children && typeof children === 'string') {
return children + " " + (tooltipSuffix || '');
}
return (firstName || '') + " " + (lastName || '') + " " + (tooltipSuffix || '') || '';
};
var AvatarAppearance = appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
var darkAppearance = ['secondary', 'success', 'warning', 'accent1', 'accent4'];
var showPresence = presence && !disabled && size !== 'micro' && shape === 'round' && (presence === 'active' || presence === 'away');
var showStatus = status && size !== 'micro' && size === 'regular' && shape === 'round';
var AvatarClassNames = classNames__default["default"]((_a = {}, _a[avatarStyles.Avatar] = true, _a[avatarStyles['Avatar--square']] = shape === 'square', _a[avatarStyles["Avatar--" + size]] = shape !== 'square', _a[avatarStyles["Avatar--" + AvatarAppearance]] = AvatarAppearance, _a[avatarStyles['Avatar--noInitials']] = !initials || !withTooltip, _a[avatarStyles['Avatar--disabled']] = disabled, _a[avatarStyles['Avatar--default']] = !disabled, _a), className);
var AvatarWrapperClassNames = classNames__default["default"]((_b = {}, _b[avatarStyles['Avatar-wrapper--square']] = shape === 'square', _b[avatarStyles["Avatar--" + size]] = shape === 'square', _b));
var TextClassNames = classNames__default["default"]((_c = {}, _c[avatarStyles["Avatar-content--" + size]] = size, _c[avatarStyles["Avatar-content--" + AvatarAppearance]] = AvatarAppearance, _c));
var presenceClassNames = classNames__default["default"]((_d = {}, _d[avatarStyles['Avatar-presence']] = presence, _d[avatarStyles['Avatar-presence--active']] = presence === 'active', _d[avatarStyles['Avatar-presence--away']] = presence === 'away', _d));
var borderStyle = {
boxShadow: "0 0 0 var(--spacing-05) " + strokeColor
};
var sharedProp = {
size: size,
firstName: firstName,
lastName: lastName,
appearance: AvatarAppearance,
darkAppearance: darkAppearance
};
var renderFallbackIcon = function renderFallbackIcon() {
var iconName = shape === 'square' ? 'groups' : 'person';
var iconAppearance = iconAppearanceMapper[AvatarAppearance] || 'inverse';
return /*#__PURE__*/React__namespace.createElement(Icon, {
"data-test": "DesignSystem-Avatar--Icon",
name: iconName,
size: size === 'regular' ? 20 : 16,
appearance: iconAppearance
});
};
var renderAvatar = function renderAvatar() {
if (children && typeof children !== 'string') {
return /*#__PURE__*/React__namespace.createElement("span", {
"data-test": "DesignSystem-AvatarWrapper",
className: AvatarWrapperClassNames,
role: role
}, /*#__PURE__*/React__namespace.createElement(AvatarProvider, {
value: sharedProp
}, /*#__PURE__*/React__namespace.createElement("span", __assign$1({
"data-test": "DesignSystem-Avatar"
}, baseProps, {
className: AvatarClassNames,
tabIndex: tabIndex || disabled ? -1 : 0
}), children)));
}
return /*#__PURE__*/React__namespace.createElement("span", {
"data-test": "DesignSystem-AvatarWrapper",
className: AvatarWrapperClassNames,
role: role
}, /*#__PURE__*/React__namespace.createElement("span", __assign$1({
"data-test": "DesignSystem-Avatar"
}, baseProps, {
className: AvatarClassNames,
tabIndex: tabIndex || disabled ? -1 : 0
}), /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, initials && (/*#__PURE__*/React__namespace.createElement(Text, {
weight: "medium",
className: TextClassNames
}, initials)), !initials && renderFallbackIcon())));
};
var renderTooltip = function renderTooltip() {
return /*#__PURE__*/React__namespace.createElement("span", {
className: "position-relative d-inline-flex"
}, withTooltip && initials ? (/*#__PURE__*/React__namespace.createElement(Tooltip, {
tooltip: getTooltipName(),
position: tooltipPosition,
triggerClass: "flex-grow-0"
}, renderAvatar())) : renderAvatar(), showPresence && (/*#__PURE__*/React__namespace.createElement("span", {
"data-test": "DesignSystem-Avatar--Presence",
className: presenceClassNames,
style: borderStyle
})), showStatus && (/*#__PURE__*/React__namespace.createElement("span", {
"data-test": "DesignSystem-Avatar--Status",
className: avatarStyles['Avatar-status'],
style: borderStyle
}, status)));
};
return renderTooltip();
};
Avatar.displayName = 'Avatar';
Avatar.Icon = AvatarIcon;
Avatar.Image = AvatarImage;
Avatar.defaultProps = {
tooltipPosition: 'bottom',
withTooltip: true,
size: 'regular',
shape: 'round',
strokeColor: 'var(--white)'
};
var css_248z$1j = ".avatarGroup-module-AvatarGroup-item-BdNGp-4-17-1 {\n border-radius: var(--border-radius-full);\n position: relative;\n margin-right: calc(var(--spacing-05) * -1);\n}\n\n.avatarGroup-module-AvatarGroup-item--square-ghPcd-4-17-1 {\n border-radius: var(--border-radius-10);\n}\n\n.avatarGroup-module-AvatarGroup-item--regular-zOeeU-4-17-1 {\n height: var(--spacing-80);\n}\n\n.avatarGroup-module-AvatarGroup-item--tiny-UfaCA-4-17-1 {\n height: var(--spacing-60);\n}\n\n.avatarGroup-module-AvatarGroup-Popper-z-iGj-4-17-1 {\n overflow-y: auto;\n box-sizing: border-box;\n}\n\n.avatarGroup-module-AvatarGroup-TextWrapper-bg8co-4-17-1 {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-y: auto;\n}\n\n.avatarGroup-module-AvatarCount-wrapper-k9GxW-4-17-1 {\n border-radius: var(--border-radius-full);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.avatarGroup-module-AvatarCount-wrapper-k9GxW-4-17-1:focus,\n.avatarGroup-module-AvatarCount-wrapper-k9GxW-4-17-1:focus-visible {\n outline: 3px solid var(--primary-shadow);\n outline-offset: 3px;\n}\n\n.avatarGroup-module-AvatarGroup-inputWrapper-VHc2A-4-17-1 {\n border-bottom: var(--border-width-2-5) solid var(--secondary-dark);\n}\n\n.avatarGroup-module-AvatarGroup-inputWrapper-VHc2A-4-17-1:focus-within {\n border-bottom: var(--border-width-2-5) solid var(--primary);\n}\n\n.avatarGroup-module-AvatarGroup-input-pXgb--4-17-1 {\n min-width: unset !important;\n background: transparent;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n height: calc(var(--spacing-80) + var(--spacing-10)) !important;\n}\n\n.avatarGroup-module-AvatarGroup-input-pXgb--4-17-1,\n.avatarGroup-module-AvatarGroup-input-pXgb--4-17-1:focus-within {\n border: unset !important;\n box-shadow: none !important;\n}\n\n.avatarGroup-module-AvatarGroup-input-pXgb--4-17-1:hover {\n background-color: var(--secondary-lightest);\n}\n\n.avatarGroup-module-AvatarGroup-listItem--disabled-Ln1fi-4-17-1 {\n cursor: not-allowed;\n pointer-events: auto !important;\n}\n";
var styles$17 = {"AvatarGroup-item":"avatarGroup-module-AvatarGroup-item-BdNGp-4-17-1","AvatarGroup-item--square":"avatarGroup-module-AvatarGroup-item--square-ghPcd-4-17-1","AvatarGroup-item--regular":"avatarGroup-module-AvatarGroup-item--regular-zOeeU-4-17-1","AvatarGroup-item--tiny":"avatarGroup-module-AvatarGroup-item--tiny-UfaCA-4-17-1","AvatarGroup-Popper":"avatarGroup-module-AvatarGroup-Popper-z-iGj-4-17-1","AvatarGroup-TextWrapper":"avatarGroup-module-AvatarGroup-TextWrapper-bg8co-4-17-1","AvatarCount-wrapper":"avatarGroup-module-AvatarCount-wrapper-k9GxW-4-17-1","AvatarGroup-inputWrapper":"avatarGroup-module-AvatarGroup-inputWrapper-VHc2A-4-17-1","AvatarGroup-input":"avatarGroup-module-AvatarGroup-input-pXgb--4-17-1","AvatarGroup-listItem--disabled":"avatarGroup-module-AvatarGroup-listItem--disabled-Ln1fi-4-17-1"};
styleInject$1(css_248z$1j);
var AvatarCount = function AvatarCount(props) {
var _a, _b;
var hiddenAvatarCount = props.hiddenAvatarCount,
avatarStyle = props.avatarStyle,
_c = props.size,
size = _c === void 0 ? 'regular' : _c,
on = props.on;
var ContentClass = classNames__default["default"]((_a = {}, _a[avatarStyles['Avatar-content']] = true, _a[avatarStyles['Avatar-content--tiny']] = size === 'tiny', _a[avatarStyles['Avatar-content--micro']] = size === 'micro', _a));
var AvatarVariantsClass = classNames__default["default"]((_b = {}, _b[avatarStyles.Avatar] = true, _b[avatarStyles["Avatar--" + size]] = size, _b[avatarStyles["Avatar--secondary"]] = true, _b['cursor-default'] = true, _b['cursor-pointer'] = on === 'click', _b));
return /*#__PURE__*/React__namespace.createElement("div", {
"data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
className: styles$17['AvatarCount-wrapper'],
style: avatarStyle,
tabIndex: 0,
role: "button"
}, /*#__PURE__*/React__namespace.createElement("span", {
"data-test": "DesignSystem-AvatarGroup--TriggerAvatarVariants",
className: AvatarVariantsClass
}, /*#__PURE__*/React__namespace.createElement(Text, {
className: ContentClass
}, "+" + hiddenAvatarCount)));
};
var Avatars = function Avatars(props) {
var avatarList = props.avatarList,
avatarStyle = props.avatarStyle,
tooltipPosition = props.tooltipPosition,
size = props.size;
var avatars = avatarList.map(function (item, index) {
var _a;
var icon = item.icon,
image = item.image,
shape = item.shape;
var avatarShape = shape === 'square' ? 'square' : 'round';
var GroupClass = classNames__default["default"]((_a = {}, _a[styles$17["AvatarGroup-item"]] = true, _a[styles$17["AvatarGroup-item--square"]] = avatarShape === 'square', _a[styles$17["AvatarGroup-item--tiny"]] = size === 'tiny', _a[styles$17["AvatarGroup-item--regular"]] = size === 'regular', _a));
var newAvatarStyle = __assign$1(__assign$1({}, avatarStyle), {
zIndex: avatarList.length - index
});
return /*#__PURE__*/React__namespace.createElement("div", {
"data-test": "DesignSystem-AvatarGroup--Avatar",
className: GroupClass,
style: newAvatarStyle,
key: index
}, /*#__PURE__*/React__namespace.createElement(Avatar, __assign$1({
size: size,
shape: avatarShape,
withTooltip: true,
tooltipPosition: tooltipPosition
}, item), image || icon));
});
return avatars;
};
var AvatarGroupEmptyState = function AvatarGroupEmptyState(props) {
var height = props.height,
title = props.title,
description = props.description;
return /*#__PURE__*/React__namespace.createElement("div", {
className: "d-flex flex-column justify-content-center align-items-center",
style: {
height: height ? height - 4 : ''
},
"data-test": "DesignSystem-AvatarGroup--EmptyState"
}, title && (/*#__PURE__*/React__namespace.createElement(Text, {
className: "text-align-center mb-3",
weight: "strong"
}, title)), description && (/*#__PURE__*/React__namespace.createElement(Text, {
className: "text-align-center mb-6",
weight: "medium",
size: "small",
appearance: "subtle"
}, description)));
};
var AvatarGroupInput = function AvatarGroupInput(props) {
var _a;
var inputClassName = classNames__default["default"]((_a = {
'w-100': true
}, _a[styles$17['AvatarGroup-input']] = true, _a));
return /*#__PURE__*/React__namespace.createElement("div", {
className: styles$17['AvatarGroup-inputWrapper']
}, /*#__PURE__*/React__namespace.createElement(Input, __assign$1({
icon: "search",
className: inputClassName,
"data-test": "DesignSystem-AvatarGroup--Input"
}, props)));
};
var AvatarOptionItem = function AvatarOptionItem(props) {
var _a, _b;
var avatarData = props.avatarData;
var _c = avatarData.firstName,
firstName = _c === void 0 ? '' : _c,
_d = avatarData.lastName,
lastName = _d === void 0 ? '' : _d,
_e = avatarData.tooltipSuffix,
tooltipSuffix = _e === void 0 ? '' : _e,
disabled = avatarData.disabled,
image = avatarData.image,
icon = avatarData.icon;
var name = firstName + " " + lastName + " " + tooltipSuffix;
var elementRef = React__namespace.useRef(null);
var triggerClassName = classNames__default["default"]((_a = {}, _a['cursor-not-allowed'] = disabled, _a['ellipsis--noWrap'] = true, _a));
var itemClassName = classNames__default["default"]((_b = {}, _b['AvatarGroup-listItem--disabled'] = disabled, _b['cursor-default'] = !disabled, _b));
return /*#__PURE__*/React__namespace.createElement(Listbox.Item, {
disabled: disabled,
className: itemClassName,
tagName: "li",
"data-test": "DesignSystem-AvatarGroup--Item"
}, /*#__PURE__*/React__namespace.createElement(Avatar, __assign$1({}, avatarData, {
withTooltip: false
}), image || icon), /*#__PURE__*/React__namespace.createElement(Tooltip, {
showOnTruncation: true,
tooltip: name,
elementRef: elementRef,
triggerClass: triggerClassName
}, /*#__PURE__*/React__namespace.createElement(Text, {
ref: elementRef,
"data-test": "DesignSystem-AvatarGroup--Text",
className: "ellipsis--noWrap ml-4"
}, name)));
};
var AvatarPopperBody = function AvatarPopperBody(props) {
var _a;
var hiddenAvatarList = props.hiddenAvatarList,
popperRenderer = props.popperRenderer,
maxHeight = props.maxHeight,
minHeight = props.minHeight,
width = props.width,
popperClassName = props.popperClassName,
withSearch = props.withSearch,
searchPlaceholder = props.searchPlaceholder,
searchComparator = props.searchComparator,
size = props.size;
var _b = React__namespace.useState(''),
searchValue = _b[0],
setSearchValue = _b[1];
var _c = React__namespace.useState(hiddenAvatarList),
searchList = _c[0],
setSearchList = _c[1];
var onSearchHandler = function onSearchHandler(event) {
var inputValue = event.target.value;
setSearchValue(inputValue);
var list = hiddenAvatarList.filter(function (avatarData) {
var _a, _b;
var firstName = avatarData.firstName,
lastName = avatarData.lastName;
if (searchComparator) {
return searchComparator(inputValue, avatarData);
}
return ((_a = firstName === null || firstName === void 0 ? void 0 : firstName.toLowerCase()) === null || _a === void 0 ? void 0 : _a.startsWith(inputValue.toLowerCase())) || ((_b = lastName === null || lastName === void 0 ? void 0 : lastName.toLowerCase()) === null || _b === void 0 ? void 0 : _b.startsWith(inputValue.toLowerCase()));
});
setSearchList(list);
};
var onClearHandler = function onClearHandler() {
setSearchValue('');
setSearchList(hiddenAvatarList);
};
var popperClass = classNames__default["default"]((_a = {}, _a[styles$17['AvatarGroup-Popper']] = true, _a['py-3'] = !withSearch, _a['pb-3'] = withSearch, _a), popperClassName);
var searchInputHeight = 36;
var searchBorder = 1;
var customStyle = {
width: width,
minHeight: minHeight,
maxHeight: withSearch ? maxHeight - searchInputHeight - searchBorder : maxHeight
};
if (popperRenderer) {
return popperRenderer(hiddenAvatarList);
}
return /*#__PURE__*/React__namespace.createElement("div", {
style: {
width: customStyle.width
},
"data-test": "DesignSystem-AvatarGroup--Popover"
}, withSearch && (/*#__PURE__*/React__namespace.createElement(AvatarGroupInput, {
value: searchValue,
placeholder: searchPlaceholder,
onChange: onSearchHandler,
onClear: onClearHandler
})), /*#__PURE__*/React__namespace.createElement("div", {
style: customStyle,
className: popperClass
}, searchList.length === 0 && (/*#__PURE__*/React__namespace.createElement(AvatarGroupEmptyState, {
height: customStyle.maxHeight,
title: "No users found",
description: "Try modifying your search to find what you are looking for."
})), !!searchList.length && (/*#__PURE__*/React__namespace.createElement(Listbox, {
tagName: "ul",
showDivider: false,
type: "description",
size: size === 'micro' ? 'tight' : 'compressed',
"data-test": "DesignSystem-AvatarGroup--List"
}, searchList.map(function (item, index) {
return /*#__PURE__*/React__namespace.createElement(AvatarOptionItem, {
key: index,
avatarData: __assign$1(__assign$1({}, item), {
size: size
})
});
})))));
};
var AvatarGroup = function AvatarGroup(props) {
var _a;
var max = props.max,
borderColor = props.borderColor,
popoverOptions = props.popoverOptions,
tooltipPosition = props.tooltipPosition,
list = props.list,
className = props.className,
size = props.size;
var popperRenderer = popoverOptions.popperRenderer,
_b = popoverOptions.maxHeight,
maxHeight = _b === void 0 ? 256 : _b,
_c = popoverOptions.width,
width = _c === void 0 ? 176 : _c,
minHeight = popoverOptions.minHeight,
_d = popoverOptions.position,
position = _d === void 0 ? 'bottom' : _d,
_e = popoverOptions.on,
on = _e === void 0 ? 'hover' : _e,
_f = popoverOptions.appendToBody,
appendToBody = _f === void 0 ? true : _f,
withSearch = popoverOptions.withSearch,
searchPlaceholder = popoverOptions.searchPlaceholder,
searchComparator = popoverOptions.searchComparator,
_g = popoverOptions.popperClassName,
popperClassName = _g === void 0 ? '' : _g;
var baseProps = extractBaseProps(props);
var hiddenAvatarCount = list.length > max ? Math.min(list.length - max, 99) : 0;
var style = {
backgroundColor: "" + borderColor,
boxShadow: "0 0 0 calc(var(--spacing-2-5) + var(--spacing-05)) " + borderColor
};
var tinyAvatarStyle = {
boxShadow: "0 0 0 var(--spacing-05) " + borderColor
};
var avatarStyle = size !== 'regular' ? __assign$1(__assign$1({}, style), tinyAvatarStyle) : style;
var avatarList = list.length === 3 ? list : list.slice(0, max);
var AvatarGroupClass = classNames__default["default"]((_a = {}, _a[styles$17['AvatarGroup']] = true, _a['d-inline-flex'] = true, _a), className);
var avatarPopperBodyProps = {
hiddenAvatarList: __spreadArrays(list).slice(max, list.length),
popperRenderer: popperRenderer,
maxHeight: maxHeight,
minHeight: minHeight,
width: width,
popperClassName: popperClassName,
withSearch: withSearch,
searchPlaceholder: searchPlaceholder,
searchComparator: searchComparator,
size: size
};
return /*#__PURE__*/React__namespace.createElement("div", __assign$1({
"data-test": "DesignSystem-AvatarGroup"
}, baseProps, {
className: AvatarGroupClass
}), /*#__PURE__*/React__namespace.createElement(Avatars, {
size: size,
avatarList: avatarList,
avatarStyle: avatarStyle,
tooltipPosition: tooltipPosition
}), list.length - max > 0 && list.length !== 3 && (/*#__PURE__*/React__namespace.createEle