# Snapshot report for `test.js`

The actual snapshot is saved in `test.js.snap`.

Generated by [AVA](https://ava.li).

## Box merges media queries

> Snapshot 1

    [
      <div
        className="a b c d e f g"
      />,
      <style>
        .a{box-sizing:border-box}␊
        .b{width:50%}␊
        .g{padding-right:0px}@media screen and (min-width: 40em){.c{width:50%}␊
        .d{padding-right:0px}}@media screen and (min-width: 52em){.e{width:10.416666666666668%}␊
        .f{padding-right:0px}}
      </style>,
    ]

## Box renders

> Snapshot 1

    [
      <div
        className="a b c d"
      />,
      <style>
        .a{box-sizing:border-box}␊
        .b{margin:16px}␊
        .c{padding-left:32px}␊
        .d{padding-right:32px}
      </style>,
    ]

## Box renders with `is` prop

> Snapshot 1

    [
      <section
        className="a"
      />,
      <style>
        .a{box-sizing:border-box}
      </style>,
    ]

## Box renders with props

> Snapshot 1

    [
      <div
        className="a b c d e f g h i"
      />,
      <style>
        .a{box-sizing:border-box}␊
        .b{width:100%}␊
        .c{margin:8px}␊
        .g{padding-left:8px}␊
        .h{padding-right:8px}␊
        .i{-webkit-flex:1 1 auto;flex:1 1 auto}@media screen and (min-width: 40em){.d{margin:16px}␊
        .e{padding-left:16px}␊
        .f{padding-right:16px}}
      </style>,
    ]

## Flex renders

> Snapshot 1

    [
      <div
        className="a b"
      />,
      <style>
        .a{box-sizing:border-box}␊
        .b{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
      </style>,
    ]

## Flex renders with column prop

> Snapshot 1

    [
      <div
        className="a b c"
      />,
      <style>
        .a{box-sizing:border-box}␊
        .b{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}␊
        .c{-webkit-flex-direction:column;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal}
      </style>,
    ]

## Flex renders with props

> Snapshot 1

    [
      <div
        className="a b c d e f"
      />,
      <style>
        .a{box-sizing:border-box}␊
        .b{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}␊
        .c{flex-wrap:wrap}␊
        .d{flex-direction:column}␊
        .e{align-items:center}␊
        .f{justify-content:space-between}
      </style>,
    ]

## Flex renders with responsive props

> Snapshot 1

    [
      <div
        className="a b c d e f g h i"
      />,
      <style>
        .a{box-sizing:border-box}␊
        .b{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}␊
        .c{flex-wrap:wrap}␊
        .g{flex-direction:column}␊
        .h{align-items:stretch}␊
        .i{justify-content:space-between}@media screen and (min-width: 40em){.d{flex-direction:row}␊
        .e{align-items:center}␊
        .f{justify-content:center}}
      </style>,
    ]

## Grid renders

> Snapshot 1

    [
      <div
        className="a b c"
      />,
      <style>
        .a{box-sizing:border-box}␊
        .b{display:inline-block}␊
        .c{vertical-align:top}
      </style>,
    ]

## ThemeProvider

> Snapshot 1

    [
      <div
        className="a b c d e"
      />,
      <style>
        .a{box-sizing:border-box}␊
        .b{width:100%}@media screen and (min-width: 1em){.c{width:2px}}@media screen and (min-width: 2em){.d{width:3px}}@media screen and (min-width: 3em){.e{width:4px}}
      </style>,
    ]