@canonical/react-components 1.3.0 → 1.3.1

package/dist-esm/components/SideNavigation/SideNavigation.js

@@ -0,0 +1,89 @@
+var _excluded = ["items"],
+  _excluded2 = ["children", "className", "dark", "hasIcons", "items", "linkComponent", "listClassName", "navClassName"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from "react";
+import classNames from "classnames";
+import SideNavigationItem from "./SideNavigationItem";
+import { isReactNode } from "../../utils";
+var generateItem = (item, index, linkComponent, dark) => {
+  if (isReactNode(item)) {
+    return /*#__PURE__*/React.createElement(SideNavigationItem, {
+      key: index
+    }, item);
+  }
+  if ("nonInteractive" in item) {
+    var _item$dark;
+    return /*#__PURE__*/React.createElement(SideNavigationItem, _extends({}, item, {
+      dark: (_item$dark = item.dark) !== null && _item$dark !== void 0 ? _item$dark : dark,
+      key: index
+    }));
+  }
+  if ("children" in item) {
+    return /*#__PURE__*/React.createElement(SideNavigationItem, _extends({
+      key: index
+    }, item));
+  }
+  if ("label" in item) {
+    var _item$component, _item$dark2;
+    return /*#__PURE__*/React.createElement(SideNavigationItem, _extends({
+      component: (_item$component = item.component) !== null && _item$component !== void 0 ? _item$component : linkComponent,
+      dark: (_item$dark2 = item.dark) !== null && _item$dark2 !== void 0 ? _item$dark2 : dark
+    }, item, {
+      key: index
+    }));
+  }
+  return null;
+};
+var generateItems = (groups, listClassName, linkComponent, dark) => {
+  return groups === null || groups === void 0 ? void 0 : groups.filter(Boolean).map((group, g) => {
+    var items;
+    var props = {};
+    if (typeof group === "object" && "items" in group) {
+      var _group = group;
+      ({
+        items
+      } = _group);
+      props = _objectWithoutProperties(_group, _excluded);
+      _group;
+    } else {
+      items = group;
+    }
+    return /*#__PURE__*/React.createElement("ul", _extends({}, props, {
+      className: classNames("p-side-navigation__list", listClassName, "className" in group ? group.className : null),
+      key: g
+    }), items.filter(Boolean).map((item, i) => generateItem(item, i, linkComponent, dark)));
+  });
+};
+var getHasIcons = groups => groups === null || groups === void 0 ? void 0 : groups.some(group => {
+  var _ref;
+  return (_ref = group && "items" in group ? group.items : group) === null || _ref === void 0 ? void 0 : _ref.some(item => isReactNode(item) ? false : item && "icon" in item && !!item.icon);
+});
+
+/**
+ * This is a [React](https://reactjs.org/) component for side navigation, used
+ * in the [Vanilla](https://vanillaframework.io/docs/) layouts.
+ */
+var SideNavigation = _ref2 => {
+  var {
+      children,
+      className,
+      dark,
+      hasIcons,
+      items,
+      linkComponent,
+      listClassName,
+      navClassName
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(className, {
+      "p-side-navigation--icons": hasIcons || getHasIcons(items),
+      "is-dark": dark
+    })
+  }, props), /*#__PURE__*/React.createElement("nav", {
+    className: navClassName
+  }, children !== null && children !== void 0 ? children : generateItems(items, listClassName, linkComponent, dark)));
+};
+export default SideNavigation;

package/dist-esm/components/SideNavigation/SideNavigationBase/SideNavigationBase.js

@@ -0,0 +1,31 @@
+var _excluded = ["component", "dark", "icon", "label", "status", "forwardRef"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import Icon from "../../Icon";
+var SideNavigationBase = _ref => {
+  var {
+      component: Component,
+      dark,
+      icon,
+      label,
+      status,
+      forwardRef
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: forwardRef
+  }, props), icon ? /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    light: dark,
+    className: "p-side-navigation__icon"
+  }) : null, /*#__PURE__*/React.createElement("span", {
+    className: "p-side-navigation__label"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "p-side-navigation__label"
+  }, label)), status ? /*#__PURE__*/React.createElement("div", {
+    className: "p-side-navigation__status"
+  }, status) : null);
+};
+export default SideNavigationBase;

package/dist-esm/components/SideNavigation/SideNavigationBase/index.js

@@ -0,0 +1 @@
+export { default } from "./SideNavigationBase";

package/dist-esm/components/SideNavigation/SideNavigationItem/SideNavigationItem.js

@@ -0,0 +1,32 @@
+var _excluded = ["nonInteractive"],
+  _excluded2 = ["children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import SideNavigationLink from "../SideNavigationLink";
+import SideNavigationText from "../SideNavigationText";
+var SideNavigationItem = props => {
+  var content;
+  var liProps = {};
+  if ("nonInteractive" in props) {
+    var {
+        nonInteractive: _
+      } = props,
+      textProps = _objectWithoutProperties(props, _excluded);
+    content = /*#__PURE__*/React.createElement(SideNavigationText, textProps);
+  } else if (!("children" in props)) {
+    content = /*#__PURE__*/React.createElement(SideNavigationLink, props);
+  } else {
+    var _props = props;
+    ({
+      children: content
+    } = _props);
+    liProps = _objectWithoutProperties(_props, _excluded2);
+    _props;
+  }
+  return /*#__PURE__*/React.createElement("li", _extends({
+    className: "p-side-navigation__item"
+  }, liProps), content);
+};
+export default SideNavigationItem;

package/dist-esm/components/SideNavigation/SideNavigationItem/index.js

@@ -0,0 +1 @@
+export { default } from "./SideNavigationItem";

package/dist-esm/components/SideNavigation/SideNavigationLink/SideNavigationLink.js

@@ -0,0 +1,25 @@
+var _excluded = ["component", "forwardRef"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+import SideNavigationBase from "../SideNavigationBase";
+var SideNavigationLink = _ref => {
+  var {
+      component,
+      forwardRef
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var className = null;
+  if ("className" in props && typeof props.className === "string") {
+    className = props.className;
+    delete props.className;
+  }
+  return /*#__PURE__*/React.createElement(SideNavigationBase, _extends({
+    className: classNames("p-side-navigation__link", className),
+    component: component !== null && component !== void 0 ? component : "a",
+    forwardRef: forwardRef
+  }, props));
+};
+export default SideNavigationLink;

package/dist-esm/components/SideNavigation/SideNavigationLink/index.js

@@ -0,0 +1 @@
+export { default } from "./SideNavigationLink";

package/dist-esm/components/SideNavigation/SideNavigationText/SideNavigationText.js

@@ -0,0 +1,20 @@
+var _excluded = ["children", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+import SideNavigationBase from "../SideNavigationBase";
+var SideNavigationText = _ref => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(SideNavigationBase, _extends({
+    className: classNames("p-side-navigation__text", className),
+    component: "span",
+    label: children
+  }, props));
+};
+export default SideNavigationText;

package/dist-esm/components/SideNavigation/SideNavigationText/index.js

@@ -0,0 +1 @@
+export { default } from "./SideNavigationText";

package/dist-esm/components/SideNavigation/index.js

@@ -0,0 +1,4 @@
+export { default } from "./SideNavigation";
+export { default as SideNavigationItem } from "./SideNavigationItem";
+export { default as SideNavigationText } from "./SideNavigationText";
+export { default as SideNavigationLink } from "./SideNavigationLink";

package/dist-esm/components/Slider/Slider.js

@@ -0,0 +1,83 @@
+var _excluded = ["caution", "disabled", "error", "help", "id", "inputDisabled", "label", "max", "min", "onChange", "required", "showInput"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React, { useId } from "react";
+import Field from "../Field";
+export var FILLED_COLOR = "#0066CC";
+export var EMPTY_COLOR = "#D9D9D9";
+/**
+ * This is the [React](https://reactjs.org/) component for the Vanilla [Slider](https://vanillaframework.io/docs/patterns/slider).
+ *
+ * Sliders should be used to let a user specify a numeric value between a defined
+minimum and maximum value, however the precise value is not especially important.
+ */
+export var Slider = _ref => {
+  var _navigator;
+  var {
+      caution,
+      disabled = false,
+      error,
+      help,
+      id,
+      inputDisabled = false,
+      label,
+      max,
+      min,
+      onChange,
+      required = false,
+      showInput = false
+    } = _ref,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var validationId = useId();
+  var helpId = useId();
+  var defaultSliderId = useId();
+  var sliderId = id || defaultSliderId;
+  var hasError = !!error;
+  var style = {};
+  if ((_navigator = navigator) !== null && _navigator !== void 0 && (_navigator = _navigator.userAgent) !== null && _navigator !== void 0 && _navigator.includes("AppleWebKit")) {
+    var _inputProps$value;
+    // Range inputs on Webkit browsers don't have a built-in "filled" portion,
+    // so instead it is handled here as a background.
+    var val = (_inputProps$value = inputProps.value) !== null && _inputProps$value !== void 0 ? _inputProps$value : inputProps.defaultValue;
+    var filledPercentage = "".concat((Number(val) - min) / (max - min) * 100, "%");
+    style = {
+      background: "linear-gradient(\n        to right,\n        ".concat(FILLED_COLOR, " 0%,\n        ").concat(FILLED_COLOR, " ").concat(filledPercentage, ",\n        ").concat(EMPTY_COLOR, " ").concat(filledPercentage, ",\n        ").concat(EMPTY_COLOR, " 100%\n      )")
+    };
+  }
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    error: error,
+    help: help,
+    forId: sliderId,
+    helpId: helpId,
+    label: label,
+    required: required,
+    validationId: validationId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-slider__wrapper"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    disabled: disabled,
+    id: sliderId,
+    max: max,
+    min: min,
+    onChange: onChange,
+    required: required,
+    style: style,
+    type: "range"
+  }, inputProps)), showInput && /*#__PURE__*/React.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    className: "p-slider__input",
+    disabled: disabled || inputDisabled,
+    max: max,
+    min: min,
+    onChange: onChange,
+    type: "number"
+  }, inputProps))));
+};
+export default Slider;

package/dist-esm/components/Slider/index.js

@@ -0,0 +1 @@
+export { default } from "./Slider";

package/dist-esm/components/Spinner/Spinner.js

@@ -0,0 +1,36 @@
+import _pt from "prop-types";
+var _excluded = ["className", "text", "isLight", "ariaLive", "role"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
+ */
+var Spinner = _ref => {
+  var {
+      className,
+      text,
+      isLight = false,
+      ariaLive = "polite",
+      role = "alert"
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: classNames(className, "p-text--default"),
+    role: role,
+    "aria-live": ariaLive
+  }), /*#__PURE__*/React.createElement("i", {
+    className: classNames("p-icon--spinner", "u-animation--spin", {
+      "is-light": isLight
+    })
+  }, text ? "" : "Loading"), text && /*#__PURE__*/React.createElement(React.Fragment, null, "\u2002", /*#__PURE__*/React.createElement("span", null, text)));
+};
+Spinner.propTypes = {
+  isLight: _pt.bool,
+  text: _pt.string,
+  role: _pt.string,
+  ariaLive: _pt.oneOf(["assertive", "off", "polite"])
+};
+export default Spinner;

package/dist-esm/components/Spinner/index.js

@@ -0,0 +1 @@
+export { default } from "./Spinner";

package/dist-esm/components/StatusLabel/StatusLabel.js

@@ -0,0 +1,36 @@
+var _excluded = ["appearance", "children", "className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import classNames from "classnames";
+export var StatusLabelAppearance = {
+  CAUTION: "caution",
+  DEFAULT: "",
+  INFORMATION: "information",
+  NEGATIVE: "negative",
+  POSITIVE: "positive"
+};
+
+/**
+ * The type of the StatusLabel props.
+ */
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Label](https://vanillaframework.io/docs/patterns/labels).
+ *
+ * Labels are static elements which you can apply to signify status, tags or any other information you find useful.
+ */
+var StatusLabel = _ref => {
+  var {
+      appearance,
+      children,
+      className
+    } = _ref,
+    labelProps = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames(appearance ? "p-status-label--".concat(appearance) : "p-status-label", className);
+  return /*#__PURE__*/React.createElement("div", _extends({}, labelProps, {
+    className: classes
+  }), children);
+};
+export default StatusLabel;

package/dist-esm/components/StatusLabel/index.js

@@ -0,0 +1 @@
+export { default, StatusLabelAppearance } from "./StatusLabel";

package/dist-esm/components/Strip/Strip.js

@@ -0,0 +1,50 @@
+var _excluded = ["background", "bordered", "children", "className", "colSize", "dark", "deep", "includeCol", "element", "light", "rowClassName", "shallow", "type"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+import Col from "../Col";
+import Row from "../Row";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Strip](https://docs.vanillaframework.io/patterns/strip/).
+ *
+ * The strip pattern provides a full width strip container in which to wrap a row.
+ */
+var Strip = _ref => {
+  var {
+      background,
+      bordered = false,
+      children,
+      className,
+      colSize = 12,
+      dark = false,
+      deep = false,
+      includeCol = true,
+      element: Component = "div",
+      light = false,
+      rowClassName,
+      shallow = false,
+      type
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classNames(className, {
+      ["p-strip--".concat(type)]: !!type,
+      "p-strip": !type,
+      "is-bordered": bordered,
+      "is-dark": dark,
+      "is-deep": deep,
+      "is-light": light,
+      "is-shallow": shallow
+    }),
+    style: background && {
+      backgroundImage: "url('".concat(background, "')")
+    }
+  }, props), /*#__PURE__*/React.createElement(Row, {
+    className: rowClassName
+  }, includeCol ? /*#__PURE__*/React.createElement(Col, {
+    size: colSize
+  }, children) : children));
+};
+export default Strip;

package/dist-esm/components/Strip/index.js

@@ -0,0 +1 @@
+export { default } from "./Strip";

package/dist-esm/components/SummaryButton/SummaryButton.js

@@ -0,0 +1,28 @@
+import React from "react";
+import classNames from "classnames";
+import ActionButton from "../ActionButton";
+/**
+ * `SummaryButton` is a component to render a short summary with an action button. It's initial use case is a summary of table contents with action to load more items.
+ */
+var SummaryButton = _ref => {
+  var {
+    className,
+    isLoading,
+    summary,
+    label,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement("small", {
+    className: className
+  }, summary && /*#__PURE__*/React.createElement("span", {
+    className: "u-text--muted"
+  }, summary), onClick && /*#__PURE__*/React.createElement(ActionButton, {
+    className: classNames("is-small", "is-dense", {
+      "is-inline": summary
+    }),
+    onClick: onClick,
+    loading: isLoading,
+    disabled: isLoading
+  }, label));
+};
+export default SummaryButton;

package/dist-esm/components/SummaryButton/index.js

@@ -0,0 +1 @@
+export { default } from "./SummaryButton";

package/dist-esm/components/Switch/Switch.js

@@ -0,0 +1,28 @@
+var _excluded = ["label", "disabled"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
+ */
+export var Switch = _ref => {
+  var {
+      label,
+      disabled = false
+    } = _ref,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("label", {
+    className: "p-switch"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    className: "p-switch__input",
+    role: "switch",
+    disabled: disabled
+  }, inputProps)), /*#__PURE__*/React.createElement("span", {
+    className: "p-switch__slider"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "p-switch__label"
+  }, label));
+};
+export default Switch;

package/dist-esm/components/Switch/index.js

@@ -0,0 +1 @@
+export { default } from "./Switch";

package/dist-esm/components/Table/Table.js

@@ -0,0 +1,23 @@
+var _excluded = ["children", "className", "expanding", "responsive"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+var Table = _ref => {
+  var {
+      children,
+      className,
+      expanding = false,
+      responsive = false
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("table", _extends({
+    role: "grid",
+    className: classNames(className, {
+      "p-table--mobile-card": responsive,
+      "p-table--expanding": expanding
+    })
+  }, props), children);
+};
+export default Table;

package/dist-esm/components/Table/index.js

@@ -0,0 +1 @@
+export { default } from "./Table";

package/dist-esm/components/TableCell/TableCell.js

@@ -0,0 +1,26 @@
+var _excluded = ["children", "className", "hasOverflow", "expanding", "hidden", "role"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+var TableCell = _ref => {
+  var {
+      children,
+      className,
+      hasOverflow = false,
+      expanding = false,
+      hidden = false,
+      role = "gridcell"
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("td", _extends({
+    role: role,
+    "aria-hidden": hidden,
+    className: classNames(className, {
+      "p-table__expanding-panel": expanding,
+      "has-overflow": hasOverflow
+    })
+  }, props), children);
+};
+export default TableCell;

package/dist-esm/components/TableCell/index.js

@@ -0,0 +1 @@
+export { default } from "./TableCell";

package/dist-esm/components/TableHeader/TableHeader.js

@@ -0,0 +1,17 @@
+var _excluded = ["children", "sort"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+var TableHeader = _ref => {
+  var {
+      children,
+      sort
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("th", _extends({
+    role: "columnheader",
+    "aria-sort": sort
+  }, props), children);
+};
+export default TableHeader;

package/dist-esm/components/TableHeader/index.js

@@ -0,0 +1 @@
+export { default } from "./TableHeader";