orcs-design-system 3.2.4 → 3.2.6

package/es/components/Card/index.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["alternate", "icon", "colour", "title", "subtitle", "changeIcon", "changeValue", "children", "fluid", "width", "center", "theme"];
 import React from "react";
 import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
@@ -9,50 +6,19 @@ import Box from "../Box/";
 import { H3, H4 } from "../Typography";
 import { space, layout } from "styled-system";
 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: "Card__Item",
   componentId: "sc-yfq75p-0"
-})(["", " ", " word-break:break-word;width:", ";height:", ";background:", ";border-radius:", ";padding:", ";box-shadow:", ";", ";", ";", ";"], space, layout, function (props) {
-  return props.width ? props.width : props.fluid ? "100%" : "auto";
-}, function (props) {
-  return props.fluid ? "100%" : "auto";
-}, function (props) {
-  return themeGet("colors.white")(props);
-}, function (props) {
-  return themeGet("radii.2")(props);
-}, function (props) {
-  return themeGet("space.4")(props);
-}, function (props) {
-  return themeGet("shadows.boxDefault")(props);
-}, function (props) {
-  return props.colour === "primary" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.primary")(props)) : props.colour === "success" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.success")(props)) : props.colour === "warning" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.warning")(props)) : props.colour === "danger" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.danger")(props)) : props.colour === "greyDark" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.greyDarker")(props)) : css(["border-top:0;"]);
-}, function (props) {
-  return props.center ? css([",> *,> div > *{display:flex;flex-direction:column;align-items:center;}"]) : css([""]);
-}, function (props) {
-  return props.alternate ? css(["> div:first-of-type{display:flex;justify-content:flex-start;align-items:center;}h4{margin-left:auto;float:right;}"]) : css([""]);
-});
-var ChangeIcon = styled.div.withConfig({
+})(["", " ", " word-break:break-word;width:", ";height:", ";background:", ";border-radius:", ";padding:", ";box-shadow:", ";", ";", ";", ";"], space, layout, props => props.width ? props.width : props.fluid ? "100%" : "auto", props => props.fluid ? "100%" : "auto", props => themeGet("colors.white")(props), props => themeGet("radii.2")(props), props => themeGet("space.4")(props), props => themeGet("shadows.boxDefault")(props), props => props.colour === "primary" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.primary")(props)) : props.colour === "success" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.success")(props)) : props.colour === "warning" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.warning")(props)) : props.colour === "danger" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.danger")(props)) : props.colour === "greyDark" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.greyDarker")(props)) : css(["border-top:0;"]), props => props.center ? css([",> *,> div > *{display:flex;flex-direction:column;align-items:center;}"]) : css([""]), props => props.alternate ? css(["> div:first-of-type{display:flex;justify-content:flex-start;align-items:center;}h4{margin-left:auto;float:right;}"]) : css([""]));
+const ChangeIcon = styled.div.withConfig({
   displayName: "Card__ChangeIcon",
   componentId: "sc-yfq75p-1"
-})(["display:inline-block;width:14px;height:2px;background-size:14px 14px;background-color:", ";margin:0 0 0 ", ";", ""], function (props) {
-  return themeGet("colors.greyDark")(props);
-}, function (props) {
-  return themeGet("space.3")(props);
-}, function (props) {
-  return props.changeIcon === "arrowUp" ? css(["background-color:transparent;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' version='1.1'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-1173.000000, -214.000000)' fill='%2378797D'%3E%3Cg transform='translate(1173.000000, 210.000000)'%3E%3Cpath d='M0.1 12.1L0.8 12.8C1 13 1.3 13 1.4 12.8L6.9 7.3 6.9 19.4C6.9 19.6 7.1 19.8 7.3 19.8L8.3 19.8C8.6 19.8 8.8 19.6 8.8 19.4L8.8 7.3 14.3 12.8C14.4 13 14.7 13 14.9 12.8L15.6 12.1C15.7 11.9 15.7 11.7 15.6 11.5L8.1 4.1C8 4 7.7 4 7.5 4.1L0.1 11.5C0 11.7 0 11.9 0.1 12.1Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");height:14px;"]) : props.changeIcon === "arrowDown" ? css(["background-color:transparent;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' version='1.1'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-1173.000000, -214.000000)' fill='%2378797D'%3E%3Cg transform='translate(1173.000000, 210.000000)'%3E%3Cpath d='M0.1 12.1L0.8 12.8C1 13 1.3 13 1.4 12.8L6.9 7.3 6.9 19.4C6.9 19.6 7.1 19.8 7.3 19.8L8.3 19.8C8.6 19.8 8.8 19.6 8.8 19.4L8.8 7.3 14.3 12.8C14.4 13 14.7 13 14.9 12.8L15.6 12.1C15.7 11.9 15.7 11.7 15.6 11.5L8.1 4.1C8 4 7.7 4 7.5 4.1L0.1 11.5C0 11.7 0 11.9 0.1 12.1Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");height:14px;transform:rotate(180deg);"]) : css([""]);
-});
-var ChangeValue = styled.small.withConfig({
+})(["display:inline-block;width:14px;height:2px;background-size:14px 14px;background-color:", ";margin:0 0 0 ", ";", ""], props => themeGet("colors.greyDark")(props), props => themeGet("space.3")(props), props => props.changeIcon === "arrowUp" ? css(["background-color:transparent;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' version='1.1'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-1173.000000, -214.000000)' fill='%2378797D'%3E%3Cg transform='translate(1173.000000, 210.000000)'%3E%3Cpath d='M0.1 12.1L0.8 12.8C1 13 1.3 13 1.4 12.8L6.9 7.3 6.9 19.4C6.9 19.6 7.1 19.8 7.3 19.8L8.3 19.8C8.6 19.8 8.8 19.6 8.8 19.4L8.8 7.3 14.3 12.8C14.4 13 14.7 13 14.9 12.8L15.6 12.1C15.7 11.9 15.7 11.7 15.6 11.5L8.1 4.1C8 4 7.7 4 7.5 4.1L0.1 11.5C0 11.7 0 11.9 0.1 12.1Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");height:14px;"]) : props.changeIcon === "arrowDown" ? css(["background-color:transparent;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' version='1.1'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-1173.000000, -214.000000)' fill='%2378797D'%3E%3Cg transform='translate(1173.000000, 210.000000)'%3E%3Cpath d='M0.1 12.1L0.8 12.8C1 13 1.3 13 1.4 12.8L6.9 7.3 6.9 19.4C6.9 19.6 7.1 19.8 7.3 19.8L8.3 19.8C8.6 19.8 8.8 19.6 8.8 19.4L8.8 7.3 14.3 12.8C14.4 13 14.7 13 14.9 12.8L15.6 12.1C15.7 11.9 15.7 11.7 15.6 11.5L8.1 4.1C8 4 7.7 4 7.5 4.1L0.1 11.5C0 11.7 0 11.9 0.1 12.1Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");height:14px;transform:rotate(180deg);"]) : css([""]));
+const ChangeValue = styled.small.withConfig({
   displayName: "Card__ChangeValue",
   componentId: "sc-yfq75p-2"
-})(["display:flex;align-items:center;font-size:", ";font-weight:", ";color:", ";margin:0 0 0 ", ";"], function (props) {
-  return themeGet("fontSizes.2")(props);
-}, function (props) {
-  return themeGet("fontWeights.0")(props);
-}, function (props) {
-  return themeGet("colors.greyDark")(props);
-}, function (props) {
-  return themeGet("space.3")(props);
-});
+})(["display:flex;align-items:center;font-size:", ";font-weight:", ";color:", ";margin:0 0 0 ", ";"], props => themeGet("fontSizes.2")(props), props => themeGet("fontWeights.0")(props), props => themeGet("colors.greyDark")(props), props => themeGet("space.3")(props));
 
 /**
  * Example of basic, alternative and complex cards. Child elements can be anything, plain text, graphs, or other components. Subtitles, icons, change values, coloured borders are all optional, not mandatory.
@@ -61,40 +27,53 @@ var ChangeValue = styled.small.withConfig({
  */
 
 export default function Card(_ref) {
-  var alternate = _ref.alternate,
-    icon = _ref.icon,
-    colour = _ref.colour,
-    title = _ref.title,
-    subtitle = _ref.subtitle,
-    changeIcon = _ref.changeIcon,
-    changeValue = _ref.changeValue,
-    children = _ref.children,
-    fluid = _ref.fluid,
-    width = _ref.width,
-    center = _ref.center,
-    theme = _ref.theme,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(Item, _extends({
+  let {
+    alternate,
+    icon,
+    colour,
+    title,
+    subtitle,
+    changeIcon,
+    changeValue,
+    children,
+    fluid,
+    width,
+    center,
+    theme,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsxs(Item, {
     alternate: alternate,
     colour: colour,
     fluid: fluid,
     width: width,
-    center: center
-  }, props), !icon & !title & !subtitle ? null : /*#__PURE__*/React.createElement(Box, {
-    mb: "r"
-  }, icon ? /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    size: "lg",
-    mr: "s"
-  }) : null, title ? /*#__PURE__*/React.createElement(H3, null, title) : null, changeIcon ? /*#__PURE__*/React.createElement(ChangeIcon, {
-    changeIcon: changeIcon
-  }) : null, changeValue ? /*#__PURE__*/React.createElement(ChangeValue, null, changeValue) : null, subtitle ? /*#__PURE__*/React.createElement(H4, {
-    fontSize: "1",
-    color: "greyDark"
-  }, subtitle) : null), /*#__PURE__*/React.createElement(Box, null, children));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    center: center,
+    ...props,
+    children: [!icon & !title & !subtitle ? null : /*#__PURE__*/_jsxs(Box, {
+      mb: "r",
+      children: [icon ? /*#__PURE__*/_jsx(Icon, {
+        icon: icon,
+        size: "lg",
+        mr: "s"
+      }) : null, title ? /*#__PURE__*/_jsx(H3, {
+        children: title
+      }) : null, changeIcon ? /*#__PURE__*/_jsx(ChangeIcon, {
+        changeIcon: changeIcon
+      }) : null, changeValue ? /*#__PURE__*/_jsx(ChangeValue, {
+        children: changeValue
+      }) : null, subtitle ? /*#__PURE__*/_jsx(H4, {
+        fontSize: "1",
+        color: "greyDark",
+        children: subtitle
+      }) : null]
+    }), /*#__PURE__*/_jsx(Box, {
+      children: children
+    })]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Card.propTypes = {
   /** Changes card styles to suit a card that holds alternate data */

package/es/components/Checkbox/Checkbox.stories.js

@@ -2,69 +2,63 @@ import React from "react";
 import Checkbox from ".";
 import Box from "../Box";
 import Spacer from "../Spacer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Checkbox",
   component: Checkbox
 };
-export var basicCheckbox = function basicCheckbox() {
-  return /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: function onChange() {},
-    label: "Default checkbox"
-  });
-};
+export const basicCheckbox = () => /*#__PURE__*/_jsx(Checkbox, {
+  onChange: () => {},
+  label: "Default checkbox"
+});
 basicCheckbox.storyName = "Default";
-export var colourVariants = function colourVariants() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "3"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: function onChange() {},
+export const colourVariants = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "3",
+  children: [/*#__PURE__*/_jsx(Checkbox, {
+    onChange: () => {},
     label: "Primary colour checkbox",
     colour: "primary"
-  }), /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: function onChange() {},
+  }), /*#__PURE__*/_jsx(Checkbox, {
+    onChange: () => {},
     label: "Success colour checkbox",
     colour: "success"
-  }), /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: function onChange() {},
+  }), /*#__PURE__*/_jsx(Checkbox, {
+    onChange: () => {},
     label: "Warning colour checkbox",
     colour: "warning"
-  }), /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: function onChange() {},
+  }), /*#__PURE__*/_jsx(Checkbox, {
+    onChange: () => {},
     label: "Danger colour checkbox",
     colour: "danger"
-  }));
-};
-export var disabled = function disabled() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "3"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: function onChange() {},
+  })]
+});
+export const disabled = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "3",
+  children: [/*#__PURE__*/_jsx(Checkbox, {
+    onChange: () => {},
     disabled: true,
     label: "Disabled checkbox"
-  }), /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: function onChange() {},
+  }), /*#__PURE__*/_jsx(Checkbox, {
+    onChange: () => {},
     checked: true,
     disabled: true,
     label: "Disabled ticked checkbox"
-  }));
-};
-export var checked = function checked() {
-  return /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: function onChange() {},
-    checked: true,
-    label: "Ticked checkbox"
-  });
-};
-export var inverted = function inverted() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyDarker",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    onChange: function onChange() {},
+  })]
+});
+export const checked = () => /*#__PURE__*/_jsx(Checkbox, {
+  onChange: () => {},
+  checked: true,
+  label: "Ticked checkbox"
+});
+export const inverted = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyDarker",
+  p: "r",
+  children: /*#__PURE__*/_jsx(Checkbox, {
+    onChange: () => {},
     colour: "white",
     label: "Inverted checkbox"
-  }));
-};
+  })
+});
 basicCheckbox.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Checkbox/index.js

@@ -1,7 +1,3 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "label", "colour", "disabled", "checked", "onClick", "onChange", "theme", "ariaLabel"];
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import styled, { keyframes, ThemeProvider } from "styled-components";
@@ -9,105 +5,94 @@ import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 
 /* Animations */
-var checkboxOn = keyframes(["0%{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,15px 2px 0 11px;}50%{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px 2px 0 11px;}100%{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px;}"]);
-var checkboxOff = keyframes(["0%{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px,0 0 0 0 inset;}25%{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px,0 0 0 0 inset;}50%{transform:rotate(45deg);margin-top:-4px;margin-left:6px;width:0px;height:0px;box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,15px 2px 0 11px,0 0 0 0 inset;}51%{transform:rotate(0deg);margin-top:-2px;margin-left:-2px;width:20px;height:20px;box-shadow:0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0px 0px 0 10px inset;}100%{transform:rotate(0deg);margin-top:-2px;margin-left:-2px;width:20px;height:20px;box-shadow:0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0px 0px 0 0px inset;}"]);
-var rippleOn = keyframes(["0%{opacity:0.5;}100%{opacity:0;transform:scale(13,13);}"]);
-var rippleOff = keyframes(["0%{opacity:0.5;}100%{opacity:0;transform:scale(13,13);}"]);
-var Item = styled.div.withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const checkboxOn = keyframes(["0%{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,15px 2px 0 11px;}50%{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px 2px 0 11px;}100%{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px;}"]);
+const checkboxOff = keyframes(["0%{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px,0 0 0 0 inset;}25%{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px,0 0 0 0 inset;}50%{transform:rotate(45deg);margin-top:-4px;margin-left:6px;width:0px;height:0px;box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,15px 2px 0 11px,0 0 0 0 inset;}51%{transform:rotate(0deg);margin-top:-2px;margin-left:-2px;width:20px;height:20px;box-shadow:0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0px 0px 0 10px inset;}100%{transform:rotate(0deg);margin-top:-2px;margin-left:-2px;width:20px;height:20px;box-shadow:0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0px 0px 0 0px inset;}"]);
+const rippleOn = keyframes(["0%{opacity:0.5;}100%{opacity:0;transform:scale(13,13);}"]);
+const rippleOff = keyframes(["0%{opacity:0.5;}100%{opacity:0;transform:scale(13,13);}"]);
+const Item = styled.div.withConfig({
   displayName: "Checkbox__Item",
   componentId: "sc-p4d19b-0"
-})(["", " ", " display:block;transform:translateZ(0);color:", ";"], space, layout, function (props) {
-  return props.colour === "white" ? themeGet("colors.white")(props) : themeGet("colors.greyDarkest")(props);
-});
-var Label = styled.label.withConfig({
+})(["", " ", " display:block;transform:translateZ(0);color:", ";"], space, layout, props => props.colour === "white" ? themeGet("colors.white")(props) : themeGet("colors.greyDarkest")(props));
+const Label = styled.label.withConfig({
   displayName: "Checkbox__Label",
   componentId: "sc-p4d19b-1"
-})(["display:flex;align-items:center;cursor:", ";opacity:", ";"], function (props) {
-  return props.disabled ? "default" : "pointer";
-}, function (props) {
-  return props.disabled ? "0.5" : "1";
-});
-var Control = styled.input.attrs({
+})(["display:flex;align-items:center;cursor:", ";opacity:", ";"], props => props.disabled ? "default" : "pointer", props => props.disabled ? "0.5" : "1");
+const Control = styled.input.attrs({
   type: "checkbox"
 }).withConfig({
   displayName: "Checkbox__Control",
   componentId: "sc-p4d19b-2"
-})(["opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;pointer-events:none;&:focus{+ div{border-radius:2px;box-shadow:", ";}}+ div{transition:", ";&:before{background-color:", ";}> div{color:", ";}}:focus + div div:after{opacity:0.2;}:checked{+ div div:before{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px;.animate&{animation:", " 300ms forwards ease-out;}}}&:not(:checked) + div div:before{.animate&{animation:", " 300ms forwards ease-out;}}"], function (props) {
-  return props.colour ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors." + props.colour + "30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black20")(props);
-}, themeGet("transition.transitionDefault"), function (props) {
-  return props.colour ? themeGet("colors.".concat(props.colour))(props) : themeGet("colors.greyDarker")(props);
-}, function (props) {
-  return props.colour ? themeGet("colors.".concat(props.colour))(props) : themeGet("colors.greyDarker")(props);
-}, checkboxOn, checkboxOff);
-var Box = styled.div.withConfig({
+})(["opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;pointer-events:none;&:focus{+ div{border-radius:2px;box-shadow:", ";}}+ div{transition:", ";&:before{background-color:", ";}> div{color:", ";}}:focus + div div:after{opacity:0.2;}:checked{+ div div:before{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px;.animate&{animation:", " 300ms forwards ease-out;}}}&:not(:checked) + div div:before{.animate&{animation:", " 300ms forwards ease-out;}}"], props => props.colour ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors." + props.colour + "30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black20")(props), themeGet("transition.transitionDefault"), props => props.colour ? themeGet("colors.".concat(props.colour))(props) : themeGet("colors.greyDarker")(props), props => props.colour ? themeGet("colors.".concat(props.colour))(props) : themeGet("colors.greyDarker")(props), checkboxOn, checkboxOff);
+const Box = styled.div.withConfig({
   displayName: "Checkbox__Box",
   componentId: "sc-p4d19b-3"
-})(["position:relative;height:20px;width:20px;&:before{content:\"\";display:block;position:absolute;left:8px;top:8px;height:4px;width:4px;border-radius:100%;z-index:1;opacity:0;margin:0;pointer-events:none;background-color:", ";}"], function (props) {
-  return themeGet("colors.black50")(props);
-});
-var Check = styled.div.withConfig({
+})(["position:relative;height:20px;width:20px;&:before{content:\"\";display:block;position:absolute;left:8px;top:8px;height:4px;width:4px;border-radius:100%;z-index:1;opacity:0;margin:0;pointer-events:none;background-color:", ";}"], props => themeGet("colors.black50")(props));
+const Check = styled.div.withConfig({
   displayName: "Checkbox__Check",
   componentId: "sc-p4d19b-4"
-})(["position:relative;display:inline-block;width:20px;height:20px;border:2px solid;border-radius:", ";overflow:hidden;z-index:1;color:", ";&:before{content:\"\";position:absolute;transform:rotate(45deg);display:block;margin-top:-4px;margin-left:6px;width:0;height:0;box-shadow:0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0 inset;@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none){width:1px;height:1px;}}}"], function (props) {
-  return themeGet("radii.1")(props);
-}, function (props) {
-  return themeGet("colors.greyDarker")(props);
-});
-var Text = styled.div.withConfig({
+})(["position:relative;display:inline-block;width:20px;height:20px;border:2px solid;border-radius:", ";overflow:hidden;z-index:1;color:", ";&:before{content:\"\";position:absolute;transform:rotate(45deg);display:block;margin-top:-4px;margin-left:6px;width:0;height:0;box-shadow:0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0,0 0 0 0 inset;@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none){width:1px;height:1px;}}}"], props => themeGet("radii.1")(props), props => themeGet("colors.greyDarker")(props));
+const Text = styled.div.withConfig({
   displayName: "Checkbox__Text",
   componentId: "sc-p4d19b-5"
-})(["font-size:", ";padding-left:8px;"], function (props) {
-  return themeGet("fontSizes.2")(props);
-});
+})(["font-size:", ";padding-left:8px;"], props => themeGet("fontSizes.2")(props));
 /**
  * The default checkbox (or inverted if on dark background) should be used for the majority of the UI; however, the coloured ones can be used in situations where the colour corresponds with some indication of status, e.g. in a task list, green could denote task completed, red could denote task overdue.
  */
 export default function Checkbox(_ref) {
-  var name = _ref.name,
-    label = _ref.label,
-    colour = _ref.colour,
-    disabled = _ref.disabled,
-    checked = _ref.checked,
-    onClick = _ref.onClick,
-    onChange = _ref.onChange,
-    theme = _ref.theme,
-    ariaLabel = _ref.ariaLabel,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var inputRef = useRef(null);
-  var handleClick = function handleClick() {
+  let {
+    name,
+    label,
+    colour,
+    disabled,
+    checked,
+    onClick,
+    onChange,
+    theme,
+    ariaLabel,
+    ...props
+  } = _ref;
+  const inputRef = useRef(null);
+  const handleClick = () => {
     if (!inputRef.current || disabled) {
       return;
     }
     inputRef.current.classList.add("animate");
   };
-  var handleAnimationEnd = function handleAnimationEnd() {
+  const handleAnimationEnd = () => {
     if (!inputRef.current || disabled) {
       return;
     }
     inputRef.current.classList.remove("animate");
   };
-  var component = /*#__PURE__*/React.createElement(Item, _extends({
-    colour: colour
-  }, props, {
-    onClick: handleClick,
-    onAnimationEnd: handleAnimationEnd
-  }), /*#__PURE__*/React.createElement(Label, {
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Control, {
-    name: name,
-    colour: colour,
-    disabled: disabled,
-    checked: checked,
-    onChange: onChange,
-    ref: inputRef,
-    "aria-label": ariaLabel
-  }), /*#__PURE__*/React.createElement(Box, {
+  const component = /*#__PURE__*/_jsx(Item, {
     colour: colour,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(Check, null)), /*#__PURE__*/React.createElement(Text, null, label)));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    ...props,
+    onClick: handleClick,
+    onAnimationEnd: handleAnimationEnd,
+    children: /*#__PURE__*/_jsxs(Label, {
+      disabled: disabled,
+      children: [/*#__PURE__*/_jsx(Control, {
+        name: name,
+        colour: colour,
+        disabled: disabled,
+        checked: checked,
+        onChange: onChange,
+        ref: inputRef,
+        "aria-label": ariaLabel
+      }), /*#__PURE__*/_jsx(Box, {
+        colour: colour,
+        onClick: onClick,
+        children: /*#__PURE__*/_jsx(Check, {})
+      }), /*#__PURE__*/_jsx(Text, {
+        children: label
+      })]
+    })
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Checkbox.propTypes = {
   /** Sets the colour of the checkbox. Colours used are the design system standard colours. */
@@ -125,12 +110,12 @@ Checkbox.propTypes = {
   /** Text label to display beside the checkbox */
   label: PropTypes.string,
   // ariaLabel prop must be specified if label is not provided
-  ariaLabel: function ariaLabel(props, propName) {
+  ariaLabel: (props, propName) => {
     if (!props.label && (props[propName] == null || props[propName] === "")) {
       return new Error("Missing prop `".concat(propName, "` not specified for Checkbox component. When `label` is not provided, `").concat(propName, "` is required."));
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to Checkbox component. Expected `string`, received `").concat(_typeof(props[propName]), "`."));
+      return new Error("Invalid propType `".concat(propName, "` supplied to Checkbox component. Expected `string`, received `").concat(typeof props[propName], "`."));
     }
     return null;
   },