import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";

function _templateObject() {
  const data = _taggedTemplateLiteral(["\n  .demo {\n    width: 100%;\n    padding: 1rem;\n\n    color: white;\n    background: var(--color-sea-green);\n  }\n  .grid-demo__item {\n    position: relative;\n    margin: 0 0 6rem 0;\n  }\n  .grid-demo__item__description {\n    margin: 1rem 0 2rem 0;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

/**
 * UI lib Component Example
 *
 */
import React, { PureComponent, Fragment } from 'react'; // import Grid from './Grid'

import { css } from '@emotion/core';

var _ref =
/*#__PURE__*/
React.createElement(Fragment, null, React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters"
}, React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "1/2")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "1/2"))), React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters"
}, React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "1/3")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "1/3")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "1/3"))), React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters"
}, React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "1/4")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "1/4")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "1/4")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "1/4"))), React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters dnb-grid--flex-cells"
}, React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "This cell matches the other cell's height")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "Here is some lipsum content. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", ' '))), React.createElement("div", {
  className: "grid-demo__item"
}, React.createElement("h2", {
  className: "grid-demo__item__title"
}, "Individual sizing"), React.createElement("p", {
  className: "grid-demo__item__description typo-light"
}, "When equal widths aren\u2019t what you want, you can add sizing classes to individual cells. Cells without sizing classes simply divide up the remaining space as normal. The cells below labeled \u201Cauto\u201D do not have sizing classes specified."), React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters"
}, React.createElement("div", {
  className: "dnb-grid__cell u-1of2"
}, React.createElement("div", {
  className: "demo"
}, "1/2")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "auto")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "auto"))), React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters"
}, React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "auto")), React.createElement("div", {
  className: "dnb-grid__cell u-1of3"
}, React.createElement("div", {
  className: "demo"
}, "1/3"))), React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters"
}, React.createElement("div", {
  className: "dnb-grid__cell u-1of4"
}, React.createElement("div", {
  className: "demo"
}, "1/4")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "auto")), React.createElement("div", {
  className: "dnb-grid__cell u-1of3"
}, React.createElement("div", {
  className: "demo"
}, "1/3")))), React.createElement("div", {
  className: "grid-demo__item"
}, React.createElement("h2", {
  className: "grid-demo__item__title"
}, "Responsive"), React.createElement("p", {
  className: "grid-demo__item__description typo-light"
}, "Add responsiveness by adding classes to the grid cells or containers. When those media values are met, the grids automatically adjust accordingly. Resize your browser to see them in action."), React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters dnb-grid--full dnb-med-grid--fit"
}, React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "Full / Halves")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "Full / Halves"))), React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters dnb-grid--full dnb-med-grid--fit"
}, React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "Full / Thirds")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "Full / Thirds")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "Full / Thirds")))), React.createElement("div", {
  className: "grid-demo__item"
}, React.createElement("h2", {
  className: "grid-demo__item__title"
}, "Nesting"), React.createElement("p", {
  className: "grid-demo__item__description typo-light"
}, "The grid is infinitely nestable."), React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters-xl dnb-grid--flex-cells"
}, React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters"
}, React.createElement("div", {
  className: "dnb-grid__cell u-1of3"
}, React.createElement("div", {
  className: "demo"
}, "1/3")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, React.createElement("div", {
  className: "example-box dnb-grid dnb-grid--gutters"
}, React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "1/2")), React.createElement("div", {
  className: "dnb-grid__cell"
}, React.createElement("div", {
  className: "demo"
}, "1/2")))))))))));

class Example extends PureComponent {
  render() {
    return _ref;
  }

}

var _ref2 =
/*#__PURE__*/
React.createElement("div", {
  css: demoStyle
}, React.createElement(Example, null));

export { Example };
export default (() => _ref2);
const demoStyle = css(_templateObject());