import { Box } from './Box';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Alert } from '../Alert/Alert';
import { RESPONSIVE_STORY } from '../../docs/constants';
import {
  FONT_SIZE_OPTIONS,
  FONT_FAMILY_OPTIONS,
  FONT_FAMILY_VALUES,
  FONT_COLOR_OPTIONS,
  SPACING_OPTIONS,
} from '../../lib/tokens';

<Meta title="Components/Box/Overview" component={Box} />

# Box

A `<Box>` is a layout component to build UIs with consistent padding and spacing between elements.

- Its content is arranged in a specified `direction`, with 'column' being the default
- Renders a `<div />` element by default, but can be changed using `as`
- Allows you to specify the spacing between child elements using `gap`
- Many props accept `ResponsiveProp` that take an object with keys that correspond to [breakpoint tokens](?path=/story/design-tokens-design-tokens--page#breakpoints).

<Canvas>
  <Box gap="md">
    <Box
      padding="xl"
      background="primary-300"
      radius="md"
      fontSize={{ base: 'sm', tablet: 'md', hd: 'lg' }}
      borderWidth="sm"
      borderColor="primary-200"
    >
      I am a box with a green background and border
    </Box>
    <Box gap={{ base: 'sm', tablet: 'md', desktop: 'lg' }} direction="row">
      <Box flex="auto" radius="md" background="secondary-100" height="lg" />
      <Box flex="auto" radius="md" background="secondary-100" height="lg" />
      <Box flex="auto" radius="md" background="secondary-100" height="lg" />
      <Box flex="auto" radius="md" background="secondary-100" height="lg" />
      <Box flex="auto" radius="md" background="secondary-100" height="lg" />
    </Box>
  </Box>
</Canvas>

## Props

<ArgsTable of={Box} />

## Background Color

Use the `background` prop to set the color of the background

<Canvas>
  <Story name="Background">
    <Box gap="xs">
      <Box background="primary" padding="xs">
        primary
      </Box>
      <Box background="secondary" padding="xs">
        secondary
      </Box>
      <Box background="tertiary" padding="xs">
        tertiary
      </Box>
      <Box background="inverse" color="inverse-primary" padding="xs">
        inverse
      </Box>
      <Box background="default" padding="xs">
        default
      </Box>
      <Box background="info" padding="xs">
        info
      </Box>
      <Box background="success" padding="xs">
        success
      </Box>
      <Box background="warning" padding="xs">
        warning
      </Box>
      <Box background="danger" padding="xs">
        danger
      </Box>
    </Box>
  </Story>
</Canvas>

## Border

Use the `borderColor` prop to set the color of the border and the borderWidth to set the width. `borderWidth` also accepts css shorthand values that correspond to top, right, bottom, left.

<Canvas>
  <Story name="Border">
    <Box gap="sm" direction="row">
      <Box borderColor="separator" borderWidth="md" padding="xs">
        separator
      </Box>
      <Box borderColor="success" borderWidth="0 sm md xs" padding="xs">
        success, 0 sm md xs
      </Box>
      <Box borderColor="default" borderWidth="md" padding="xs">
        default, md
      </Box>
      <Box borderColor="info" borderWidth="md" padding="xs">
        info, md
      </Box>
      <Box borderColor="warning" borderWidth="md" padding="xs">
        warning, md
      </Box>
      <Box borderColor="danger" borderWidth="md" padding="xs">
        danger, md
      </Box>
    </Box>
  </Story>
</Canvas>

## Gap

Use `gap` to set the spacing between children of a Box (for display grid and flex).

<Canvas>
  <Story name="Gap">
    <Box gap="lg" direction="row" wrap maxWidth="4xl">
      <Box width="xl" background="primary-300" height="md" />
      <Box width="xl" background="primary-300" height="md" />
      <Box width="xl" background="primary-300" height="md" />
      <Box width="xl" background="primary-300" height="md" />
      <Box width="xl" background="primary-300" height="md" />
      <Box width="xl" background="primary-300" height="md" />
    </Box>
  </Story>
</Canvas>

### Controlling row and column gaps independently

Use `rowGap` and `columnGap` to set the spacing between children of a Box (for display grid and flex) in the row and column directions independently. You can also use shorthand `gap` to set both at once (e.g. `gap="row col"`).

<Canvas>
  <Story name="Gap Shorthand">
    <Box gap="xs 4xl" direction="row" wrap maxWidth="4xl">
      <Box width="xl" background="primary-300" height="md" />
      <Box width="xl" background="primary-300" height="md" />
      <Box width="xl" background="primary-300" height="md" />
      <Box width="xl" background="primary-300" height="md" />
      <Box width="xl" background="primary-300" height="md" />
      <Box width="xl" background="primary-300" height="md" />
    </Box>
  </Story>
</Canvas>

<Canvas>
  <Story name="Row Gap and Column Gap">
    <Box gap="lg">
      <Box rowGap="xs" columnGap="xl" direction="row" wrap maxWidth="4xl">
        <Box width="xl" background="primary-300" height="md" />
        <Box width="xl" background="primary-300" height="md" />
        <Box width="xl" background="primary-300" height="md" />
        <Box width="xl" background="primary-300" height="md" />
        <Box width="xl" background="primary-300" height="md" />
        <Box width="xl" background="primary-300" height="md" />
      </Box>
      <Box rowGap="sm" maxWidth="4xl">
        <Box width="100" background="primary-300" height="md" />
        <Box width="100" background="primary-300" height="md" />
        <Box width="100" background="primary-300" height="md" />
      </Box>
      <Box columnGap="sm" maxWidth="4xl" direction="row">
        <Box flex="auto" background="primary-300" height="md" />
        <Box flex="auto" background="primary-300" height="md" />
        <Box flex="auto" background="primary-300" height="md" />
      </Box>
    </Box>
  </Story>
</Canvas>

### Child Gap

For block layouts, you can use `childGap` to set the spacing between children of a Box. For flex or grid layouts, use `gap` instead.

<Canvas>
  <Story name="Child Gap">
    <Box childGap="md" display="block">
      <Box display="block" background="primary-300" padding="sm" />
      <Box display="block" background="primary-300" padding="sm" />
      <Box display="block" background="primary-300" padding="sm" />
      <Box display="block" background="primary-300" padding="sm" />
      <Box display="block" background="primary-300" padding="sm" />
    </Box>
  </Story>
</Canvas>

## Flex Properties

### Flex

The most common use case is to set children of a `<Box />` to `flex="auto"`.
The item is sized according to its width and height properties, but grows to absorb any extra free space in the parent, and shrinks to its minimum size to fit the container.
This is equivalent to setting "flex: 1 1 auto".

If you need more granular flex control for properties such as `flex-grow`, `flex-shrink`, `flex-basis`, we recommend
passing using a standard `style` object with the `flex` shorthand you need.

<Canvas>
  <Story name="Flex Auto">
    <Box gap="md">
      <Box gap="md" direction="row">
        <Box
          flex="auto"
          background="primary-300"
          height="lg"
          justifyContent="center"
          alignItems="center"
        >
          auto
        </Box>
        <Box
          flex="auto"
          background="primary-300"
          height="lg"
          justifyContent="center"
          alignItems="center"
        >
          auto
        </Box>
        <Box
          flex="auto"
          background="primary-300"
          height="lg"
          justifyContent="center"
          alignItems="center"
        >
          auto
        </Box>
        <Box
          flex="auto"
          background="primary-300"
          height="lg"
          justifyContent="center"
          alignItems="center"
        >
          auto
        </Box>
        <Box
          flex="auto"
          background="primary-300"
          height="lg"
          justifyContent="center"
          alignItems="center"
        >
          auto
        </Box>
      </Box>
    </Box>
  </Story>
</Canvas>

### Flex Direction

Set direction of child elements in a flex container.

<Canvas>
  <Story name="Flex Direction">
    <Box margin="0 0 md 0" fontWeight="bold">
      Row
    </Box>
    <Box gap="md" padding="sm" direction="row">
      <Box flex="auto" background="primary-300" padding="sm">
        1
      </Box>
      <Box flex="auto" background="primary-300" padding="sm">
        2
      </Box>
      <Box flex="auto" background="primary-300" padding="sm">
        3
      </Box>
      <Box flex="auto" background="primary-300" padding="sm">
        4
      </Box>
      <Box flex="auto" background="primary-300" padding="sm">
        5
      </Box>
    </Box>
    <Box margin="lg 0 md 0" fontWeight="bold">
      Column
    </Box>
    <Box gap="md" padding="sm" direction="column">
      <Box width="20%" background="primary-300" padding="sm">
        1
      </Box>
      <Box width="20%" background="primary-300" padding="sm">
        2
      </Box>
      <Box width="20%" background="primary-300" padding="sm">
        3
      </Box>
      <Box width="20%" background="primary-300" padding="sm">
        4
      </Box>
      <Box width="20%" background="primary-300" padding="sm">
        5
      </Box>
    </Box>
    <Box margin="lg 0 md 0" fontWeight="bold">
      Row Reverse
    </Box>
    <Box gap="md" padding="sm" direction="row-reverse">
      <Box width="20%" background="danger-300" padding="sm">
        1
      </Box>
      <Box width="20%" background="danger-300" padding="sm">
        2
      </Box>
      <Box width="20%" background="danger-300" padding="sm">
        3
      </Box>
      <Box width="20%" background="danger-300" padding="sm">
        4
      </Box>
      <Box width="20%" background="danger-300" padding="sm">
        5
      </Box>
    </Box>
    <Box margin="lg 0 md 0" fontWeight="bold">
      Column Reverse
    </Box>
    <Box gap="md" padding="sm" direction="column-reverse">
      <Box width="20%" background="danger-300" padding="sm">
        1
      </Box>
      <Box width="20%" background="danger-300" padding="sm">
        2
      </Box>
      <Box width="20%" background="danger-300" padding="sm">
        3
      </Box>
      <Box width="20%" background="danger-300" padding="sm">
        4
      </Box>
      <Box width="20%" background="danger-300" padding="sm">
        5
      </Box>
    </Box>
    <Box margin="lg 0 md 0" fontWeight="bold">
      Row Reverse
    </Box>
    <Box padding="sm" direction="row-reverse">
      <Box width="20%" background="primary-300" padding="sm">
        1
      </Box>
      <Box width="20%" background="primary-300" padding="sm" margin="0 md 0 0">
        2
      </Box>
      <Box width="20%" background="primary-300" padding="sm" margin="0 md 0 0">
        3
      </Box>
      <Box width="20%" background="primary-300" padding="sm" margin="0 md 0 0">
        4
      </Box>
      <Box width="20%" background="primary-300" padding="sm" margin="0 md 0 0">
        5
      </Box>
    </Box>
    <Box margin="lg 0 md 0" fontWeight="bold">
      Column Reverse
    </Box>
    <Box padding="sm" direction="column-reverse">
      <Box width="20%" background="primary-300" padding="sm">
        1
      </Box>
      <Box width="20%" background="primary-300" padding="sm" margin="0 0 md 0">
        2
      </Box>
      <Box width="20%" background="primary-300" padding="sm" margin="0 0 md 0">
        3
      </Box>
      <Box width="20%" background="primary-300" padding="sm" margin="0 0 md 0">
        4
      </Box>
      <Box width="20%" background="primary-300" padding="sm" margin="0 0 md 0">
        5
      </Box>
    </Box>
  </Story>
</Canvas>

<Canvas>
  <Story name="Flex Grow and Shrink">
    <Box gap="md">
      <Box gap="md" direction="row">
        <Box
          style={{ flex: '3' }}
          background="primary-300"
          height="lg"
          justifyContent="center"
          alignItems="center"
        >
          3
        </Box>
        <Box
          style={{ flex: '1' }}
          background="primary-300"
          height="lg"
          justifyContent="center"
          alignItems="center"
        >
          1
        </Box>
        <Box
          style={{ flex: '1' }}
          background="primary-300"
          height="lg"
          justifyContent="center"
          alignItems="center"
        >
          1
        </Box>
        <Box
          style={{ flex: '2' }}
          background="primary-300"
          height="lg"
          justifyContent="center"
          alignItems="center"
        >
          2
        </Box>
        <Box
          style={{ flex: '1' }}
          background="primary-300"
          height="lg"
          justifyContent="center"
          alignItems="center"
        >
          1
        </Box>
      </Box>
    </Box>
  </Story>
</Canvas>

### Justify Content

Set content alignment along the main axis

<Canvas>
  <Story name="JustifyContent">
    <Box flex="auto" gap="md">
      <Box direction="row" alignItems="center" gap="md">
        <Box width="70px">start</Box>
        <Box
          flex="auto"
          background="primary-100"
          justifyContent="flex-start"
          direction="row"
          gap="md"
        >
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box width="70px">center</Box>
        <Box
          flex="auto"
          background="primary-100"
          justifyContent="center"
          direction="row"
          gap="md"
        >
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box width="70px">end</Box>
        <Box
          flex="auto"
          background="primary-100"
          justifyContent="flex-end"
          direction="row"
          gap="md"
        >
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box width="70px">between</Box>
        <Box
          flex="auto"
          background="primary-100"
          justifyContent="space-between"
          direction="row"
          gap="md"
        >
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box width="70px">around</Box>
        <Box
          flex="auto"
          background="primary-100"
          justifyContent="space-around"
          direction="row"
          gap="md"
        >
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box width="70px">evenly</Box>
        <Box
          flex="auto"
          background="primary-100"
          justifyContent="space-evenly"
          direction="row"
          gap="md"
        >
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
        </Box>
      </Box>
    </Box>
  </Story>
</Canvas>

### Align Items

Set content alignment along the cross axis.

<Canvas>
  <Story name="AlignItems">
    <Box flex="auto" gap="md">
      <Box direction="row" alignItems="center" gap="md">
        <Box width="70px">start</Box>
        <Box
          flex="auto"
          height="100px"
          background="primary-100"
          alignItems="flex-start"
          direction="row"
          gap="md"
        >
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box width="70px">center</Box>
        <Box
          flex="auto"
          height="100px"
          background="primary-100"
          alignItems="center"
          direction="row"
          gap="md"
        >
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box width="70px">end</Box>
        <Box
          flex="auto"
          height="100px"
          background="primary-100"
          alignItems="flex-end"
          direction="row"
          gap="md"
        >
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box width="70px">baseline</Box>
        <Box
          flex="auto"
          height="100px"
          background="primary-100"
          alignItems="baseline"
          direction="row"
          gap="md"
        >
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
          <Box width="md" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box width="70px">stretch</Box>
        <Box
          flex="auto"
          height="100px"
          background="primary-100"
          alignItems="stretch"
          direction="row"
          gap="md"
        >
          <Box width="md" background="primary-500" />
          <Box width="md" background="primary-500" />
          <Box width="md" background="primary-500" />
        </Box>
      </Box>
    </Box>
  </Story>
</Canvas>

### Align Content

Set the Box's lines within where there is extra space in the cross-axis.
This property has no effect when there is only one line of flex items.

<Canvas>
  <Story name="Align Content">
    <Box gap="md">
      <Box direction="row" alignItems="center" gap="md">
        <Box flex="auto" width="70px">
          start
        </Box>
        <Box
          flex="auto"
          alignContent="flex-start"
          height="200px"
          wrap
          gap="md"
          background="primary-100"
          direction="row"
        >
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box flex="auto" width="70px">
          center
        </Box>
        <Box
          flex="auto"
          alignContent="center"
          height="200px"
          wrap
          gap="md"
          background="primary-100"
          direction="row"
        >
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box flex="auto" width="70px">
          end
        </Box>
        <Box
          flex="auto"
          alignContent="flex-end"
          height="200px"
          wrap
          gap="md"
          background="primary-100"
          direction="row"
        >
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box flex="auto" width="70px">
          stretch
        </Box>
        <Box
          flex="auto"
          alignContent="stretch"
          height="200px"
          wrap
          gap="md"
          background="primary-100"
          direction="row"
        >
          <Box width="2xl" background="primary-500" />
          <Box width="2xl" background="primary-500" />
          <Box width="2xl" background="primary-500" />
          <Box width="2xl" background="primary-500" />
          <Box width="2xl" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box flex="auto" width="70px">
          between
        </Box>
        <Box
          flex="auto"
          alignContent="space-between"
          height="200px"
          wrap
          gap="md"
          background="primary-100"
          direction="row"
        >
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
        </Box>
      </Box>
      <Box direction="row" alignItems="center" gap="md">
        <Box flex="auto" width="70px">
          around
        </Box>
        <Box
          flex="auto"
          alignContent="center"
          height="200px"
          wrap
          gap="md"
          background="primary-100"
          direction="row"
        >
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
          <Box width="2xl" height="md" background="primary-500" />
        </Box>
      </Box>
    </Box>
  </Story>
</Canvas>

## Font Color

Use the `color` prop to set the color of the text

<Canvas>
  <Story name="Font Color">
    <Box gap="xs">
      <Box color="body-primary">body-primary</Box>
      <Box color="body-secondary">body-secondary</Box>
      <Box color="body-tertiary">body-tertiary</Box>
      <Box color="contrast">contrast</Box>
      <Box color="inverse-primary">inverse-primary</Box>
      <Box color="inverse-secondary">inverse-secondary</Box>
      <Box color="primary">primary</Box>
      <Box color="success">success</Box>
      <Box color="info">info</Box>
      <Box color="disabled">disabled</Box>
    </Box>
  </Story>
</Canvas>

## Font Size

Set the `fontSize` prop with a [font size](?path=/story/design-tokens-design-tokens--page#font-size) token to set the size of the text in the Box.

<Canvas>
  <Story name="Font Size">
    {[...FONT_SIZE_OPTIONS].reverse().map((fontSize, i) => (
      <Box fontSize={fontSize} key={i}>
        {`${fontSize} font size`}
      </Box>
    ))}
  </Story>
</Canvas>

## Font Family

<Canvas>
  <Story name="Font Family">
    <Box fontFamily="body" margin="0 0 md 0" fontSize="xl">
      Body font
      <Box fontSize="sm">{FONT_FAMILY_VALUES['body'].value}</Box>
    </Box>
    <Box fontFamily="brand" margin="0 0 md 0" fontSize="xl">
      Brand Font
      <Box fontSize="sm">{FONT_FAMILY_VALUES['brand'].value}</Box>
    </Box>
    <Box
      fontFamily="monospace"
      margin="0 0 md 0"
      fontSize="xl"
      data-chromatic="ignore"
    >
      Monospace Font
      <Box fontSize="sm">{FONT_FAMILY_VALUES['monospace'].value}</Box>
    </Box>
  </Story>
</Canvas>

## Font Weight

Set the `fontWeight` prop with a [font weight](?path=/story/design-tokens-design-tokens--page#font-weight) token to set the size of the text in the Box.

<Canvas>
  <Story name="Font Weight">
    <Box>
      <Box fontWeight="light">light</Box>
      <Box fontWeight="regular">regular</Box>
      <Box fontWeight="medium">medium</Box>
      <Box fontWeight="bold">bold</Box>
      <Box fontWeight="black">black</Box>
    </Box>
  </Story>
</Canvas>

## Text Align

Set the `textAlign` prop to set the alignment of the text in the Box.

<Canvas>
  <Story name="Text Align">
    <Box display="block">
      <Box display="block" textAlign="left">
        left
      </Box>
      <Box display="block" textAlign="center">
        center
      </Box>
      <Box display="block" textAlign="right">
        right
      </Box>
    </Box>
  </Story>
</Canvas>

## Margin

The `margin` prop accepts a single [spacing](?path=/story/design-tokens-design-tokens--page#spacing) value or a set of spacing values that correspond with css shorthand syntax. Margin values can be set on the horizontal or vertical axis, or the top, right, bottom and left sides of a Box.

<Canvas>
  <Story name="Margin">
    <Box margin="lg" background="primary-100">
      lg margin
    </Box>
    <Box margin="lg md" background="primary-100">
      lg vertical and md horizontal
    </Box>
    <Box margin="0 2xl" background="primary-100">
      0 vertical and 2xl horizontal
    </Box>
    <Box margin="sm md 2xl" background="primary-100">
      sm top, md horizontal, 2xl bottom
    </Box>
    <Box margin="sm lg 2xl 0" background="primary-100">
      sm top, lg right, 2xl bottom, 0 left
    </Box>
  </Story>
</Canvas>

## Padding

The `padding` prop accepts a single [spacing](?path=/story/design-tokens-design-tokens--page#spacing) value or a set of spacing values that correspond with css shorthand syntax. Padding values can be set on the horizontal or vertical axis, or the top, right, bottom and left sides of a Box.

<Canvas>
  <Story name="Padding">
    <Box padding="lg" margin="sm 0" background="primary-100">
      lg padding
    </Box>
    <Box padding="lg md" margin="sm 0" background="primary-100">
      lg vertical and md horizontal
    </Box>
    <Box padding="0 2xl" margin="sm 0" background="primary-100">
      0 vertical and 2xl horizontal
    </Box>
    <Box padding="sm md 2xl" margin="sm 0" background="primary-100">
      sm top, md horizontal, 2xl bottom
    </Box>
    <Box padding="sm lg 2xl 0" margin="sm 0" background="primary-100">
      sm top, lg right, 2xl bottom, 0 left
    </Box>
  </Story>
</Canvas>

## Radius

Set the `radius` prop with a [radius token](?path=/story/design-tokens-design-tokens--page#border-radius) to set the corner radius of the box.

<Canvas>
  <Story name="Radius">
    <Box direction="row" gap="2xs" justifyContent="space-between">
      <Box radius="xs" background="secondary-300" padding="sm">
        xs
      </Box>
      <Box radius="sm" background="secondary-300" padding="sm">
        sm
      </Box>
      <Box radius="md" background="secondary-300" padding="sm">
        md
      </Box>
      <Box radius="lg" background="secondary-300" padding="sm">
        lg
      </Box>
      <Box radius="circle" background="secondary-300" padding="sm">
        circle
      </Box>
      <Box radius="sm lg" background="secondary-300" padding="sm">
        sm lg
      </Box>
      <Box radius="sm md lg" background="secondary-300" padding="sm">
        sm md lg
      </Box>
      <Box radius="xs sm md lg" background="secondary-300" padding="sm">
        xs sm md lg
      </Box>
      <Box radius="0 0 md md" background="secondary-300" padding="sm">
        0 0 md md
      </Box>
      <Box radius="md md 0 0" background="secondary-300" padding="sm">
        md md 0 0
      </Box>
    </Box>
  </Story>
</Canvas>

## Shadow

Set the `shadow` prop with a [shadow token](?path=/story/design-tokens-design-tokens--page#box-shadow) to set the outer shadow of the box.

<Canvas>
  <Story name="Shadow">
    <Box
      direction="row"
      background="grey-50"
      padding="2xl"
      justifyContent="space-between"
    >
      <Box
        shadow="0"
        alignItems="center"
        justifyContent="center"
        background="primary"
        radius="md"
        padding="sm"
        height="lg"
      >
        0
      </Box>
      <Box
        shadow="2xs"
        alignItems="center"
        justifyContent="center"
        background="primary"
        radius="md"
        padding="sm"
        height="lg"
      >
        2xs
      </Box>
      <Box
        shadow="xs"
        alignItems="center"
        justifyContent="center"
        background="primary"
        radius="md"
        padding="sm"
        height="lg"
      >
        xs
      </Box>
      <Box
        shadow="sm"
        alignItems="center"
        justifyContent="center"
        background="primary"
        radius="md"
        padding="sm"
        height="lg"
      >
        sm
      </Box>
      <Box
        shadow="md"
        alignItems="center"
        justifyContent="center"
        background="primary"
        radius="md"
        padding="sm"
        height="lg"
      >
        md
      </Box>
      <Box
        shadow="lg"
        alignItems="center"
        justifyContent="center"
        background="primary"
        radius="md"
        padding="sm"
        height="lg"
      >
        lg
      </Box>
      <Box
        shadow="xl"
        alignItems="center"
        justifyContent="center"
        background="primary"
        radius="md"
        padding="sm"
        height="lg"
      >
        xl
      </Box>
      <Box
        shadow="2xl"
        alignItems="center"
        justifyContent="center"
        background="primary"
        radius="md"
        padding="sm"
        height="lg"
      >
        2xl
      </Box>
    </Box>
  </Story>
</Canvas>

## Width

Width can be set to any CSS unit value (px, rem, em, %).

<Canvas>
  <Story name="Width">
    <Box background="primary-50" gap="xs">
      <Box background="primary-300" width="227px">
        227px
      </Box>
      <Box background="primary-300" width="10rem">
        10rem
      </Box>
      <Box background="primary-300" width="50%">
        50%
      </Box>
    </Box>
  </Story>
</Canvas>

[Width tokens](?path=/story/design-tokens-design-tokens--page#width) may be used to set widths as well.

<Canvas>
  <Story name="Width standards">
    <Box background="primary-50" gap="xs" overflow="auto">
      <Box background="primary-300" width="sm">
        sm
      </Box>
      <Box background="primary-300" width="md">
        md
      </Box>
      <Box background="primary-300" width="lg">
        lg
      </Box>
      <Box background="primary-300" width="xl">
        xl
      </Box>
      <Box background="primary-300" width="2xl">
        2xl
      </Box>
      <Box background="primary-300" width="3xl">
        3xl
      </Box>
      <Box background="primary-300" width="4xl">
        4xl
      </Box>
      <Box background="primary-300" width="5xl">
        5xl
      </Box>
    </Box>
  </Story>
</Canvas>

Set the width to a common percentage of the Box's parent.

<Canvas>
  <Story name="Width Percentage">
    <Box background="primary-50" gap="xs">
      <Box background="primary-300" width="10">
        10%
      </Box>
      <Box background="primary-300" width="15">
        15%
      </Box>
      <Box background="primary-300" width="20">
        20%
      </Box>
      <Box background="primary-300" width="25">
        25%
      </Box>
      <Box background="primary-300" width="30">
        30%
      </Box>
      <Box background="primary-300" width="33">
        33%
      </Box>
      <Box background="primary-300" width="34">
        34%
      </Box>
      <Box background="primary-300" width="40">
        40%
      </Box>
      <Box background="primary-300" width="50">
        50%
      </Box>
      <Box background="primary-300" width="60">
        60%
      </Box>
      <Box background="primary-300" width="70">
        70%
      </Box>
      <Box background="primary-300" width="75">
        75%
      </Box>
      <Box background="primary-300" width="80">
        80%
      </Box>
      <Box background="primary-300" width="90">
        90%
      </Box>
      <Box background="primary-300" width="100">
        100%
      </Box>
    </Box>
  </Story>
</Canvas>

## Max Width

Set the maximum width of the Box by setting `maxWidth` to a [width token](?path=/story/design-tokens-design-tokens--page#width) or any valid css unit.

<Canvas>
  <Story name="Max width">
    <Box background="primary-50" gap="xs">
      <Box background="primary-300" maxWidth="2xl">
        2xl
      </Box>
      <Box background="primary-300" maxWidth="145px">
        145px
      </Box>
      <Box background="primary-300" maxWidth="50%">
        50%
      </Box>
    </Box>
  </Story>
</Canvas>

## Min Width

Set the minimum width of the Box by setting `minWidth` to a [width token](?path=/story/design-tokens-design-tokens--page#width) or any valid css unit.

<Canvas>
  <Story name="Min width">
    <Box alignItems="flex-start" background="primary-50" gap="xs">
      <Box background="primary-300" minWidth="2xl">
        2xl
      </Box>
      <Box background="primary-300" minWidth="145px">
        145px
      </Box>
      <Box background="primary-300" minWidth="50%">
        50%
      </Box>
    </Box>
  </Story>
</Canvas>

## Height

Height can be set to any CSS unit value (px, rem, em, %).

<Canvas>
  <Story name="Height">
    <Box background="primary-50" gap="xs">
      <Box
        background="primary-300"
        height="227px"
        justifyContent="center"
        alignItems="center"
      >
        227px
      </Box>
      <Box
        background="primary-300"
        height="10rem"
        justifyContent="center"
        alignItems="center"
      >
        10rem
      </Box>
      <Box
        background="primary-300"
        height="4em"
        justifyContent="center"
        alignItems="center"
      >
        4em
      </Box>
    </Box>
  </Story>
</Canvas>

[Width tokens](?path=/story/design-tokens-design-tokens--page#height) may be used to set height as well.

<Canvas>
  <Story name="Height standards">
    <Box background="primary-50" gap="xs" height="5xl" direction="row">
      <Box
        flex="auto"
        background="primary-300"
        justifyContent="center"
        alignItems="center"
        height="sm"
      >
        sm
      </Box>
      <Box
        flex="auto"
        background="primary-300"
        justifyContent="center"
        alignItems="center"
        height="md"
      >
        md
      </Box>
      <Box
        flex="auto"
        background="primary-300"
        justifyContent="center"
        alignItems="center"
        height="lg"
      >
        lg
      </Box>
      <Box
        flex="auto"
        background="primary-300"
        justifyContent="center"
        alignItems="center"
        height="xl"
      >
        xl
      </Box>
      <Box
        flex="auto"
        background="primary-300"
        justifyContent="center"
        alignItems="center"
        height="2xl"
      >
        2xl
      </Box>
      <Box
        flex="auto"
        background="primary-300"
        justifyContent="center"
        alignItems="center"
        height="3xl"
      >
        3xl
      </Box>
      <Box
        flex="auto"
        background="primary-300"
        justifyContent="center"
        alignItems="center"
        height="4xl"
      >
        4xl
      </Box>
      <Box
        flex="auto"
        background="primary-300"
        justifyContent="center"
        alignItems="center"
        height="5xl"
      >
        5xl
      </Box>
    </Box>
  </Story>
</Canvas>

Set the height to a common percentage of the Box's parent.

<Canvas>
  <Story name="Height Percentage">
    <Box height="400px" gap="xs" direction="row" background="primary-50">
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="10"
      >
        10%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="15"
      >
        15%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="20"
      >
        20%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="25"
      >
        25%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="30"
      >
        30%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="33"
      >
        33%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="34"
      >
        34%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="40"
      >
        40%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="50"
      >
        50%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="60"
      >
        60%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="70"
      >
        70%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="75"
      >
        75%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="80"
      >
        80%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="90"
      >
        90%
      </Box>
      <Box
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
        height="100"
      >
        100%
      </Box>
    </Box>
  </Story>
</Canvas>

## Max Height

Set the maximum width of the Box by setting `maxHeight` to a [height token](?path=/story/design-tokens-design-tokens--page#height) or any valid css unit.

<Canvas>
  <Story name="Max Height">
    <Box height="300px" background="primary-50" direction="row" gap="xs">
      <Box
        maxHeight="lg"
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
      >
        lg
      </Box>
      <Box
        maxHeight="50px"
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
      >
        50px
      </Box>
      <Box
        maxHeight="50%"
        flex="auto"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
      >
        50%
      </Box>
    </Box>
  </Story>
</Canvas>

## Min Height

Set the minimum width of the Box by setting `minHeight` to a [height token](?path=/story/design-tokens-design-tokens--page#height) or any valid css unit.

<Canvas>
  <Story name="Min Height">
    <Box
      height="300px"
      background="primary-50"
      alignItems="flex-start"
      direction="row"
      gap="xs"
    >
      <Box
        width="33"
        minHeight="3xl"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
      >
        3xl
      </Box>
      <Box
        width="33"
        minHeight="50px"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
      >
        50px
      </Box>
      <Box
        width="33"
        minHeight="50%"
        justifyContent="center"
        alignItems="center"
        background="primary-300"
      >
        50%
      </Box>
    </Box>
  </Story>
</Canvas>

## Overflow

Set the overflow behavior of the Box with `overflow`

<Canvas>
  <Story name="Overflow">
    <Box
      overflow="auto"
      padding="md"
      gap="md"
      flex="auto"
      background="primary-100"
      borderColor="grey"
      height="100px"
    >
      <p>
        Most homeowners are stuck with a single option for their power company,
        and that utility just keeps increasing rates year after year. With
        solar, you take back control over where your energy comes from, how much
        it costs, and what you can do with it. Use it, store it, or sell it, all
        on your own terms.
      </p>
      <p>
        Solar can be complicated, but Palmetto makes it easy. We have solar,
        storage, and maintenance, all under one roof. Plus, you can monitor your
        entire system from the palm of your hand, and we have an award-winning
        customer service team standing by to help you with anything you might
        need.
      </p>
      <p>
        Switching to solar saves the average Palmetto customer $18,471 over 25
        years. Add in national tax credits and local rebates and incentives, and
        you can save even more. Like many things in life though, these discounts
        won’t be around forever, so take advantage of them while you can.
      </p>
    </Box>
  </Story>
</Canvas>

## Cursor

Set the cursor for value for the element in question. Use any valid [CSS cursor value](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#values).

<Canvas>
  <Story name="Cursor">
    <Box
      padding="md"
      gap="md"
      flex="auto"
      background="primary-100"
      overflow="auto"
    >
      <Box cursor="pointer" padding="md" background="primary-300">
        pointer
      </Box>
      <Box cursor="move" padding="md" background="primary-300">
        move
      </Box>
      <Box cursor="not-allowed" padding="md" background="primary-300">
        not-allowed
      </Box>
      <Box cursor="grab" padding="md" background="primary-300">
        grab
      </Box>
      <Box cursor="zoom-in" padding="md" background="primary-300">
        zoom-in
      </Box>
      <Box cursor="zoom-out" padding="md" background="primary-300">
        zoom-out
      </Box>
    </Box>
  </Story>
</Canvas>

## Position

Set the CSS position for the element in question. Use any valid [CSS position value](https://developer.mozilla.org/en-US/docs/Web/CSS/position#values) or a
responsive object prop with said values. Example with `fixed` position not included. Scroll the container to see these in action.

<Canvas>
  <Story name="Position">
    <Box
      padding="md"
      childGap="md"
      display="block"
      background="primary-100"
      overflow="scroll"
      height="300px"
    >
      <Box
        position="absolute"
        padding="md"
        background="secondary-300"
        style={{ zIndex: 1 }}
        width="100px"
        height="150px"
      >
        absolute
      </Box>
      <Box
        position="relative"
        padding="md"
        background="primary-300"
        textAlign="right"
        height="200px"
      >
        relative
      </Box>
      <Box
        position="sticky"
        padding="md"
        background="tertiary-300"
        height="50px"
        color="white"
        style={{ top: 0, zIndex: 2 }}
      >
        sticky
      </Box>
      <Box
        position="static"
        padding="md"
        background="primary-300"
        height="400px"
      >
        static
      </Box>
    </Box>
  </Story>
</Canvas>

## Hover States

You can control the styles for the box on hover using the `hover` prop and passing token values for the relevant property.
Hover on the elements below to see these in action.

Currently our library supports hover states for:

- `background`
- `borderColor`
- `borderWidth`
- `color`
- `fontSize`
- `shadow`

<Canvas>
  <Story name="Hover States">
    <Box gap="md">
      <Box
        padding="md"
        background="primary-500"
        color="white"
        shadow="xs"
        hover={{
          background: 'primary-600',
        }}
        cursor="pointer"
      >
        simple background color effect
      </Box>
      <Box
        padding="md"
        background="primary"
        color="primary"
        radius="md"
        borderWidth="xs"
        borderColor="primary-500"
        fontWeight="bold"
        direction="row"
        justifyContent="center"
        hover={{
          background: 'primary-600',
          color: 'white',
        }}
        cursor="pointer"
      >
        an outlined button
      </Box>
      <Box
        padding="md"
        radius="md"
        background="primary"
        shadow="sm"
        borderWidth="xs"
        borderColor="grey-50"
        hover={{
          shadow: 'lg',
        }}
        cursor="grab"
      >
        Card shadow effect
      </Box>
      <Box
        padding="md"
        background="primary"
        hover={{
          fontSize: 'xl',
        }}
      >
        growing text
      </Box>
      <Box
        padding="md"
        background="primary"
        borderWidth="xs"
        borderColor="transparent"
        hover={{
          borderWidth: 'xs',
          borderColor: 'primary-500',
        }}
      >
        adding a border
      </Box>
      <Box
        padding="md"
        background="primary"
        borderColor="grey-300"
        borderWidth="xs"
        hover={{
          borderWidth: 'md',
        }}
      >
        changing a border width
      </Box>
    </Box>
  </Story>
</Canvas>

## Focus States

You can control the styles for the box on hover using the `focus` prop and passing token values for the relevant property.
Focus on the elements below to the these in action.

Currently our library supports hover states for:

- `background`
- `borderColor`
- `borderWidth`
- `color`
- `shadow`

<Canvas>
  <Story name="Focus States">
    <Box gap="md">
      <Box
        as="input"
        type="text"
        padding="md"
        background="primary"
        color="dark"
        shadow="xs"
        borderWidth="xs"
        borderColor="separator"
        radius="md"
        style={{ outline: 'none' }}
        focus={{
          borderColor: 'grey',
        }}
        placeholder="useful for form inputs..."
      />
      <Box
        radius="md"
        shadow="xs"
        padding="md"
        focus={{
          shadow: 'lg',
        }}
        tabIndex="0"
        style={{ outline: 'none' }}
      >
        Card focus effect
      </Box>
    </Box>
  </Story>
</Canvas>

## Responsive Props

Any props that accept a `ResponsiveProp` will take an object with the following shape:

```
{
  base?: prop, // breakpoint starting at 0 pixels, not scoped by media query.
  tablet?: prop, // 608px and higher.
  desktop?: prop, // 992px and higher.
  hd?: prop, // 1280px and higher.
}
```

These props will create classes that are scoped to the specific breakpoint they are assigned to. Not all breakpoints
are required in this shape, you can pick and choose which breakpoints require different layout attributes based on a
mobile first approach.

Props that are responsive-enabled follow a mobile-first approach, which means that styles are applied first to smaller viewports (i.e. mobile devices).
As the viewport size increases, new styles may be applied (styles are overridden for larger viewports).
Responsive enabled props take a keyed object that specifies at which [breakpoints](?path=/story/design-tokens-design-tokens--page#breakpoints) to apply certain properties.

```
<Box
  width={{
    base: '100px' // box width is 100px
    tablet: '200px' // box width is 200px when viewport width is greater than size-breakpoint-tablet
    desktop: '300px' // box width is 600px when viewport width is greater than size-breakpoint-desktop
    hd: '600px' // box width is 600px when viewport width is greater than size-breakpoint-hd
  }}
>
```

Try resizing the browser to see the responsive properties in action.

<Canvas>
  <Story name="Responsive Props" parameters={{ ...RESPONSIVE_STORY }}>
    <Box
      background="primary-300"
      borderColor="grey-300"
      padding={{ base: 'sm', tablet: 'md', desktop: 'lg', hd: 'xl' }}
      fontSize={{ base: 'md', tablet: 'lg', desktop: 'xl', hd: '3xl' }}
      borderWidth={{ base: 'sm', tablet: 'xs', desktop: 'md', hd: '0' }}
      textAlign={{ base: 'center', tablet: 'right', desktop: 'left' }}
    >
      <p>Resize the viewport to see how my appearance changes.</p>
    </Box>
  </Story>
</Canvas>

#### Omitting Keys

When passing an object, omitting a key is the same as not applying any styles.
For example the following has padding at the `desktop` breakpoint and wider.

<Canvas>
  <Story name="Omitting Responsive Keys" parameters={{ ...RESPONSIVE_STORY }}>
    <Box padding={{ desktop: 'lg' }} background="primary-100">
      <p>
        This box will have no padding until the viewport reaches the desktop
        breakpoint.{' '}
      </p>
    </Box>
  </Story>
</Canvas>
