orcs-design-system 3.2.4 → 3.2.6

package/es/components/Popover/index.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "direction", "width", "textAlign", "text", "inlineBlock", "theme", "variant", "enableSelectAll", "tabIndex"];
 import React, { useId, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import styled, { css, ThemeProvider } from "styled-components";
@@ -11,62 +7,25 @@ import Icon from "../Icon";
 import { themeGet } from "@styled-system/theme-get";
 import { useKeepInView, directions } from "../../hooks/keepInView";
 import { commonKeys } from "../../hooks/keypress";
-var Container = styled.div.withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Container = styled.div.withConfig({
   displayName: "Popover__Container",
   componentId: "sc-1bwoak-0"
-})(["", " ", " display:", ";position:relative;&:hover,&:focus-within{.popoverText{opacity:1;z-index:100;visibility:visible;pointer-events:auto;}}"], space, layout, function (props) {
-  return props.inlineBlock ? "inline-block !important" : "block !important";
-});
-var TooltipControl = styled.div.withConfig({
+})(["", " ", " display:", ";position:relative;&:hover,&:focus-within{.popoverText{opacity:1;z-index:100;visibility:visible;pointer-events:auto;}}"], space, layout, props => props.inlineBlock ? "inline-block !important" : "block !important");
+const TooltipControl = styled.div.withConfig({
   displayName: "Popover__TooltipControl",
   componentId: "sc-1bwoak-1"
-})(["border:none;background:none;padding:0;cursor:help;font-size:1em;color:", ";transition:", ";&:hover,&:focus{outline:0;color:", ";}"], function (props) {
-  return themeGet("colors.black")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return themeGet("colors.primary")(props);
-});
-var Text = styled.div.withConfig({
+})(["border:none;background:none;padding:0;cursor:help;font-size:1em;color:", ";transition:", ";&:hover,&:focus{outline:0;color:", ";}"], props => themeGet("colors.black")(props), props => themeGet("transition.transitionDefault")(props), props => themeGet("colors.primary")(props));
+const Text = styled.div.withConfig({
   displayName: "Popover__Text",
   componentId: "sc-1bwoak-2"
-})(["position:absolute;font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;left:100%;top:50%;color:", ";outline:0;padding:", " ", ";border-radius:", ";transform:translateX(10px) translateY(-50%);width:", ";background:", ";border:1px solid ", ";box-shadow:", ";transition:all 300ms ease-in-out;transition-delay:300ms;opacity:0;z-index:-100;visibility:hidden;pointer-events:none;user-select:", ";& a{font-size:", ";}&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-7px;top:50%;margin-top:-6px;}", ";"], function (props) {
-  return themeGet("fontSizes.0")(props);
-}, function (props) {
-  return themeGet("fontSizes.1")(props);
-}, function (props) {
-  return themeGet("fontWeights.1")(props);
-}, function (props) {
-  return props.textAlign ? props.textAlign : "left";
-}, function (props) {
-  return themeGet("colors.greyDarkest")(props);
-}, function (props) {
-  return themeGet("space.3")(props);
-}, function (props) {
-  return themeGet("space.3")(props);
-}, function (props) {
-  return themeGet("radii.1")(props);
-}, function (props) {
-  return props.width ? props.width : "200px";
-}, function (props) {
-  return themeGet("colors.white")(props);
-}, function (props) {
-  return themeGet("colors.greyLight")(props);
-}, function (props) {
-  return themeGet("shadows.boxDefault")(props);
-}, function (props) {
-  return props.enableSelectAll ? "all" : "auto";
-}, function (props) {
-  return themeGet("fontSizes.0")(props);
-}, function (props) {
-  return themeGet("colors.white")(props);
-}, function (props) {
-  return themeGet("colors.grey")(props);
-}, function (_ref) {
-  var direction = _ref.direction;
+})(["position:absolute;font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;left:100%;top:50%;color:", ";outline:0;padding:", " ", ";border-radius:", ";transform:translateX(10px) translateY(-50%);width:", ";background:", ";border:1px solid ", ";box-shadow:", ";transition:all 300ms ease-in-out;transition-delay:300ms;opacity:0;z-index:-100;visibility:hidden;pointer-events:none;user-select:", ";& a{font-size:", ";}&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-7px;top:50%;margin-top:-6px;}", ";"], props => themeGet("fontSizes.0")(props), props => themeGet("fontSizes.1")(props), props => themeGet("fontWeights.1")(props), props => props.textAlign ? props.textAlign : "left", props => themeGet("colors.greyDarkest")(props), props => themeGet("space.3")(props), props => themeGet("space.3")(props), props => themeGet("radii.1")(props), props => props.width ? props.width : "200px", props => themeGet("colors.white")(props), props => themeGet("colors.greyLight")(props), props => themeGet("shadows.boxDefault")(props), props => props.enableSelectAll ? "all" : "auto", props => themeGet("fontSizes.0")(props), props => themeGet("colors.white")(props), props => themeGet("colors.grey")(props), _ref => {
+  let {
+    direction
+  } = _ref;
   return direction === "top" ? css(["left:50%;top:auto;bottom:100%;transform:translateX(-50%) translateY(-10px);&:before{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:50%;top:auto;margin-top:0;bottom:-10px;margin-left:-3px;transform:rotate(-90deg);}"]) : direction === "topRight" ? css(["left:100%;top:auto;bottom:100%;transform:translateX(5px) translateY(-5px);&:before{left:0;top:auto;margin-top:0;bottom:-5px;margin-left:-5px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:0;top:auto;margin-top:0;bottom:-6px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}"]) : direction === "right" ? css([""]) : direction === "bottomRight" ? css(["left:100%;top:100%;bottom:auto;transform:translateX(5px) translateY(5px);&:before{left:0;bottom:auto;margin-top:0;top:-5px;margin-left:-5px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:0;bottom:auto;margin-top:0;top:-6px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}"]) : direction === "bottom" ? css(["left:50%;top:100%;transform:translateX(-50%) translateY(10px);&:before{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:50%;top:-10px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}"]) : direction === "bottomLeft" ? css(["right:100%;left:auto;top:100%;bottom:auto;transform:translateX(-5px) translateY(5px);&:before{right:0;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-5px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:0;left:auto;bottom:auto;margin-top:0;top:-6px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}"]) : direction === "left" ? css(["left:auto;right:100%;transform:translateX(-10px) translateY(-50%);&:before{left:auto;right:-6px;transform:rotate(180deg);}&:after{left:auto;right:-7px;transform:rotate(180deg);top:50%;margin-top:-6px;}"]) : direction === "topLeft" ? css(["right:100%;left:auto;top:auto;bottom:100%;transform:translateX(-5px) translateY(-5px);&:before{right:0;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-5px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:0;left:auto;top:auto;margin-top:0;bottom:-6px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}"]) : css([""]);
 });
-var HoverSpacer = styled.div.withConfig({
+const HoverSpacer = styled.div.withConfig({
   displayName: "Popover__HoverSpacer",
   componentId: "sc-1bwoak-3"
 })(["position:absolute;background:transparent;height:calc(100% + 24px);width:calc(100% + 24px);left:-12px;top:-12px;"]);
@@ -78,45 +37,36 @@ var HoverSpacer = styled.div.withConfig({
  */
 
 export default function Popover(_ref2) {
-  var children = _ref2.children,
-    direction = _ref2.direction,
-    width = _ref2.width,
-    textAlign = _ref2.textAlign,
-    text = _ref2.text,
-    inlineBlock = _ref2.inlineBlock,
-    theme = _ref2.theme,
-    variant = _ref2.variant,
-    _ref2$enableSelectAll = _ref2.enableSelectAll,
-    enableSelectAll = _ref2$enableSelectAll === void 0 ? true : _ref2$enableSelectAll,
-    _ref2$tabIndex = _ref2.tabIndex,
-    tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
-    props = _objectWithoutProperties(_ref2, _excluded);
-  var containerRef = useRef();
-  var _useState = useState(direction),
-    _useState2 = _slicedToArray(_useState, 2),
-    inViewDirection = _useState2[0],
-    setInViewDirection = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    dismissed = _useState4[0],
-    setDismissed = _useState4[1];
-  var toolTipId = useId();
-  var _useKeepInView = useKeepInView({
-      direction: direction,
-      callback: setInViewDirection
-    }),
-    _useKeepInView2 = _slicedToArray(_useKeepInView, 2),
-    ref = _useKeepInView2[0],
-    setIsShown = _useKeepInView2[1];
-  var component = /*#__PURE__*/React.createElement(Container, _extends({
+  let {
+    children,
+    direction,
+    width,
+    textAlign,
+    text,
+    inlineBlock,
+    theme,
+    variant,
+    enableSelectAll = true,
+    tabIndex = 0,
+    ...props
+  } = _ref2;
+  const containerRef = useRef();
+  const [inViewDirection, setInViewDirection] = useState(direction);
+  const [dismissed, setDismissed] = useState(false);
+  const toolTipId = useId();
+  const [ref, setIsShown] = useKeepInView({
+    direction,
+    callback: setInViewDirection
+  });
+  const component = /*#__PURE__*/_jsxs(Container, {
     ref: containerRef,
-    inlineBlock: inlineBlock
-  }, props, {
-    onMouseEnter: function onMouseEnter() {
+    inlineBlock: inlineBlock,
+    ...props,
+    onMouseEnter: () => {
       setIsShown(true);
       setDismissed(false);
     },
-    onKeyDownCapture: function onKeyDownCapture(e) {
+    onKeyDownCapture: e => {
       if ([commonKeys.ESCAPE, commonKeys.ESC].includes(e.key)) {
         setDismissed(true);
         if (containerRef !== null && containerRef !== void 0 && containerRef.current.contains(document.activeElement)) {
@@ -124,35 +74,39 @@ export default function Popover(_ref2) {
         }
       }
     },
-    onBlur: function onBlur() {
+    onBlur: () => {
       setDismissed(false);
     },
-    onMouseLeave: function onMouseLeave() {
+    onMouseLeave: () => {
       setIsShown(false);
       setDismissed(false);
     },
-    "aria-describedby": toolTipId
-  }), variant === "tooltip" && /*#__PURE__*/React.createElement(TooltipControl, {
-    tabIndex: tabIndex
-  }, /*#__PURE__*/React.createElement(Icon, {
-    transform: "grow-4",
-    icon: ["fas", "question-circle"],
-    fontSize: "2"
-  })), !!text && !dismissed && /*#__PURE__*/React.createElement(Text, {
-    ref: ref,
-    role: "tooltip",
-    className: "popoverText",
-    textAlign: textAlign,
-    direction: inViewDirection,
-    width: width,
-    enableSelectAll: enableSelectAll,
-    id: toolTipId
-  }, /*#__PURE__*/React.createElement(HoverSpacer, {
-    className: "popoverSpacer"
-  }), text), children);
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    "aria-describedby": toolTipId,
+    children: [variant === "tooltip" && /*#__PURE__*/_jsx(TooltipControl, {
+      tabIndex: tabIndex,
+      children: /*#__PURE__*/_jsx(Icon, {
+        transform: "grow-4",
+        icon: ["fas", "question-circle"],
+        fontSize: "2"
+      })
+    }), !!text && !dismissed && /*#__PURE__*/_jsxs(Text, {
+      ref: ref,
+      role: "tooltip",
+      className: "popoverText",
+      textAlign: textAlign,
+      direction: inViewDirection,
+      width: width,
+      enableSelectAll: enableSelectAll,
+      id: toolTipId,
+      children: [/*#__PURE__*/_jsx(HoverSpacer, {
+        className: "popoverSpacer"
+      }), text]
+    }), children]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Popover.propTypes = {
   /** The element that requires the popover helper text. */

package/es/components/ProgressBar/ProgressBar.stories.js

@@ -2,56 +2,53 @@ import React from "react";
 import ProgressBar from ".";
 import Box from "../Box";
 import Spacer from "../Spacer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/ProgressBar",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      p: "r"
-    }, storyFn());
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    p: "r",
+    children: storyFn()
+  })],
   component: ProgressBar
 };
-export var defaultProgressBar = function defaultProgressBar() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "r"
-  }, /*#__PURE__*/React.createElement(ProgressBar, {
+export const defaultProgressBar = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "r",
+  children: [/*#__PURE__*/_jsx(ProgressBar, {
     ariaLabel: "Percent Completed",
     containerWidth: 100,
     fillWidth: 40
-  }), /*#__PURE__*/React.createElement(ProgressBar, {
+  }), /*#__PURE__*/_jsx(ProgressBar, {
     ariaLabel: "Percent Completed",
     containerWidth: 50,
     fillWidth: 70
-  }));
-};
+  })]
+});
 defaultProgressBar.storyName = "Default";
-export var gradient = function gradient() {
-  return /*#__PURE__*/React.createElement(ProgressBar, {
-    ariaLabel: "Percent Completed",
-    containerWidth: 100,
-    fillWidth: 40,
-    gradient: true
-  });
-};
-export var onDarkBackground = function onDarkBackground() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyDarkest",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    m: "r"
-  }, /*#__PURE__*/React.createElement(ProgressBar, {
-    ariaLabel: "Percent Completed",
-    containerWidth: 100,
-    fillWidth: 40,
-    inverted: true
-  }), /*#__PURE__*/React.createElement(ProgressBar, {
-    ariaLabel: "Percent Completed",
-    containerWidth: 100,
-    fillWidth: 70,
-    gradient: true,
-    inverted: true
-  })));
-};
+export const gradient = () => /*#__PURE__*/_jsx(ProgressBar, {
+  ariaLabel: "Percent Completed",
+  containerWidth: 100,
+  fillWidth: 40,
+  gradient: true
+});
+export const onDarkBackground = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyDarkest",
+  p: "r",
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    m: "r",
+    children: [/*#__PURE__*/_jsx(ProgressBar, {
+      ariaLabel: "Percent Completed",
+      containerWidth: 100,
+      fillWidth: 40,
+      inverted: true
+    }), /*#__PURE__*/_jsx(ProgressBar, {
+      ariaLabel: "Percent Completed",
+      containerWidth: 100,
+      fillWidth: 70,
+      gradient: true,
+      inverted: true
+    })]
+  })
+});
 defaultProgressBar.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/ProgressBar/index.js

@@ -1,26 +1,18 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["containerWidth", "fillWidth", "gradient", "theme", "ariaLabel"];
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { css, keyframes, ThemeProvider } from "styled-components";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
-var expandWidth = keyframes(["0%{width:0;}"]);
-var Background = styled.div.withConfig({
+import { jsx as _jsx } from "react/jsx-runtime";
+const expandWidth = keyframes(["0%{width:0;}"]);
+const Background = styled.div.withConfig({
   displayName: "ProgressBar__Background",
   componentId: "sc-q9qaaf-0"
-})(["", " ", " position:relative;background:", ";height:16px;border-radius:8px;"], space, layout, function (props) {
-  return themeGet("colors.greyLighter")(props);
-});
-var Fill = styled.div.withConfig({
+})(["", " ", " position:relative;background:", ";height:16px;border-radius:8px;"], space, layout, props => themeGet("colors.greyLighter")(props));
+const Fill = styled.div.withConfig({
   displayName: "ProgressBar__Fill",
   componentId: "sc-q9qaaf-1"
-})(["position:absolute;left:3px;top:3px;height:10px;border-radius:5px;animation:", " 1000ms ease-in-out 1;transition:", ";", ";"], expandWidth, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return props.gradient ? css(["background:linear-gradient( to right,", " 0%,", " 50%,", " 100% );"], themeGet("colors.danger")(props), themeGet("colors.warning")(props), themeGet("colors.success")(props)) : css(["background:", ";"], themeGet("colors.primary")(props));
-});
+})(["position:absolute;left:3px;top:3px;height:10px;border-radius:5px;animation:", " 1000ms ease-in-out 1;transition:", ";", ";"], expandWidth, props => themeGet("transition.transitionDefault")(props), props => props.gradient ? css(["background:linear-gradient( to right,", " 0%,", " 50%,", " 100% );"], themeGet("colors.danger")(props), themeGet("colors.warning")(props), themeGet("colors.success")(props)) : css(["background:", ";"], themeGet("colors.primary")(props)));
 
 /**
  * Progress bar is not intended to be used for loading (that's what the Loading component is for). The intended use is for indicating progress through steps or progress towards a goal.
@@ -31,31 +23,34 @@ var Fill = styled.div.withConfig({
  */
 
 export default function ProgressBar(_ref) {
-  var containerWidth = _ref.containerWidth,
-    fillWidth = _ref.fillWidth,
-    gradient = _ref.gradient,
-    theme = _ref.theme,
-    _ref$ariaLabel = _ref.ariaLabel,
-    ariaLabel = _ref$ariaLabel === void 0 ? "Progress" : _ref$ariaLabel,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(Background, _extends({
+  let {
+    containerWidth,
+    fillWidth,
+    gradient,
+    theme,
+    ariaLabel = "Progress",
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsx(Background, {
     style: {
       width: containerWidth + "%"
-    }
-  }, props, {
+    },
+    ...props,
     "aria-label": ariaLabel,
     "aria-valuenow": fillWidth,
     "aria-valuemin": "0",
-    "aria-valuemax": "100"
-  }), /*#__PURE__*/React.createElement(Fill, {
-    gradient: gradient,
-    style: {
-      width: fillWidth + "%"
-    }
-  }));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    "aria-valuemax": "100",
+    children: /*#__PURE__*/_jsx(Fill, {
+      gradient: gradient,
+      style: {
+        width: fillWidth + "%"
+      }
+    })
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 ProgressBar.propTypes = {
   /** Sets the percentage width of the parent container */

package/es/components/RadioButton/RadioButton.stories.js

@@ -2,74 +2,69 @@ import React from "react";
 import RadioButton from ".";
 import Box from "../Box";
 import Spacer from "../Spacer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/RadioButton",
   component: RadioButton
 };
-export var defaultRadioButton = function defaultRadioButton() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "r"
-  }, /*#__PURE__*/React.createElement(RadioButton, {
+export const defaultRadioButton = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "r",
+  children: [/*#__PURE__*/_jsx(RadioButton, {
     name: "RadioButtons01",
     label: "Default radio"
-  }), /*#__PURE__*/React.createElement(RadioButton, {
+  }), /*#__PURE__*/_jsx(RadioButton, {
     name: "RadioButtons01",
     label: "Default radio 02"
-  }));
-};
+  })]
+});
 defaultRadioButton.storyName = "Default";
-export var checked = function checked() {
-  return /*#__PURE__*/React.createElement(RadioButton, {
-    name: "RadioButtons02",
-    label: "Default checked radio",
-    checked: true
-  });
-};
-export var disabled = function disabled() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "r"
-  }, /*#__PURE__*/React.createElement(RadioButton, {
+export const checked = () => /*#__PURE__*/_jsx(RadioButton, {
+  name: "RadioButtons02",
+  label: "Default checked radio",
+  checked: true
+});
+export const disabled = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "r",
+  children: [/*#__PURE__*/_jsx(RadioButton, {
     name: "RadioButtons03",
     label: "Disabled unchecked radio",
     disabled: true
-  }), /*#__PURE__*/React.createElement(RadioButton, {
+  }), /*#__PURE__*/_jsx(RadioButton, {
     name: "RadioButtons03",
     label: "Disabled checked radio",
     disabled: true,
     checked: true
-  }));
-};
-export var colour = function colour() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "r"
-  }, /*#__PURE__*/React.createElement(RadioButton, {
+  })]
+});
+export const colour = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "r",
+  children: [/*#__PURE__*/_jsx(RadioButton, {
     name: "RadioButtons",
     label: "Primary colour radio",
     variant: "primary"
-  }), /*#__PURE__*/React.createElement(RadioButton, {
+  }), /*#__PURE__*/_jsx(RadioButton, {
     name: "RadioButtons",
     label: "Success colour radio",
     variant: "success"
-  }), /*#__PURE__*/React.createElement(RadioButton, {
+  }), /*#__PURE__*/_jsx(RadioButton, {
     name: "RadioButtons",
     label: "Warning colour radio",
     variant: "warning"
-  }), /*#__PURE__*/React.createElement(RadioButton, {
+  }), /*#__PURE__*/_jsx(RadioButton, {
     name: "RadioButtons",
     label: "Danger colour radio",
     variant: "danger"
-  }));
-};
-export var inverted = function inverted() {
-  return /*#__PURE__*/React.createElement(Box, {
-    p: "r",
-    bg: "greyDarker"
-  }, /*#__PURE__*/React.createElement(RadioButton, {
+  })]
+});
+export const inverted = () => /*#__PURE__*/_jsx(Box, {
+  p: "r",
+  bg: "greyDarker",
+  children: /*#__PURE__*/_jsx(RadioButton, {
     name: "RadioButtons04",
     label: "Inverted radio",
     variant: "white"
-  }));
-};
+  })
+});
 defaultRadioButton.__docgenInfo = {
   "description": "",
   "methods": [],