Box

<Box>
  <Text>Enable your screen reader to hear the following text:</Text>
  <Box display="visuallyHidden">In the darkest night, Box will rise to bring the light. The Lloyd has spoken.</Box>
</Box>

<Flex direction="column" flex="grow">
  <Flex alignItems="top">
    <Box
      as="nav"
      title="as prop example nav"
      column={6}
      color="maroon"
      width="100%"
      padding={2}
      borderStyle="sm"
    >
      <Text color="white" weight="bold">
        Top Nav Menu: as="nav"
      </Text>
    </Box>
    <Box column={6} display="inlineBlock" borderStyle="sm">
      <Box color="midnight" width="100%" padding={2}>
        <Text color="white" weight="bold">
          HTML output:
        </Text>
        <Text color="white" weight="bold">
          {'<nav>Menu</nav>'}
        </Text>
      </Box>
    </Box>
  </Flex>
  <Flex alignItems="top">
    <Box as="article" column={6} color="pine" width="100%" padding={2} borderStyle="sm">
      <Heading color="white" size="md">
        Article 1
      </Heading>
      <Text color="white" weight="bold">
        Article: as="article"
      </Text>
    </Box>
    <Box column={6} display="inlineBlock" borderStyle="sm">
      <Box color="midnight" width="100%" padding={2}>
        <Text color="white" weight="bold">
          HTML output:
        </Text>
        <Text color="white" weight="bold">
          {'<article>'}
        </Text>
        <Text color="white" weight="bold">
          {' '}
          {'<h2>Article 1</h2>'}
        </Text>
        <Text color="white" weight="bold">
          {'</article>'}
        </Text>
      </Box>
    </Box>
  </Flex>
</Flex>

<Box column={12}>
  <Box role="feed" color="midnight" width="100%" padding={2}>
    <Text color="white" weight="bold">
      Container: role="feed"
    </Text>
    <Box column={8} display="inlineBlock">
      <Box role="article" title="Article 1" color="maroon" height={50} width="100%" padding={2}>
        <Text color="white" weight="bold">
          Content: role="article"
        </Text>
      </Box>
    </Box>
    <Box column={4} display="inlineBlock">
      <Box role="form" color="eggplant" height={50} width="100%" padding={2}>
        <Text color="white" weight="bold">
          Contact Form: role="form"
        </Text>
      </Box>
    </Box>
  </Box>
  <Box role="navigation" title="Site Map" color="pine" height={50} width="100%" padding={2}>
    <Text color="white" weight="bold">
      Site Map: role="navigation"
    </Text>
  </Box>
  <Text>{"Everything above will render as a <div>"}</Text>
</Box>

function Example() {
  const MarginSwatch = (props) => (
    <Box
      margin={1}
      dangerouslySetInlineStyle={{
        __style: { backgroundColor: 'rgba(110, 15, 60, 0.2)' },
      }}
    >
      <Box
        padding={1}
        {...props}
        dangerouslySetInlineStyle={{
          __style: { backgroundColor: 'rgba(19, 58, 94, 0.2)' },
        }}
      >
        {JSON.stringify(props)}
      </Box>
    </Box>
  );

  const toggleRTL = () => {
    if (document.documentElement) {
      const isRTL = document.documentElement.dir === 'rtl';
      document.documentElement.dir = isRTL ? 'ltr' : 'rtl';
    }
  };

  return (
    <Box maxWidth={200} marginBottom={2}>
      <Button size="sm" onClick={toggleRTL} text="Toggle Page Direction" />
      <MarginSwatch marginStart={2} />
      <MarginSwatch marginEnd={2} />
      <MarginSwatch marginStart={-2} />
      <MarginSwatch marginEnd={-2} />
    </Box>
  );
}

<Box borderStyle="lg" column={12}>
  <Box width="25%" minHeight={25} maxHeight={100} overflow="hidden" padding={2} borderStyle="sm" color="eggplant">
    <Text color="white"> Add or remove text in the editor to see the min and max heights take affect.</Text>
  </Box>
  <Box width="50%" height={100} padding={2} borderStyle="sm" color="maroon">
    <Text color="white">Width and Height can be specified with numbers for "px" values or percentages</Text>
  </Box>
  <Box width="75%" minWidth={100} maxWidth={500} padding={2} borderStyle="sm" color="eggplant">
    <Text color="white">Change the screen width to see the min and max widths take affect </Text>
  </Box>
  <Box fit padding={2} borderStyle="sm" color="maroon">
    <Text color="white">"fit" sets width to 100% </Text>
  </Box>
</Box>

function BoxPopoverExample() {
  const longText =
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae nisl nec turpis vehicula ultrices. Duis pretium ut ipsum nec interdum. Vestibulum arcu dolor, consectetur ac eros a, varius commodo justo. Maecenas tincidunt neque elit, eu pretium arcu dictum ac. Donec vehicula mauris ut erat dictum, eget tempus elit luctus. In volutpat felis justo, et venenatis arcu viverra in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin enim lorem, vulputate eget imperdiet nec, dapibus sed diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse rhoncus ut leo non gravida. Nulla tincidunt tellus sit amet ornare venenatis. Sed quis lorem cursus, porttitor tellus sed, commodo ex. Praesent blandit pretium faucibus. Aenean orci tellus, vulputate id sapien sit amet, porta fermentum quam. Praesent sem risus, tristique sit amet pulvinar in, scelerisque sit amet massa.';

  return (
    <Flex gap={4} wrap>
      <Flex gap={8} direction="column" wrap>
        <Box>
          <Text>Overflow Hidden</Text>
          <Box
            overflow="hidden"
            width={300}
            maxHeight={100}
            padding={2}
            borderStyle="sm"
            color="eggplant"
          >
            <Text color="white">{longText}</Text>
          </Box>
        </Box>
        <Box>
          <Text>Overflow Scroll</Text>
          <Box
            overflow="scroll"
            width={300}
            maxHeight={100}
            padding={2}
            borderStyle="sm"
            color="maroon"
            tabIndex={0}
          >
            <Text color="white">{longText}</Text>
          </Box>
        </Box>
        <Box marginBottom={4}>
          <Text>Overflow Visible</Text>
          <Box
            overflow="visible"
            width={300}
            maxHeight={100}
            padding={2}
            borderStyle="sm"
            color="purple"
          >
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae nisl nec turpis vehicula ultrices. Duis pretium ut ipsum nec interdum. Vestibulum arcu dolor, consectetur ac eros a, varius commodo justo.
            </Text>
          </Box>
        </Box>
      </Flex>
      <Flex gap={8} direction="column" wrap>
        <Box>
          <Text>Overflow Auto</Text>
          <Box
            overflow="auto"
            width={300}
            maxHeight={100}
            padding={2}
            borderStyle="sm"
            color="eggplant"
          >
            <Box width={350} padding={2} borderStyle="sm" color="maroon" tabIndex={0}>
              <Text color="white">{longText}</Text>
            </Box>
          </Box>
        </Box>
        <Box>
          <Text>Overflow scrollX</Text>
          <Box
            overflow="scrollX"
            width={300}
            maxHeight={100}
            padding={2}
            borderStyle="sm"
            color="maroon"
          >
            <Box width={350} padding={2} borderStyle="sm" color="eggplant" tabIndex={0}>
              <Text color="white">{longText}</Text>
            </Box>
          </Box>
        </Box>
        <Box>
          <Text>Overflow scrollY</Text>
          <Box
            overflow="scrollY"
            width={300}
            maxHeight={100}
            padding={2}
            borderStyle="sm"
            color="maroon"
          >
            <Box width={350} padding={2} borderStyle="sm" color="eggplant" tabIndex={0}>
              <Text color="white">{longText}</Text>
            </Box>
          </Box>
        </Box>
      </Flex>
    </Flex>
  );
}

<Flex gap={3}>
  <Box padding={0} smPadding={1} mdPadding={2} lgPadding={3} color="darkWash">
    <Box width={40} height={40} color="maroon" />
  </Box>
  <Box paddingX={0} smPaddingX={1} mdPaddingX={2} lgPaddingX={3} color="darkWash">
    <Box width={40} height={40} color="midnight" />
  </Box>
  <Box paddingY={0} smPaddingY={1} mdPaddingY={2} lgPaddingY={3} color="darkWash">
    <Box width={40} height={40} color="eggplant" />
  </Box>
</Flex>

<Box color="midnight" marginStart={12} marginEnd={12} column={12}>
  <Box borderStyle="sm" color="maroon" margin="auto" column={5} height={100}/>
  <Box borderStyle="sm" color="eggplant" marginStart="auto" column={3} height={100}/>
</Box>

<Box height={100}>
  <Box position="absolute" top left padding={2} color="midnight">
    <Text color="white">Top Left</Text>
  </Box>
  <Box position="absolute" top right padding={2} color="midnight">
    <Text color="white">Top Right</Text>
  </Box>
  <Box position="absolute" bottom left padding={2} color="midnight">
    <Text color="white">Bottom Left</Text>
  </Box>
  <Box position="absolute" bottom right padding={2} color="midnight">
    <Text color="white">Bottom Right</Text>
  </Box>
  <Box color="maroon" width={400} height="100%"/>
</Box>

function BoxPopoverExample() {
  const [open, setOpen] = React.useState(false);
  const [checked, setChecked] = React.useState(false);

  const anchorRef = React.useRef(null);

  return (
    <React.Fragment>
      <Flex alignItems="start" direction="column" gap={6}>
        <Button
          inline
          color="red"
          onClick={ () => setOpen((prevVal) => !prevVal) }
          size="sm"
          text={open ? "Close Popover" : "Anchor a Popover to Box"}
        />
        <Box borderStyle='sm' padding={3} ref={anchorRef} rounding={1}>
          <Text>I'm a Box</Text>
        </Box>
      </Flex>
      {open && (
        <Popover
          anchor={anchorRef.current}
          idealDirection="right"
          onDismiss={() => {}}
          shouldFocus={false}
        >
          <Box padding={3}>
            <Text weight="bold">I'm a Popover anchored to a Box</Text>
          </Box>
        </Popover>
      )}
    </React.Fragment>
  );
}

function Example() {
  const HEADER_ZINDEX = new FixedZIndex(100);
  const zIndex = new CompositeZIndex([HEADER_ZINDEX]);
  return (
    <Box
      column={12}
      dangerouslySetInlineStyle={{ __style: { isolation: 'isolate' } }}
      height={150}
      overflow="scroll"
      tabIndex={0}
    >
      <Sticky top={0} zIndex={HEADER_ZINDEX}>
        <Box color="maroon" width="80%" height={60} padding={2}>
          <Text color="white">This is sticky and won't move when scrolling</Text>
        </Box>
      </Sticky>
      <Box color="midnight" width="50%" height={100} zIndex={zIndex} position="relative" padding={2}>
        <Text color="white">This will float above the maroon Box when scrolling</Text>
      </Box>
      <Box color="pine" width="30%" height={120} padding={2}>
        <Text color="white">This will go behind the maroon Box</Text>
      </Box>
    </Box>
)}