[Box] Refactor position to use logical properties

[laurkim]

WHY are these changes introduced?

Resolves #7771.
Refactors Box to use logical properties to align with other layout primitives.

WHAT is this pull request doing?

Refactors top, bottom, left, and right props on Box to be insetBlockStart, insetBlockEnd, insetInlineStart, and insetInlineEnd.
Updates prop names in style guide.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {Box, Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Box
        position="relative"
        width="100%"
        minHeight="600px"
        background="action-primary-depressed"
      >
        <Box
          position="absolute"
          insetInlineStart="0"
          insetBlockEnd="0"
          width="50px"
          minHeight="50px"
          background="action-critical-depressed"
          zIndex="1"
        />
        <Box
          position="absolute"
          insetInlineStart="0"
          insetBlockEnd="6"
          width="50px"
          minHeight="50px"
          background="action-critical"
          zIndex="2"
        />

        <Box
          position="absolute"
          insetBlockStart="4"
          insetInlineEnd="4"
          width="100px"
          minHeight="100px"
          background="action-critical"
          zIndex="2"
        >
          <Box
            position="absolute"
            insetBlockEnd="2"
            insetInlineStart="0"
            width="50px"
            minHeight="50px"
            background="action-secondary"
            zIndex="1"
          >
            <Box visuallyHidden>asdf</Box>
          </Box>
        </Box>
      </Box>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	210.63 KB (+0.01% 🔺)
polaris-react-esm	136 KB (+0.02% 🔺)
polaris-react-esnext	191.49 KB (+0.02% 🔺)
polaris-react-css	41.8 KB (0%)

[kyledurand]

👏