@dhis2-ui/css 9.11.0 → 9.11.1-beta.1

package/build/cjs/css-reset/css-reset.js

@@ -4,18 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CssReset = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CssReset = () => /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "3745978156",
   dynamic: [_uiConstants.theme.fonts, _uiConstants.theme.fonts]
-}, ["html{line-height:1.15;-webkit-text-size-adjust:100%;box-sizing:border-box;}", "*,*:before,*:after{font-family:".concat(_uiConstants.theme.fonts, ";box-sizing:inherit;}"), "body{margin:0;font-family:".concat(_uiConstants.theme.fonts, ";}"), "main{display:block;}", "h1{font-size:2em;margin:0.67em 0;}", "hr{box-sizing:content-box;height:0;overflow:visible;}", "pre{font-family:monospace,monospace;font-size:1em;}", "a{background-color:transparent;}", "abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}", "b,strong{font-weight:bolder;}", "code,kbd,samp{font-family:monospace,monospace;font-size:1em;}", "small{font-size:80%;}", "sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}", "sub{bottom:-0.25em;}", "sup{top:-0.5em;}", "img{border-style:none;}", "button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}", "button,input{overflow:visible;}", "button,select{text-transform:none;}", "button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;}", "button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner{border-style:none;padding:0;}", "button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText;}", "fieldset{padding:0.35em 0.75em 0.625em;}", "legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}", "progress{vertical-align:baseline;}", "textarea{overflow:auto;}", "[type='checkbox'],[type='radio']{box-sizing:border-box;padding:0;}", "[type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button{height:auto;}", "[type='search']{-webkit-appearance:textfield;outline-offset:-2px;}", "[type='search']::-webkit-search-decoration{-webkit-appearance:none;}", "::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}", "details{display:block;}", "summary{display:list-item;}", "template{display:none;}", "[hidden]{display:none;}"]);
-
+}, ["html{line-height:1.15;-webkit-text-size-adjust:100%;box-sizing:border-box;}", `*,*:before,*:after{font-family:${_uiConstants.theme.fonts};box-sizing:inherit;}`, `body{margin:0;font-family:${_uiConstants.theme.fonts};}`, "main{display:block;}", "h1{font-size:2em;margin:0.67em 0;}", "hr{box-sizing:content-box;height:0;overflow:visible;}", "pre{font-family:monospace,monospace;font-size:1em;}", "a{background-color:transparent;}", "abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}", "b,strong{font-weight:bolder;}", "code,kbd,samp{font-family:monospace,monospace;font-size:1em;}", "small{font-size:80%;}", "sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}", "sub{bottom:-0.25em;}", "sup{top:-0.5em;}", "img{border-style:none;}", "button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}", "button,input{overflow:visible;}", "button,select{text-transform:none;}", "button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;}", "button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner{border-style:none;padding:0;}", "button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText;}", "fieldset{padding:0.35em 0.75em 0.625em;}", "legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}", "progress{vertical-align:baseline;}", "textarea{overflow:auto;}", "[type='checkbox'],[type='radio']{box-sizing:border-box;padding:0;}", "[type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button{height:auto;}", "[type='search']{-webkit-appearance:textfield;outline-offset:-2px;}", "[type='search']::-webkit-search-decoration{-webkit-appearance:none;}", "::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}", "details{display:block;}", "summary{display:list-item;}", "template{display:none;}", "[hidden]{display:none;}"]);
 exports.CssReset = CssReset;

package/build/cjs/css-reset/{css-reset.stories.js → css-reset.prod.stories.js}

@@ -4,23 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+A tool for adding a global normalization stylesheet into the DOM that applies DHIS2 styles.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const description = "\nA tool for adding a global normalization stylesheet into the DOM that applies DHIS2 styles.\n\n- https://github.com/necolas/normalize.css\n- https://www.paulirish.com/2012/box-sizing-border-box-ftw/\n\n```js\nimport { CssReset } from '@dhis2/ui'\n```\n";
+- https://github.com/necolas/normalize.css
+- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
 
+\`\`\`js
+import { CssReset } from '@dhis2/ui'
+\`\`\`
+`;
 const App = _ref => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", null, children);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'CSS Reset',
   component: _index.CssReset,
   parameters: {
@@ -31,8 +34,5 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Default = args => /*#__PURE__*/_react.default.createElement(App, null, /*#__PURE__*/_react.default.createElement(_index.CssReset, args), /*#__PURE__*/_react.default.createElement("p", null, "The ", /*#__PURE__*/_react.default.createElement("code", null, "CssReset"), " component injects a global normalization stylesheet into the DOM that sets the DHIS2 application defaults."), /*#__PURE__*/_react.default.createElement("p", null, "This also sets the ", /*#__PURE__*/_react.default.createElement("code", null, "font-family"), " on the ", /*#__PURE__*/_react.default.createElement("code", null, "body"), ' ', "element to the DHIS2 font, which allows it to trickle down to the components as well."), /*#__PURE__*/_react.default.createElement("p", null, "Just include the component in your application, preferably as early as possible to avoid FOUC.", ' '));
-
 exports.Default = Default;

package/build/cjs/css-reset/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "CssReset", {
     return _cssReset.CssReset;
   }
 });
-
 var _cssReset = require("./css-reset.js");

package/build/cjs/css-variables/css-variables.e2e.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithTheme = exports.WithSpacers = exports.WithLayers = exports.WithElevations = exports.WithColors = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'CssVariables'
+};
+const WithColors = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.CssVariables, {
+  colors: true
+}), /*#__PURE__*/_react.default.createElement("div", {
+  id: "custom",
+  style: {
+    backgroundColor: 'var(--colors-blue900)'
+  }
+}));
+exports.WithColors = WithColors;
+const WithTheme = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.CssVariables, {
+  theme: true
+}), /*#__PURE__*/_react.default.createElement("div", {
+  id: "custom",
+  style: {
+    backgroundColor: 'var(--theme-primary900)'
+  }
+}));
+exports.WithTheme = WithTheme;
+const WithLayers = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.CssVariables, {
+  layers: true
+}), /*#__PURE__*/_react.default.createElement("div", {
+  id: "custom",
+  style: {
+    zIndex: 'var(--layers-alert)',
+    position: 'absolute'
+  }
+}));
+exports.WithLayers = WithLayers;
+const WithSpacers = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.CssVariables, {
+  spacers: true
+}), /*#__PURE__*/_react.default.createElement("div", {
+  id: "custom",
+  style: {
+    margin: 'var(--spacers-dp4)'
+  }
+}));
+exports.WithSpacers = WithSpacers;
+const WithElevations = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.CssVariables, {
+  elevations: true
+}), /*#__PURE__*/_react.default.createElement("div", {
+  id: "custom",
+  style: {
+    boxShadow: 'var(--elevations-e100)'
+  }
+}));
+exports.WithElevations = WithElevations;

package/build/cjs/css-variables/css-variables.js

@@ -4,32 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CssVariables = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var theme = _interopRequireWildcard(require("@dhis2/ui-constants"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const toPrefixedThemeSection = themeSectionKey => Object.entries(theme[themeSectionKey]).reduce((prefixed, _ref) => {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const toPrefixedThemeSection = themeSectionKey =>
+// eslint-disable-next-line import/namespace
+Object.entries(theme[themeSectionKey]).reduce((prefixed, _ref) => {
   let [key, value] = _ref;
-  prefixed["".concat(themeSectionKey, "-").concat(key)] = value;
+  prefixed[`${themeSectionKey}-${key}`] = value;
   return prefixed;
 }, {});
-
 const toCustomPropertyString = themeSection => Object.entries(themeSection).map(_ref2 => {
   let [key, value] = _ref2;
-  return "--".concat(key, ": ").concat(value, ";");
+  return `--${key}: ${value};`;
 }).join('\n');
-
 const CssVariables = _ref3 => {
   let {
     colors,
@@ -45,17 +37,20 @@ const CssVariables = _ref3 => {
     spacers,
     elevations
   };
-  const variables = Object.keys(allowedProps) // Filter all props that are false
-  .filter(prop => allowedProps[prop]) // Map props to corresponding theme section and prefixes keys with section name
-  .map(toPrefixedThemeSection) // Map each section to a single string of css custom property declarations
-  .map(toCustomPropertyString) // Join all the sections to a single string
+  const variables = Object.keys(allowedProps)
+  // Filter all props that are false
+  .filter(prop => allowedProps[prop])
+  // Map props to corresponding theme section and prefixes keys with section name
+  .map(toPrefixedThemeSection)
+  // Map each section to a single string of css custom property declarations
+  .map(toCustomPropertyString)
+  // Join all the sections to a single string
   .join('\n');
   return /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3443925957",
     dynamic: [variables]
-  }, ["html{".concat(variables, ";}")]);
+  }, [`html{${variables};}`]);
 };
-
 exports.CssVariables = CssVariables;
 CssVariables.defaultProps = {
   colors: false,

package/build/cjs/css-variables/{css-variables.stories.js → css-variables.prod.stories.js}

@@ -4,23 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.NoVariables = exports.AllVariables = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const description = "\nA utility for adding DHIS2 theme variables to global CSS variables.\n\n```js\nimport { CssVariables } from '@dhis2/ui'\n```\n";
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+A utility for adding DHIS2 theme variables to global CSS variables.
+
+\`\`\`js
+import { CssVariables } from '@dhis2/ui'
+\`\`\`
+`;
 const App = _ref => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", null, children);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'CSS Variables',
   component: _index.CssVariables,
   parameters: {
@@ -31,8 +31,6 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const AllVariables = args => /*#__PURE__*/_react.default.createElement(App, null, /*#__PURE__*/_react.default.createElement(_index.CssVariables, args), /*#__PURE__*/_react.default.createElement("p", null, "The sections of the theme that should be inserted can be toggled with flags, which allows the theme variables to be used as regular CSS custom properties. So this", ' ', /*#__PURE__*/_react.default.createElement("span", {
   style: {
     color: 'var(--colors-red500)'
@@ -42,7 +40,6 @@ const AllVariables = args => /*#__PURE__*/_react.default.createElement(App, null
     color: 'var(--colors-blue500)'
   }
 }, "custom properties"), ' ', "set by the CssVariables component."));
-
 exports.AllVariables = AllVariables;
 AllVariables.args = {
   colors: true,
@@ -51,7 +48,5 @@ AllVariables.args = {
   spacers: true,
   elevations: true
 };
-
 const NoVariables = args => /*#__PURE__*/_react.default.createElement(App, null, /*#__PURE__*/_react.default.createElement(_index.CssVariables, args), /*#__PURE__*/_react.default.createElement("p", null, "By default no custom properties are inserted."));
-
 exports.NoVariables = NoVariables;

package/build/cjs/css-variables/features/sets_variables/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a CssVariables component with colors flag is rendered', () => {
   cy.visitStory('CssVariables', 'With colors');
 });

package/build/cjs/css-variables/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "CssVariables", {
     return _cssVariables.CssVariables;
   }
 });
-
 var _cssVariables = require("./css-variables.js");

package/build/cjs/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "CssVariables", {
     return _index2.CssVariables;
   }
 });
-
 var _index = require("./css-reset/index.js");
-
 var _index2 = require("./css-variables/index.js");

package/build/es/css-reset/css-reset.js

@@ -1,10 +1,8 @@
 import _JSXStyle from "styled-jsx/style";
 import { theme } from '@dhis2/ui-constants';
 import React from 'react';
-
 const CssReset = () => /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "3745978156",
   dynamic: [theme.fonts, theme.fonts]
-}, ["html{line-height:1.15;-webkit-text-size-adjust:100%;box-sizing:border-box;}", "*,*:before,*:after{font-family:".concat(theme.fonts, ";box-sizing:inherit;}"), "body{margin:0;font-family:".concat(theme.fonts, ";}"), "main{display:block;}", "h1{font-size:2em;margin:0.67em 0;}", "hr{box-sizing:content-box;height:0;overflow:visible;}", "pre{font-family:monospace,monospace;font-size:1em;}", "a{background-color:transparent;}", "abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}", "b,strong{font-weight:bolder;}", "code,kbd,samp{font-family:monospace,monospace;font-size:1em;}", "small{font-size:80%;}", "sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}", "sub{bottom:-0.25em;}", "sup{top:-0.5em;}", "img{border-style:none;}", "button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}", "button,input{overflow:visible;}", "button,select{text-transform:none;}", "button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;}", "button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner{border-style:none;padding:0;}", "button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText;}", "fieldset{padding:0.35em 0.75em 0.625em;}", "legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}", "progress{vertical-align:baseline;}", "textarea{overflow:auto;}", "[type='checkbox'],[type='radio']{box-sizing:border-box;padding:0;}", "[type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button{height:auto;}", "[type='search']{-webkit-appearance:textfield;outline-offset:-2px;}", "[type='search']::-webkit-search-decoration{-webkit-appearance:none;}", "::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}", "details{display:block;}", "summary{display:list-item;}", "template{display:none;}", "[hidden]{display:none;}"]);
-
+}, ["html{line-height:1.15;-webkit-text-size-adjust:100%;box-sizing:border-box;}", `*,*:before,*:after{font-family:${theme.fonts};box-sizing:inherit;}`, `body{margin:0;font-family:${theme.fonts};}`, "main{display:block;}", "h1{font-size:2em;margin:0.67em 0;}", "hr{box-sizing:content-box;height:0;overflow:visible;}", "pre{font-family:monospace,monospace;font-size:1em;}", "a{background-color:transparent;}", "abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}", "b,strong{font-weight:bolder;}", "code,kbd,samp{font-family:monospace,monospace;font-size:1em;}", "small{font-size:80%;}", "sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}", "sub{bottom:-0.25em;}", "sup{top:-0.5em;}", "img{border-style:none;}", "button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}", "button,input{overflow:visible;}", "button,select{text-transform:none;}", "button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;}", "button::-moz-focus-inner,[type='button']::-moz-focus-inner,[type='reset']::-moz-focus-inner,[type='submit']::-moz-focus-inner{border-style:none;padding:0;}", "button:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText;}", "fieldset{padding:0.35em 0.75em 0.625em;}", "legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}", "progress{vertical-align:baseline;}", "textarea{overflow:auto;}", "[type='checkbox'],[type='radio']{box-sizing:border-box;padding:0;}", "[type='number']::-webkit-inner-spin-button,[type='number']::-webkit-outer-spin-button{height:auto;}", "[type='search']{-webkit-appearance:textfield;outline-offset:-2px;}", "[type='search']::-webkit-search-decoration{-webkit-appearance:none;}", "::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}", "details{display:block;}", "summary{display:list-item;}", "template{display:none;}", "[hidden]{display:none;}"]);
 export { CssReset };

package/build/es/css-reset/{css-reset.stories.js → css-reset.prod.stories.js}

@@ -1,14 +1,21 @@
 import React from 'react';
 import { CssReset } from './index.js';
-const description = "\nA tool for adding a global normalization stylesheet into the DOM that applies DHIS2 styles.\n\n- https://github.com/necolas/normalize.css\n- https://www.paulirish.com/2012/box-sizing-border-box-ftw/\n\n```js\nimport { CssReset } from '@dhis2/ui'\n```\n";
+const description = `
+A tool for adding a global normalization stylesheet into the DOM that applies DHIS2 styles.
 
+- https://github.com/necolas/normalize.css
+- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
+
+\`\`\`js
+import { CssReset } from '@dhis2/ui'
+\`\`\`
+`;
 const App = _ref => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/React.createElement("div", null, children);
 };
-
 export default {
   title: 'CSS Reset',
   component: CssReset,

package/build/es/css-variables/{css-variables.stories.e2e.js → css-variables.e2e.stories.js}

@@ -1,21 +1,25 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { CssVariables } from './index.js';
-storiesOf('CssVariables', module).add('With colors', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
+export default {
+  title: 'CssVariables'
+};
+export const WithColors = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
   colors: true
 }), /*#__PURE__*/React.createElement("div", {
   id: "custom",
   style: {
     backgroundColor: 'var(--colors-blue900)'
   }
-}))).add('With theme', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
+}));
+export const WithTheme = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
   theme: true
 }), /*#__PURE__*/React.createElement("div", {
   id: "custom",
   style: {
     backgroundColor: 'var(--theme-primary900)'
   }
-}))).add('With layers', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
+}));
+export const WithLayers = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
   layers: true
 }), /*#__PURE__*/React.createElement("div", {
   id: "custom",
@@ -23,18 +27,20 @@ storiesOf('CssVariables', module).add('With colors', () => /*#__PURE__*/React.cr
     zIndex: 'var(--layers-alert)',
     position: 'absolute'
   }
-}))).add('With spacers', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
+}));
+export const WithSpacers = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
   spacers: true
 }), /*#__PURE__*/React.createElement("div", {
   id: "custom",
   style: {
     margin: 'var(--spacers-dp4)'
   }
-}))).add('With elevations', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
+}));
+export const WithElevations = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
   elevations: true
 }), /*#__PURE__*/React.createElement("div", {
   id: "custom",
   style: {
     boxShadow: 'var(--elevations-e100)'
   }
-})));
+}));

package/build/es/css-variables/css-variables.js

@@ -2,18 +2,17 @@ import _JSXStyle from "styled-jsx/style";
 import * as theme from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-const toPrefixedThemeSection = themeSectionKey => Object.entries(theme[themeSectionKey]).reduce((prefixed, _ref) => {
+const toPrefixedThemeSection = themeSectionKey =>
+// eslint-disable-next-line import/namespace
+Object.entries(theme[themeSectionKey]).reduce((prefixed, _ref) => {
   let [key, value] = _ref;
-  prefixed["".concat(themeSectionKey, "-").concat(key)] = value;
+  prefixed[`${themeSectionKey}-${key}`] = value;
   return prefixed;
 }, {});
-
 const toCustomPropertyString = themeSection => Object.entries(themeSection).map(_ref2 => {
   let [key, value] = _ref2;
-  return "--".concat(key, ": ").concat(value, ";");
+  return `--${key}: ${value};`;
 }).join('\n');
-
 const CssVariables = _ref3 => {
   let {
     colors,
@@ -29,17 +28,20 @@ const CssVariables = _ref3 => {
     spacers,
     elevations
   };
-  const variables = Object.keys(allowedProps) // Filter all props that are false
-  .filter(prop => allowedProps[prop]) // Map props to corresponding theme section and prefixes keys with section name
-  .map(toPrefixedThemeSection) // Map each section to a single string of css custom property declarations
-  .map(toCustomPropertyString) // Join all the sections to a single string
+  const variables = Object.keys(allowedProps)
+  // Filter all props that are false
+  .filter(prop => allowedProps[prop])
+  // Map props to corresponding theme section and prefixes keys with section name
+  .map(toPrefixedThemeSection)
+  // Map each section to a single string of css custom property declarations
+  .map(toCustomPropertyString)
+  // Join all the sections to a single string
   .join('\n');
   return /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3443925957",
     dynamic: [variables]
-  }, ["html{".concat(variables, ";}")]);
+  }, [`html{${variables};}`]);
 };
-
 CssVariables.defaultProps = {
   colors: false,
   theme: false,

package/build/es/css-variables/{css-variables.stories.js → css-variables.prod.stories.js}

@@ -1,14 +1,18 @@
 import React from 'react';
 import { CssVariables } from './index.js';
-const description = "\nA utility for adding DHIS2 theme variables to global CSS variables.\n\n```js\nimport { CssVariables } from '@dhis2/ui'\n```\n";
+const description = `
+A utility for adding DHIS2 theme variables to global CSS variables.
 
+\`\`\`js
+import { CssVariables } from '@dhis2/ui'
+\`\`\`
+`;
 const App = _ref => {
   let {
     children
   } = _ref;
   return /*#__PURE__*/React.createElement("div", null, children);
 };
-
 export default {
   title: 'CSS Variables',
   component: CssVariables,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/css",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.1",
     "description": "UI CSS",
     "repository": {
         "type": "git",
@@ -22,18 +22,18 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.11.0",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/css-variables/css-variables.stories.e2e.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('CssVariables', module).add('With colors', () => /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_index.CssVariables, {
-  colors: true
-}), /*#__PURE__*/_react2.default.createElement("div", {
-  id: "custom",
-  style: {
-    backgroundColor: 'var(--colors-blue900)'
-  }
-}))).add('With theme', () => /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_index.CssVariables, {
-  theme: true
-}), /*#__PURE__*/_react2.default.createElement("div", {
-  id: "custom",
-  style: {
-    backgroundColor: 'var(--theme-primary900)'
-  }
-}))).add('With layers', () => /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_index.CssVariables, {
-  layers: true
-}), /*#__PURE__*/_react2.default.createElement("div", {
-  id: "custom",
-  style: {
-    zIndex: 'var(--layers-alert)',
-    position: 'absolute'
-  }
-}))).add('With spacers', () => /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_index.CssVariables, {
-  spacers: true
-}), /*#__PURE__*/_react2.default.createElement("div", {
-  id: "custom",
-  style: {
-    margin: 'var(--spacers-dp4)'
-  }
-}))).add('With elevations', () => /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_index.CssVariables, {
-  elevations: true
-}), /*#__PURE__*/_react2.default.createElement("div", {
-  id: "custom",
-  style: {
-    boxShadow: 'var(--elevations-e100)'
-  }
-})));