@zohodesk/components 1.2.19 → 1.2.20

package/PropValidationExcludeFilesArray.js

@@ -0,0 +1 @@
+[]

package/README.md

@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.20
+
+- **Avatar, ListContainer, Suggestions, Select, Switch** - Accessibility issue fixes.
+
 # 1.2.19 
 
 - Typography - lineheight unitless prop added

package/es/Avatar/Avatar.js

@@ -162,7 +162,8 @@ export default class Avatar extends React.Component {
       "data-id": dataId,
       "data-test-id": dataId,
       onClick: onClick,
-      "data-selector-id": dataSelectorId
+      "data-selector-id": dataSelectorId,
+      tabIndex: onClick ? 0 : null
     }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
       className: `${style.initial}`,
       "data-id": `${dataId}_AvatarInitial`,

package/es/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap

@@ -252,6 +252,7 @@ exports[`AvatarTeam rendering the onClick prop with asFragment and toMatchSnapsh
       data-id="Avatar"
       data-selector-id="avatar"
       data-test-id="Avatar"
+      tabindex="0"
     >
       <span
         class="initial"

package/es/ListItem/ListContainer.js

@@ -55,7 +55,8 @@ const ListContainer = props => {
     role,
     ariaSelected,
     ariaLabel,
-    insetFocus = true
+    insetFocus = true,
+    ...a11yAttributes
   } = a11y;
   const options = {};
 
@@ -89,7 +90,7 @@ const ListContainer = props => {
     eleRef: eleRef,
     tagName: isLink ? 'a' : 'li',
     "data-title": isDisabled ? disableTitle : title
-  }, options, customProps), children);
+  }, options, customProps, a11yAttributes), children);
 };
 
 ListContainer.defaultProps = ListContainerDefaultProps;

package/es/MultiSelect/Suggestions.js

@@ -60,7 +60,8 @@ export default class Suggestions extends React.PureComponent {
       const isHighlight = hoverOption === index || id === hoverId ? true : false;
       const list_a11y = Object.assign({}, a11y, {
         ariaSelected: isActive,
-        ariaLabel: value
+        ariaLabel: value,
+        'data-a11y-list-active': isHighlight
       });
       const commonProps = {
         isDisabled,

package/es/Select/Select.js

@@ -298,7 +298,8 @@ export class SelectComponent extends Component {
       isPopupOpen,
       onKeyDown,
       isPopupOpenOnEnter,
-      needCloseOnSelect
+      needCloseOnSelect,
+      isPopupReady
     } = this.props;
     let {
       hoverIndex,
@@ -349,7 +350,7 @@ export class SelectComponent extends Component {
         id
       } = option || {};
 
-      if (isPopupOpen && !getIsEmptyValue(id) && onChange) {
+      if (isPopupReady && !getIsEmptyValue(id) && onChange) {
         onChange(id, optionsNormalize[id]);
         needCloseOnSelect && this.handlePopupClose(e);
       }

package/es/Switch/Switch.js

@@ -59,7 +59,6 @@ export default class Switch extends React.Component {
       "data-title": disabled ? disableTitle : title,
       "aria-checked": checked,
       role: "switch",
-      tabIndex: isReadOnly || disabled ? '-1' : '0',
       dataSelectorId: dataSelectorId
     }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style[size]} ${customSwitchSize}`
@@ -77,7 +76,8 @@ export default class Switch extends React.Component {
       htmlFor: id,
       "data-id": dataId,
       "data-test-id": dataId,
-      className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`
+      className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+      tabIndex: isReadOnly || disabled ? '-1' : '0'
     })), text && /*#__PURE__*/React.createElement(Label, _extends({
       text: text,
       palette: labelPalette,

package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -9,7 +9,6 @@ exports[`Switch rendering the CustomClass 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium SwtichCustomSwitchSize shrinkOff"
@@ -26,6 +25,7 @@ exports[`Switch rendering the CustomClass 1`] = `
       <label
         class="label switch_mediumLabel SwtichCustomSwitch"
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -52,7 +52,6 @@ exports[`Switch rendering the CustomProps 1`] = `
     data-switch="true"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -69,6 +68,7 @@ exports[`Switch rendering the CustomProps 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -95,7 +95,6 @@ exports[`Switch rendering the ID 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -112,6 +111,7 @@ exports[`Switch rendering the ID 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -137,7 +137,6 @@ exports[`Switch rendering the Name 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -155,6 +154,7 @@ exports[`Switch rendering the Name 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -171,7 +171,6 @@ exports[`Switch rendering the Title 1`] = `
     data-test-id="containerComponent"
     data-title="LabelTitle"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -188,6 +187,7 @@ exports[`Switch rendering the Title 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -203,7 +203,6 @@ exports[`Switch rendering the Value 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -220,6 +219,7 @@ exports[`Switch rendering the Value 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -235,7 +235,6 @@ exports[`Switch rendering the checked 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -253,6 +252,7 @@ exports[`Switch rendering the checked 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -268,7 +268,6 @@ exports[`Switch rendering the dataId 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -287,6 +286,7 @@ exports[`Switch rendering the dataId 1`] = `
         data-id="data-Switch"
         data-test-id="data-Switch"
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -302,7 +302,6 @@ exports[`Switch rendering the defult props 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -317,6 +316,7 @@ exports[`Switch rendering the defult props 1`] = `
       />
       <label
         class="label switch_mediumLabel "
+        tabindex="0"
       />
     </div>
   </div>
@@ -333,7 +333,6 @@ exports[`Switch rendering the disabled and disableTitle 1`] = `
     data-test-id="containerComponent"
     data-title="data-disableTitle"
     role="switch"
-    tabindex="-1"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -351,6 +350,7 @@ exports[`Switch rendering the disabled and disableTitle 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="-1"
       />
     </div>
   </div>
@@ -366,7 +366,6 @@ exports[`Switch rendering the isReadOnly 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="-1"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -382,6 +381,7 @@ exports[`Switch rendering the isReadOnly 1`] = `
       />
       <label
         class="label switch_mediumLabel "
+        tabindex="-1"
       />
     </div>
   </div>
@@ -397,7 +397,6 @@ exports[`Switch rendering the labelSize of- danger 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -414,6 +413,7 @@ exports[`Switch rendering the labelSize of- danger 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -439,7 +439,6 @@ exports[`Switch rendering the labelSize of- default 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -456,6 +455,7 @@ exports[`Switch rendering the labelSize of- default 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -481,7 +481,6 @@ exports[`Switch rendering the labelSize of- large 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -498,6 +497,7 @@ exports[`Switch rendering the labelSize of- large 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -523,7 +523,6 @@ exports[`Switch rendering the labelSize of- mandatory 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -540,6 +539,7 @@ exports[`Switch rendering the labelSize of- mandatory 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -565,7 +565,6 @@ exports[`Switch rendering the labelSize of- medium 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -582,6 +581,7 @@ exports[`Switch rendering the labelSize of- medium 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -607,7 +607,6 @@ exports[`Switch rendering the labelSize of- primary 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -624,6 +623,7 @@ exports[`Switch rendering the labelSize of- primary 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -649,7 +649,6 @@ exports[`Switch rendering the labelSize of- secondary 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -666,6 +665,7 @@ exports[`Switch rendering the labelSize of- secondary 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -691,7 +691,6 @@ exports[`Switch rendering the labelSize of- small 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -708,6 +707,7 @@ exports[`Switch rendering the labelSize of- small 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label
@@ -733,7 +733,6 @@ exports[`Switch rendering the size of- medium 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -750,6 +749,7 @@ exports[`Switch rendering the size of- medium 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -765,7 +765,6 @@ exports[`Switch rendering the size of- small 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_small  shrinkOff"
@@ -782,6 +781,7 @@ exports[`Switch rendering the size of- small 1`] = `
       <label
         class="label switch_smallLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
   </div>
@@ -797,7 +797,6 @@ exports[`Switch rendering the text 1`] = `
     data-selector-id="switch"
     data-test-id="containerComponent"
     role="switch"
-    tabindex="0"
   >
     <div
       class="switch_medium  shrinkOff"
@@ -814,6 +813,7 @@ exports[`Switch rendering the text 1`] = `
       <label
         class="label switch_mediumLabel "
         for="SwitchID"
+        tabindex="0"
       />
     </div>
     <label

package/es/v1/Accordion/Accordion.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { Accordion_defaultProps } from '../../Accordion/props/defaultProps';
-import { Accordion_propTypes } from '../../Accordion/props/propTypes';
+import { Accordion_defaultProps } from './props/defaultProps';
+import { Accordion_propTypes } from './props/propTypes';
 export default function Accordion(props) {
   const {
     className,

package/es/v1/Accordion/AccordionItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AccordionItem_defaultProps } from '../../Accordion/props/defaultProps';
-import { AccordionItem_propTypes } from '../../Accordion/props/propTypes';
+import { AccordionItem_defaultProps } from './props/defaultProps';
+import { AccordionItem_propTypes } from './props/propTypes';
 import VelocityAnimation from '../VelocityAnimation/VelocityAnimation/VelocityAnimation';
 import VelocityAnimationGroup from '../VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 export default function AccordionItem(props) {

package/es/v1/Accordion/props/defaultProps.js

@@ -0,0 +1,12 @@
+export const Accordion_defaultProps = {
+  unMount: true,
+  disableInternalState: false,
+  a11y: {},
+  dataId: 'Accordion',
+  dataSelectorId: 'accordion'
+};
+export const AccordionItem_defaultProps = {
+  a11y: {},
+  dataId: 'AccordionItem',
+  dataSelectorId: 'accordionItem'
+};

package/es/v1/Accordion/props/propTypes.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+export const Accordion_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableInternalState: PropTypes.bool,
+  height: PropTypes.string,
+  onSelect: PropTypes.func,
+  selectedItem: PropTypes.string.isRequired,
+  unMount: PropTypes.bool,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaExpanded: PropTypes.bool,
+    ariaHaspopup: PropTypes.bool
+  })
+};
+export const AccordionItem_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  equalityCheck: PropTypes.func,
+  id: PropTypes.string,
+  selectMenu: PropTypes.func,
+  selectedItem: PropTypes.string,
+  unMount: PropTypes.bool,
+  unMountItem: PropTypes.bool,
+  innerClass: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string
+  })
+};

package/es/v1/Animation/Animation.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { defaultProps } from '../../Animation/props/defaultProps';
-import { propTypes } from '../../Animation/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { CSSTransition } from 'react-transition-group';
 import style from '../../common/transition.module.css';
 export default function Animation(props) {

package/es/v1/Animation/props/defaultProps.js

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  enterDuration: 300,
+  exitDuration: 300,
+  isActive: false,
+  name: 'fadeIn',
+  unmountOnExit: true
+};

package/es/v1/Animation/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  delayClassName: PropTypes.string,
+  enterDuration: PropTypes.number,
+  exitDuration: PropTypes.number,
+  isActive: PropTypes.bool,
+  name: PropTypes.oneOf(['zoomIn', 'scaleIn', 'fadeIn', 'slideLeft', 'slideDown', 'skewIn', 'default', 'none']),
+  onEntered: PropTypes.func,
+  onExit: PropTypes.func,
+  unmountOnExit: PropTypes.bool
+};

package/es/v1/AppContainer/AppContainer.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useEffect, useRef, useLayoutEffect } from 'react';
-import { defaultProps } from '../../AppContainer/props/defaultProps';
-import { propTypes } from '../../AppContainer/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Container, Box } from '../Layout';
 import Tooltip from '../Tooltip/Tooltip';
 import '../../common/basic.module.css';

package/es/v1/AppContainer/props/defaultProps.js

@@ -0,0 +1,10 @@
+export const defaultProps = {
+  dataId: 'AppContainer',
+  tagName: 'div',
+  className: '',
+  tooltipClass: '',
+  tooltipParentClass: '',
+  customProps: {},
+  dataSelectorId: 'appContainer',
+  needTooltip: true
+};

package/es/v1/AppContainer/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  eleRef: PropTypes.func,
+  tagName: PropTypes.string,
+  className: PropTypes.string,
+  needTooltip: PropTypes.bool,
+  tooltipClass: PropTypes.string,
+  tooltipParentClass: PropTypes.string,
+  customProps: PropTypes.shape({
+    ContainerProps: PropTypes.object,
+    TooltipProps: PropTypes.object,
+    ExtraProps: PropTypes.object
+  })
+};

package/es/v1/Avatar/Avatar.js

@@ -2,8 +2,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React, { useState } from 'react';
 import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
-import { defaultProps } from '../../Avatar/props/defaultProps';
-import { propTypes } from '../../Avatar/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { getInitial } from '../../utils/getInitial';
 import AvatarSize from '../../Provider/AvatarSize';
 import style from '../../Avatar/Avatar.module.css';
@@ -111,7 +111,8 @@ function Avatar(props) {
     "data-id": dataId,
     "data-test-id": dataId,
     onClick: onClick,
-    "data-selector-id": dataSelectorId
+    "data-selector-id": dataSelectorId,
+    tabIndex: onClick ? 0 : null
   }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
     className: `${style.initial}`,
     "data-id": `${dataId}_AvatarInitial`,

package/es/v1/Avatar/props/defaultProps.js

@@ -0,0 +1,17 @@
+export const defaultProps = {
+  needTitle: true,
+  palette: 'primary',
+  shape: 'circle',
+  size: 'medium',
+  src: null,
+  title: null,
+  dataId: 'Avatar',
+  needBorder: true,
+  borderOnActive: false,
+  borderOnHover: false,
+  customProps: {},
+  isAnimate: true,
+  dataSelectorId: 'avatar',
+  needInnerBorder: false,
+  needDefaultBorder: false
+};

package/es/v1/Avatar/props/propTypes.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  initial: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  needBorder: PropTypes.bool,
+  needTitle: PropTypes.bool,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
+  shape: PropTypes.oneOf(['circle', 'square']),
+  size: PropTypes.oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  src: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  title: PropTypes.string,
+  customClass: PropTypes.string,
+  alternateSrc: PropTypes.string,
+  borderOnActive: PropTypes.bool,
+  borderOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    AvatarProps: PropTypes.object
+  }),
+  isAnimate: PropTypes.bool,
+  needInnerBorder: PropTypes.bool,
+  needDefaultBorder: PropTypes.bool
+};

package/es/v1/AvatarTeam/AvatarTeam.js

@@ -1,8 +1,8 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { defaultProps } from '../../AvatarTeam/props/defaultProps';
-import { propTypes } from '../../AvatarTeam/props/propTypes';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Avatar from '../Avatar/Avatar';
 import style from '../../AvatarTeam/AvatarTeam.module.css';
 /* once avatar support firstname lastname and pattern
@@ -62,7 +62,7 @@ export default function AvatarTeam(props) {
     needBorder: needBorder,
     needDefaultBorder: needDefaultBorder
   }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
-    className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
+    className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill}
           ${style[`${size}team`]} ${customAvatarTeam}`
   }));
 }