npm - @lax-wp/design-system - Versions diffs - 0.13.33 → 0.13.34 - Mend

@lax-wp/design-system 0.13.33 → 0.13.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

package/dist/components/user-avatar/UserAvatar.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserAvatar.cjs.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { GroupsOutlined } from '@mui/icons-material';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\n\nexport type UserAvatarSize = 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number \| string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook /\n userDetails?: UserDetails \| null;\n /* Whether user details are being fetched /\n isFetchingUserDetails?: boolean;\n /* Optional token for authenticated image loading /\n authToken?: string;\n /* Callback triggered when mouse enters the avatar /\n onHover?: () => void;\n /* Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. /\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/\n UserAvatar component for displaying user profile pictures with hover popper\n \n @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n /\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n if (firstName === 'All' && lastName === 'Users') {\n return (\n <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n <GroupsOutlined sx={{ fontSize: 16 }} className='text-primary-600 dark:text-primary-600' />\n </div>\n );\n }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive \|\| !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken \|\| (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const popperRef = useRef<HTMLDivElement \| null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName \|\| ''} {lastName \|\| ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email \|\| userDetails?.email \|\| ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-[10px] leading-[18px] uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams \|\| userDetails?.clearanceLevel \|\| userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color \|\| '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id \|\| index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color \|\| '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName \|\| avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : firstName && lastName ? (\n <div\n className={cn(\n 'bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700 w-full h-full',\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsOutlined","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"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"}
1	+ {"version":3,"file":"UserAvatar.cjs.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { GroupsOutlined } from '@mui/icons-material';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\n\nexport type UserAvatarSize = '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number \| string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook /\n userDetails?: UserDetails \| null;\n /* Whether user details are being fetched /\n isFetchingUserDetails?: boolean;\n /* Optional token for authenticated image loading /\n authToken?: string;\n /* Callback triggered when mouse enters the avatar /\n onHover?: () => void;\n /* Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. /\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/\n UserAvatar component for displaying user profile pictures with hover popper\n \n @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n /\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n if (firstName === 'All' && lastName === 'Users') {\n return (\n <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n <GroupsOutlined sx={{ fontSize: 16 }} className='text-primary-600 dark:text-primary-600' />\n </div>\n );\n }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive \|\| !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n '2xs': 'w-1.5 h-1.5',\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken \|\| (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const popperRef = useRef<HTMLDivElement \| null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName \|\| ''} {lastName \|\| ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email \|\| userDetails?.email \|\| ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams \|\| userDetails?.clearanceLevel \|\| userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color \|\| '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id \|\| index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color \|\| '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName \|\| avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : firstName && lastName ? (\n <div\n className={cn(\n 'bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700', \n sizeClasses[size],\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsOutlined","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"orBA2DMA,EAAU,CAAC,CAAE,MAAAC,EAAO,QAAAC,KACxBC,OAAC,MAAA,CAAI,UAAU,oCACb,SAAA,CAAAC,EAAAA,IAACC,EAAAA,WAAA,CAAW,KAAK,QAAQ,QAAQ,SAAS,UAAU,OAAO,WAAW,OACnE,SAAAJ,CAAA,CACH,EACCC,CAAA,EACH,EAiBWI,EAAkC,CAAC,CAC9C,UAAAC,EACA,SAAAC,EACA,MAAAC,EACA,WAAAC,EACA,KAAAC,EAAO,KACP,UAAAC,EAAY,KACZ,mBAAAC,EAAqB,GACrB,aAAAC,EAAe,GACf,UAAAC,EACA,OAAAC,EACA,aAAAC,EACA,SAAAC,EACA,gBAAAC,EAAkB,GAClB,YAAAC,EACA,sBAAAC,EAAwB,GACxB,UAAAC,EACA,QAAAC,EACA,iBAAAC,CACF,IAAM,CACJ,GAAIjB,IAAc,OAASC,IAAa,QACtC,OACEJ,EAAAA,IAAC,MAAA,CAAI,UAAU,qFACb,SAAAA,MAACqB,EAAAA,eAAA,CAAe,GAAI,CAAE,SAAU,EAAA,EAAM,UAAU,yCAAyC,EAC3F,EAIJ,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAkB,EAAK,EAC/C,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAkB,EAAK,EAEvDG,EAAkBC,EAAAA,YAAYrB,CAAI,EAElC,CACJ,WAAYsB,EACZ,YAAAC,EACA,SAAUC,EACV,UAAWC,EACX,KAAMC,EACN,KAAMC,CAAA,EACJC,sBAAA,EAEEC,EAAgBC,EAAAA,OAAkC,EAAE,EAEpDC,EAAWC,EAAAA,QAAQ,IAAM,CAC7B,GAAIzB,GAAY,CAACD,EAAc,MAAO,GACtC,MAAM2B,EAAO,IAAI,KAAK3B,CAAY,EAGlC,WAFgB,KAAA,EACS,QAAA,EAAY2B,EAAK,YAAc,IAAO,GAAK,IAC/C,EACvB,EAAG,CAAC1B,EAAUD,CAAY,CAAC,EASrB4B,EANA3B,EAAiB,qCACjBwB,EAAiB,qCACjBzB,EAAqB,qCAClB,KAYH6B,EANA5B,EAAiB,6CACjBwB,EAAiB,6CACjBzB,EAAqB,6CAClB,6CAKH8B,EAAiB,CACrB,MAAO,cACP,GAAI,UACJ,GAAI,cACJ,GAAI,UACJ,GAAI,cACJ,GAAI,SAAA,EAGNC,EAAAA,UAAU,IAAM,CACd,GAAItC,EACF,GAAI8B,EAAc,QAAQ9B,CAAU,EAClCoB,EAAe,EAAI,MACd,CACLA,EAAe,EAAK,EACpB,MAAMmB,EAAM,IAAI,MACVC,EAAQ5B,IAAc,OAAO,aAAiB,IAAc,aAAa,QAAQ,OAAO,EAAI,MAClG2B,EAAI,IAAMvC,GAAcwC,EAAQ,UAAYA,EAAQ,IACpDD,EAAI,OAAS,IAAM,CACjBT,EAAc,QAAQ9B,CAAU,EAAIuC,EAAI,IACxCnB,EAAe,EAAI,CACrB,EACAmB,EAAI,QAAU,IAAM,CAClBnB,EAAe,EAAK,CACtB,CACF,MAEAA,EAAe,EAAK,CAExB,EAAG,CAACpB,EAAYY,CAAS,CAAC,EAE1B0B,EAAAA,UAAU,IACD,IAAM,CACPG,EAAS,SACX,aAAaA,EAAS,OAAO,CAEjC,EACC,CAAA,CAAE,EAEL,MAAMC,EAAY1C,EAAa8B,EAAc,QAAQ9B,CAAU,EAAI,OAE7DyC,EAAWV,EAAAA,OAA6C,IAAI,EAC5DY,EAAYZ,EAAAA,OAA8B,IAAI,EAE9Ca,EAAmB,IAAM,CAC7B/B,IAAA,EACIhB,GAAaC,GAAYM,IACvBqC,EAAS,SACX,aAAaA,EAAS,OAAO,EAE/BA,EAAS,QAAU,WAAW,IAAM,CAClCxB,EAAW,EAAI,CACjB,EAAG,GAAG,EAEV,EAEM4B,EAAoBC,GAA4B,CAChDL,EAAS,SACX,aAAaA,EAAS,OAAO,EAE/BA,EAAS,QAAU,WAAW,IAAM,CAC9BE,EAAU,SAAW,CAACA,EAAU,QAAQ,SAASG,EAAM,aAAqB,GAC9E7B,EAAW,EAAK,CAEpB,EAAG,GAAG,CACR,EAEM8B,EACJtD,EAAAA,KAAC,MAAA,CACC,IAAKkD,EACL,UAAU,6GACV,aAAc,IAAM,CACdF,EAAS,SACX,aAAaA,EAAS,OAAO,CAEjC,EACA,aAAeK,GAAUD,EAAiBC,CAAK,EAE/C,SAAA,CAAArD,EAAAA,KAAC,MAAA,CAAI,UAAU,uCACb,SAAA,CAAAA,OAAC,OAAI,UAAWuD,EAAG,WAAY1B,cAAYpB,CAAS,CAAC,EAClD,SAAA,CAAAwC,GAAavB,EACZzB,EAAAA,IAAC,MAAA,CACC,IAAKgD,EACL,IAAI,UACJ,UAAWM,EAAG,mDAAoDZ,CAAW,EAC7E,QAAS,IAAMhB,EAAe,EAAK,CAAA,CAAA,EAGrC1B,EAAAA,IAAC,MAAA,CACC,UAAWsD,EACT,2HACAZ,CAAA,EAGD,SAAAa,EAAAA,aAAapD,GAAa,IAAM,KAAOC,GAAY,GAAG,CAAA,CAAA,EAI1DqC,GACCzC,EAAAA,IAAC,MAAA,CACC,UAAWsD,EACT,qFACAX,EAAenC,CAAS,EACxBiC,CAAA,CACF,CAAA,CACF,EAEJ,EACA1C,EAAAA,KAAC,MAAA,CAAI,UAAU,kDACb,SAAA,CAAAA,OAACE,EAAAA,YAAW,KAAK,SAAS,QAAQ,WAAW,UAAU,qBACpD,SAAA,CAAAE,GAAa,GAAG,IAAEC,GAAY,EAAA,EACjC,EACCY,GAAa,QAAUhB,EAAAA,IAAC,QAAM,SAAAwD,GAAAA,4BAA4BxC,GAAa,MAAM,CAAA,CAAE,CAAA,EAClF,EAEAhB,EAAAA,IAACC,EAAAA,WAAA,CAAW,KAAK,QAAQ,QAAQ,SAAS,WAAW,OAClD,SAAAI,GAASW,GAAa,OAAS,EAAA,CAClC,CAAA,EACF,EAECI,QACE,MAAA,CAAI,UAAU,YACb,SAAArB,EAAAA,KAAC,MAAA,CAAI,UAAU,6JACb,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,UAAU,8JACb,SAAAA,EAAAA,IAACyD,GAAiB,GAAI,CAAE,MAAO,GAAI,OAAQ,EAAA,EAAM,UAAU,yCAAyC,EACtG,EACA1D,EAAAA,KAAC,MAAA,CAAI,UAAU,wBACb,SAAA,CAAAC,EAAAA,IAACC,EAAAA,WAAA,CACC,KAAK,cACL,QAAQ,WACR,WAAW,SACX,UAAU,uFACX,SAAA,mBAAA,CAAA,EAGDD,EAAAA,IAACC,EAAAA,YAAW,KAAK,cAAc,QAAQ,WAAW,UAAU,WACzD,SAAAmB,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CAAA,CACF,EACF,EACE,KAEHR,IACEK,EACCjB,MAAC,MAAA,CAAI,UAAU,MACb,SAAAA,EAAAA,IAAC0D,cAAS,CAAA,CACZ,EACE9C,IAAWI,GAAa,OAASA,GAAa,gBAAkBA,GAAa,OAC/EjB,EAAAA,KAAC,MAAA,CAAI,UAAU,oHACb,SAAA,CAAAC,EAAAA,IAAC2D,GAAAA,cAAA,CAAc,SAAA7C,EAAoB,aAAAD,CAAA,CAA4B,EAC9DG,EAAY,UACXhB,EAAAA,IAACJ,EAAA,CACC,MAAM,WACN,QACEI,EAAAA,IAAC,MAAA,CAAI,UAAU,aACb,SAAAA,EAAAA,IAACC,aAAA,CAAW,KAAK,QAAQ,QAAQ,SAAS,WAAW,OAClD,SAAAe,EAAY,SACf,CAAA,CACF,CAAA,CAAA,EAKLA,GAAa,OAASA,GAAa,OAAO,OAAS,GAClDhB,EAAAA,IAACJ,EAAA,CACC,MAAM,OACN,QACEG,EAAAA,KAAC,MAAA,CAAI,UAAU,aACZ,SAAA,CAAAiB,GAAa,OAAO,OAAS,GAC5BhB,EAAAA,IAAC4D,EAAAA,IAAA,CAEC,MAAO5C,GAAa,MAAM,CAAC,GAAG,KAC9B,MAAOA,GAAa,MAAM,CAAC,GAAG,OAAS,UACvC,KAAK,KACL,YAAW,EAAA,EAJNA,GAAa,MAAM,CAAC,GAAG,EAAA,EAO/BA,GAAa,OAAO,QAAU,GAC7BjB,EAAAA,KAAC,MAAA,CACC,IAAK8B,EACL,UAAU,0BACV,aAAcI,EACd,aAAcC,EACd,QAAU2B,GAAMA,EAAE,gBAAA,EAElB,SAAA,CAAA7D,EAAAA,IAAC4D,EAAAA,IAAA,CAAY,MAAO,KAAK5C,GAAa,OAAO,OAAS,CAAC,QAAS,MAAM,UAAU,KAAK,KAAK,YAAW,IAA3F,CAA4F,EAErGgB,GACChC,EAAAA,IAAC,MAAA,CACC,IAAK8B,EACL,UAAWwB,EACT,wKACA,CACE,WAAYvB,EAAiB,WAAa,SAC1C,cAAeA,EAAiB,WAAa,MAC7C,SAAUA,EAAiB,aAAe,OAC1C,UAAWA,EAAiB,aAAe,OAAA,CAC7C,EAEF,aAAcE,EACd,aAAcC,EAEb,SAAAlB,GAAa,OAAO,MAAM,CAAC,GAAG,IAAI,CAAC8C,EAAMC,UACvC,MAAA,CAA4B,UAAU,OACrC,SAAA/D,EAAAA,IAAC4D,EAAAA,KAAmB,MAAOE,GAAM,KAAM,MAAOA,GAAM,OAAS,UAAW,KAAK,KAAK,YAAW,GAAC,UAAU,OAAA,EAA9FA,GAAM,EAAgG,CAAA,EADxGA,GAAM,IAAMC,CAEtB,CACD,CAAA,CAAA,CACH,CAAA,CAAA,CAEJ,CAAA,CAEJ,CAAA,CAAA,EAKL/C,GAAa,OACZhB,EAAAA,IAACJ,EAAA,CACC,MAAM,OACN,QAASI,EAAAA,IAAC4D,EAAAA,IAAA,CAA6B,MAAO5C,GAAa,MAAO,MAAM,UAAU,KAAK,KAAK,YAAW,EAAA,EAApFA,GAAa,KAAwE,CAAA,CAAA,EAI3GA,GAAa,gBACZhB,EAAAA,IAACJ,EAAA,CACC,MAAM,kBACN,QACEI,EAAAA,IAAC4D,EAAAA,IAAA,CAEC,MAAO,SAAS5C,GAAa,cAAc,GAC3C,MAAM,UACN,KAAK,KACL,YAAW,EAAA,EAJN,OAAOA,GAAa,cAAc,CAAA,CAKzC,CAAA,CAEJ,EAEJ,EAEAhB,EAAAA,IAAC,MAAA,CAAI,UAAU,sIACb,SAAAD,EAAAA,KAACE,EAAAA,WAAA,CAAW,UAAU,yCAAyC,KAAK,cAAc,QAAQ,SAAS,WAAW,OAC5G,SAAA,CAAAD,EAAAA,IAACgE,EAAA,CACC,GAAI,CACF,OAAQ,OACR,MAAO,OACP,MAAO,SAAA,CACT,CAAA,EACA,6BAAA,CAAA,CAEJ,CAAA,CACF,EAAA,CAAA,CAAA,EAIFC,EAAe5B,EAAAA,OAAuB,IAAI,EAChD,OACEtC,EAAAA,KAAC,MAAA,CACC,aAAcmD,EACd,aAAcC,EACd,UAAWG,EAAG,uCAAwC3C,CAAS,EAC/D,IAAKsD,EAEL,SAAA,CAAAlE,OAAC,OAAI,UAAWuD,EAAG,WAAY7C,GAAsBkB,CAAe,EACjE,SAAA,CAAAqB,GAAavB,EACZzB,EAAAA,IAAC,MAAA,CACC,IAAKgD,EACL,IAAI,UACJ,UAAWM,EAAG,iDAAkDZ,CAAW,EAC3E,QAAS,IAAMhB,EAAe,EAAK,CAAA,CAAA,EAEnCvB,GAAaC,EACfJ,EAAAA,IAAC,MAAA,CACC,UAAWsD,EACT,yGACA1B,EAAAA,YAAYrB,CAAI,EAChBmC,CAAA,EAGD,SAAAa,EAAAA,aAAapD,GAAa,IAAM,KAAOC,GAAY,GAAG,CAAA,CAAA,EAGzDJ,EAAAA,IAAC,MAAA,CAAI,UAAWsD,EAAGZ,EAAa,yGAAyG,EACvI,SAAA1C,EAAAA,IAACkE,GAAAA,WAAA,CAAW,KAAK,SAAA,CAAU,CAAA,CAC7B,EAGDnD,GAAmB0B,GAClBzC,EAAAA,IAAC,MAAA,CACC,UAAWsD,EACT,2FAEAb,CAAA,CACF,CAAA,CACF,EAEJ,EACAzC,EAAAA,IAACmE,GAAAA,iBAAA,CACC,OAAQ7C,EACR,QAAS,IAAMC,EAAW,EAAK,EAC/B,SAAU0C,EAAa,QACvB,UAAU,+FAET,SAAAZ,CAAA,CAAA,CACH,CAAA,CAAA,CAGN,EAEAnD,EAAW,YAAc"}

package/dist/components/user-avatar/UserAvatar.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-export type UserAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type UserAvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type UserDetailsTeam = {
     id?: string;
     name: string;

package/dist/components/user-avatar/UserAvatar.es.js CHANGED Viewed

@@ -3,14 +3,14 @@ import { GroupsOutlined as ee } from "@mui/icons-material";
 import re from "@mui/icons-material/EditOutlined";
 import oe from "@mui/icons-material/WarningRounded";
 import l from "../../_virtual/index.es.js";
-import { useState as H, useRef as k, useMemo as ae, useEffect as U } from "react";
+import { useState as B, useRef as k, useMemo as ae, useEffect as A } from "react";
 import { Typography as s } from "../data-display/typography/Typography.es.js";
 import { Tag as p } from "../data-display/tag/Tag.es.js";
 import { Skeleton as le } from "../data-display/skeleton/Skeleton.es.js";
 import { getFlagComponentRectangleMd as te } from "../../utils/countryFlags.es.js";
 import { UserAvatarPopper as ne } from "./UserAvatarPopper.es.js";
 import { StatusInfoRow as de } from "./StatusInfoRow.es.js";
-import { sizeClasses as B, getInitials as A } from "./constants.es.js";
+import { sizeClasses as C, getInitials as F } from "./constants.es.js";
 import { PersonIcon as ie } from "./PersonIcon.es.js";
 import { useDynamicPosition as ce } from "./useDynamicPosition.es.js";
 const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "flex justify-between items-center", children: [
@@ -19,50 +19,51 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
 ] }), se = ({
   firstName: n,
   lastName: d,
-  email: F,
+  email: $,
   profilePic: i,
-  size: $ = "md",
-  hoverSize: C = "lg",
+  size: z = "md",
+  hoverSize: M = "lg",
   containerClassName: G = "",
   enablePopper: P = !0,
   className: W,
-  userId: z,
+  userId: R,
   lastViewedOn: m,
   isActive: u,
   statusIndicator: q = !1,
   userDetails: r,
   isFetchingUserDetails: J = !1,
-  authToken: M,
+  authToken: j,
   onHover: K,
-  currentlyEditing: R
+  currentlyEditing: L
 }) => {
   if (n === "All" && d === "Users")
     return /* @__PURE__ */ e("div", { className: "p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center", children: /* @__PURE__ */ e(ee, { sx: { fontSize: 16 }, className: "text-primary-600 dark:text-primary-600" }) });
-  const [Q, y] = H(!1), [j, c] = H(!1), X = B[$], {
+  const [Q, y] = B(!1), [S, c] = B(!1), X = C[z], {
     triggerRef: Y,
     dropdownRef: Z,
     position: g,
     isVisible: _,
-    show: L,
-    hide: S
-  } = ce(), w = k({}), T = ae(() => {
+    show: T,
+    hide: I
+  } = ce(), w = k({}), E = ae(() => {
     if (u || !m) return !1;
     const o = new Date(m);
     return ((/* @__PURE__ */ new Date()).getTime() - o.getTime()) / (1e3 * 60 * 60) < 24;
-  }, [u, m]), h = u ? "bg-primary-600 dark:bg-primary-600" : T ? "bg-primary-300 dark:bg-primary-300" : m ? "bg-neutral-400 dark:bg-neutral-400" : null, b = u ? "border-primary-600 dark:border-primary-600" : T ? "border-primary-300 dark:border-primary-300" : m ? "border-neutral-400 dark:border-neutral-400" : "border-primary-200 dark:border-neutral-800", O = {
+  }, [u, m]), h = u ? "bg-primary-600 dark:bg-primary-600" : E ? "bg-primary-300 dark:bg-primary-300" : m ? "bg-neutral-400 dark:bg-neutral-400" : null, b = u ? "border-primary-600 dark:border-primary-600" : E ? "border-primary-300 dark:border-primary-300" : m ? "border-neutral-400 dark:border-neutral-400" : "border-primary-200 dark:border-neutral-800", O = {
+    "2xs": "w-1.5 h-1.5",
     xs: "w-2 h-2",
     sm: "w-2.5 h-2.5",
     md: "w-3 h-3",
     lg: "w-3.5 h-3.5",
     xl: "w-4 h-4"
   };
-  U(() => {
+  A(() => {
     if (i)
       if (w.current[i])
         c(!0);
       else {
         c(!1);
-        const o = new Image(), f = M || (typeof localStorage < "u" ? localStorage.getItem("token") : null);
+        const o = new Image(), f = j || (typeof localStorage < "u" ? localStorage.getItem("token") : null);
         o.src = i + (f ? "?token=" + f : ""), o.onload = () => {
           w.current[i] = o.src, c(!0);
         }, o.onerror = () => {
@@ -71,14 +72,14 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
       }
     else
       c(!1);
-  }, [i, M]), U(() => () => {
+  }, [i, j]), A(() => () => {
     t.current && clearTimeout(t.current);
   }, []);
   const x = i ? w.current[i] : void 0, t = k(null), N = k(null), V = () => {
     K?.(), n && d && P && (t.current && clearTimeout(t.current), t.current = setTimeout(() => {
       y(!0);
     }, 300));
-  }, I = (o) => {
+  }, H = (o) => {
     t.current && clearTimeout(t.current), t.current = setTimeout(() => {
       N.current && !N.current.contains(o.relatedTarget) && y(!1);
     }, 200);
@@ -90,11 +91,11 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
       onMouseEnter: () => {
         t.current && clearTimeout(t.current);
       },
-      onMouseLeave: (o) => I(o),
+      onMouseLeave: (o) => H(o),
       children: [
         /* @__PURE__ */ a("div", { className: "flex flex-col gap-1 items-center p-5", children: [
-          /* @__PURE__ */ a("div", { className: l("relative", B[C]), children: [
-            x && j ? /* @__PURE__ */ e(
+          /* @__PURE__ */ a("div", { className: l("relative", C[M]), children: [
+            x && S ? /* @__PURE__ */ e(
               "img",
               {
                 src: x,
@@ -109,7 +110,7 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
                   "bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full",
                   b
                 ),
-                children: A((n || "") + " " + (d || ""))
+                children: F((n || "") + " " + (d || ""))
               }
             ),
             h && /* @__PURE__ */ e(
@@ -117,7 +118,7 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
               {
                 className: l(
                   "absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800",
-                  O[C],
+                  O[M],
                   h
                 )
               }
@@ -131,9 +132,9 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
             ] }),
             r?.region && /* @__PURE__ */ e("span", { children: te(r?.region) })
           ] }),
-          /* @__PURE__ */ e(s, { size: "small", variant: "medium", appearance: "body", children: F || r?.email || "" })
+          /* @__PURE__ */ e(s, { size: "small", variant: "medium", appearance: "body", children: $ || r?.email || "" })
         ] }),
-        R ? /* @__PURE__ */ e("div", { className: "px-5 pb-3", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]", children: [
+        L ? /* @__PURE__ */ e("div", { className: "px-5 pb-3", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]", children: [
           /* @__PURE__ */ e("div", { className: "flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950", children: /* @__PURE__ */ e(re, { sx: { width: 13, height: 13 }, className: "text-primary-600 dark:text-primary-500" }) }),
           /* @__PURE__ */ a("div", { className: "flex flex-col min-w-0", children: [
             /* @__PURE__ */ e(
@@ -142,14 +143,14 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
                 size: "extra-small",
                 variant: "semibold",
                 appearance: "custom",
-                className: "text-[10px] leading-[18px] uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500",
+                className: "text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500",
                 children: "Currently editing"
               }
             ),
-            /* @__PURE__ */ e(s, { size: "extra-small", variant: "semibold", className: "truncate", children: R })
+            /* @__PURE__ */ e(s, { size: "extra-small", variant: "semibold", className: "truncate", children: L })
           ] })
         ] }) }) : null,
-        z && (J ? /* @__PURE__ */ e("div", { className: "p-5", children: /* @__PURE__ */ e(le, {}) }) : z && (r?.teams || r?.clearanceLevel || r?.group) ? /* @__PURE__ */ a("div", { className: "flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg", children: [
+        R && (J ? /* @__PURE__ */ e("div", { className: "p-5", children: /* @__PURE__ */ e(le, {}) }) : R && (r?.teams || r?.clearanceLevel || r?.group) ? /* @__PURE__ */ a("div", { className: "flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg", children: [
           /* @__PURE__ */ e(de, { isActive: u, lastViewedOn: m }),
           r.username && /* @__PURE__ */ e(
             v,
@@ -178,8 +179,8 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
                   {
                     ref: Y,
                     className: "relative cursor-pointer",
-                    onMouseEnter: L,
-                    onMouseLeave: S,
+                    onMouseEnter: T,
+                    onMouseLeave: I,
                     onClick: (o) => o.stopPropagation(),
                     children: [
                       /* @__PURE__ */ e(p, { label: `+ ${r?.teams?.length - 1} More`, color: "#004f08", size: "md", isHashColor: !0 }, 1),
@@ -196,8 +197,8 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
                               "right-0": g.horizontal === "right"
                             }
                           ),
-                          onMouseEnter: L,
-                          onMouseLeave: S,
+                          onMouseEnter: T,
+                          onMouseLeave: I,
                           children: r?.teams?.slice(1)?.map((o, f) => /* @__PURE__ */ e("div", { className: "my-2", children: /* @__PURE__ */ e(p, { label: o?.name, color: o?.color || "#4A5568", size: "md", isHashColor: !0, className: "w-fit" }, o?.id) }, o?.id || f))
                         }
                       )
@@ -245,17 +246,17 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
         ] }) }))
       ]
     }
-  ), E = k(null);
+  ), U = k(null);
   return /* @__PURE__ */ a(
     "div",
     {
       onMouseEnter: V,
-      onMouseLeave: I,
+      onMouseLeave: H,
       className: l("inline-block relative cursor-pointer", W),
-      ref: E,
+      ref: U,
       children: [
         /* @__PURE__ */ a("div", { className: l("relative", G || X), children: [
-          x && j ? /* @__PURE__ */ e(
+          x && S ? /* @__PURE__ */ e(
             "img",
             {
               src: x,
@@ -267,10 +268,11 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
             "div",
             {
               className: l(
-                "bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700 w-full h-full",
+                "bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700",
+                C[z],
                 b
               ),
-              children: A((n || "") + " " + (d || ""))
+              children: F((n || "") + " " + (d || ""))
             }
           ) : /* @__PURE__ */ e("div", { className: l(b, "p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full"), children: /* @__PURE__ */ e(ie, { fill: "#98A2B3" }) }),
           q && h && /* @__PURE__ */ e(
@@ -288,7 +290,7 @@ const v = ({ label: n, content: d }) => /* @__PURE__ */ a("div", { className: "f
           {
             isOpen: Q,
             onClose: () => y(!1),
-            anchorEl: E.current,
+            anchorEl: U.current,
             className: "bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600",
             children: D
           }

package/dist/components/user-avatar/UserAvatar.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserAvatar.es.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { GroupsOutlined } from '@mui/icons-material';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\n\nexport type UserAvatarSize = 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number \| string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook /\n userDetails?: UserDetails \| null;\n /* Whether user details are being fetched /\n isFetchingUserDetails?: boolean;\n /* Optional token for authenticated image loading /\n authToken?: string;\n /* Callback triggered when mouse enters the avatar /\n onHover?: () => void;\n /* Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. /\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/\n UserAvatar component for displaying user profile pictures with hover popper\n \n @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n /\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n if (firstName === 'All' && lastName === 'Users') {\n return (\n <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n <GroupsOutlined sx={{ fontSize: 16 }} className='text-primary-600 dark:text-primary-600' />\n </div>\n );\n }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive \|\| !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken \|\| (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const popperRef = useRef<HTMLDivElement \| null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName \|\| ''} {lastName \|\| ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email \|\| userDetails?.email \|\| ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-[10px] leading-[18px] uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams \|\| userDetails?.clearanceLevel \|\| userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color \|\| '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id \|\| index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color \|\| '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName \|\| avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : firstName && lastName ? (\n <div\n className={cn(\n 'bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700 w-full h-full',\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsOutlined","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":"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"}
1	+ {"version":3,"file":"UserAvatar.es.js","sources":["../../../src/components/user-avatar/UserAvatar.tsx"],"sourcesContent":["import { GroupsOutlined } from '@mui/icons-material';\nimport EditOutlinedIcon from '@mui/icons-material/EditOutlined';\nimport WarningRoundedIcon from '@mui/icons-material/WarningRounded';\nimport cn from 'classnames';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Typography } from '../data-display/typography/Typography';\nimport { Tag } from '../data-display/tag/Tag';\nimport { Skeleton } from '../data-display/skeleton/Skeleton';\nimport { getFlagComponentRectangleMd } from '../../utils/countryFlags';\nimport { UserAvatarPopper } from './UserAvatarPopper';\nimport { StatusInfoRow } from './StatusInfoRow';\nimport { sizeClasses, getInitials } from './constants';\nimport { PersonIcon } from './PersonIcon';\nimport { useDynamicPosition } from './useDynamicPosition';\n\nexport type UserAvatarSize = '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl';\n\nexport type UserDetailsTeam = {\n id?: string;\n name: string;\n color?: string;\n};\n\nexport type UserDetails = {\n email?: string;\n username?: string;\n teams?: UserDetailsTeam[];\n group?: string;\n clearanceLevel?: number \| string;\n region?: string;\n};\n\nexport type UserAvatarProps = {\n firstName?: string;\n lastName?: string;\n email?: string;\n enablePopper?: boolean;\n profilePic?: string;\n size?: UserAvatarSize;\n hoverSize?: UserAvatarSize;\n containerClassName?: string;\n className?: string;\n userId?: string;\n lastViewedOn?: string;\n isActive?: boolean;\n statusIndicator?: boolean;\n /** User details to display in the popper - replaces the useTeamMemberFilter hook /\n userDetails?: UserDetails \| null;\n /* Whether user details are being fetched /\n isFetchingUserDetails?: boolean;\n /* Optional token for authenticated image loading /\n authToken?: string;\n /* Callback triggered when mouse enters the avatar /\n onHover?: () => void;\n /* Name of the clause / line item the user is currently editing. When set, a highlighted \"Currently editing\" card is shown in the popper. /\n currentlyEditing?: string;\n};\n\nconst InfoRow = ({ label, content }: { label: string; content: React.ReactNode }) => (\n <div className='flex justify-between items-center'>\n <Typography size='small' variant='medium' className='mr-5' appearance='body'>\n {label}\n </Typography>\n {content}\n </div>\n);\n\n/\n UserAvatar component for displaying user profile pictures with hover popper\n \n @example\n * ```tsx\n * <UserAvatar\n * firstName=\"John\"\n * lastName=\"Doe\"\n * email=\"john@example.com\"\n * profilePic=\"/avatar.jpg\"\n * userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}\n * />\n * ```\n /\nexport const UserAvatar: FC<UserAvatarProps> = ({\n firstName,\n lastName,\n email,\n profilePic,\n size = 'md',\n hoverSize = 'lg',\n containerClassName = '',\n enablePopper = true,\n className,\n userId,\n lastViewedOn,\n isActive,\n statusIndicator = false,\n userDetails,\n isFetchingUserDetails = false,\n authToken,\n onHover,\n currentlyEditing,\n}) => {\n if (firstName === 'All' && lastName === 'Users') {\n return (\n <div className='p-1 rounded-full bg-primary-100 dark:bg-black-600 flex items-center justify-center'>\n <GroupsOutlined sx={{ fontSize: 16 }} className='text-primary-600 dark:text-primary-600' />\n </div>\n );\n }\n\n const [visible, setVisible] = useState<boolean>(false);\n const [imageLoaded, setImageLoaded] = useState<boolean>(false);\n\n const avatarSizeClass = sizeClasses[size];\n\n const {\n triggerRef: moreTagRef,\n dropdownRef,\n position: dropdownPosition,\n isVisible: showMore,\n show: handleShowMore,\n hide: handleHideMore,\n } = useDynamicPosition();\n\n const imageCacheRef = useRef<{ [key: string]: string }>({});\n\n const isRecent = useMemo(() => {\n if (isActive \|\| !lastViewedOn) return false;\n const date = new Date(lastViewedOn);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 60 * 60);\n return diffInHours < 24;\n }, [isActive, lastViewedOn]);\n\n const getStatusColor = () => {\n if (isActive) return 'bg-primary-600 dark:bg-primary-600';\n if (isRecent) return 'bg-primary-300 dark:bg-primary-300';\n if (lastViewedOn) return 'bg-neutral-400 dark:bg-neutral-400';\n return null;\n };\n\n const statusColor = getStatusColor();\n\n const getBorderColor = () => {\n if (isActive) return 'border-primary-600 dark:border-primary-600';\n if (isRecent) return 'border-primary-300 dark:border-primary-300';\n if (lastViewedOn) return 'border-neutral-400 dark:border-neutral-400';\n return 'border-primary-200 dark:border-neutral-800';\n };\n\n const borderColor = getBorderColor();\n\n const indicatorSizes = {\n '2xs': 'w-1.5 h-1.5',\n xs: 'w-2 h-2',\n sm: 'w-2.5 h-2.5',\n md: 'w-3 h-3',\n lg: 'w-3.5 h-3.5',\n xl: 'w-4 h-4',\n };\n\n useEffect(() => {\n if (profilePic) {\n if (imageCacheRef.current[profilePic]) {\n setImageLoaded(true);\n } else {\n setImageLoaded(false);\n const img = new Image();\n const token = authToken \|\| (typeof localStorage !== 'undefined' ? localStorage.getItem('token') : null);\n img.src = profilePic + (token ? '?token=' + token : '');\n img.onload = () => {\n imageCacheRef.current[profilePic] = img.src;\n setImageLoaded(true);\n };\n img.onerror = () => {\n setImageLoaded(false);\n };\n }\n } else {\n setImageLoaded(false);\n }\n }, [profilePic, authToken]);\n\n useEffect(() => {\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, []);\n\n const cachedSrc = profilePic ? imageCacheRef.current[profilePic] : undefined;\n\n const timerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const popperRef = useRef<HTMLDivElement \| null>(null);\n\n const handleMouseEnter = () => {\n onHover?.();\n if (firstName && lastName && enablePopper) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n setVisible(true);\n }, 300);\n }\n };\n\n const handleMouseLeave = (event: React.MouseEvent) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n timerRef.current = setTimeout(() => {\n if (popperRef.current && !popperRef.current.contains(event.relatedTarget as Node)) {\n setVisible(false);\n }\n }, 200);\n };\n\n const popperContent = (\n <div\n ref={popperRef}\n className='bg-white dark:bg-black-800 shadow rounded-lg border border-neutral-200 dark:border-black-700 min-w-[280px]'\n onMouseEnter={() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n }}\n onMouseLeave={(event) => handleMouseLeave(event)}\n >\n <div className='flex flex-col gap-1 items-center p-5'>\n <div className={cn('relative', sizeClasses[hoverSize])}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border-2 object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : (\n <div\n className={cn(\n 'bg-primary-100 dark:bg-primary-950 text-primary-600 border-2 flex items-center justify-center rounded-full w-full h-full',\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n )}\n\n {statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border-2 border-white dark:border-black-800',\n indicatorSizes[hoverSize],\n statusColor,\n )}\n />\n )}\n </div>\n <div className='flex flex-row gap-1 items-center justify-center'>\n <Typography size='medium' variant='semibold' className='w-full text-center'>\n {firstName \|\| ''} {lastName \|\| ''}\n </Typography>\n {userDetails?.region && <span>{getFlagComponentRectangleMd(userDetails?.region)}</span>}\n </div>\n\n <Typography size='small' variant='medium' appearance='body'>\n {email \|\| userDetails?.email \|\| ''}\n </Typography>\n </div>\n\n {currentlyEditing ? (\n <div className='px-5 pb-3'>\n <div className='flex items-center gap-3 rounded-lg border border-primary-100 dark:border-primary-900 bg-[rgba(230,241,252,0.60)] dark:bg-primary-950/40 px-[13px] py-[7px]'>\n <div className='flex items-center justify-center shrink-0 w-7 h-7 rounded-[5px] border-[0.4px] border-primary-100 dark:border-primary-900 bg-primary-50 dark:bg-primary-950'>\n <EditOutlinedIcon sx={{ width: 13, height: 13 }} className='text-primary-600 dark:text-primary-500' />\n </div>\n <div className='flex flex-col min-w-0'>\n <Typography\n size='extra-small'\n variant='semibold'\n appearance='custom'\n className='text-2xs leading-4 uppercase tracking-[0.2px] text-primary-600 dark:text-primary-500'\n >\n Currently editing\n </Typography>\n <Typography size='extra-small' variant='semibold' className='truncate'>\n {currentlyEditing}\n </Typography>\n </div>\n </div>\n </div>\n ) : null}\n\n {userId &&\n (isFetchingUserDetails ? (\n <div className='p-5'>\n <Skeleton />\n </div>\n ) : userId && (userDetails?.teams \|\| userDetails?.clearanceLevel \|\| userDetails?.group) ? (\n <div className='flex flex-col gap-4 bg-neutral-50 border-t border-neutral-200 dark:bg-black-700 dark:border-none p-5 rounded-b-lg'>\n <StatusInfoRow isActive={isActive} lastViewedOn={lastViewedOn} />\n {userDetails.username && (\n <InfoRow\n label='Username'\n content={\n <div className='flex gap-2'>\n <Typography size='small' variant='medium' appearance='body'>\n {userDetails.username}\n </Typography>\n </div>\n }\n />\n )}\n\n {userDetails?.teams && userDetails?.teams?.length > 0 && (\n <InfoRow\n label='Team'\n content={\n <div className='flex gap-2'>\n {userDetails?.teams?.length > 0 && (\n <Tag\n key={userDetails?.teams[0]?.id}\n label={userDetails?.teams[0]?.name}\n color={userDetails?.teams[0]?.color \|\| '#e38715'}\n size='md'\n isHashColor\n />\n )}\n {userDetails?.teams?.length >= 2 && (\n <div\n ref={moreTagRef}\n className='relative cursor-pointer'\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n onClick={(e) => e.stopPropagation()}\n >\n <Tag key={1} label={`+ ${userDetails?.teams?.length - 1} More`} color='#004f08' size='md' isHashColor />\n\n {showMore && (\n <div\n ref={dropdownRef}\n className={cn(\n 'absolute w-max bg-white dark:text-black-200 dark:bg-black-800 shadow-md border border-neutral-200 dark:border-black-800 rounded-md px-2 z-10 overflow-y-auto max-h-60',\n {\n 'top-full': dropdownPosition.vertical === 'bottom',\n 'bottom-full': dropdownPosition.vertical === 'top',\n 'left-0': dropdownPosition.horizontal === 'left',\n 'right-0': dropdownPosition.horizontal === 'right',\n },\n )}\n onMouseEnter={handleShowMore}\n onMouseLeave={handleHideMore}\n >\n {userDetails?.teams?.slice(1)?.map((team, index) => (\n <div key={team?.id \|\| index} className='my-2'>\n <Tag key={team?.id} label={team?.name} color={team?.color \|\| '#4A5568'} size='md' isHashColor className='w-fit' />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n }\n />\n )}\n\n {userDetails?.group && (\n <InfoRow\n label='Role'\n content={<Tag key={userDetails?.group} label={userDetails?.group} color='#004094' size='md' isHashColor />}\n />\n )}\n\n {userDetails?.clearanceLevel && (\n <InfoRow\n label='Clearance Level'\n content={\n <Tag\n key={String(userDetails?.clearanceLevel)}\n label={`Level ${userDetails?.clearanceLevel}`}\n color='#b30000'\n size='md'\n isHashColor\n />\n }\n />\n )}\n </div>\n ) : (\n <div className='flex items-center justify-center bg-neutral-50 dark:bg-black-700 border-t border-neutral-200 dark:border-black-700 p-5 rounded-b-lg'>\n <Typography className='flex items-center justify-center gap-1' size='extra-small' variant='medium' appearance='body'>\n <WarningRoundedIcon\n sx={{\n height: '16px',\n width: '16px',\n color: '#F04438',\n }}\n />\n No other information found!\n </Typography>\n </div>\n ))}\n </div>\n );\n const containerRef = useRef<HTMLDivElement>(null);\n return (\n <div\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n className={cn('inline-block relative cursor-pointer', className)}\n ref={containerRef}\n >\n <div className={cn('relative', containerClassName \|\| avatarSizeClass)}>\n {cachedSrc && imageLoaded ? (\n <img\n src={cachedSrc}\n alt='Profile'\n className={cn('rounded-full border object-cover w-full h-full', borderColor)}\n onError={() => setImageLoaded(false)}\n />\n ) : firstName && lastName ? (\n <div\n className={cn(\n 'bg-primary-100 text-primary-600 flex items-center justify-center rounded-full border dark:bg-black-700', \n sizeClasses[size],\n borderColor,\n )}\n >\n {getInitials((firstName \|\| '') + ' ' + (lastName \|\| ''))}\n </div>\n ) : (\n <div className={cn(borderColor, 'p-1 rounded-full bg-neutral-200 dark:bg-black-600 flex items-center justify-center border w-full h-full')}>\n <PersonIcon fill='#98A2B3' />\n </div>\n )}\n\n {statusIndicator && statusColor && (\n <div\n className={cn(\n 'absolute bottom-0 right-0 rounded-full border border-white dark:border-black-800 w-2 h-2',\n\n statusColor,\n )}\n />\n )}\n </div>\n <UserAvatarPopper\n isOpen={visible}\n onClose={() => setVisible(false)}\n anchorEl={containerRef.current}\n className='bg-white dark:bg-black-700 shadow rounded-lg border border-neutral-200 dark:border-black-600'\n >\n {popperContent}\n </UserAvatarPopper>\n </div>\n );\n};\n\nUserAvatar.displayName = 'UserAvatar';\n\n"],"names":["InfoRow","label","content","jsxs","jsx","Typography","UserAvatar","firstName","lastName","email","profilePic","size","hoverSize","containerClassName","enablePopper","className","userId","lastViewedOn","isActive","statusIndicator","userDetails","isFetchingUserDetails","authToken","onHover","currentlyEditing","GroupsOutlined","visible","setVisible","useState","imageLoaded","setImageLoaded","avatarSizeClass","sizeClasses","moreTagRef","dropdownRef","dropdownPosition","showMore","handleShowMore","handleHideMore","useDynamicPosition","imageCacheRef","useRef","isRecent","useMemo","date","statusColor","borderColor","indicatorSizes","useEffect","img","token","timerRef","cachedSrc","popperRef","handleMouseEnter","handleMouseLeave","event","popperContent","cn","getInitials","getFlagComponentRectangleMd","EditOutlinedIcon","Skeleton","StatusInfoRow","Tag","e","team","index","WarningRoundedIcon","containerRef","PersonIcon","UserAvatarPopper"],"mappings":";;;;;;;;;;;;;;;AA2DA,MAAMA,IAAU,CAAC,EAAE,OAAAC,GAAO,SAAAC,QACxB,gBAAAC,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EAAW,MAAK,SAAQ,SAAQ,UAAS,WAAU,QAAO,YAAW,QACnE,UAAAJ,EAAA,CACH;AAAA,EACCC;AAAA,GACH,GAiBWI,KAAkC,CAAC;AAAA,EAC9C,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,oBAAAC,IAAqB;AAAA,EACrB,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,aAAAC;AAAA,EACA,uBAAAC,IAAwB;AAAA,EACxB,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,kBAAAC;AACF,MAAM;AACJ,MAAIjB,MAAc,SAASC,MAAa;AACtC,WACE,gBAAAJ,EAAC,OAAA,EAAI,WAAU,sFACb,UAAA,gBAAAA,EAACqB,IAAA,EAAe,IAAI,EAAE,UAAU,GAAA,GAAM,WAAU,0CAAyC,GAC3F;AAIJ,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAkB,EAAK,GAC/C,CAACC,GAAaC,CAAc,IAAIF,EAAkB,EAAK,GAEvDG,IAAkBC,EAAYrB,CAAI,GAElC;AAAA,IACJ,YAAYsB;AAAA,IACZ,aAAAC;AAAA,IACA,UAAUC;AAAA,IACV,WAAWC;AAAA,IACX,MAAMC;AAAA,IACN,MAAMC;AAAA,EAAA,IACJC,GAAA,GAEEC,IAAgBC,EAAkC,EAAE,GAEpDC,IAAWC,GAAQ,MAAM;AAC7B,QAAIzB,KAAY,CAACD,EAAc,QAAO;AACtC,UAAM2B,IAAO,IAAI,KAAK3B,CAAY;AAGlC,iCAFgB,KAAA,GACS,QAAA,IAAY2B,EAAK,cAAc,MAAO,KAAK,MAC/C;AAAA,EACvB,GAAG,CAAC1B,GAAUD,CAAY,CAAC,GASrB4B,IANA3B,IAAiB,uCACjBwB,IAAiB,uCACjBzB,IAAqB,uCAClB,MAYH6B,IANA5B,IAAiB,+CACjBwB,IAAiB,+CACjBzB,IAAqB,+CAClB,8CAKH8B,IAAiB;AAAA,IACrB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAGN,EAAAC,EAAU,MAAM;AACd,QAAItC;AACF,UAAI8B,EAAc,QAAQ9B,CAAU;AAClC,QAAAoB,EAAe,EAAI;AAAA,WACd;AACL,QAAAA,EAAe,EAAK;AACpB,cAAMmB,IAAM,IAAI,MAAA,GACVC,IAAQ5B,MAAc,OAAO,eAAiB,MAAc,aAAa,QAAQ,OAAO,IAAI;AAClG,QAAA2B,EAAI,MAAMvC,KAAcwC,IAAQ,YAAYA,IAAQ,KACpDD,EAAI,SAAS,MAAM;AACjB,UAAAT,EAAc,QAAQ9B,CAAU,IAAIuC,EAAI,KACxCnB,EAAe,EAAI;AAAA,QACrB,GACAmB,EAAI,UAAU,MAAM;AAClB,UAAAnB,EAAe,EAAK;AAAA,QACtB;AAAA,MACF;AAAA;AAEA,MAAAA,EAAe,EAAK;AAAA,EAExB,GAAG,CAACpB,GAAYY,CAAS,CAAC,GAE1B0B,EAAU,MACD,MAAM;AACX,IAAIG,EAAS,WACX,aAAaA,EAAS,OAAO;AAAA,EAEjC,GACC,CAAA,CAAE;AAEL,QAAMC,IAAY1C,IAAa8B,EAAc,QAAQ9B,CAAU,IAAI,QAE7DyC,IAAWV,EAA6C,IAAI,GAC5DY,IAAYZ,EAA8B,IAAI,GAE9Ca,IAAmB,MAAM;AAC7B,IAAA/B,IAAA,GACIhB,KAAaC,KAAYM,MACvBqC,EAAS,WACX,aAAaA,EAAS,OAAO,GAE/BA,EAAS,UAAU,WAAW,MAAM;AAClC,MAAAxB,EAAW,EAAI;AAAA,IACjB,GAAG,GAAG;AAAA,EAEV,GAEM4B,IAAmB,CAACC,MAA4B;AACpD,IAAIL,EAAS,WACX,aAAaA,EAAS,OAAO,GAE/BA,EAAS,UAAU,WAAW,MAAM;AAClC,MAAIE,EAAU,WAAW,CAACA,EAAU,QAAQ,SAASG,EAAM,aAAqB,KAC9E7B,EAAW,EAAK;AAAA,IAEpB,GAAG,GAAG;AAAA,EACR,GAEM8B,IACJ,gBAAAtD;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKkD;AAAA,MACL,WAAU;AAAA,MACV,cAAc,MAAM;AAClB,QAAIF,EAAS,WACX,aAAaA,EAAS,OAAO;AAAA,MAEjC;AAAA,MACA,cAAc,CAACK,MAAUD,EAAiBC,CAAK;AAAA,MAE/C,UAAA;AAAA,QAAA,gBAAArD,EAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,SAAI,WAAWuD,EAAG,YAAY1B,EAAYpB,CAAS,CAAC,GAClD,UAAA;AAAA,YAAAwC,KAAavB,IACZ,gBAAAzB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAKgD;AAAA,gBACL,KAAI;AAAA,gBACJ,WAAWM,EAAG,oDAAoDZ,CAAW;AAAA,gBAC7E,SAAS,MAAMhB,EAAe,EAAK;AAAA,cAAA;AAAA,YAAA,IAGrC,gBAAA1B;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWsD;AAAA,kBACT;AAAA,kBACAZ;AAAA,gBAAA;AAAA,gBAGD,UAAAa,GAAapD,KAAa,MAAM,OAAOC,KAAY,GAAG;AAAA,cAAA;AAAA,YAAA;AAAA,YAI1DqC,KACC,gBAAAzC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWsD;AAAA,kBACT;AAAA,kBACAX,EAAenC,CAAS;AAAA,kBACxBiC;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF,GAEJ;AAAA,UACA,gBAAA1C,EAAC,OAAA,EAAI,WAAU,mDACb,UAAA;AAAA,YAAA,gBAAAA,EAACE,KAAW,MAAK,UAAS,SAAQ,YAAW,WAAU,sBACpD,UAAA;AAAA,cAAAE,KAAa;AAAA,cAAG;AAAA,cAAEC,KAAY;AAAA,YAAA,GACjC;AAAA,YACCY,GAAa,UAAU,gBAAAhB,EAAC,UAAM,UAAAwD,GAA4BxC,GAAa,MAAM,EAAA,CAAE;AAAA,UAAA,GAClF;AAAA,UAEA,gBAAAhB,EAACC,GAAA,EAAW,MAAK,SAAQ,SAAQ,UAAS,YAAW,QAClD,UAAAI,KAASW,GAAa,SAAS,GAAA,CAClC;AAAA,QAAA,GACF;AAAA,QAECI,sBACE,OAAA,EAAI,WAAU,aACb,UAAA,gBAAArB,EAAC,OAAA,EAAI,WAAU,8JACb,UAAA;AAAA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,+JACb,UAAA,gBAAAA,EAACyD,MAAiB,IAAI,EAAE,OAAO,IAAI,QAAQ,GAAA,GAAM,WAAU,0CAAyC,GACtG;AAAA,UACA,gBAAA1D,EAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,YAAA,gBAAAC;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,YAAW;AAAA,gBACX,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,gBAAAD,EAACC,KAAW,MAAK,eAAc,SAAQ,YAAW,WAAU,YACzD,UAAAmB,EAAA,CACH;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,EAAA,CACF,GACF,IACE;AAAA,QAEHR,MACEK,IACC,gBAAAjB,EAAC,OAAA,EAAI,WAAU,OACb,UAAA,gBAAAA,EAAC0D,MAAS,EAAA,CACZ,IACE9C,MAAWI,GAAa,SAASA,GAAa,kBAAkBA,GAAa,SAC/E,gBAAAjB,EAAC,OAAA,EAAI,WAAU,qHACb,UAAA;AAAA,UAAA,gBAAAC,EAAC2D,IAAA,EAAc,UAAA7C,GAAoB,cAAAD,EAAA,CAA4B;AAAA,UAC9DG,EAAY,YACX,gBAAAhB;AAAA,YAACJ;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,cACb,UAAA,gBAAAA,EAACC,GAAA,EAAW,MAAK,SAAQ,SAAQ,UAAS,YAAW,QAClD,UAAAe,EAAY,UACf,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,UAKLA,GAAa,SAASA,GAAa,OAAO,SAAS,KAClD,gBAAAhB;AAAA,YAACJ;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAU,cACZ,UAAA;AAAA,gBAAAiB,GAAa,OAAO,SAAS,KAC5B,gBAAAhB;AAAA,kBAAC4D;AAAA,kBAAA;AAAA,oBAEC,OAAO5C,GAAa,MAAM,CAAC,GAAG;AAAA,oBAC9B,OAAOA,GAAa,MAAM,CAAC,GAAG,SAAS;AAAA,oBACvC,MAAK;AAAA,oBACL,aAAW;AAAA,kBAAA;AAAA,kBAJNA,GAAa,MAAM,CAAC,GAAG;AAAA,gBAAA;AAAA,gBAO/BA,GAAa,OAAO,UAAU,KAC7B,gBAAAjB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,KAAK8B;AAAA,oBACL,WAAU;AAAA,oBACV,cAAcI;AAAA,oBACd,cAAcC;AAAA,oBACd,SAAS,CAAC2B,MAAMA,EAAE,gBAAA;AAAA,oBAElB,UAAA;AAAA,sBAAA,gBAAA7D,EAAC4D,GAAA,EAAY,OAAO,KAAK5C,GAAa,OAAO,SAAS,CAAC,SAAS,OAAM,WAAU,MAAK,MAAK,aAAW,MAA3F,CAA4F;AAAA,sBAErGgB,KACC,gBAAAhC;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,KAAK8B;AAAA,0BACL,WAAWwB;AAAA,4BACT;AAAA,4BACA;AAAA,8BACE,YAAYvB,EAAiB,aAAa;AAAA,8BAC1C,eAAeA,EAAiB,aAAa;AAAA,8BAC7C,UAAUA,EAAiB,eAAe;AAAA,8BAC1C,WAAWA,EAAiB,eAAe;AAAA,4BAAA;AAAA,0BAC7C;AAAA,0BAEF,cAAcE;AAAA,0BACd,cAAcC;AAAA,0BAEb,UAAAlB,GAAa,OAAO,MAAM,CAAC,GAAG,IAAI,CAAC8C,GAAMC,wBACvC,OAAA,EAA4B,WAAU,QACrC,UAAA,gBAAA/D,EAAC4D,KAAmB,OAAOE,GAAM,MAAM,OAAOA,GAAM,SAAS,WAAW,MAAK,MAAK,aAAW,IAAC,WAAU,QAAA,GAA9FA,GAAM,EAAgG,EAAA,GADxGA,GAAM,MAAMC,CAEtB,CACD;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACH;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAEJ,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,UAKL/C,GAAa,SACZ,gBAAAhB;AAAA,YAACJ;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAS,gBAAAI,EAAC4D,GAAA,EAA6B,OAAO5C,GAAa,OAAO,OAAM,WAAU,MAAK,MAAK,aAAW,GAAA,GAApFA,GAAa,KAAwE;AAAA,YAAA;AAAA,UAAA;AAAA,UAI3GA,GAAa,kBACZ,gBAAAhB;AAAA,YAACJ;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,SACE,gBAAAI;AAAA,gBAAC4D;AAAA,gBAAA;AAAA,kBAEC,OAAO,SAAS5C,GAAa,cAAc;AAAA,kBAC3C,OAAM;AAAA,kBACN,MAAK;AAAA,kBACL,aAAW;AAAA,gBAAA;AAAA,gBAJN,OAAOA,GAAa,cAAc;AAAA,cAAA;AAAA,YAKzC;AAAA,UAAA;AAAA,QAEJ,GAEJ,IAEA,gBAAAhB,EAAC,OAAA,EAAI,WAAU,uIACb,UAAA,gBAAAD,EAACE,GAAA,EAAW,WAAU,0CAAyC,MAAK,eAAc,SAAQ,UAAS,YAAW,QAC5G,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAACgE;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,QAAQ;AAAA,gBACR,OAAO;AAAA,gBACP,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,UAAA;AAAA,UACA;AAAA,QAAA,EAAA,CAEJ,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAIFC,IAAe5B,EAAuB,IAAI;AAChD,SACE,gBAAAtC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAcmD;AAAA,MACd,cAAcC;AAAA,MACd,WAAWG,EAAG,wCAAwC3C,CAAS;AAAA,MAC/D,KAAKsD;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAlE,EAAC,SAAI,WAAWuD,EAAG,YAAY7C,KAAsBkB,CAAe,GACjE,UAAA;AAAA,UAAAqB,KAAavB,IACZ,gBAAAzB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKgD;AAAA,cACL,KAAI;AAAA,cACJ,WAAWM,EAAG,kDAAkDZ,CAAW;AAAA,cAC3E,SAAS,MAAMhB,EAAe,EAAK;AAAA,YAAA;AAAA,UAAA,IAEnCvB,KAAaC,IACf,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWsD;AAAA,gBACT;AAAA,gBACA1B,EAAYrB,CAAI;AAAA,gBAChBmC;AAAA,cAAA;AAAA,cAGD,UAAAa,GAAapD,KAAa,MAAM,OAAOC,KAAY,GAAG;AAAA,YAAA;AAAA,UAAA,IAGzD,gBAAAJ,EAAC,OAAA,EAAI,WAAWsD,EAAGZ,GAAa,yGAAyG,GACvI,UAAA,gBAAA1C,EAACkE,IAAA,EAAW,MAAK,UAAA,CAAU,EAAA,CAC7B;AAAA,UAGDnD,KAAmB0B,KAClB,gBAAAzC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWsD;AAAA,gBACT;AAAA,gBAEAb;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF,GAEJ;AAAA,QACA,gBAAAzC;AAAA,UAACmE;AAAA,UAAA;AAAA,YACC,QAAQ7C;AAAA,YACR,SAAS,MAAMC,EAAW,EAAK;AAAA,YAC/B,UAAU0C,EAAa;AAAA,YACvB,WAAU;AAAA,YAET,UAAAZ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAnD,GAAW,cAAc;"}

package/dist/components/user-avatar/constants.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s={xs:"w-4 h-4 text-[7px] font-bold",sm:"w-6 h-6 text-[10px] font-bold",md:"w-9 h-9 text-[14px] font-semibold",lg:"w-12 h-12 text-[18px] font-semibold",xl:"w-16 h-16 text-[24px] font-semibold"},o=e=>{if(!e)return"";const t=e?.split(" ");return t?.length===1?t[0]?.charAt(0)?.toUpperCase():t[0]?.charAt(0)?.toUpperCase()+t[t?.length-1]?.charAt(0)?.toUpperCase()};exports.getInitials=o;exports.sizeClasses=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s={"2xs":"w-3 h-3 text-4xs font-bold",xs:"w-4 h-4 text-3xs font-bold",sm:"w-6 h-6 text-xs font-bold",md:"w-9 h-9 text-md font-semibold",lg:"w-12 h-12 text-xl font-semibold",xl:"w-16 h-16 text-3xl font-semibold"},o=e=>{if(!e)return"";const t=e?.split(" ");return t?.length===1?t[0]?.charAt(0)?.toUpperCase():t[0]?.charAt(0)?.toUpperCase()+t[t?.length-1]?.charAt(0)?.toUpperCase()};exports.getInitials=o;exports.sizeClasses=s;
 //# sourceMappingURL=constants.cjs.js.map

package/dist/components/user-avatar/constants.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.cjs.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n xs: 'w-4 h-4 text-~~[7px]~~ font-bold',\n sm: 'w-6 h-6 text-~~[10px]~~ font-bold',\n md: 'w-9 h-9 text-~~[14px]~~ font-semibold',\n lg: 'w-12 h-12 text-~~[18px]~~ font-semibold',\n xl: 'w-16 h-16 text-~~[24px]~~ font-semibold',\n};\n\nexport const getInitials = (name: string) => {\n if (!name) return '';\n const nameArray = name?.split(' ');\n const initials =\n nameArray?.length === 1\n ? nameArray[0]?.charAt(0)?.toUpperCase()\n : nameArray[0]?.charAt(0)?.toUpperCase() +\n nameArray[nameArray?.length - 1]?.charAt(0)?.toUpperCase();\n return initials;\n};\n\n\n\n"],"names":["sizeClasses","getInitials","name","nameArray"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,GAAI~~,+BACJ~~,GAAI,~~gCACJ~~,GAAI,~~oCACJ~~,GAAI,~~sCACJ~~,GAAI,~~qCACN~~,EAEaC,EAAeC,GAAiB,CAC3C,GAAI,CAACA,EAAM,MAAO,GAClB,MAAMC,EAAYD,GAAM,MAAM,GAAG,EAMjC,OAJEC,GAAW,SAAW,EAClBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,EACzBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,EACzBA,EAAUA,GAAW,OAAS,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,CAErD"}
1	+ {"version":3,"file":"constants.cjs.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n '2xs': 'w-3 h-3 text-4xs font-bold',\n xs: 'w-4 h-4 text-3xs font-bold',\n sm: 'w-6 h-6 text-xs font-bold',\n md: 'w-9 h-9 text-md font-semibold',\n lg: 'w-12 h-12 text-xl font-semibold',\n xl: 'w-16 h-16 text-3xl font-semibold',\n};\n\nexport const getInitials = (name: string) => {\n if (!name) return '';\n const nameArray = name?.split(' ');\n const initials =\n nameArray?.length === 1\n ? nameArray[0]?.charAt(0)?.toUpperCase()\n : nameArray[0]?.charAt(0)?.toUpperCase() +\n nameArray[nameArray?.length - 1]?.charAt(0)?.toUpperCase();\n return initials;\n};\n\n\n\n"],"names":["sizeClasses","getInitials","name","nameArray"],"mappings":"gFAAO,MAAMA,EAAc,CACzB,MAAO,6BACP,GAAI,6BACJ,GAAI,4BACJ,GAAI,gCACJ,GAAI,kCACJ,GAAI,kCACN,EAEaC,EAAeC,GAAiB,CAC3C,GAAI,CAACA,EAAM,MAAO,GAClB,MAAMC,EAAYD,GAAM,MAAM,GAAG,EAMjC,OAJEC,GAAW,SAAW,EAClBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,EACzBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,EACzBA,EAAUA,GAAW,OAAS,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,CAErD"}

package/dist/components/user-avatar/constants.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 export declare const sizeClasses: {
+    '2xs': string;
     xs: string;
     sm: string;
     md: string;

package/dist/components/user-avatar/constants.es.js CHANGED Viewed

@@ -1,16 +1,17 @@
 const o = {
-  xs: "w-4 h-4 text-[7px] font-bold",
-  sm: "w-6 h-6 text-[10px] font-bold",
-  md: "w-9 h-9 text-[14px] font-semibold",
-  lg: "w-12 h-12 text-[18px] font-semibold",
-  xl: "w-16 h-16 text-[24px] font-semibold"
-}, n = (e) => {
-  if (!e) return "";
-  const t = e?.split(" ");
+  "2xs": "w-3 h-3 text-4xs font-bold",
+  xs: "w-4 h-4 text-3xs font-bold",
+  sm: "w-6 h-6 text-xs font-bold",
+  md: "w-9 h-9 text-md font-semibold",
+  lg: "w-12 h-12 text-xl font-semibold",
+  xl: "w-16 h-16 text-3xl font-semibold"
+}, l = (s) => {
+  if (!s) return "";
+  const t = s?.split(" ");
   return t?.length === 1 ? t[0]?.charAt(0)?.toUpperCase() : t[0]?.charAt(0)?.toUpperCase() + t[t?.length - 1]?.charAt(0)?.toUpperCase();
 };
 export {
-  n as getInitials,
+  l as getInitials,
   o as sizeClasses
 };
 //# sourceMappingURL=constants.es.js.map

package/dist/components/user-avatar/constants.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.es.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n xs: 'w-4 h-4 text-~~[7px]~~ font-bold',\n sm: 'w-6 h-6 text-~~[10px]~~ font-bold',\n md: 'w-9 h-9 text-~~[14px]~~ font-semibold',\n lg: 'w-12 h-12 text-~~[18px]~~ font-semibold',\n xl: 'w-16 h-16 text-~~[24px]~~ font-semibold',\n};\n\nexport const getInitials = (name: string) => {\n if (!name) return '';\n const nameArray = name?.split(' ');\n const initials =\n nameArray?.length === 1\n ? nameArray[0]?.charAt(0)?.toUpperCase()\n : nameArray[0]?.charAt(0)?.toUpperCase() +\n nameArray[nameArray?.length - 1]?.charAt(0)?.toUpperCase();\n return initials;\n};\n\n\n\n"],"names":["sizeClasses","getInitials","name","nameArray"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAc,CAACC,MAAiB;AAC3C,MAAI,CAACA,EAAM,QAAO;AAClB,QAAMC,IAAYD,GAAM,MAAM,GAAG;AAMjC,SAJEC,GAAW,WAAW,IAClBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,IACzBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,IACzBA,EAAUA,GAAW,SAAS,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA;AAErD;"}
1	+ {"version":3,"file":"constants.es.js","sources":["../../../src/components/user-avatar/constants.ts"],"sourcesContent":["export const sizeClasses = {\n '2xs': 'w-3 h-3 text-4xs font-bold',\n xs: 'w-4 h-4 text-3xs font-bold',\n sm: 'w-6 h-6 text-xs font-bold',\n md: 'w-9 h-9 text-md font-semibold',\n lg: 'w-12 h-12 text-xl font-semibold',\n xl: 'w-16 h-16 text-3xl font-semibold',\n};\n\nexport const getInitials = (name: string) => {\n if (!name) return '';\n const nameArray = name?.split(' ');\n const initials =\n nameArray?.length === 1\n ? nameArray[0]?.charAt(0)?.toUpperCase()\n : nameArray[0]?.charAt(0)?.toUpperCase() +\n nameArray[nameArray?.length - 1]?.charAt(0)?.toUpperCase();\n return initials;\n};\n\n\n\n"],"names":["sizeClasses","getInitials","name","nameArray"],"mappings":"AAAO,MAAMA,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAc,CAACC,MAAiB;AAC3C,MAAI,CAACA,EAAM,QAAO;AAClB,QAAMC,IAAYD,GAAM,MAAM,GAAG;AAMjC,SAJEC,GAAW,WAAW,IAClBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,IACzBA,EAAU,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA,IACzBA,EAAUA,GAAW,SAAS,CAAC,GAAG,OAAO,CAAC,GAAG,YAAA;AAErD;"}