hunk.code_window: 	const [mounted, setMounted] = useState(false);
   	const isDark = useIsDark();
   	const { totalSpace, freeSpace, remainingSpace } = useMemo(() => {
   		return {
  
hunk.labels: keep keep keep keep replace keep
hunk.after_edit: 	const { totalSpace, freeSpace, usedSpaceSpace } = useMemo(() => {
   		const totalSpace = byteSize(stats.totalSpace)
   		const freeSpace = stats.freeSpace == null ? totalSpace : byteSize(stats.freeSpace)
  
hunk.file_path: interface/app/$libraryId/overview/StatCard.tsx
hunk.type: replace
file: import { DotsThreeCircle } from '@phosphor-icons/react';
  import React, { forwardRef, HTMLAttributes } from 'react';
  import { Popover, usePopover } from '@sd/ui';
  
  import TopBarButton, { TopBarButtonProps } from './TopBarButton';
  import { ToolOption, TOP_BAR_ICON_STYLE } from './TopBarOptions';
  
  const GroupTool = forwardRef<
  	HTMLButtonElement,
  	Omit<TopBarButtonProps, 'children'> & { tool: ToolOption }
  >(({ tool, ...props }, ref) => {
  	return (
  		<TopBarButton
  			ref={ref}
  			className="!mr-0 w-full gap-1"
  			active={tool.topBarActive}
  			onClick={tool.onClick}
  			checkIcon
  			{...props}
  		>
  			{typeof tool.icon === 'function' ? tool.icon({ triggerOpen: () => {} }) : tool.icon}
  			{tool.toolTipLabel}
  		</TopBarButton>
  	);
  });
  
  interface Props extends HTMLAttributes<HTMLDivElement> {
  	toolOptions?: ToolOption[][];
  }
  
  export default ({ toolOptions, className }: Props) => {
  	const popover = usePopover();
  	const toolsNotSmFlex = toolOptions?.map((group) =>
  		group.filter((tool) => tool.showAtResolution !== 'sm:flex')
  	);
  
  	return (
  		<div className={className}>
  			<Popover
  				popover={popover}
  				trigger={
  					<TopBarButton>
  						<DotsThreeCircle className={TOP_BAR_ICON_STYLE} />
  					</TopBarButton>
  				}
  			>
  				<div className="flex flex-col p-2">
  					{toolsNotSmFlex?.map((group, i) => (
  						<React.Fragment key={i}>
  							<div className="flex flex-col gap-1">
  								{group.map((tool) => (
  									<React.Fragment key={tool.toolTipLabel}>
  										{tool.popOverComponent ? (
  											<ToolPopover
  												tool={tool}
  												triggerClose={() => popover.setOpen(false)}
  											/>
  										) : (
  											<GroupTool tool={tool} />
  										)}
  									</React.Fragment>
  								))}
  							</div>
  
  							{i !== 0 && i !== toolsNotSmFlex.length - 1 && (
  								<div className="my-2 border-b border-app-line" />
  							)}
  						</React.Fragment>
  					))}
  				</div>
  			</Popover>
  		</div>
  	);
  };
  
  function ToolPopover({ tool, triggerClose }: { tool: ToolOption; triggerClose: () => void }) {
  	return (
  		<Popover popover={usePopover()} trigger={<GroupTool tool={tool} />}>
  			<div className="min-w-[250px]">
  				{typeof tool.popOverComponent === 'function'
  					? tool.popOverComponent({ triggerClose })
  					: tool.popOverComponent}
  			</div>
  		</Popover>
  	);
  }
  