orcs-design-system 2.1.31 → 3.0.0

package/es/GlobalStyles.js

@@ -1,20 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n/* apply a natural box layout model to all elements, but allowing components to change */\nhtml {\n    box-sizing: border-box;\n    line-height: 1.15;\n    line-height: calc(2px + 2ex + 2px);\n}\nhtml * {\n  line-height: calc(2px + 2ex + 2px);\n}\n*, *:before, *:after {\n    box-sizing: inherit;\n}\nhtml,\nbody {\n    height: 100%;\n    width: 100%;\n    margin: ", ";\n}\nbody {\n    font-family: ", ";\n    color: ", ";\n}\n/* set rem text size and styling */\nhtml { font-size: 62.5%; }\nbody {\n  font-size: ", "; // equivalent to 16px (or 14px with collapsed theme) because of % change to html font size above\n}\nmain {\n  display: flex;\n\talign-items: stretch;\n\talign-content: stretch;\n\twidth: 100%;\n}\nsection {\n  height: ", ";\n  width: 100%;\n  overflow-y: scroll;\n}\nimg {\n    border-style: none;\n}\nsmall {\n    font-size: 80%;\n}\np {\n    margin: ", ";\n}\nh1, h2, h3, h4, h5, h6 {\n  font-weight: ", ";\n  font-family: ", ";\n  margin: ", ";\n}\nh1 {\n  font-size: ", "\n}\nh2 {\n  font-size: ", "\n}\nh3 {\n  font-size: ", "\n}\nh4 {\n  font-size: ", "\n}\nh5 {\n  font-size: ", "\n}\nh6 {\n  font-size: ", "\n}\na,\np,\nsmall,\nli,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  word-break: break-word;\n}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
+var _templateObject;
 import { createGlobalStyle } from "styled-components";
-import { themeGet } from "@styled-system/theme-get"; // GLOBAL STYLES
+import { themeGet } from "@styled-system/theme-get";
+// GLOBAL STYLES
 // For browser reset, setting global box sizing and font sizing etc.
 
-var GlobalStyles = createGlobalStyle(_templateObject(), function (props) {
+var GlobalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* apply a natural box layout model to all elements, but allowing components to change */\nhtml {\n    box-sizing: border-box;\n    line-height: 1.15;\n    line-height: calc(2px + 2ex + 2px);\n}\nhtml * {\n  line-height: calc(2px + 2ex + 2px);\n}\n*, *:before, *:after {\n    box-sizing: inherit;\n}\nhtml,\nbody {\n    height: 100%;\n    width: 100%;\n    margin: ", ";\n}\nbody {\n    font-family: ", ";\n    color: ", ";\n}\n/* set rem text size and styling */\nhtml { font-size: 62.5%; }\nbody {\n  font-size: ", "; // equivalent to 16px (or 14px with collapsed theme) because of % change to html font size above\n}\nmain {\n  display: flex;\n\talign-items: stretch;\n\talign-content: stretch;\n\twidth: 100%;\n}\nsection {\n  height: ", ";\n  width: 100%;\n  overflow-y: scroll;\n}\nimg {\n    border-style: none;\n}\nsmall {\n    font-size: 80%;\n}\np {\n    margin: ", ";\n}\nh1, h2, h3, h4, h5, h6 {\n  font-weight: ", ";\n  font-family: ", ";\n  margin: ", ";\n}\nh1 {\n  font-size: ", "\n}\nh2 {\n  font-size: ", "\n}\nh3 {\n  font-size: ", "\n}\nh4 {\n  font-size: ", "\n}\nh5 {\n  font-size: ", "\n}\nh6 {\n  font-size: ", "\n}\na,\np,\nsmall,\nli,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  word-break: break-word;\n}\n"])), function (props) {
   return themeGet("space.0")(props);
 }, function (props) {
   return themeGet("fonts.main")(props);

package/es/SystemThemeProvider.js

@@ -3,14 +3,12 @@ import PropTypes from "prop-types";
 import { ThemeProvider } from "styled-components";
 import { default as GlobalStyles } from "./GlobalStyles";
 import systemtheme from "./systemtheme";
-
 var SystemThemeProvider = function SystemThemeProvider(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: systemtheme
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, null), children));
 };
-
 SystemThemeProvider.propTypes = {
   children: PropTypes.node
 };

package/es/assets/Colour/index.js

@@ -11,6 +11,6 @@ export var Colour = styled("div").withConfig({
     height: "75px"
   });
 });
-/** @component */
 
+/** @component */
 export default Colour;

package/es/components/ActionsMenu/ActionsMenu.stories.js

@@ -11,7 +11,6 @@ import Icon from "../Icon";
 import Box from "../Box";
 import Button from "../Button";
 import TextArea from "../TextArea";
-import mdx from "./ActionsMenu.mdx";
 export default {
   title: "Components/ActionsMenu",
   decorators: [function (storyFn) {
@@ -19,11 +18,6 @@ export default {
       pb: "150px"
     }, storyFn());
   }],
-  parameters: {
-    docs: {
-      page: mdx
-    }
-  },
   component: ActionsMenu
 };
 export var defaultActionsMenu = function defaultActionsMenu() {
@@ -55,43 +49,35 @@ export var leftOffsetActionsMenu = function leftOffsetActionsMenu() {
 leftOffsetActionsMenu.storyName = "Left offset";
 var MenuItems = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var closeMenu = _ref.closeMenu,
-      reasons = _ref.reasons;
-
+    reasons = _ref.reasons;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showOther = _useState2[0],
-      setShowOther = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showOther = _useState2[0],
+    setShowOther = _useState2[1];
   var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selectedReason = _useState4[0],
-      setSelectedReason = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedReason = _useState4[0],
+    setSelectedReason = _useState4[1];
   var _useState5 = useState(""),
-      _useState6 = _slicedToArray(_useState5, 2),
-      otherReason = _useState6[0],
-      setOtherReason = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    otherReason = _useState6[0],
+    setOtherReason = _useState6[1];
   var reset = function reset() {
     setShowOther(false);
   };
-
   var resetAndCloseMenu = function resetAndCloseMenu() {
     reset();
     closeMenu();
   };
-
   useImperativeHandle(ref, function () {
     return {
       reset: reset
     };
   });
-
   var clickOther = function clickOther() {
     setSelectedReason("other");
     setShowOther(true);
   };
-
   var setReason = function setReason(id) {
     return function () {
       // TODO: Make the call to back end
@@ -100,11 +86,9 @@ var MenuItems = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       resetAndCloseMenu();
     };
   };
-
   var onOtherReasonChange = function onOtherReasonChange(e) {
     setOtherReason(e.target.value);
   };
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsMenuHeading, {
     onClick: reset,
     canClick: showOther
@@ -113,8 +97,7 @@ var MenuItems = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     mr: "xs"
   }), " Select reason"), !showOther && /*#__PURE__*/React.createElement(React.Fragment, null, reasons.map(function (_ref2) {
     var id = _ref2.id,
-        label = _ref2.label;
-
+      label = _ref2.label;
     if (id === "other") {
       return /*#__PURE__*/React.createElement(ActionsMenuItem, {
         key: id,
@@ -129,7 +112,6 @@ var MenuItems = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         size: "sm"
       })));
     }
-
     return /*#__PURE__*/React.createElement(ActionsMenuItem, {
       key: id,
       type: "button",
@@ -173,13 +155,11 @@ var Reasons = [{
 }];
 export var advancedActionsMenu = function advancedActionsMenu() {
   var ref = /*#__PURE__*/React.createRef(null);
-
   var closeMenu = function closeMenu() {
     if (ref.current) {
       ref.current.closeMenu();
     }
   };
-
   return /*#__PURE__*/React.createElement(Flex, {
     justifyContent: "flex-end"
   }, /*#__PURE__*/React.createElement(ActionsMenu, {
@@ -206,33 +186,26 @@ advancedActionsMenu.storyName = "Advanced Actions Menu";
 export var customActionsMenu = function customActionsMenu() {
   var AdvancedActionsMenu = function AdvancedActionsMenu() {
     var _useState7 = useState(false),
-        _useState8 = _slicedToArray(_useState7, 2),
-        toggleState = _useState8[0],
-        setToggle = _useState8[1];
-
+      _useState8 = _slicedToArray(_useState7, 2),
+      toggleState = _useState8[0],
+      setToggle = _useState8[1];
     var menuItemsRef = useRef(null);
-
     var closeMenu = function closeMenu() {
       setToggle(false);
     };
-
     var resetAndCloseMenu = function resetAndCloseMenu() {
       if (menuItemsRef.current) {
         menuItemsRef.current.reset();
       }
-
       closeMenu();
     };
-
     var menuRef = useOnclickOutside(resetAndCloseMenu, {
       disabled: !toggleState
     });
-
     var onToggle = function onToggle(e) {
       e.stopPropagation();
       setToggle(!toggleState);
     };
-
     return /*#__PURE__*/React.createElement("div", {
       ref: menuRef
     }, /*#__PURE__*/React.createElement(Flex, {
@@ -256,40 +229,32 @@ export var customActionsMenu = function customActionsMenu() {
       reasons: Reasons
     }))));
   };
-
   return /*#__PURE__*/React.createElement(AdvancedActionsMenu, null);
 };
 customActionsMenu.storyName = "Custom Actions Menu";
 export var textButtonActionsMenu = function textButtonActionsMenu() {
   var TextButtonActionsMenu = function TextButtonActionsMenu() {
     var _useState9 = useState(false),
-        _useState10 = _slicedToArray(_useState9, 2),
-        toggleState = _useState10[0],
-        setToggle = _useState10[1];
-
+      _useState10 = _slicedToArray(_useState9, 2),
+      toggleState = _useState10[0],
+      setToggle = _useState10[1];
     var menuItemsRef = useRef(null);
-
     var closeMenu = function closeMenu() {
       setToggle(false);
     };
-
     var resetAndCloseMenu = function resetAndCloseMenu() {
       if (menuItemsRef.current) {
         menuItemsRef.current.reset();
       }
-
       closeMenu();
     };
-
     var menuRef = useOnclickOutside(resetAndCloseMenu, {
       disabled: !toggleState
     });
-
     var onToggle = function onToggle(e) {
       e.stopPropagation();
       setToggle(!toggleState);
     };
-
     return /*#__PURE__*/React.createElement("div", {
       ref: menuRef
     }, /*#__PURE__*/React.createElement(ActionsMenuBody, {
@@ -316,7 +281,6 @@ export var textButtonActionsMenu = function textButtonActionsMenu() {
       href: "#"
     }, "Slack")));
   };
-
   return /*#__PURE__*/React.createElement(TextButtonActionsMenu, null);
 };
 textButtonActionsMenu.storyName = "Text Button Actions Menu";

package/es/components/ActionsMenu/index.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-
-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; }
-
+var _excluded = ["as"],
+  _excluded2 = ["theme", "onToggle", "toggleState", "direction", "menuTopPosition", "menuLeftPosition", "menuRightPosition", "menuWidth", "customTriggerComponent", "children", "ariaLabel"],
+  _excluded3 = ["children", "customTriggerComponent", "direction", "isOpen", "theme", "closeOnClick", "ariaLabel"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useState, useEffect, useImperativeHandle, useCallback } from "react";
 import styled, { css, keyframes, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
@@ -81,17 +81,14 @@ export var ActionsMenuHeading = styled.div.withConfig({
 });
 export var ActionsMenuItem = styled(function (props) {
   var as = props.as,
-      others = _objectWithoutProperties(props, ["as"]);
-
+    others = _objectWithoutProperties(props, _excluded);
   var Component = as ? as : others.href ? "a" : "button";
   var newProps = others;
-
   if (Component === "button") {
     newProps = _objectSpread(_objectSpread({}, others), {}, {
       type: "button"
     });
   }
-
   return /*#__PURE__*/React.createElement(Component, newProps);
 }).attrs({
   role: "listitem"
@@ -129,31 +126,28 @@ export var ActionsMenuItem = styled(function (props) {
 });
 export var ActionsMenuBody = function ActionsMenuBody(_ref) {
   var theme = _ref.theme,
-      onToggle = _ref.onToggle,
-      toggleState = _ref.toggleState,
-      direction = _ref.direction,
-      menuTopPosition = _ref.menuTopPosition,
-      menuLeftPosition = _ref.menuLeftPosition,
-      menuRightPosition = _ref.menuRightPosition,
-      menuWidth = _ref.menuWidth,
-      customTriggerComponent = _ref.customTriggerComponent,
-      children = _ref.children,
-      ariaLabel = _ref.ariaLabel,
-      props = _objectWithoutProperties(_ref, ["theme", "onToggle", "toggleState", "direction", "menuTopPosition", "menuLeftPosition", "menuRightPosition", "menuWidth", "customTriggerComponent", "children", "ariaLabel"]);
-
+    onToggle = _ref.onToggle,
+    toggleState = _ref.toggleState,
+    direction = _ref.direction,
+    menuTopPosition = _ref.menuTopPosition,
+    menuLeftPosition = _ref.menuLeftPosition,
+    menuRightPosition = _ref.menuRightPosition,
+    menuWidth = _ref.menuWidth,
+    customTriggerComponent = _ref.customTriggerComponent,
+    children = _ref.children,
+    ariaLabel = _ref.ariaLabel,
+    props = _objectWithoutProperties(_ref, _excluded2);
   var _useState = useState({
-    menuLeftPosition: menuLeftPosition,
-    menuRightPosition: menuRightPosition,
-    menuTopPosition: menuTopPosition
-  }),
-      _useState2 = _slicedToArray(_useState, 1),
-      menuPosition = _useState2[0];
-
+      menuLeftPosition: menuLeftPosition,
+      menuRightPosition: menuRightPosition,
+      menuTopPosition: menuTopPosition
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    menuPosition = _useState2[0];
   var _useState3 = useState(direction),
-      _useState4 = _slicedToArray(_useState3, 2),
-      inViewDirection = _useState4[0],
-      setInViewDirection = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    inViewDirection = _useState4[0],
+    setInViewDirection = _useState4[1];
   var setMenuPosition = useCallback(function (newDirection) {
     if (typeof menuLeftPosition !== "undefined" || typeof menuRightPosition !== "undefined") {
       if (menuPosition.menuLeftPosition) {
@@ -164,25 +158,20 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
         menuPosition.menuRightPosition = null;
       }
     }
-
     setInViewDirection(newDirection);
   }, [menuLeftPosition, menuRightPosition, menuPosition, setInViewDirection]);
-
   var _useKeepInView = useKeepInView({
-    direction: direction,
-    callback: setMenuPosition
-  }),
-      _useKeepInView2 = _slicedToArray(_useKeepInView, 2),
-      ref = _useKeepInView2[0],
-      setIsShown = _useKeepInView2[1];
-
+      direction: direction,
+      callback: setMenuPosition
+    }),
+    _useKeepInView2 = _slicedToArray(_useKeepInView, 2),
+    ref = _useKeepInView2[0],
+    setIsShown = _useKeepInView2[1];
   var onToggleInView = function onToggleInView(e) {
     setIsShown(!toggleState);
     onToggle(e);
   };
-
   var triggerBtn = null;
-
   if (customTriggerComponent) {
     triggerBtn = /*#__PURE__*/React.cloneElement(customTriggerComponent, {
       onClick: onToggleInView,
@@ -198,7 +187,6 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
       isOpen: toggleState
     }));
   }
-
   var component = /*#__PURE__*/React.createElement(Wrapper, props, triggerBtn, /*#__PURE__*/React.createElement(Menu, {
     isOpen: toggleState,
     direction: inViewDirection,
@@ -228,22 +216,20 @@ ActionsMenuBody.propTypes = {
 };
 var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
-      customTriggerComponent = _ref2.customTriggerComponent,
-      direction = _ref2.direction,
-      _ref2$isOpen = _ref2.isOpen,
-      isOpen = _ref2$isOpen === void 0 ? false : _ref2$isOpen,
-      theme = _ref2.theme,
-      _ref2$closeOnClick = _ref2.closeOnClick,
-      closeOnClick = _ref2$closeOnClick === void 0 ? true : _ref2$closeOnClick,
-      _ref2$ariaLabel = _ref2.ariaLabel,
-      ariaLabel = _ref2$ariaLabel === void 0 ? "Options Menu" : _ref2$ariaLabel,
-      props = _objectWithoutProperties(_ref2, ["children", "customTriggerComponent", "direction", "isOpen", "theme", "closeOnClick", "ariaLabel"]);
-
+    customTriggerComponent = _ref2.customTriggerComponent,
+    direction = _ref2.direction,
+    _ref2$isOpen = _ref2.isOpen,
+    isOpen = _ref2$isOpen === void 0 ? false : _ref2$isOpen,
+    theme = _ref2.theme,
+    _ref2$closeOnClick = _ref2.closeOnClick,
+    closeOnClick = _ref2$closeOnClick === void 0 ? true : _ref2$closeOnClick,
+    _ref2$ariaLabel = _ref2.ariaLabel,
+    ariaLabel = _ref2$ariaLabel === void 0 ? "Options Menu" : _ref2$ariaLabel,
+    props = _objectWithoutProperties(_ref2, _excluded3);
   var _useState5 = useState(isOpen),
-      _useState6 = _slicedToArray(_useState5, 2),
-      toggleState = _useState6[0],
-      setToggle = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    toggleState = _useState6[0],
+    setToggle = _useState6[1];
   useImperativeHandle(ref, function () {
     return {
       closeMenu: function closeMenu() {
@@ -255,29 +241,26 @@ var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     if (!closeOnClick || !toggleState) {
       return;
     }
-
     var handleClicked = function handleClicked() {
       // As the event listener is attached in capture phase, need to do this make sure the sate change are after react event cycle.
       setTimeout(function () {
         return setToggle(false);
       }, 0);
-    }; // handle click to hide menu
+    };
+
+    // handle click to hide menu
     // If any of the actions are using stopPropagation(), the event will stop in the react mounting root.
     // So use capture phase to detect anything clicked.
-
-
     document.addEventListener("click", handleClicked, true);
     return function () {
       // If menu closed, unregister event listener to prevent memory leaks
       document.removeEventListener("click", handleClicked, true);
     };
   }, [closeOnClick, toggleState]);
-
   var onToggle = function onToggle(e) {
     e.stopPropagation();
     setToggle(!toggleState);
   };
-
   return /*#__PURE__*/React.createElement(ActionsMenuBody, _extends({
     onToggle: onToggle,
     toggleState: toggleState,
@@ -293,10 +276,8 @@ ActionsMenu.propTypes = {
   customTriggerComponent: PropTypes.node,
   closeOnClick: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-
   /** Specifies the colour theme */
   theme: PropTypes.object,
-
   /** Specifies the aria-label for the button */
   ariaLabel: PropTypes.object
 };

package/es/components/Avatar/Avatar.stories.js

@@ -5,14 +5,8 @@ import Box from "../Box";
 import Spacer from "../Spacer";
 import StyledLink from "../StyledLink";
 import Avatar from ".";
-import mdx from "./Avatar.mdx";
 export default {
   title: "Components/Avatar",
-  parameters: {
-    docs: {
-      page: mdx
-    }
-  },
   component: Avatar
 };
 export var defaultAvatar = function defaultAvatar() {

package/es/components/Avatar/index.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["titleLevel"],
+  _excluded2 = ["sizing", "image", "imageAlt", "initials", "title", "titleLevel", "subtitle", "subtitleContent", "type", "theme", "shape", "localTime", "uppercase", "whiteInitials"];
 import React, { useMemo } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import { space, layout, variant } from "styled-system";
@@ -185,8 +187,7 @@ var Shape = styled("div").withConfig({
 });
 var Title = styled(function (_ref) {
   var titleLevel = _ref.titleLevel,
-      props = _objectWithoutProperties(_ref, ["titleLevel"]);
-
+    props = _objectWithoutProperties(_ref, _excluded);
   var Heading = Header[titleLevel];
   return /*#__PURE__*/React.cloneElement( /*#__PURE__*/React.createElement(Heading, null), props);
 }).withConfig({
@@ -282,26 +283,24 @@ var LocalTime = styled(Popover).withConfig({
   displayName: "Avatar__LocalTime",
   componentId: "sc-1wtet2j-6"
 })(["position:absolute;top:0;left:0;"]);
-
 var Avatar = function Avatar(_ref2) {
   var sizing = _ref2.sizing,
-      image = _ref2.image,
-      imageAlt = _ref2.imageAlt,
-      initials = _ref2.initials,
-      title = _ref2.title,
-      _ref2$titleLevel = _ref2.titleLevel,
-      titleLevel = _ref2$titleLevel === void 0 ? "H3" : _ref2$titleLevel,
-      subtitle = _ref2.subtitle,
-      subtitleContent = _ref2.subtitleContent,
-      type = _ref2.type,
-      theme = _ref2.theme,
-      shape = _ref2.shape,
-      localTime = _ref2.localTime,
-      _ref2$uppercase = _ref2.uppercase,
-      uppercase = _ref2$uppercase === void 0 ? true : _ref2$uppercase,
-      whiteInitials = _ref2.whiteInitials,
-      props = _objectWithoutProperties(_ref2, ["sizing", "image", "imageAlt", "initials", "title", "titleLevel", "subtitle", "subtitleContent", "type", "theme", "shape", "localTime", "uppercase", "whiteInitials"]);
-
+    image = _ref2.image,
+    imageAlt = _ref2.imageAlt,
+    initials = _ref2.initials,
+    title = _ref2.title,
+    _ref2$titleLevel = _ref2.titleLevel,
+    titleLevel = _ref2$titleLevel === void 0 ? "H3" : _ref2$titleLevel,
+    subtitle = _ref2.subtitle,
+    subtitleContent = _ref2.subtitleContent,
+    type = _ref2.type,
+    theme = _ref2.theme,
+    shape = _ref2.shape,
+    localTime = _ref2.localTime,
+    _ref2$uppercase = _ref2.uppercase,
+    uppercase = _ref2$uppercase === void 0 ? true : _ref2$uppercase,
+    whiteInitials = _ref2.whiteInitials,
+    props = _objectWithoutProperties(_ref2, _excluded2);
   var hasTitle = !!title;
   var hasSubtitle = !!subtitle;
   var hasSubtitleContent = !!subtitleContent;
@@ -364,47 +363,33 @@ var Avatar = function Avatar(_ref2) {
     theme: theme
   }, component) : component;
 };
-
 Avatar.propTypes = {
   /** Changes the sizing of the Avatar component */
   sizing: PropTypes.oneOf(["small", "large", "default"]),
-
   /** Changes the shape of the Avatar component */
   shape: PropTypes.oneOf(["square", "hexagon", "tag", "default"]),
-
   /** Specifies the inverted type for dark backgrounds */
   type: PropTypes.oneOf(["inverted", "default"]),
-
   /** Specifies a source path for an image */
   image: PropTypes.string,
-
   /** Specifies the alt text for an image */
   imageAlt: PropTypes.string,
-
   /** Specifies initials of person if available */
   initials: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-
   /** Specifies custom content for avatar subtitle */
   subtitleContent: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
-
   /** Turns white initials on for custom `Circle` backgrounds */
   whiteInitials: PropTypes.bool,
-
   /** Specifies whether to use uppercase for initials */
   uppercase: PropTypes.bool,
-
   /** Specifies title / name as just plain text, or an element like a hyperlink or react router link */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-
   /** Specifies the component to wrap the heading, defaults to H3 */
   titleLevel: PropTypes.oneOf(["H1", "H2", "H3", "H4", "H5", "H6"]),
-
   /** Specifies subtitle / role */
   subtitle: PropTypes.string,
-
   /** Specifies local time */
   localTime: PropTypes.string,
-
   /** Specifies the colour theme */
   theme: PropTypes.object
 };

package/es/components/Badge/Badge.stories.js

@@ -3,14 +3,8 @@ import Box from "../Box";
 import Spacer from "../Spacer";
 import Flex from "../Flex";
 import Badge from ".";
-import mdx from "./Badge.mdx";
 export default {
   title: "Components/Badge",
-  parameters: {
-    docs: {
-      page: mdx
-    }
-  },
   component: Badge
 };
 export var defaultBadge = function defaultBadge() {

package/es/components/Badge/index.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["noWrap", "children", "theme"];
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
@@ -78,10 +79,9 @@ var Item = styled("span").withConfig({
 }, BadgeStyles);
 export default function Badge(_ref) {
   var noWrap = _ref.noWrap,
-      children = _ref.children,
-      theme = _ref.theme,
-      props = _objectWithoutProperties(_ref, ["noWrap", "children", "theme"]);
-
+    children = _ref.children,
+    theme = _ref.theme,
+    props = _objectWithoutProperties(_ref, _excluded);
   var component = /*#__PURE__*/React.createElement(Item, _extends({
     noWrap: noWrap
   }, props), children);
@@ -92,13 +92,10 @@ export default function Badge(_ref) {
 Badge.propTypes = {
   /** Specifies badge colour. Colours are taken from the standard design system colours. */
   variant: PropTypes.oneOf(["success", "warning", "danger", "primaryLight", "primary", "primaryDark", "secondary"]),
-
   /** Specified whether the badge text should be able to wrap or not */
   noWrap: PropTypes.bool,
-
   /** The label text on the badge is passed as a child element. */
   children: PropTypes.node,
-
   /** Specifies the system theme. */
   theme: PropTypes.object
 };

package/es/components/Box/Box.stories.js

@@ -1,14 +1,8 @@
 import React from "react";
 import Box from "../Box";
 import { P } from "../Typography";
-import mdx from "./Box.mdx";
 export default {
   title: "Components/Box",
-  parameters: {
-    docs: {
-      page: mdx
-    }
-  },
   component: Box
 };
 export var basicBox = function basicBox() {
@@ -57,7 +51,7 @@ export var borderRadius = function borderRadius() {
     boxBorder: "default",
     shadow: "default",
     p: "r"
-  }, /*#__PURE__*/React.createElement(P, null, "This is a bordered Box variant with rounded corners.", " ", /*#__PURE__*/React.createElement("code", null, "borderRadius"), " is taken from the ", /*#__PURE__*/React.createElement("code", null, "radii"), " array in", " ", /*#__PURE__*/React.createElement("code", null, "systemtheme.js"), "."));
+  }, /*#__PURE__*/React.createElement(P, null, "This is a bordered Box variant with rounded corners.", /*#__PURE__*/React.createElement("code", null, "borderRadius"), " is taken from the ", /*#__PURE__*/React.createElement("code", null, "radii"), " array in", /*#__PURE__*/React.createElement("code", null, "systemtheme.js"), "."));
 };
 borderRadius.story = {
   name: "Rounded corners"