orcs-design-system 3.2.4 → 3.2.6

package/es/components/Divider/Divider.stories.js

@@ -2,64 +2,61 @@ import React from "react";
 import Divider from ".";
 import Spacer from "../Spacer";
 import Box from "../Box";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Divider",
   component: Divider
 };
-export var defaultDivider = function defaultDivider() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
-  }, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Divider, {
+export const defaultDivider = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "r",
+  children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Divider, {
     light: true
-  }), /*#__PURE__*/React.createElement(Divider, {
+  }), /*#__PURE__*/_jsx(Divider, {
     thick: true
-  }), /*#__PURE__*/React.createElement(Divider, {
+  }), /*#__PURE__*/_jsx(Divider, {
     light: true,
     thick: true
-  }));
-};
-export var dashDivider = function dashDivider() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
-  }, /*#__PURE__*/React.createElement(Divider, {
+  })]
+});
+export const dashDivider = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "r",
+  children: [/*#__PURE__*/_jsx(Divider, {
     dash: true
-  }), /*#__PURE__*/React.createElement(Divider, {
+  }), /*#__PURE__*/_jsx(Divider, {
     light: true,
     dash: true
-  }), /*#__PURE__*/React.createElement(Divider, {
+  }), /*#__PURE__*/_jsx(Divider, {
     thick: true,
     dash: true
-  }), /*#__PURE__*/React.createElement(Divider, {
+  }), /*#__PURE__*/_jsx(Divider, {
     light: true,
     thick: true,
     dash: true
-  }));
-};
-export var invertedDivider = function invertedDivider() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyDarkest",
-    p: "5"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
-  }, /*#__PURE__*/React.createElement(Divider, {
-    inverted: true
-  }), /*#__PURE__*/React.createElement(Divider, {
-    inverted: true,
-    thick: true
-  }), /*#__PURE__*/React.createElement(Divider, {
-    inverted: true,
-    dash: true
-  }), /*#__PURE__*/React.createElement(Divider, {
-    inverted: true,
-    thick: true,
-    dash: true
-  })));
-};
-export var spanGrid = function spanGrid() {
-  return /*#__PURE__*/React.createElement(Divider, {
-    spanGrid: true
-  });
-};
+  })]
+});
+export const invertedDivider = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyDarkest",
+  p: "5",
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    my: "r",
+    children: [/*#__PURE__*/_jsx(Divider, {
+      inverted: true
+    }), /*#__PURE__*/_jsx(Divider, {
+      inverted: true,
+      thick: true
+    }), /*#__PURE__*/_jsx(Divider, {
+      inverted: true,
+      dash: true
+    }), /*#__PURE__*/_jsx(Divider, {
+      inverted: true,
+      thick: true,
+      dash: true
+    })]
+  })
+});
+export const spanGrid = () => /*#__PURE__*/_jsx(Divider, {
+  spanGrid: true
+});
 defaultDivider.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Divider/index.js

@@ -1,44 +1,38 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["light", "thick", "dash", "inverted", "spanGrid", "theme"];
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import { space, layout, color } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 import shouldForwardProp from "@styled-system/should-forward-prop";
-var Item = styled.div.withConfig({
-  shouldForwardProp: shouldForwardProp
+import { jsx as _jsx } from "react/jsx-runtime";
+const Item = styled.div.withConfig({
+  shouldForwardProp
 }).withConfig({
   displayName: "Divider__Item",
   componentId: "sc-106mlj-0"
-})(["", " ", " ", " display:block;width:100%;height:", ";grid-column:", ";border-bottom:", ";background-color:", ";"], space, layout, color, function (props) {
-  return props.thick ? "3px" : "1px";
-}, function (props) {
-  return props.spanGrid ? "1 / -1" : "auto";
-}, function (props) {
-  return props.dash && props.thick && props.light ? "dashed 3px ".concat(themeGet("colors.black10")(props)) : props.dash && props.thick && props.inverted ? "dashed 3px ".concat(themeGet("colors.white20")(props)) : props.dash && props.inverted ? "dashed 1px ".concat(themeGet("colors.white20")(props)) : props.dash && props.light ? "dashed 1px ".concat(themeGet("colors.black10")(props)) : props.dash && props.thick ? "dashed 3px ".concat(themeGet("colors.black20")(props)) : props.dash ? "dashed 1px ".concat(themeGet("colors.black20")(props)) : "none";
-}, function (props) {
-  return props.dash ? "transparent" : props.inverted ? themeGet("colors.white20")(props) : props.light ? themeGet("colors.black10")(props) : themeGet("colors.black20")(props);
-});
+})(["", " ", " ", " display:block;width:100%;height:", ";grid-column:", ";border-bottom:", ";background-color:", ";"], space, layout, color, props => props.thick ? "3px" : "1px", props => props.spanGrid ? "1 / -1" : "auto", props => props.dash && props.thick && props.light ? "dashed 3px ".concat(themeGet("colors.black10")(props)) : props.dash && props.thick && props.inverted ? "dashed 3px ".concat(themeGet("colors.white20")(props)) : props.dash && props.inverted ? "dashed 1px ".concat(themeGet("colors.white20")(props)) : props.dash && props.light ? "dashed 1px ".concat(themeGet("colors.black10")(props)) : props.dash && props.thick ? "dashed 3px ".concat(themeGet("colors.black20")(props)) : props.dash ? "dashed 1px ".concat(themeGet("colors.black20")(props)) : "none", props => props.dash ? "transparent" : props.inverted ? themeGet("colors.white20")(props) : props.light ? themeGet("colors.black10")(props) : themeGet("colors.black20")(props));
 export default function Divider(_ref) {
-  var light = _ref.light,
-    thick = _ref.thick,
-    dash = _ref.dash,
-    inverted = _ref.inverted,
-    spanGrid = _ref.spanGrid,
-    theme = _ref.theme,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(Item, _extends({
+  let {
+    light,
+    thick,
+    dash,
+    inverted,
+    spanGrid,
+    theme,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsx(Item, {
     light: light,
     thick: thick,
     dash: dash,
     inverted: inverted,
-    spanGrid: spanGrid
-  }, props));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    spanGrid: spanGrid,
+    ...props
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Divider.propTypes = {
   /** Divider will use a lighter grey colour */

package/es/components/Expandable/Expandable.stories.js

@@ -2,51 +2,61 @@ import React from "react";
 import Expandable from ".";
 import Typography from "../Typography";
 import Box from "../Box";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Expandable",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      height: "300px"
-    }, storyFn());
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    height: "300px",
+    children: storyFn()
+  })],
   component: Expandable
 };
-export var defaultExpandable = function defaultExpandable() {
-  return /*#__PURE__*/React.createElement(Expandable, {
-    title: "Details"
-  }, /*#__PURE__*/React.createElement(Typography.P, null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."));
-};
-export var openExpandable = function openExpandable() {
-  return /*#__PURE__*/React.createElement(Expandable, {
-    isOpen: true,
-    title: "Details"
-  }, /*#__PURE__*/React.createElement(Typography.P, null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."));
-};
-export var expandableWithSubtitle = function expandableWithSubtitle() {
-  return /*#__PURE__*/React.createElement(Expandable, {
-    title: "Complex example",
-    subtitle: "Subtitle"
-  }, /*#__PURE__*/React.createElement(Typography.P, null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."));
-};
-export var expandableWithBadge = function expandableWithBadge() {
-  return /*#__PURE__*/React.createElement(Expandable, {
-    title: "Complex example",
-    badge: "status",
-    badgeColour: "success"
-  }, /*#__PURE__*/React.createElement(Typography.P, null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."));
-};
-export var expandableSmall = function expandableSmall() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Expandable, {
+export const defaultExpandable = () => /*#__PURE__*/_jsx(Expandable, {
+  title: "Details",
+  children: /*#__PURE__*/_jsx(Typography.P, {
+    children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
+  })
+});
+export const openExpandable = () => /*#__PURE__*/_jsx(Expandable, {
+  isOpen: true,
+  title: "Details",
+  children: /*#__PURE__*/_jsx(Typography.P, {
+    children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
+  })
+});
+export const expandableWithSubtitle = () => /*#__PURE__*/_jsx(Expandable, {
+  title: "Complex example",
+  subtitle: "Subtitle",
+  children: /*#__PURE__*/_jsx(Typography.P, {
+    children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
+  })
+});
+export const expandableWithBadge = () => /*#__PURE__*/_jsx(Expandable, {
+  title: "Complex example",
+  badge: "status",
+  badgeColour: "success",
+  children: /*#__PURE__*/_jsx(Typography.P, {
+    children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
+  })
+});
+export const expandableSmall = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Expandable, {
     small: true,
-    title: "Small example"
-  }, /*#__PURE__*/React.createElement(Typography.P, null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.")), /*#__PURE__*/React.createElement(Expandable, {
+    title: "Small example",
+    children: /*#__PURE__*/_jsx(Typography.P, {
+      children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
+    })
+  }), /*#__PURE__*/_jsx(Expandable, {
     small: true,
     title: "Small complex example",
     subtitle: "Subtitle",
     badge: "status",
-    badgeColour: "success"
-  }, /*#__PURE__*/React.createElement(Typography.P, null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.")));
-};
+    badgeColour: "success",
+    children: /*#__PURE__*/_jsx(Typography.P, {
+      children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem."
+    })
+  })]
+});
 defaultExpandable.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Expandable/index.js

@@ -1,6 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "title", "subtitle", "badge", "badgeColour", "isOpen", "small", "theme"];
 import React, { useMemo, useState } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
@@ -8,60 +5,27 @@ import Flex from "../Flex";
 import Typography from "../Typography";
 import Badge from "../Badge";
 import { themeGet } from "@styled-system/theme-get";
-var Item = styled.div.withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Item = styled.div.withConfig({
   displayName: "Expandable__Item",
   componentId: "sc-na4gdb-0"
 })(["margin:4px 0;"]);
-var Button = styled.button.withConfig({
+const Button = styled.button.withConfig({
   displayName: "Expandable__Button",
   componentId: "sc-na4gdb-1"
-})(["position:relative;display:block;border:none;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;cursor:pointer;width:100%;margin:0;font-size:", ";text-align:left;color:", ";padding:", ";}border-left:solid 3px ", ";border-radius:", ";background:", ";transition:", ";&:hover{background:", ";border-left:solid 3px ", ";}&:focus{outline:0;border-left:solid 3px ", ";}&:after,&:before{content:\"\";position:absolute;top:50%;transform:translateY(-50%);width:2px;height:12px;right:", ";background-color:", ";transition:", ";}&:before{transform:", ";}&:after{transform:translateY(-50%) rotate(90deg);}"], function (props) {
-  return themeGet("fontSizes.3")(props);
-}, function (props) {
-  return themeGet("colors.greyDarker")(props);
-}, function (props) {
-  return props.small ? "8px 33px 8px 8px" : "18px 48px 18px 16px";
-}, function (props) {
-  return themeGet("colors.greyLightest")(props);
-}, function (props) {
-  return themeGet("radii.1")(props);
-}, function (props) {
-  return themeGet("colors.greyLightest")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return themeGet("colors.greyLighter")(props);
-}, function (props) {
-  return themeGet("colors.greyLighter")(props);
-}, function (props) {
-  return themeGet("colors.primary")(props);
-}, function (props) {
-  return props.small ? "16px" : "24px";
-}, function (props) {
-  return themeGet("colors.greyDark")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return props.open ? "translateY(-50%) rotate(90deg)" : "translateY(-50%)";
-});
-var Text = styled.div.withConfig({
+})(["position:relative;display:block;border:none;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;cursor:pointer;width:100%;margin:0;font-size:", ";text-align:left;color:", ";padding:", ";}border-left:solid 3px ", ";border-radius:", ";background:", ";transition:", ";&:hover{background:", ";border-left:solid 3px ", ";}&:focus{outline:0;border-left:solid 3px ", ";}&:after,&:before{content:\"\";position:absolute;top:50%;transform:translateY(-50%);width:2px;height:12px;right:", ";background-color:", ";transition:", ";}&:before{transform:", ";}&:after{transform:translateY(-50%) rotate(90deg);}"], props => themeGet("fontSizes.3")(props), props => themeGet("colors.greyDarker")(props), props => props.small ? "8px 33px 8px 8px" : "18px 48px 18px 16px", props => themeGet("colors.greyLightest")(props), props => themeGet("radii.1")(props), props => themeGet("colors.greyLightest")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.greyLighter")(props), props => themeGet("colors.greyLighter")(props), props => themeGet("colors.primary")(props), props => props.small ? "16px" : "24px", props => themeGet("colors.greyDark")(props), props => themeGet("transition.transitionDefault")(props), props => props.open ? "translateY(-50%) rotate(90deg)" : "translateY(-50%)");
+const Text = styled.div.withConfig({
   displayName: "Expandable__Text",
   componentId: "sc-na4gdb-2"
 })(["padding-right:18px;"]);
-var SubTitle = styled(Typography.Small).withConfig({
+const SubTitle = styled(Typography.Small).withConfig({
   displayName: "Expandable__SubTitle",
   componentId: "sc-na4gdb-3"
 })(["display:block;"]);
-var Content = styled.div.withConfig({
+const Content = styled.div.withConfig({
   displayName: "Expandable__Content",
   componentId: "sc-na4gdb-4"
-})(["padding:", ";transition:", ";display:", ";"], function (props) {
-  return themeGet("space.r")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return props.open ? "block" : "none";
-});
+})(["padding:", ";transition:", ";display:", ";"], props => themeGet("space.r")(props), props => themeGet("transition.transitionDefault")(props), props => props.open ? "block" : "none");
 
 /**
  * This component is to be used when there is a lot of content to present on a page that can instead be split into expandable sections to aid in user comprehension and explorability, rather than overwhelming the user with a whole page of content.
@@ -72,49 +36,58 @@ var Content = styled.div.withConfig({
  */
 
 export default function Expandable(_ref) {
-  var children = _ref.children,
-    title = _ref.title,
-    subtitle = _ref.subtitle,
-    badge = _ref.badge,
-    badgeColour = _ref.badgeColour,
-    isOpen = _ref.isOpen,
-    small = _ref.small,
-    theme = _ref.theme,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(isOpen),
-    _useState2 = _slicedToArray(_useState, 2),
-    baseState = _useState2[0],
-    setBase = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    toggleState = _useState4[0],
-    setToggle = _useState4[1];
-  var Heading = useMemo(function () {
+  let {
+    children,
+    title,
+    subtitle,
+    badge,
+    badgeColour,
+    isOpen,
+    small,
+    theme,
+    ...props
+  } = _ref;
+  const [baseState, setBase] = useState(isOpen);
+  const [toggleState, setToggle] = useState(false);
+  const Heading = useMemo(() => {
     return small ? Typography.H5 : Typography.H4;
   }, [small]);
-  var onToggle = function onToggle() {
+  const onToggle = () => {
     if (!toggleState) setToggle(true);else setToggle(false);
     if (!baseState) setBase(true);else setBase(false);
   };
-  var component = /*#__PURE__*/React.createElement(Item, props, /*#__PURE__*/React.createElement(Heading, null, /*#__PURE__*/React.createElement(Button, {
-    open: baseState,
-    small: small,
-    "aria-expanded": baseState,
-    onClick: onToggle
-  }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center",
-    justifyContent: "space-between"
-  }, /*#__PURE__*/React.createElement(Text, null, title, subtitle && /*#__PURE__*/React.createElement(SubTitle, {
-    grey: true
-  }, subtitle)), badge && /*#__PURE__*/React.createElement(Badge, {
-    variant: badgeColour
-  }, badge)))), /*#__PURE__*/React.createElement(Content, {
-    open: baseState,
-    expanded: toggleState
-  }, children));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+  const component = /*#__PURE__*/_jsxs(Item, {
+    ...props,
+    children: [/*#__PURE__*/_jsx(Heading, {
+      children: /*#__PURE__*/_jsx(Button, {
+        open: baseState,
+        small: small,
+        "aria-expanded": baseState,
+        onClick: onToggle,
+        children: /*#__PURE__*/_jsxs(Flex, {
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/*#__PURE__*/_jsxs(Text, {
+            children: [title, subtitle && /*#__PURE__*/_jsx(SubTitle, {
+              grey: true,
+              children: subtitle
+            })]
+          }), badge && /*#__PURE__*/_jsx(Badge, {
+            variant: badgeColour,
+            children: badge
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(Content, {
+      open: baseState,
+      expanded: toggleState,
+      children: children
+    })]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Expandable.propTypes = {
   /** Sets expandable to open state by default */

package/es/components/Flex/Flex.stories.js

@@ -2,15 +2,29 @@ import React from "react";
 import Flex from ".";
 import Button from "../Button";
 import Spacer from "../Spacer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Flex",
   component: Flex
 };
-export var basicFlex = function basicFlex() {
-  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Spacer, {
-    mx: "s"
-  }, /*#__PURE__*/React.createElement(Button, null, "Button 1"), /*#__PURE__*/React.createElement(Button, null, "Button 2"), /*#__PURE__*/React.createElement(Button, null, "Button 3"), /*#__PURE__*/React.createElement(Button, null, "Button 4"), /*#__PURE__*/React.createElement(Button, null, "Button 5"), /*#__PURE__*/React.createElement(Button, null, "Button 6")));
-};
+export const basicFlex = () => /*#__PURE__*/_jsx(Flex, {
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    mx: "s",
+    children: [/*#__PURE__*/_jsx(Button, {
+      children: "Button 1"
+    }), /*#__PURE__*/_jsx(Button, {
+      children: "Button 2"
+    }), /*#__PURE__*/_jsx(Button, {
+      children: "Button 3"
+    }), /*#__PURE__*/_jsx(Button, {
+      children: "Button 4"
+    }), /*#__PURE__*/_jsx(Button, {
+      children: "Button 5"
+    }), /*#__PURE__*/_jsx(Button, {
+      children: "Button 6"
+    })]
+  })
+});
 basicFlex.storyName = "Basic Flex";
 basicFlex.__docgenInfo = {
   "description": "",

package/es/components/Flex/FlexItem.stories.js

@@ -2,19 +2,20 @@ import React from "react";
 import { FlexItem } from ".";
 import Button from "../Button";
 import Icon from "../Icon";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/FlexItem",
   component: FlexItem
 };
-export var basicFlexItem = function basicFlexItem() {
-  return /*#__PURE__*/React.createElement(FlexItem, {
-    mx: "s"
-  }, /*#__PURE__*/React.createElement(Button, {
-    iconRight: true
-  }, "Right aligned icon", /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "download"]
-  })));
-};
+export const basicFlexItem = () => /*#__PURE__*/_jsx(FlexItem, {
+  mx: "s",
+  children: /*#__PURE__*/_jsxs(Button, {
+    iconRight: true,
+    children: ["Right aligned icon", /*#__PURE__*/_jsx(Icon, {
+      icon: ["fas", "download"]
+    })]
+  })
+});
 basicFlexItem.storyName = "Basic Flex Item";
 basicFlexItem.__docgenInfo = {
   "description": "",

package/es/components/Flex/index.js

@@ -1,8 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "theme"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
@@ -10,43 +5,55 @@ import { space, layout, flexbox, compose } from "styled-system";
 import { css } from "@styled-system/css";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import styledPropTypes from "@styled-system/prop-types";
-var FlexStyles = compose(space, layout, flexbox);
-var FlexWrapper = styled("div").withConfig({
-  shouldForwardProp: shouldForwardProp,
+import { jsx as _jsx } from "react/jsx-runtime";
+const FlexStyles = compose(space, layout, flexbox);
+const FlexWrapper = styled("div").withConfig({
+  shouldForwardProp,
   displayName: "Flex__FlexWrapper",
   componentId: "sc-1f3kfw7-0"
-}).attrs(function (props) {
-  return {
-    "data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
-  };
-})(css({
+}).attrs(props => ({
+  "data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
+}))(css({
   boxSizing: "border-box"
 }), FlexStyles);
-var FlexItem = styled("div").withConfig({
+const FlexItem = styled("div").withConfig({
   displayName: "Flex__FlexItem",
   componentId: "sc-1f3kfw7-1"
 })(css({
   boxSizing: "border-box"
 }), FlexStyles);
 export default function Flex(_ref) {
-  var children = _ref.children,
-    theme = _ref.theme,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(FlexWrapper, props, children);
+  let {
+    children,
+    theme,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsx(FlexWrapper, {
+    ...props,
+    children: children
+  });
   if (theme) {
-    return /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: theme
-    }, /*#__PURE__*/React.createElement(FlexWrapper, props, children));
+    return /*#__PURE__*/_jsx(ThemeProvider, {
+      theme: theme,
+      children: /*#__PURE__*/_jsx(FlexWrapper, {
+        ...props,
+        children: children
+      })
+    });
   }
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
-Flex.propTypes = _objectSpread(_objectSpread(_objectSpread({
+Flex.propTypes = {
   /** Children of `Flex` are taken as node elements */
   children: PropTypes.node,
-  theme: PropTypes.object
-}, styledPropTypes.space), styledPropTypes.layout), styledPropTypes.flexbox);
+  theme: PropTypes.object,
+  ...styledPropTypes.space,
+  ...styledPropTypes.layout,
+  ...styledPropTypes.flexbox
+};
 Flex.defaultProps = {
   display: "flex",
   flexDirection: "row",