orcs-design-system 3.2.4 → 3.2.6

package/es/components/TextInput/index.js

@@ -1,8 +1,3 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-var _excluded = ["numberProps"];
 import React, { useMemo } from "react";
 import { NumericFormat } from "react-number-format";
 import PropTypes from "prop-types";
@@ -13,192 +8,153 @@ import { createShouldForwardProp, props } from "@styled-system/should-forward-pr
 import Icon from "../Icon";
 import { themeGet } from "@styled-system/theme-get";
 import useInputFocus from "../../hooks/useInputFocus";
-var InputStyles = compose(space, layout);
-var shouldForwardProp = createShouldForwardProp([].concat(_toConsumableArray(props), ["type", "placeholder", "defaultValue", "disabled", "maxLength", "pattern", "required", "autocomplete", "autofocus", "step", "readonly"]));
-var Group = styled("div").withConfig({
-  shouldForwardProp: shouldForwardProp,
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const InputStyles = compose(space, layout);
+const shouldForwardProp = createShouldForwardProp([...props, "type", "placeholder", "defaultValue", "disabled", "maxLength", "pattern", "required", "autocomplete", "autofocus", "step", "readonly"]);
+const Group = styled("div").withConfig({
+  shouldForwardProp,
   displayName: "TextInput__Group",
   componentId: "sc-shde0o-0"
-})(function (props) {
-  return sscss({
-    position: "relative",
-    width: props.fullWidth ? "100%" : "auto"
-  });
-}, InputStyles);
-var IconWrapper = styled.label.withConfig({
+})(props => sscss({
+  position: "relative",
+  width: props.fullWidth ? "100%" : "auto"
+}), InputStyles);
+const IconWrapper = styled.label.withConfig({
   displayName: "TextInput__IconWrapper",
   componentId: "sc-shde0o-1"
-})(["display:flex;align-items:center;position:relative;svg{opacity:0.4;position:absolute;}", ";"], function (props) {
-  return props.iconLeft && !props.floating ? css(["svg{bottom:", ";left:12px;}"], function (props) {
-    var inputHeight = themeGet("appScale.inputHeightDefault")(props);
-    return "calc(".concat(inputHeight, " / 3 - 1px)");
-  }) : props.iconLeft && props.floating ? css(["svg{bottom:", ";left:12px;}"], function (props) {
-    var inputHeight = themeGet("appScale.inputHeightDefault")(props);
-    return "calc(".concat(inputHeight, " / 2 + 3px)");
-  }) : props.iconRight && !props.floating ? css(["svg{bottom:", ";right:12px;}"], function (props) {
-    var inputHeight = themeGet("appScale.inputHeightDefault")(props);
-    return "calc(".concat(inputHeight, " / 3 - 1px)");
-  }) : props.iconRight && props.floating ? css(["svg{bottom:", ";right:12px;}"], function (props) {
-    var inputHeight = themeGet("appScale.inputHeightDefault")(props);
-    return "calc(".concat(inputHeight, " / 2 + 3px)");
-  }) : css([""]);
-});
-var InputStyle = css(["display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;box-shadow:none;font-size:", ";z-index:1;border-radius:", ";transition:", ";background:", ";color:", ";width:", ";height:", ";padding:", ";border:1px solid ", ";", " &:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", ";border:1px solid ", ";", ";}"], function (props) {
-  return themeGet("fontSizes.2")(props);
-}, function (props) {
-  return themeGet("radii.2")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return props.disabled ? themeGet("colors.greyLightest")(props) : themeGet("colors.white")(props);
-}, function (props) {
-  return props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.greyDarkest")(props);
-}, function (props) {
-  return props.fullWidth ? "100%" : "auto";
-}, function (props) {
-  return props.height ? props.height : props.floating ? themeGet("appScale.inputHeightLarge")(props) : themeGet("appScale.inputHeightDefault")(props);
-}, function (props) {
-  var left = props.iconLeft ? 36 : 10;
-  var right = props.iconRight ? 36 : 10;
-  var top = props.floating ? 25 : 5;
-  var bottom = 6;
+})(["display:flex;align-items:center;position:relative;svg{opacity:0.4;position:absolute;}", ";"], props => props.iconLeft && !props.floating ? css(["svg{bottom:", ";left:12px;}"], props => {
+  let inputHeight = themeGet("appScale.inputHeightDefault")(props);
+  return "calc(".concat(inputHeight, " / 3 - 1px)");
+}) : props.iconLeft && props.floating ? css(["svg{bottom:", ";left:12px;}"], props => {
+  let inputHeight = themeGet("appScale.inputHeightDefault")(props);
+  return "calc(".concat(inputHeight, " / 2 + 3px)");
+}) : props.iconRight && !props.floating ? css(["svg{bottom:", ";right:12px;}"], props => {
+  let inputHeight = themeGet("appScale.inputHeightDefault")(props);
+  return "calc(".concat(inputHeight, " / 3 - 1px)");
+}) : props.iconRight && props.floating ? css(["svg{bottom:", ";right:12px;}"], props => {
+  let inputHeight = themeGet("appScale.inputHeightDefault")(props);
+  return "calc(".concat(inputHeight, " / 2 + 3px)");
+}) : css([""]));
+const InputStyle = css(["display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;box-shadow:none;font-size:", ";z-index:1;border-radius:", ";transition:", ";background:", ";color:", ";width:", ";height:", ";padding:", ";border:1px solid ", ";", " &:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", ";border:1px solid ", ";", ";}"], props => themeGet("fontSizes.2")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? themeGet("colors.greyLightest")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.greyDarkest")(props), props => props.fullWidth ? "100%" : "auto", props => props.height ? props.height : props.floating ? themeGet("appScale.inputHeightLarge")(props) : themeGet("appScale.inputHeightDefault")(props), props => {
+  let left = props.iconLeft ? 36 : 10;
+  let right = props.iconRight ? 36 : 10;
+  let top = props.floating ? 25 : 5;
+  let bottom = 6;
   return "".concat(top, "px ").concat(right, "px ").concat(bottom, "px ").concat(left, "px");
-}, function (props) {
-  return props.invalid ? themeGet("colors.danger")(props) : props.valid ? themeGet("colors.success")(props) : themeGet("colors.black30")(props);
-}, function (props) {
-  return props.floating ? css(["&::placeholder{color:transparent;}&:not(:placeholder-shown){~ label{transform:translateY(-10px);font-size:", ";}}&:-ms-input-placeholder:not(:focus){~ label{transform:translateY(-10px);font-size:", ";}}&:not(:-ms-input-placeholder){~ label{transform:translateY(-10px);font-size:", ";}}"], themeGet("fontSizes.0")(props), themeGet("fontSizes.0")(props), themeGet("fontSizes.0")(props)) : css(["&::placeholder{color:", ";}"], themeGet("colors.grey")(props));
-}, function (props) {
-  return props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props);
-}, function (props) {
-  return props.invalid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props) : props.valid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props);
-}, function (props) {
-  return props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props);
-}, function (props) {
-  return props.floating ? css(["&::placeholder{color:", ";}~ label{transform:translateY(-10px);font-size:", ";color:", ";}"], themeGet("colors.greyLight")(props), themeGet("fontSizes.0")(props), function (props) {
-    return props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props);
-  }) : css([""]);
-});
-var Input = styled("input").attrs(function (props) {
-  return {
-    "data-testid": props["data-testid"] ? props["data-testid"] : null
-  };
-}).withConfig({
+}, props => props.invalid ? themeGet("colors.danger")(props) : props.valid ? themeGet("colors.success")(props) : themeGet("colors.black30")(props), props => props.floating ? css(["&::placeholder{color:transparent;}&:not(:placeholder-shown){~ label{transform:translateY(-10px);font-size:", ";}}&:-ms-input-placeholder:not(:focus){~ label{transform:translateY(-10px);font-size:", ";}}&:not(:-ms-input-placeholder){~ label{transform:translateY(-10px);font-size:", ";}}"], themeGet("fontSizes.0")(props), themeGet("fontSizes.0")(props), themeGet("fontSizes.0")(props)) : css(["&::placeholder{color:", ";}"], themeGet("colors.grey")(props)), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props), props => props.invalid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props) : props.valid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props), props => props.floating ? css(["&::placeholder{color:", ";}~ label{transform:translateY(-10px);font-size:", ";color:", ";}"], themeGet("colors.greyLight")(props), themeGet("fontSizes.0")(props), props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props)) : css([""]));
+const Input = styled("input").attrs(props => ({
+  "data-testid": props["data-testid"] ? props["data-testid"] : null
+})).withConfig({
   displayName: "TextInput__Input",
   componentId: "sc-shde0o-2"
 })(["", ""], InputStyle);
-var NumberInput = styled(NumericFormat).attrs(function (props) {
-  return {
-    "data-testid": props["data-testid"] ? props["data-testid"] : null
-  };
-}).withConfig({
+const NumberInput = styled(NumericFormat).attrs(props => ({
+  "data-testid": props["data-testid"] ? props["data-testid"] : null
+})).withConfig({
   displayName: "TextInput__NumberInput",
   componentId: "sc-shde0o-3"
 })(["", ""], InputStyle);
-var Label = styled.label.withConfig({
+const Label = styled.label.withConfig({
   displayName: "TextInput__Label",
   componentId: "sc-shde0o-4"
-})(["display:block;z-index:2;text-align:left;font-size:", ";font-weight:", ";transition:", ";padding-right:", ";margin-bottom:", ";color:", ";", ";", ";"], function (props) {
-  return themeGet("fontSizes.1")(props);
-}, function (props) {
-  return props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return props.floating && props.iconRight ? "40px" : "12px";
-}, function (props) {
-  return props.floating ? 0 : themeGet("space.xs")(props);
-}, function (props) {
-  return props.inverted ? themeGet("colors.white")(props) : props.valid ? themeGet("colors.successDark")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props);
-}, function (props) {
-  return props.floating ? css(["padding-left:", ";cursor:text;position:absolute;top:", ";color:", ";"], function (props) {
-    return props.iconLeft ? "37px" : "11px";
-  }, function (props) {
-    var inputHeight = themeGet("appScale.inputHeightLarge")(props);
-    return "calc(".concat(inputHeight, " / 3)");
-  }, function (props) {
-    return props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.greyDark")(props);
-  }) : css([""]);
-}, function (props) {
-  return props.mandatory ? css(["&:after{content:\" *\";color:", ";}"], themeGet("colors.danger")(props)) : css([""]);
-});
-var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var inverted = props.inverted,
-    floating = props.floating,
-    id = props.id,
-    bold = props.bold,
-    invalid = props.invalid,
-    valid = props.valid,
-    fullWidth = props.fullWidth,
-    mandatory = props.mandatory,
-    iconLeft = props.iconLeft,
-    iconRight = props.iconRight,
-    InputStyles = props.InputStyles,
-    height = props.height,
-    focus = props.focus,
-    ariaLabel = props.ariaLabel;
-  var inputRef = useInputFocus(ref, focus);
-  var numberProps = props.numberProps,
-    rest = _objectWithoutProperties(props, _excluded);
-  var getNumberInputRef = null;
+})(["display:block;z-index:2;text-align:left;font-size:", ";font-weight:", ";transition:", ";padding-right:", ";margin-bottom:", ";color:", ";", ";", ";"], props => themeGet("fontSizes.1")(props), props => props.bold ? themeGet("fontWeights.2")(props) : themeGet("fontWeights.1")(props), props => themeGet("transition.transitionDefault")(props), props => props.floating && props.iconRight ? "40px" : "12px", props => props.floating ? 0 : themeGet("space.xs")(props), props => props.inverted ? themeGet("colors.white")(props) : props.valid ? themeGet("colors.successDark")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props), props => props.floating ? css(["padding-left:", ";cursor:text;position:absolute;top:", ";color:", ";"], props => props.iconLeft ? "37px" : "11px", props => {
+  let inputHeight = themeGet("appScale.inputHeightLarge")(props);
+  return "calc(".concat(inputHeight, " / 3)");
+}, props => props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.greyDark")(props)) : css([""]), props => props.mandatory ? css(["&:after{content:\" *\";color:", ";}"], themeGet("colors.danger")(props)) : css([""]));
+const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    inverted,
+    floating,
+    id,
+    bold,
+    invalid,
+    valid,
+    fullWidth,
+    mandatory,
+    iconLeft,
+    iconRight,
+    InputStyles,
+    height,
+    focus,
+    ariaLabel
+  } = props;
+  const inputRef = useInputFocus(ref, focus);
+  const {
+    numberProps,
+    ...rest
+  } = props;
+  let getNumberInputRef = null;
   if (numberProps && inputRef) {
-    getNumberInputRef = function getNumberInputRef(node) {
+    getNumberInputRef = node => {
       inputRef.current = node;
     };
   }
-  var label = useMemo(function () {
+  const label = useMemo(() => {
     if (numberProps && numberProps.prefix) {
       return "".concat(props.label, " ").concat(numberProps.prefix);
     }
     return props.label;
   }, [props.label, numberProps]);
-  return /*#__PURE__*/React.createElement(Group, _extends({
-    fullWidth: fullWidth
-  }, InputStyles), label && !floating ? /*#__PURE__*/React.createElement(Label, {
-    inverted: inverted,
-    invalid: invalid,
-    valid: valid,
-    bold: bold,
-    htmlFor: id,
-    mandatory: mandatory
-  }, label) : null, numberProps ? /*#__PURE__*/React.createElement(NumberInput, _extends({
-    getInputRef: getNumberInputRef,
-    "data-testid": props["data-testid"],
-    id: id,
-    "aria-label": ariaLabel
-  }, rest, {
-    height: height
-  }, numberProps)) : /*#__PURE__*/React.createElement(Input, _extends({
-    "data-testid": props["data-testid"],
-    height: height,
-    ref: inputRef,
-    id: id,
-    "aria-label": ariaLabel
-  }, rest)), label && floating ? /*#__PURE__*/React.createElement(Label, {
-    floating: floating,
-    invalid: invalid,
-    valid: valid,
-    bold: bold,
-    htmlFor: id,
-    mandatory: mandatory,
-    iconRight: iconRight,
-    iconLeft: iconLeft
-  }, label) : null, iconLeft ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconWrapper, {
-    htmlFor: id,
-    iconLeft: iconLeft,
-    floating: floating
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: iconLeft,
-    htmlFor: id,
-    color: "black"
-  }))) : null, iconRight ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconWrapper, {
-    htmlFor: id,
-    iconRight: iconRight,
-    floating: floating
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: iconRight,
-    htmlFor: id,
-    color: "#black"
-  }))) : null);
+  return /*#__PURE__*/_jsxs(Group, {
+    fullWidth: fullWidth,
+    ...InputStyles,
+    children: [label && !floating ? /*#__PURE__*/_jsx(Label, {
+      inverted: inverted,
+      invalid: invalid,
+      valid: valid,
+      bold: bold,
+      htmlFor: id,
+      mandatory: mandatory,
+      children: label
+    }) : null, numberProps ? /*#__PURE__*/_jsx(NumberInput, {
+      getInputRef: getNumberInputRef,
+      "data-testid": props["data-testid"],
+      id: id,
+      "aria-label": ariaLabel,
+      ...rest,
+      height: height,
+      ...numberProps
+    }) : /*#__PURE__*/_jsx(Input, {
+      "data-testid": props["data-testid"],
+      height: height,
+      ref: inputRef,
+      id: id,
+      "aria-label": ariaLabel,
+      ...rest
+    }), label && floating ? /*#__PURE__*/_jsx(Label, {
+      floating: floating,
+      invalid: invalid,
+      valid: valid,
+      bold: bold,
+      htmlFor: id,
+      mandatory: mandatory,
+      iconRight: iconRight,
+      iconLeft: iconLeft,
+      children: label
+    }) : null, iconLeft ? /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(IconWrapper, {
+        htmlFor: id,
+        iconLeft: iconLeft,
+        floating: floating,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: iconLeft,
+          htmlFor: id,
+          color: "black"
+        })
+      })
+    }) : null, iconRight ? /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(IconWrapper, {
+        htmlFor: id,
+        iconRight: iconRight,
+        floating: floating,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: iconRight,
+          htmlFor: id,
+          color: "#black"
+        })
+      })
+    }) : null]
+  });
 });
 TextInput.propTypes = {
   /** Must be used to specify a unique ID. */
@@ -208,12 +164,12 @@ TextInput.propTypes = {
   /** Specifies the text for the label. */
   label: PropTypes.string,
   /** Specifies aria-label for TextArea. This is only required if not using the label prop.*/
-  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 TextInput 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 TextInput component. Expected `string`, received `").concat(_typeof(props[propName]), "`."));
+      return new Error("Invalid propType `".concat(propName, "` supplied to TextInput component. Expected `string`, received `").concat(typeof props[propName], "`."));
     }
     return null;
   },

package/es/components/Toggle/Toggle.stories.js

@@ -2,75 +2,76 @@ import React from "react";
 import Toggle from ".";
 import Box from "../Box";
 import Spacer from "../Spacer";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default {
   title: "Components/Toggle",
   component: Toggle
 };
-export var defaultToggle = function defaultToggle() {
-  return /*#__PURE__*/React.createElement(Toggle, {
-    id: "autosave",
-    label: "Auto save"
-  });
-};
+export const defaultToggle = () => /*#__PURE__*/_jsx(Toggle, {
+  id: "autosave",
+  label: "Auto save"
+});
 defaultToggle.storyName = "Default";
-export var small = function small() {
-  return /*#__PURE__*/React.createElement(Toggle, {
-    id: "autosave2",
-    label: "Auto save",
-    small: true
-  });
-};
-export var inverted = function inverted() {
-  return /*#__PURE__*/React.createElement(Box, {
+export const small = () => /*#__PURE__*/_jsx(Toggle, {
+  id: "autosave2",
+  label: "Auto save",
+  small: true
+});
+export const inverted = () => /*#__PURE__*/_jsx(Box, {
+  p: "r",
+  bg: "greyDarkest",
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    my: "r",
+    children: [/*#__PURE__*/_jsx(Toggle, {
+      id: "autosave3",
+      label: "Auto save",
+      inverted: true,
+      small: true
+    }), /*#__PURE__*/_jsx(Toggle, {
+      id: "autosave4",
+      label: "Auto save",
+      inverted: true
+    })]
+  })
+});
+export const disabled = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(Box, {
     p: "r",
-    bg: "greyDarkest"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
-  }, /*#__PURE__*/React.createElement(Toggle, {
-    id: "autosave3",
-    label: "Auto save",
-    inverted: true,
-    small: true
-  }), /*#__PURE__*/React.createElement(Toggle, {
-    id: "autosave4",
-    label: "Auto save",
-    inverted: true
-  })));
-};
-export var disabled = function disabled() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
-  }, /*#__PURE__*/React.createElement(Toggle, {
-    id: "autosave5",
-    label: "Auto save",
-    small: true,
-    disabled: true
-  }), /*#__PURE__*/React.createElement(Toggle, {
-    id: "autosave6",
-    label: "Auto save",
-    checked: true,
-    disabled: true
-  }))), /*#__PURE__*/React.createElement(Box, {
+    children: /*#__PURE__*/_jsxs(Spacer, {
+      my: "r",
+      children: [/*#__PURE__*/_jsx(Toggle, {
+        id: "autosave5",
+        label: "Auto save",
+        small: true,
+        disabled: true
+      }), /*#__PURE__*/_jsx(Toggle, {
+        id: "autosave6",
+        label: "Auto save",
+        checked: true,
+        disabled: true
+      })]
+    })
+  }), /*#__PURE__*/_jsx(Box, {
     p: "r",
-    bg: "greyDarkest"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
-  }, /*#__PURE__*/React.createElement(Toggle, {
-    id: "autosave7",
-    label: "Auto save",
-    inverted: true,
-    small: true,
-    disabled: true
-  }), /*#__PURE__*/React.createElement(Toggle, {
-    id: "autosave8",
-    label: "Auto save",
-    checked: true,
-    inverted: true,
-    disabled: true
-  }))));
-};
+    bg: "greyDarkest",
+    children: /*#__PURE__*/_jsxs(Spacer, {
+      my: "r",
+      children: [/*#__PURE__*/_jsx(Toggle, {
+        id: "autosave7",
+        label: "Auto save",
+        inverted: true,
+        small: true,
+        disabled: true
+      }), /*#__PURE__*/_jsx(Toggle, {
+        id: "autosave8",
+        label: "Auto save",
+        checked: true,
+        inverted: true,
+        disabled: true
+      })]
+    })
+  })]
+});
 defaultToggle.__docgenInfo = {
   "description": "",
   "methods": [],