@bundle-stats/ui 3.3.0-alpha.1 → 3.4.0-alpha.1

package/lib/ui/dropdown/dropdown.module.css

@@ -1,16 +1,14 @@
 .root {
+  display: inline-block;
+}
+
+.button {
   background: none;
   border: none;
   padding: 0;
-}
-
-.root:focus {
-  outline: none;
-  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
-}
 
-.label {
   border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
   display: flex;
   align-items: center;
@@ -24,7 +22,11 @@
   color: var(--color-text-light);
 }
 
-.label:hover {
+.button:hover,
+.button:focus,
+.button:active {
+  outline: none;
+  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
   border-color: var(--color-outline-dark);
   color: var(--color-text);
 }
@@ -33,6 +35,7 @@
   position: absolute;
   left: 0;
   top: 100%;
+  border-radius: var(--radius-medium);
   box-shadow: 0 2px var(--space-xxsmall) var(--color-shadow);
   background: var(--color-background);
   min-width: 180px;
@@ -45,10 +48,6 @@
   box-shadow: 0 2px var(--space-xsmall) var(--color-shadow);
 }
 
-.activeLabel .label {
-  color: var(--color-text);
-}
-
 .menuItem {
   display: block;
   appearance: none;

package/lib/ui/dropdown/dropdown.stories.js

@@ -18,22 +18,15 @@ stories.add('default', function () {
     label: "Toggle"
   }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Option 1"), /*#__PURE__*/_react["default"].createElement("li", null, "Option 2")));
 });
-stories.add('with right alignement', function () {
-  return /*#__PURE__*/_react["default"].createElement(_.Dropdown, {
-    glyph: "filter",
-    label: "Toggle",
-    align: "right"
-  }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Option 1"), /*#__PURE__*/_react["default"].createElement("li", null, "Option 2")));
-});
 stories.add('with render function', function () {
   return /*#__PURE__*/_react["default"].createElement(_.Dropdown, {
     glyph: "filter",
     label: "Toggle"
   }, function (_ref) {
-    var dropdownToggle = _ref.dropdownToggle;
+    var menu = _ref.menu;
     return /*#__PURE__*/_react["default"].createElement("button", {
       type: "button",
-      onClick: dropdownToggle
+      onClick: menu.toggle
     }, "Toggle dropdown");
   });
 });

package/lib/ui/empty-set/empty-set.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _stack = require("../../layout/stack");
+
 var _i18n = _interopRequireDefault(require("../../i18n"));
 
 var _emptySetModule = _interopRequireDefault(require("./empty-set.module.css"));
@@ -42,11 +44,10 @@ var EmptySet = function EmptySet(props) {
     type: "button",
     onClick: handleViewAll
   }, _i18n["default"].VIEW_ALL)] : []));
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+    space: "xxsmall",
     className: _emptySetModule["default"].root
-  }, /*#__PURE__*/_react["default"].createElement("p", {
-    className: _emptySetModule["default"].text
-  }, message), filtered && actions.map(function (action, index) {
+  }, /*#__PURE__*/_react["default"].createElement("p", null, message), filtered && actions.map(function (action, index) {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, index > 0 && ' or ', action);
   }));
 };

package/lib/ui/empty-set/empty-set.module.css

@@ -1,5 +1,5 @@
-.text {
-  margin-bottom: 0;
+.root {
+  color: var(--color-text-light);
 }
 
 .action {

package/lib/ui/filters/filters.container.js

@@ -27,7 +27,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 

package/lib/ui/filters/filters.js

@@ -21,7 +21,7 @@ var _filters = require("./filters.utils");
 
 var _filtersModule = _interopRequireDefault(require("./filters.module.css"));
 
-var _excluded = ["className", "label", "name", "getOnOnlyClick"],
+var _excluded = ["className", "buttonClassName", "label", "name", "getOnOnlyClick"],
     _excluded2 = ["label"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -52,6 +52,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Filter = function Filter(props) {
   var className = props.className,
+      buttonClassName = props.buttonClassName,
       label = props.label,
       name = props.name,
       getOnOnlyClick = props.getOnOnlyClick,
@@ -64,7 +65,7 @@ var Filter = function Filter(props) {
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
     as: "label",
-    className: _filtersModule["default"].filterCheckbox
+    className: (0, _classnames["default"])(_filtersModule["default"].filterCheckbox, buttonClassName)
   }, /*#__PURE__*/_react["default"].createElement("input", _extends({
     className: _filtersModule["default"].filterInput,
     type: "checkbox",
@@ -82,17 +83,21 @@ var Filter = function Filter(props) {
 
 Filter.propTypes = {
   className: _propTypes["default"].string,
+  buttonClassName: _propTypes["default"].string,
   name: _propTypes["default"].string.isRequired,
   label: _propTypes["default"].string.isRequired,
   getOnOnlyClick: _propTypes["default"].func
 };
 Filter.defaultProps = {
   className: '',
+  buttonClassName: '',
   getOnOnlyClick: null
 };
 
 var FilterGroup = function FilterGroup(props) {
-  var groupKey = props.groupKey,
+  var className = props.className,
+      buttonClassName = props.buttonClassName,
+      groupKey = props.groupKey,
       data = props.data,
       values = props.values,
       onCheckboxChange = props.onCheckboxChange,
@@ -138,6 +143,8 @@ var FilterGroup = function FilterGroup(props) {
   };
 
   return /*#__PURE__*/_react["default"].createElement(_dropdown.Dropdown, {
+    className: className,
+    buttonClassName: buttonClassName,
     label: dropdownLabel,
     ariaLabel: "".concat(groupLabel, ": ").concat(filterSuffix)
   }, function (_ref7) {
@@ -188,6 +195,8 @@ var FilterGroup = function FilterGroup(props) {
 };
 
 FilterGroup.propTypes = {
+  className: _propTypes["default"].string,
+  buttonClassName: _propTypes["default"].string,
   groupKey: _propTypes["default"].string.isRequired,
   data: _propTypes["default"].object.isRequired,
   // eslint-disable-line react/forbid-prop-types
@@ -196,6 +205,10 @@ FilterGroup.propTypes = {
   onCheckboxChange: _propTypes["default"].func.isRequired,
   toggleFilters: _propTypes["default"].func.isRequired
 };
+FilterGroup.defaultProps = {
+  className: '',
+  buttonClassName: ''
+};
 
 var Filters = function Filters(props) {
   var className = props.className,
@@ -213,6 +226,7 @@ var Filters = function Filters(props) {
   return /*#__PURE__*/_react["default"].createElement("form", {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall",
     className: _filtersModule["default"].items
   }, Object.entries(filters).map(function (_ref11) {
     var _ref12 = _slicedToArray(_ref11, 2),
@@ -223,6 +237,7 @@ var Filters = function Filters(props) {
       return /*#__PURE__*/_react["default"].createElement(Filter, {
         key: name,
         className: (0, _classnames["default"])(_filtersModule["default"].item, _filtersModule["default"].filterStandalone),
+        buttonClassName: _filtersModule["default"].itemButton,
         name: name,
         label: data.label,
         onChange: onCheckboxChange,
@@ -231,16 +246,16 @@ var Filters = function Filters(props) {
       });
     }
 
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: _filtersModule["default"].item
-    }, /*#__PURE__*/_react["default"].createElement(FilterGroup, {
+    return /*#__PURE__*/_react["default"].createElement(FilterGroup, {
+      className: _filtersModule["default"].item,
+      buttonClassName: _filtersModule["default"].itemButton,
       key: name,
       groupKey: name,
       data: data,
       values: values,
       onCheckboxChange: onCheckboxChange,
       toggleFilters: toggleFilters
-    }));
+    });
   })));
 };
 

package/lib/ui/filters/filters.module.css

@@ -11,6 +11,7 @@
 }
 
 .filterInput {
+  border-radius: var(--radius-small) 0 0 var(--radius-small);
   flex: 0 0 auto;
   height: 1em;
   cursor: pointer;
@@ -131,9 +132,8 @@
 .item {
   position: relative;
   flex: 0 0 auto;
-  margin-right: -1px;
 }
 
-.item:hover {
-  z-index: var(--layer-low); /* show collapsed border */
+.itemButton {
+  border-radius: var(--radius-small);
 }

package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.js

@@ -45,7 +45,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 

package/lib/ui/hover-card/hover-card.js

@@ -0,0 +1,102 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HoverCard = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _hovercard = require("ariakit/hovercard");
+
+var _hoverCardModule = _interopRequireDefault(require("./hover-card.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 _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); }
+
+var resolveComponent = function resolveComponent(as, href) {
+  if (as) {
+    return as;
+  }
+
+  if (href) {
+    return 'a';
+  }
+
+  return 'span';
+};
+
+var HoverCard = function HoverCard(props) {
+  var className = props.className,
+      hoverCardClassName = props.hoverCardClassName,
+      href = props.href,
+      as = props.as,
+      label = props.label,
+      children = props.children;
+  var state = (0, _hovercard.useHovercardState)({
+    gutter: 8
+  });
+  var hoverCardProps = (0, _hovercard.useHovercard)({
+    state: state,
+    portal: true
+  }); // Fallback to span if no href
+
+  var Component = resolveComponent(as, href);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(_hoverCardModule["default"].root, className)
+  }, /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardAnchor, {
+    state: state,
+    href: href,
+    className: _hoverCardModule["default"].anchor,
+    as: Component
+  }, label), /*#__PURE__*/_react["default"].createElement(_hovercard.Hovercard, _extends({}, hoverCardProps, {
+    state: state,
+    className: (0, _classnames["default"])(_hoverCardModule["default"].hoverCard, hoverCardClassName),
+    style: {
+      zIndex: 10000
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardArrow, {
+    size: 24
+  }), typeof children === 'function' ? children({
+    close: state.hide
+  }) : children));
+};
+
+exports.HoverCard = HoverCard;
+HoverCard.propTypes = {
+  /** Adopted child class name */
+  className: _propTypes["default"].string,
+
+  /** Adopted child class name for hover card */
+  hoverCardClassName: _propTypes["default"].string,
+
+  /** Anchor label */
+  label: _propTypes["default"].node,
+
+  /** Anchor href */
+  href: _propTypes["default"].string,
+
+  /** Anchor component */
+  as: _propTypes["default"].elementType,
+
+  /** Hover card component */
+  children: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]).isRequired
+};
+HoverCard.defaultProps = {
+  className: '',
+  hoverCardClassName: '',
+  label: '',
+  as: '',
+  href: ''
+};

package/lib/ui/hover-card/hover-card.module.css

@@ -0,0 +1,29 @@
+.root {
+  display: inline-block;
+}
+
+.anchor {
+  display: inline-block;
+  color: inherit;
+  text-decoration: none;
+}
+
+.anchor:hover {
+  color: var(--color-primary);
+}
+
+.anchor:focus {
+  outline: 0;
+}
+
+.hoverCard {
+  padding: var(--space-xsmall) var(--space-small);
+  border-radius: var(--radius-medium);
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 360px;
+  outline: none;
+  filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
+  will-change: filter;
+  background: var(--color-light);
+  font-size: var(--size-small);
+}

package/lib/ui/hover-card/hover-card.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithRenderFn = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require(".");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+var _default = {
+  title: 'UI/HoverCard',
+  component: _.HoverCard
+};
+exports["default"] = _default;
+
+var Template = function Template(props) {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.HoverCard, _extends({}, props, {
+    style: {
+      zIndex: 2
+    }
+  })), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      position: 'relative',
+      zIndex: 1,
+      maxWidth: 360
+    }
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque ante. Curabitur vehicula, lorem sit amet fringilla dapibus, justo mauris varius elit, ut fermentum leo velit eget risus"));
+};
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(Template, {
+    label: "main.js"
+  }, /*#__PURE__*/_react["default"].createElement("h1", null, "main.js"), /*#__PURE__*/_react["default"].createElement("p", null, "info"));
+};
+
+exports.Default = Default;
+
+var WithRenderFn = function WithRenderFn() {
+  return /*#__PURE__*/_react["default"].createElement(Template, {
+    label: "main.js"
+  }, function (_ref) {
+    var close = _ref.close;
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h1", null, "main.js"), /*#__PURE__*/_react["default"].createElement("p", null, "info"), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "button",
+      onClick: close
+    }, "close"));
+  });
+};
+
+exports.WithRenderFn = WithRenderFn;

package/lib/ui/hover-card/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _hoverCard = require("./hover-card");
+
+Object.keys(_hoverCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hoverCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _hoverCard[key];
+    }
+  });
+});

package/lib/ui/icon/icon.js

@@ -39,12 +39,12 @@ var ICONS = {
   WARNING: 'warning'
 };
 
-var Icon = function Icon(_ref) {
-  var className = _ref.className,
-      glyph = _ref.glyph,
-      Component = _ref.as,
-      size = _ref.size,
-      restProps = _objectWithoutProperties(_ref, _excluded);
+var Icon = function Icon(props) {
+  var className = props.className,
+      glyph = props.glyph,
+      Component = props.as,
+      size = props.size,
+      restProps = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/_react["default"].createElement(Component, _extends({
     className: (0, _classnames["default"])(_iconModule["default"].root, className, _iconModule["default"][size])

package/lib/ui/icon/icon.module.css

@@ -1,5 +1,6 @@
 .root {
   display: inline-block;
+  vertical-align: middle; /** center align when parent display is inline/inline-block **/
 }
 
 .icon {

package/lib/ui/index.js

@@ -75,12 +75,6 @@ Object.defineProperty(exports, "Panels", {
     return _panels.Panels;
   }
 });
-Object.defineProperty(exports, "Popover", {
-  enumerable: true,
-  get: function get() {
-    return _popover.Popover;
-  }
-});
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
   get: function get() {
@@ -105,6 +99,12 @@ Object.defineProperty(exports, "Tabs", {
     return _tabs.Tabs;
   }
 });
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _tag.Tag;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function get() {
@@ -136,8 +136,6 @@ var _logo = require("./logo");
 
 var _panels = require("./panels");
 
-var _popover = require("./popover");
-
 var _skeleton = require("./skeleton");
 
 var _sortDropdown = require("./sort-dropdown");
@@ -146,4 +144,6 @@ var _table = require("./table");
 
 var _tabs = require("./tabs");
 
+var _tag = require("./tag");
+
 var _tooltip = require("./tooltip");

package/lib/ui/table/table.js

@@ -13,77 +13,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _tableModule = _interopRequireDefault(require("./table.module.css"));
 
-var _excluded = ["className"],
-    _excluded2 = ["className"],
-    _excluded3 = ["className"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-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; }
-
-var THead = function THead(props) {
-  return /*#__PURE__*/_react["default"].createElement("thead", props);
-};
-
-var TBody = function TBody(props) {
-  return /*#__PURE__*/_react["default"].createElement("tbody", props);
-};
-
-var Tr = function Tr(props) {
-  var className = props.className,
-      restProps = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/_react["default"].createElement("tr", _extends({
-    className: (0, _classnames["default"])(_tableModule["default"].row, className)
-  }, restProps));
-};
-
-Tr.defaultProps = {
-  className: ''
-};
-Tr.propTypes = {
-  /** Adopted child class name */
-  className: _propTypes["default"].string
-};
-
-var Th = function Th(props) {
-  var className = props.className,
-      restProps = _objectWithoutProperties(props, _excluded2);
-
-  return /*#__PURE__*/_react["default"].createElement("th", _extends({
-    className: (0, _classnames["default"])(_tableModule["default"].cell, className)
-  }, restProps));
-};
-
-Th.defaultProps = {
-  className: ''
-};
-Th.propTypes = {
-  /** Adopted child class name */
-  className: _propTypes["default"].string
-};
-
-var Td = function Td(props) {
-  var className = props.className,
-      restProps = _objectWithoutProperties(props, _excluded3);
-
-  return /*#__PURE__*/_react["default"].createElement("td", _extends({
-    className: (0, _classnames["default"])(_tableModule["default"].cell, className)
-  }, restProps));
-};
-
-Td.defaultProps = {
-  className: ''
-};
-Td.propTypes = {
-  /** Adopted child class name */
-  className: _propTypes["default"].string
-};
-
 var Table = function Table(_ref) {
   var className = _ref.className,
       emptyMessage = _ref.emptyMessage,
@@ -104,11 +35,11 @@ var Table = function Table(_ref) {
 };
 
 exports.Table = Table;
-Table.THead = THead;
-Table.TBody = TBody;
-Table.Th = Th;
-Table.Tr = Tr;
-Table.Td = Td;
+Table.THead = 'thead';
+Table.TBody = 'tbody';
+Table.Tr = 'tr';
+Table.Th = 'th';
+Table.Td = 'td';
 Table.defaultProps = {
   className: '',
   emptyMessage: 'No entries found.',