@bundle-stats/ui 3.2.0-beta.1 → 3.2.1-beta.3

package/lib-esm/ui/skeleton/skeleton.js

@@ -1,18 +1,15 @@
-var _excluded = ["className"];
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './skeleton.module.css';
-export var Skeleton = function Skeleton(props) {
-  var className = props.className,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var rootClassName = cx(css.root, className);
+export const Skeleton = props => {
+  const {
+    className,
+    ...restProps
+  } = props;
+  const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement("span", _extends({
     className: rootClassName
   }, restProps));

package/lib-esm/ui/skeleton/skeleton.stories.js

@@ -2,8 +2,6 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Skeleton } from '.';
-var stories = storiesOf('UI/Skeleton', module);
+const stories = storiesOf('UI/Skeleton', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Skeleton, null);
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Skeleton, null));

package/lib-esm/ui/sort-dropdown/sort-dropdown.js

@@ -1,5 +1,3 @@
-var _PropTypes$shape;
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
@@ -8,55 +6,55 @@ import cx from 'classnames';
 import { Dropdown } from '../dropdown';
 import { Icon } from '../icon';
 import css from './sort-dropdown.module.css';
-export var SortDropdown = function SortDropdown(props) {
-  var className = props.className,
-      label = props.label,
-      items = props.items,
-      sortBy = props.sortBy,
-      direction = props.direction,
-      onChange = props.onChange;
-  var rootClassName = cx(css.root, className);
-  var customLabel = items[sortBy] ? "Ordered by " + items[sortBy].label : label;
+export const SortDropdown = props => {
+  const {
+    className,
+    label,
+    fields,
+    field,
+    direction,
+    onChange
+  } = props;
+  const rootClassName = cx(css.root, className);
+  const customLabel = fields[field] ? `Ordered by ${fields[field].label}` : label;
   return /*#__PURE__*/React.createElement(Dropdown, {
     className: rootClassName,
     label: customLabel,
     glyph: "sort",
     align: "right"
-  }, function (_ref) {
-    var MenuItem = _ref.MenuItem,
-        menu = _ref.menu,
-        menuItemClassName = _ref.menuItemClassName,
-        menuItemActiveClassName = _ref.menuItemActiveClassName;
+  }, _ref => {
+    let {
+      MenuItem,
+      menu,
+      menuItemClassName,
+      menuItemActiveClassName
+    } = _ref;
 
-    var getButtonOnClick = function getButtonOnClick(newSortBy, newDirection) {
-      return function () {
-        onChange({
-          sortBy: newSortBy,
-          direction: newDirection
-        });
-        menu.toggle();
-      };
+    const getButtonOnClick = (newField, newDirection) => () => {
+      onChange({
+        field: newField,
+        direction: newDirection
+      });
+      menu.toggle();
     };
 
     return /*#__PURE__*/React.createElement("div", {
       className: css.items
-    }, Object.entries(items).map(function (_ref2) {
-      var key = _ref2[0],
-          item = _ref2[1];
-      var buttonProps = direction === 'asc' ? {
-        className: cx(css.itemButton, css.itemAsc),
+    }, Object.entries(fields).map(_ref2 => {
+      let [key, item] = _ref2;
+      const buttonProps = direction === 'asc' ? {
+        className: css.itemAsc,
         onClick: getButtonOnClick(key, 'desc'),
-        title: "Order data by " + item.label + " descending"
+        title: `Order data by ${item.label} descending`
       } : {
-        className: css.itemButton,
         onClick: getButtonOnClick(key, 'asc'),
-        title: "Order data by " + item.label + " ascending"
+        title: `Order data by ${item.label} ascending`
       };
-      var isActive = sortBy === key;
+      const isActive = field === key;
       return /*#__PURE__*/React.createElement(MenuItem, _extends({
         key: key
       }, menu, buttonProps, {
-        className: cx(menuItemClassName, css.item, isActive && menuItemActiveClassName, isActive && css.active)
+        className: cx(buttonProps.className, menuItemClassName, css.item, isActive && menuItemActiveClassName, isActive && css.active)
       }), /*#__PURE__*/React.createElement("span", {
         className: css.itemLabel
       }, item.label), /*#__PURE__*/React.createElement(Icon, {
@@ -69,15 +67,17 @@ export var SortDropdown = function SortDropdown(props) {
 SortDropdown.defaultProps = {
   className: '',
   label: 'Order by',
-  onChange: function onChange() {},
-  sortBy: '',
+  onChange: () => {},
+  field: '',
   direction: 'asc'
 };
 SortDropdown.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
-  items: PropTypes.shape((_PropTypes$shape = {}, _PropTypes$shape[PropTypes.string] = PropTypes.string, _PropTypes$shape)).isRequired,
+  fields: PropTypes.shape({
+    [PropTypes.string]: PropTypes.string
+  }).isRequired,
   onChange: PropTypes.func,
-  sortBy: PropTypes.string,
+  field: PropTypes.string,
   direction: PropTypes.string
 };

package/lib-esm/ui/sort-dropdown/sort-dropdown.stories.js

@@ -2,23 +2,21 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { SortDropdown } from '.';
-var stories = storiesOf('UI/SortDropdown', module);
+const stories = storiesOf('UI/SortDropdown', module);
 stories.addDecorator(getWrapperDecorator({
   paddingLeft: '200px'
 }));
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(SortDropdown, {
-    onChange: function onChange(state) {
-      console.log(state); // eslint-disable-line no-console
+stories.add('default', () => /*#__PURE__*/React.createElement(SortDropdown, {
+  onChange: state => {
+    console.log(state); // eslint-disable-line no-console
+  },
+  fields: {
+    filename: {
+      label: 'Filename'
     },
-    items: {
-      filename: {
-        label: 'Filename'
-      },
-      size: {
-        label: 'Size'
-      }
-    },
-    sortBy: "size"
-  });
-});
+    size: {
+      label: 'Size'
+    }
+  },
+  field: "size"
+}));

package/lib-esm/ui/table/table.js

@@ -1,28 +1,19 @@
-var _excluded = ["className"],
-    _excluded2 = ["className"],
-    _excluded3 = ["className"];
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './table.module.css';
 
-var THead = function THead(props) {
-  return /*#__PURE__*/React.createElement("thead", props);
-};
+const THead = props => /*#__PURE__*/React.createElement("thead", props);
 
-var TBody = function TBody(props) {
-  return /*#__PURE__*/React.createElement("tbody", props);
-};
-
-var Tr = function Tr(props) {
-  var className = props.className,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
+const TBody = props => /*#__PURE__*/React.createElement("tbody", props);
 
+const Tr = props => {
+  const {
+    className,
+    ...restProps
+  } = props;
   return /*#__PURE__*/React.createElement("tr", _extends({
     className: cx(css.row, className)
   }, restProps));
@@ -36,10 +27,11 @@ Tr.propTypes = {
   className: PropTypes.string
 };
 
-var Th = function Th(props) {
-  var className = props.className,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded2);
-
+const Th = props => {
+  const {
+    className,
+    ...restProps
+  } = props;
   return /*#__PURE__*/React.createElement("th", _extends({
     className: cx(css.cell, className)
   }, restProps));
@@ -53,10 +45,11 @@ Th.propTypes = {
   className: PropTypes.string
 };
 
-var Td = function Td(props) {
-  var className = props.className,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded3);
-
+const Td = props => {
+  const {
+    className,
+    ...restProps
+  } = props;
   return /*#__PURE__*/React.createElement("td", _extends({
     className: cx(css.cell, className)
   }, restProps));
@@ -69,13 +62,15 @@ Td.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string
 };
-export var Table = function Table(_ref) {
-  var className = _ref.className,
-      emptyMessage = _ref.emptyMessage,
-      compact = _ref.compact,
-      outline = _ref.outline,
-      children = _ref.children;
-  var rootClassName = cx(css.root, className, compact && css.compact, outline && css.outline);
+export const Table = _ref => {
+  let {
+    className,
+    emptyMessage,
+    compact,
+    outline,
+    children
+  } = _ref;
+  const rootClassName = cx(css.root, className, compact && css.compact, outline && css.outline);
 
   if (!children) {
     return /*#__PURE__*/React.createElement("div", {

package/lib-esm/ui/table/table.stories.js

@@ -2,108 +2,90 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Table } from '.';
-var THead = Table.THead,
-    TBody = Table.TBody,
-    Td = Table.Td,
-    Tr = Table.Tr,
-    Th = Table.Th;
-var stories = storiesOf('UI/Table', module);
+const {
+  THead,
+  TBody,
+  Td,
+  Tr,
+  Th
+} = Table;
+const stories = storiesOf('UI/Table', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3"))));
-});
-stories.add('compact', function () {
-  return /*#__PURE__*/React.createElement(Table, {
-    compact: true
-  }, /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3"))));
-});
-stories.add('outline', function () {
-  return /*#__PURE__*/React.createElement(Table, {
-    outline: true
-  }, /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3"))));
-});
-stories.add('empty', function () {
-  return /*#__PURE__*/React.createElement(Table, null);
-});
-stories.add('empty with custom element', function () {
-  return /*#__PURE__*/React.createElement(Table, {
-    emptyMessage: /*#__PURE__*/React.createElement("p", {
-      style: {
-        outline: '1px solid lightgray'
-      }
-    }, "No items available")
-  });
-});
-stories.add('with headers', function () {
-  return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(THead, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "Col A"), /*#__PURE__*/React.createElement(Th, null, "Col B"), /*#__PURE__*/React.createElement(Th, null, "Col C"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3"))));
-});
-stories.add('with headers and outline', function () {
-  return /*#__PURE__*/React.createElement(Table, {
-    outline: true
-  }, /*#__PURE__*/React.createElement(THead, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "Col A"), /*#__PURE__*/React.createElement(Th, null, "Col B"), /*#__PURE__*/React.createElement(Th, null, "Col C"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3"))));
-});
-stories.add('with multiple rows header', function () {
-  return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(THead, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, " "), /*#__PURE__*/React.createElement(Th, {
-    colSpan: 2
-  }, "Colspan")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "Col A"), /*#__PURE__*/React.createElement(Th, null, "Col B"), /*#__PURE__*/React.createElement(Th, null, "Col C"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3"))));
-});
-stories.add('with row headers', function () {
-  return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "row 1"), /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "row 2"), /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "row 3"), /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3"))));
-});
-stories.add('with custom content and attributes', function () {
-  return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(THead, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, " "), /*#__PURE__*/React.createElement(Th, {
+stories.add('default', () => /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3")))));
+stories.add('compact', () => /*#__PURE__*/React.createElement(Table, {
+  compact: true
+}, /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3")))));
+stories.add('outline', () => /*#__PURE__*/React.createElement(Table, {
+  outline: true
+}, /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3")))));
+stories.add('empty', () => /*#__PURE__*/React.createElement(Table, null));
+stories.add('empty with custom element', () => /*#__PURE__*/React.createElement(Table, {
+  emptyMessage: /*#__PURE__*/React.createElement("p", {
     style: {
-      textAlign: 'right'
+      outline: '1px solid lightgray'
     }
-  }, "Col A (right)"), /*#__PURE__*/React.createElement(Th, {
-    style: {
-      textAlign: 'center'
-    }
-  }, "Col B (center)"), /*#__PURE__*/React.createElement(Th, {
-    style: {
-      textDecoration: 'underline'
-    }
-  }, "Col C(undefiner)"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, /*#__PURE__*/React.createElement("strong", null, "row 1")), /*#__PURE__*/React.createElement(Td, {
-    style: {
-      textAlign: 'right'
-    }
-  }, "a1"), /*#__PURE__*/React.createElement(Td, {
-    style: {
-      textAlign: 'center',
-      color: 'red'
-    }
-  }, "b1"), /*#__PURE__*/React.createElement(Td, {
-    style: {
-      textDecoration: 'underline'
-    }
-  }, "c1")), /*#__PURE__*/React.createElement(Tr, {
-    style: {
-      color: 'blue',
-      fontSize: '1.5em'
-    }
-  }, /*#__PURE__*/React.createElement(Th, null, /*#__PURE__*/React.createElement("strong", null, "row 2")), /*#__PURE__*/React.createElement(Td, {
-    style: {
-      textAlign: 'right'
-    }
-  }, "a2"), /*#__PURE__*/React.createElement(Td, {
-    style: {
-      textAlign: 'center'
-    }
-  }, "b2"), /*#__PURE__*/React.createElement(Td, {
-    style: {
-      textDecoration: 'underline'
-    }
-  }, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, /*#__PURE__*/React.createElement("strong", null, "row 3")), /*#__PURE__*/React.createElement(Td, {
-    style: {
-      textAlign: 'right'
-    }
-  }, "a3"), /*#__PURE__*/React.createElement(Td, {
-    style: {
-      textAlign: 'center'
-    }
-  }, "b3"), /*#__PURE__*/React.createElement(Td, {
-    style: {
-      textDecoration: 'underline'
-    }
-  }, "c3"))));
-});
+  }, "No items available")
+}));
+stories.add('with headers', () => /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(THead, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "Col A"), /*#__PURE__*/React.createElement(Th, null, "Col B"), /*#__PURE__*/React.createElement(Th, null, "Col C"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3")))));
+stories.add('with headers and outline', () => /*#__PURE__*/React.createElement(Table, {
+  outline: true
+}, /*#__PURE__*/React.createElement(THead, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "Col A"), /*#__PURE__*/React.createElement(Th, null, "Col B"), /*#__PURE__*/React.createElement(Th, null, "Col C"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3")))));
+stories.add('with multiple rows header', () => /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(THead, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, " "), /*#__PURE__*/React.createElement(Th, {
+  colSpan: 2
+}, "Colspan")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "Col A"), /*#__PURE__*/React.createElement(Th, null, "Col B"), /*#__PURE__*/React.createElement(Th, null, "Col C"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3")))));
+stories.add('with row headers', () => /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "row 1"), /*#__PURE__*/React.createElement(Td, null, "a1"), /*#__PURE__*/React.createElement(Td, null, "b1"), /*#__PURE__*/React.createElement(Td, null, "c1")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "row 2"), /*#__PURE__*/React.createElement(Td, null, "a2"), /*#__PURE__*/React.createElement(Td, null, "b2"), /*#__PURE__*/React.createElement(Td, null, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "row 3"), /*#__PURE__*/React.createElement(Td, null, "a3"), /*#__PURE__*/React.createElement(Td, null, "b3"), /*#__PURE__*/React.createElement(Td, null, "c3")))));
+stories.add('with custom content and attributes', () => /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(THead, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, " "), /*#__PURE__*/React.createElement(Th, {
+  style: {
+    textAlign: 'right'
+  }
+}, "Col A (right)"), /*#__PURE__*/React.createElement(Th, {
+  style: {
+    textAlign: 'center'
+  }
+}, "Col B (center)"), /*#__PURE__*/React.createElement(Th, {
+  style: {
+    textDecoration: 'underline'
+  }
+}, "Col C(undefiner)"))), /*#__PURE__*/React.createElement(TBody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, /*#__PURE__*/React.createElement("strong", null, "row 1")), /*#__PURE__*/React.createElement(Td, {
+  style: {
+    textAlign: 'right'
+  }
+}, "a1"), /*#__PURE__*/React.createElement(Td, {
+  style: {
+    textAlign: 'center',
+    color: 'red'
+  }
+}, "b1"), /*#__PURE__*/React.createElement(Td, {
+  style: {
+    textDecoration: 'underline'
+  }
+}, "c1")), /*#__PURE__*/React.createElement(Tr, {
+  style: {
+    color: 'blue',
+    fontSize: '1.5em'
+  }
+}, /*#__PURE__*/React.createElement(Th, null, /*#__PURE__*/React.createElement("strong", null, "row 2")), /*#__PURE__*/React.createElement(Td, {
+  style: {
+    textAlign: 'right'
+  }
+}, "a2"), /*#__PURE__*/React.createElement(Td, {
+  style: {
+    textAlign: 'center'
+  }
+}, "b2"), /*#__PURE__*/React.createElement(Td, {
+  style: {
+    textDecoration: 'underline'
+  }
+}, "c2")), /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, /*#__PURE__*/React.createElement("strong", null, "row 3")), /*#__PURE__*/React.createElement(Td, {
+  style: {
+    textAlign: 'right'
+  }
+}, "a3"), /*#__PURE__*/React.createElement(Td, {
+  style: {
+    textAlign: 'center'
+  }
+}, "b3"), /*#__PURE__*/React.createElement(Td, {
+  style: {
+    textDecoration: 'underline'
+  }
+}, "c3")))));

package/lib-esm/ui/tabs/tabs.js

@@ -1,32 +1,24 @@
-var _excluded = ["className", "isTabActive"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './tabs.module.css';
 
-var cloneElement = function cloneElement(element) {
-  var _element$props = element.props,
-      className = _element$props.className,
-      isTabActive = _element$props.isTabActive,
-      restProps = _objectWithoutPropertiesLoose(_element$props, _excluded);
-
-  return /*#__PURE__*/React.cloneElement(element, _objectSpread(_objectSpread({}, restProps), {}, {
+const cloneElement = element => {
+  const {
+    className,
+    isTabActive,
+    ...restProps
+  } = element.props;
+  return /*#__PURE__*/React.cloneElement(element, { ...restProps,
     className: cx(css.item, isTabActive && css.itemActive, className)
-  }));
+  });
 };
 
-export var Tabs = function Tabs(_ref) {
-  var className = _ref.className,
-      children = _ref.children;
+export const Tabs = _ref => {
+  let {
+    className,
+    children
+  } = _ref;
   return /*#__PURE__*/React.createElement("nav", {
     className: cx(css.root, className)
   }, React.Children.map(children, cloneElement));

package/lib-esm/ui/tabs/tabs.stories.js

@@ -2,10 +2,8 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Tabs } from '.';
-var stories = storiesOf('UI/Tabs', module);
+const stories = storiesOf('UI/Tabs', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", {
-    isTabActive: true
-  }, "Option A"), /*#__PURE__*/React.createElement("span", null, "Option B"), /*#__PURE__*/React.createElement("span", null, "Option C"));
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement("span", {
+  isTabActive: true
+}, "Option A"), /*#__PURE__*/React.createElement("span", null, "Option B"), /*#__PURE__*/React.createElement("span", null, "Option C")));

package/lib-esm/ui/toolbar/toolbar.js

@@ -2,11 +2,13 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import css from './toolbar.module.css';
-export var Toolbar = function Toolbar(props) {
-  var className = props.className,
-      children = props.children,
-      renderActions = props.renderActions;
-  var rootClassName = cx(css.root, className);
+export const Toolbar = props => {
+  const {
+    className,
+    children,
+    renderActions
+  } = props;
+  const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement("div", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement("div", {

package/lib-esm/ui/toolbar/toolbar.stories.js

@@ -2,20 +2,18 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Toolbar } from '.';
-var stories = storiesOf('UI/Toolbar', module);
+const stories = storiesOf('UI/Toolbar', module);
 stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement("div", null, "Content"));
-});
-stories.add('with actions', function () {
-  return /*#__PURE__*/React.createElement(Toolbar, {
-    renderActions: function renderActions(_ref) {
-      var actionClassName = _ref.actionClassName;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: actionClassName
-      }, "Action 1"), /*#__PURE__*/React.createElement("div", {
-        className: actionClassName
-      }, "Action 2"));
-    }
-  }, "Content");
-});
+stories.add('default', () => /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement("div", null, "Content")));
+stories.add('with actions', () => /*#__PURE__*/React.createElement(Toolbar, {
+  renderActions: _ref => {
+    let {
+      actionClassName
+    } = _ref;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: actionClassName
+    }, "Action 1"), /*#__PURE__*/React.createElement("div", {
+      className: actionClassName
+    }, "Action 2"));
+  }
+}, "Content"));