[bug]: useResize uses content box instead of border box

[LoganDark]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.7.3

What's Wrong?

useResize returns the size of the content box, without padding or borders. It should use the border box instead.

react-spring/packages/shared/src/dom-events/resize/resizeElement.ts

Lines 42 to 44 in 1e4406e

	if (observer) {
	observer.observe(target)
	}

-   if (observer) {
-     observer.observe(target)
-   }
+   observer?.observe(target, { box: 'border-box' })

react-spring/packages/shared/src/dom-events/resize/resizeElement.ts

Lines 7 to 10 in 1e4406e

	const handleObservation = (entries: ResizeObserverEntry[]) =>
	entries.forEach(({ target, contentRect }) => {
	return resizeHandlers.get(target)?.forEach(handler => handler(contentRect))
	})

 const handleObservation = (entries: ResizeObserverEntry[]) =>
-  entries.forEach(({ target, contentRect }) => {
-    return resizeHandlers.get(target)?.forEach(handler => handler(contentRect))
+  entries.forEach(({ target, borderBoxSize }) => {
+    const handlers = resizeHandlers.get(target)
+    if (!handlers) return
+    const { blockSize, inlineSize } = borderBoxSize[0]
+    const { width, height } = !getComputedStyle(target).getPropertyValue('writing-mode')?.startsWith('vertical-')
+      ? { width: inlineSize, height: blockSize }
+      : { width: blockSize, height: inlineSize }
+    for (const handler of handlers) handler({ width, height })
   })

MDN

To Reproduce

observe an element that has padding.

Expected Behaviour

padding should be included in the returned size.

Link to repo

https://codesandbox.io/p/sandbox/muddy-hill-sjfzwl