@sproutsocial/racine 12.19.0 → 12.21.0

package/lib/Breadcrumb/styles.js

@@ -1,8 +1,9 @@
-import styled from "styled-components";
+
+import styled from 'styled-components';
 var Nav = styled.nav.withConfig({
   displayName: "styles__Nav",
   componentId: "sc-1ub1apc-0"
-})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
+})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:'/';margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)::after{content:'/';color:", ";margin-left:", ";}"], function (props) {
   return props.theme.typography[200];
 }, function (props) {
   return props.theme.fontFamily;

package/lib/Button/index.js

@@ -1,11 +1,9 @@
 var _excluded = ["href", "appearance", "active", "disabled", "external", "children", "size", "innerRef", "onClick", "title", "qa", "as", "ariaLabel"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import * as React from 'react';
+import Container from './styles';
 
-import * as React from "react";
-import Container from "./styles";
 /**
  * @deprecated
  * Use "unstyled" appearance instead of "default"
@@ -13,55 +11,50 @@ import Container from "./styles";
 
 var Button = function Button(_ref) {
   var href = _ref.href,
-      _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? "unstyled" : _ref$appearance,
-      _ref$active = _ref.active,
-      active = _ref$active === void 0 ? false : _ref$active,
-      disabled = _ref.disabled,
-      external = _ref.external,
-      children = _ref.children,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "default" : _ref$size,
-      innerRef = _ref.innerRef,
-      onClick = _ref.onClick,
-      title = _ref.title,
-      _ref$qa = _ref.qa,
-      qa = _ref$qa === void 0 ? {} : _ref$qa,
-      as = _ref.as,
-      ariaLabel = _ref.ariaLabel,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'unstyled' : _ref$appearance,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    disabled = _ref.disabled,
+    external = _ref.external,
+    children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    innerRef = _ref.innerRef,
+    onClick = _ref.onClick,
+    title = _ref.title,
+    _ref$qa = _ref.qa,
+    qa = _ref$qa === void 0 ? {} : _ref$qa,
+    as = _ref.as,
+    ariaLabel = _ref.ariaLabel,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   if (!href && external) {
-    console.warn("Warning: external prop cannot be set without a href declaration");
+    console.warn('Warning: external prop cannot be set without a href declaration');
   }
-  /** "default" is @deprecated in favor of "unstyled"  */
-
 
-  var appearanceCheck = appearance === "default" ? "unstyled" : appearance;
-
-  if (appearance === "default") {
-    console.warn("Warning: The `default` appearance has been deprecated on the Button component. Please use `unstyled` instead.");
+  /** "default" is @deprecated in favor of "unstyled"  */
+  var appearanceCheck = appearance === 'default' ? 'unstyled' : appearance;
+  if (appearance === 'default') {
+    console.warn('Warning: The `default` appearance has been deprecated on the Button component. Please use `unstyled` instead.');
   }
-
   return /*#__PURE__*/React.createElement(Container, _extends({
     title: title,
     active: active,
     href: href,
-    target: external ? "_blank" : undefined,
-    rel: external ? "noopener noreferrer" : undefined,
-    as: as || (href ? "a" : "button"),
-    type: href ? undefined : "button",
+    target: external ? '_blank' : undefined,
+    rel: external ? 'noopener noreferrer' : undefined,
+    as: as || (href ? 'a' : 'button'),
+    type: href ? undefined : 'button',
     "aria-disabled": disabled ? disabled : undefined,
     disabled: disabled,
     buttonSize: size,
     appearance: appearanceCheck,
     ref: innerRef,
     onClick: onClick,
-    "data-qa-button": title || "",
+    "data-qa-button": title || '',
     "data-qa-button-isdisabled": disabled === true,
     "aria-label": ariaLabel
   }, qa, rest), children);
 };
-
-Button.displayName = "Button";
+Button.displayName = 'Button';
 export default Button;

package/lib/Button/styles.js

@@ -1,7 +1,8 @@
-import styled, { css } from "styled-components";
-import { COMMON, LAYOUT } from "../utils/system-props";
-import { focusRing, disabled, pill } from "../utils/mixins";
-import Icon from "../Icon/styles";
+
+import styled, { css } from 'styled-components';
+import { COMMON, LAYOUT } from '../utils/system-props';
+import { focusRing, disabled, pill } from '../utils/mixins';
+import Icon from '../Icon/styles';
 var Container = styled.button.withConfig({
   displayName: "styles__Container",
   componentId: "sc-1juy94s-0"
@@ -12,7 +13,7 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.appearance === "placeholder" ? "dashed" : "solid";
+  return props.appearance === 'placeholder' ? 'dashed' : 'solid';
 }, function (props) {
   return props.theme.colors.button[props.appearance].background.base;
 }, function (props) {
@@ -22,9 +23,9 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
-  return props.buttonSize === "default" ? "" + props.theme.space[300] : "" + props.theme.space[350];
+  return props.buttonSize === 'default' ? "" + props.theme.space[300] : "" + props.theme.space[350];
 }, function (props) {
-  return props.buttonSize === "default" ? props.theme.typography[200].fontSize : props.theme.typography[300].fontSize;
+  return props.buttonSize === 'default' ? props.theme.typography[200].fontSize : props.theme.typography[300].fontSize;
 }, function (props) {
   return props.theme.colors.button[props.appearance].text.base;
 }, function (props) {
@@ -32,7 +33,7 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.theme.colors.button[props.appearance].background.hover;
 }, function (props) {
-  return props.appearance === "placeholder" ? props.theme.shadows.low : "none";
+  return props.appearance === 'placeholder' ? props.theme.shadows.low : 'none';
 }, function (props) {
   return props.theme.colors.button[props.appearance].text.hover;
 }, function (props) {
@@ -42,7 +43,9 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.disabled && disabled;
 }, function (props) {
-  return props.appearance === "pill" && css(["display:inline-flex;align-items:center;justify-content:center;background-color:transparent;", " &:focus:active,&:hover{background-color:transparent;box-shadow:inset 0px 0px 0px 1px ", ";}"], pill, props.theme.colors.button[props.appearance].border.hover);
+  return props.appearance === 'pill' && css(["display:inline-flex;align-items:center;justify-content:center;background-color:transparent;", " &:focus:active,&:hover{background-color:transparent;box-shadow:inset 0px 0px 0px 1px ", ";}"], pill, props.theme.colors.button[props.appearance].border.hover);
 }, Icon, LAYOUT, COMMON);
-Container.displayName = "Button-Container";
-export default Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}
+Container.displayName = 'Button-Container';
+export default Container;
+
+//${props.theme.mode === "dark" ? "screen" : "multiply"}

package/lib/Card/index.js

@@ -1,31 +1,26 @@
-"no babel-plugin-flow-react-proptypes";
+'no babel-plugin-flow-react-proptypes';
 
 var _excluded = ["onClick", "href", "children", "ariaLabel", "buttonProps", "border", "borderColor", "color", "bg"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import * as React from "react";
-import { Container, ClickableArea } from "./styles";
-
+import * as React from 'react';
+import { Container, ClickableArea } from './styles';
 var Card = function Card(_ref) {
   var onClick = _ref.onClick,
-      href = _ref.href,
-      children = _ref.children,
-      ariaLabel = _ref.ariaLabel,
-      _ref$buttonProps = _ref.buttonProps,
-      buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
-      _ref$border = _ref.border,
-      border = _ref$border === void 0 ? 500 : _ref$border,
-      _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? "container.border.base" : _ref$borderColor,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? "text.body" : _ref$color,
-      _ref$bg = _ref.bg,
-      bg = _ref$bg === void 0 ? "container.background.base" : _ref$bg,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    href = _ref.href,
+    children = _ref.children,
+    ariaLabel = _ref.ariaLabel,
+    _ref$buttonProps = _ref.buttonProps,
+    buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? 500 : _ref$border,
+    _ref$borderColor = _ref.borderColor,
+    borderColor = _ref$borderColor === void 0 ? 'container.border.base' : _ref$borderColor,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'text.body' : _ref$color,
+    _ref$bg = _ref.bg,
+    bg = _ref$bg === void 0 ? 'container.background.base' : _ref$bg,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
     border: border,
     borderColor: borderColor,
@@ -37,5 +32,4 @@ var Card = function Card(_ref) {
     href: href
   }, buttonProps), null), children);
 };
-
 export default Card;

package/lib/Card/styles.js

@@ -1,10 +1,11 @@
-import styled from "styled-components";
-import Button from "../Button";
-import Box from "../Box";
+
+import styled from 'styled-components';
+import Button from '../Button';
+import Box from '../Box';
 var Container = styled(Box).withConfig({
   displayName: "styles__Container",
   componentId: "sc-p098yi-0"
-})(["width:100%;border-radius:", ";position:relative;z-index:0;::after{content:\"\";top:0;left:0;position:absolute;border-radius:", ";z-index:-1;width:100%;height:100%;opacity:0;box-shadow:", ";transition:opacity ", " ", ";}&:hover{&::after{opacity:1;}}[role=\"button\"],[type=\"button\"],a{position:relative;}"], function (props) {
+})(["width:100%;border-radius:", ";position:relative;z-index:0;::after{content:'';top:0;left:0;position:absolute;border-radius:", ";z-index:-1;width:100%;height:100%;opacity:0;box-shadow:", ";transition:opacity ", " ", ";}&:hover{&::after{opacity:1;}}[role='button'],[type='button'],a{position:relative;}"], function (props) {
   return props.theme.radii.outer;
 }, function (props) {
   return props.theme.radii[500];

package/lib/CharacterCounter/index.js

@@ -1,45 +1,33 @@
 var _excluded = ["size"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-import * as React from "react";
-import Container from "./styles";
-
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+import * as React from 'react';
+import Container from './styles';
 var CharacterCounter = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(CharacterCounter, _React$Component);
-
   function CharacterCounter() {
     return _React$Component.apply(this, arguments) || this;
   }
-
   var _proto = CharacterCounter.prototype;
-
   _proto.render = function render() {
     var _this$props = this.props,
-        size = _this$props.size,
-        rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
+      size = _this$props.size,
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
     var remaining = this.props.maxValue - this.props.currentValue;
     return (
       /*#__PURE__*/
       // $FlowIssue - upgrade v0.112.0
       React.createElement(Container, _extends({
-        mini: size === "mini",
+        mini: size === 'mini',
         overlimit: remaining <= 0
       }, rest), remaining)
     );
   };
-
   return CharacterCounter;
 }(React.Component);
-
 CharacterCounter.defaultProps = {
-  size: "default"
+  size: 'default'
 };
 export { CharacterCounter as default };

package/lib/CharacterCounter/styles.js

@@ -1,5 +1,6 @@
-import styled, { css } from "styled-components";
-import { COMMON } from "../utils/system-props";
+
+import styled, { css } from 'styled-components';
+import { COMMON } from '../utils/system-props';
 var Container = styled.div.withConfig({
   displayName: "styles__Container",
   componentId: "sc-do9szx-0"

package/lib/ChartLegend/index.js

@@ -1,18 +1,13 @@
 var _excluded = ["legendLabels", "stacked", "theme"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import * as React from "react";
-import Container, { Label, Swatch } from "./styles";
-import Text from "../Text";
-import { THEME_MAP } from "../utils/chartColors";
-
+import * as React from 'react';
+import Container, { Label, Swatch } from './styles';
+import Text from '../Text';
+import { THEME_MAP } from '../utils/chartColors';
 function getSwatchColor(theme, index) {
   return THEME_MAP[theme.toUpperCase()][index];
 }
-
 function getLabels(legendLabels, theme) {
   return legendLabels.map(function (label, i) {
     var labelColor = label.color ? label.color : getSwatchColor(theme, i);
@@ -28,18 +23,15 @@ function getLabels(legendLabels, theme) {
     }, label.name));
   });
 }
-
 var ChartLegend = function ChartLegend(props) {
   var legendLabels = props.legendLabels,
-      stacked = props.stacked,
-      _props$theme = props.theme,
-      theme = _props$theme === void 0 ? "compare" : _props$theme,
-      rest = _objectWithoutPropertiesLoose(props, _excluded);
-
+    stacked = props.stacked,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'compare' : _props$theme,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/React.createElement(Container, _extends({
     inline: !stacked,
     "data-qa-chartlegend": ""
   }, props.qa, rest), getLabels(legendLabels, theme));
 };
-
 export default ChartLegend;

package/lib/ChartLegend/styles.js

@@ -1,5 +1,6 @@
-import styled, { css } from "styled-components";
-import { COMMON, LAYOUT } from "../utils/system-props";
+
+import styled, { css } from 'styled-components';
+import { COMMON, LAYOUT } from '../utils/system-props';
 export var Label = styled.span.withConfig({
   displayName: "styles__Label",
   componentId: "sc-se0ijc-0"
@@ -24,6 +25,6 @@ var Container = styled.div.withConfig({
     return props.theme.space[450];
   });
 }, COMMON, LAYOUT);
-Label.displayName = "ChartLegendLabel";
-Swatch.displayName = "ChartLegendSwatch";
+Label.displayName = 'ChartLegendLabel';
+Swatch.displayName = 'ChartLegendSwatch';
 export default Container;

package/lib/Checkbox/index.js

@@ -1,82 +1,66 @@
 var _excluded = ["id", "value", "name", "label", "labelProps", "checked", "disabled", "indeterminate", "onChange", "ariaLabel", "appearance", "qa", "tabIndex", "inputProps"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-import * as React from "react";
-import Container, { CheckboxBox, CheckIcon, PillInput, InputWrapper, LabelText, CheckboxContainer } from "./styles";
-
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+import * as React from 'react';
+import Container, { CheckboxBox, CheckIcon, PillInput, InputWrapper, LabelText, CheckboxContainer } from './styles';
 var Checkbox = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Checkbox, _React$Component);
-
   function Checkbox() {
     var _this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.el = void 0;
-
     _this.handleChange = function (event) {
       _this.props.onChange(event);
     };
-
     return _this;
   }
-
   var _proto = Checkbox.prototype;
-
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {
       this.el.indeterminate = !!this.props.indeterminate;
     }
   };
-
   _proto.componentDidMount = function componentDidMount() {
     if (this.el) {
       this.el.indeterminate = !!this.props.indeterminate;
     }
   };
-
   _proto.render = function render() {
     var _this2 = this;
-
     var _this$props = this.props,
-        id = _this$props.id,
-        value = _this$props.value,
-        name = _this$props.name,
-        label = _this$props.label,
-        labelProps = _this$props.labelProps,
-        checked = _this$props.checked,
-        disabled = _this$props.disabled,
-        indeterminate = _this$props.indeterminate,
-        onChange = _this$props.onChange,
-        ariaLabel = _this$props.ariaLabel,
-        _this$props$appearanc = _this$props.appearance,
-        appearance = _this$props$appearanc === void 0 ? "default" : _this$props$appearanc,
-        _this$props$qa = _this$props.qa,
-        qa = _this$props$qa === void 0 ? {} : _this$props$qa,
-        tabIndex = _this$props.tabIndex,
-        _this$props$inputProp = _this$props.inputProps,
-        inputProps = _this$props$inputProp === void 0 ? {} : _this$props$inputProp,
-        rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
-    var isPill = appearance === "pill"; // TODO: Refactor pill checkboxes to use fewer elements for performance gains
-
+      id = _this$props.id,
+      value = _this$props.value,
+      name = _this$props.name,
+      label = _this$props.label,
+      labelProps = _this$props.labelProps,
+      checked = _this$props.checked,
+      disabled = _this$props.disabled,
+      indeterminate = _this$props.indeterminate,
+      onChange = _this$props.onChange,
+      ariaLabel = _this$props.ariaLabel,
+      _this$props$appearanc = _this$props.appearance,
+      appearance = _this$props$appearanc === void 0 ? 'default' : _this$props$appearanc,
+      _this$props$qa = _this$props.qa,
+      qa = _this$props$qa === void 0 ? {} : _this$props$qa,
+      tabIndex = _this$props.tabIndex,
+      _this$props$inputProp = _this$props.inputProps,
+      inputProps = _this$props$inputProp === void 0 ? {} : _this$props$inputProp,
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
+    var isPill = appearance === 'pill';
+
+    // TODO: Refactor pill checkboxes to use fewer elements for performance gains
     if (!isPill) {
       return /*#__PURE__*/React.createElement(CheckboxContainer, _extends({
-        as: label && "label",
+        as: label && 'label',
         disabled: disabled,
         indeterminate: indeterminate,
-        checked: checked // $FlowIssue - upgrade v0.112.0
-
+        checked: checked
+        // $FlowIssue - upgrade v0.112.0
       }, rest), /*#__PURE__*/React.createElement("input", _extends({
         type: "checkbox",
         id: id,
@@ -90,19 +74,18 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         disabled: disabled,
         onChange: this.handleChange,
         "data-qa-checkbox": id,
-        "data-qa-checkbox-ischecked": indeterminate ? "indeterminate" : checked === true,
+        "data-qa-checkbox-ischecked": indeterminate ? 'indeterminate' : checked === true,
         "data-qa-checkbox-isdisabled": disabled === true,
         tabIndex: tabIndex
       }, qa, inputProps)), label && /*#__PURE__*/React.createElement(LabelText, _extends({}, labelProps, {
         disabled: disabled
       }), label));
     }
-
     return (
       /*#__PURE__*/
       // $FlowIssue - upgrade v0.112.0
       React.createElement(Container, _extends({
-        as: label && "label"
+        as: label && 'label'
       }, rest), /*#__PURE__*/React.createElement(InputWrapper, {
         appearance: appearance
       }, /*#__PURE__*/React.createElement(PillInput, _extends({
@@ -118,20 +101,18 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         disabled: disabled,
         onChange: this.handleChange,
         "data-qa-checkbox": id,
-        "data-qa-checkbox-ischecked": indeterminate ? "indeterminate" : checked === true,
+        "data-qa-checkbox-ischecked": indeterminate ? 'indeterminate' : checked === true,
         "data-qa-checkbox-isdisabled": disabled === true,
         tabIndex: tabIndex
       }, qa, inputProps)), /*#__PURE__*/React.createElement(CheckboxBox, null, /*#__PURE__*/React.createElement(CheckIcon, {
-        name: indeterminate ? "minus" : "check",
+        name: indeterminate ? 'minus' : 'check',
         size: "mini",
         fixedWidth: true
       }))))
     );
   };
-
   return Checkbox;
 }(React.Component);
-
 Checkbox.defaultProps = {
   indeterminate: false,
   disabled: false