@sproutsocial/racine 20.15.0 → 20.17.0

package/commonjs/Icon/Icon.js

@@ -30,7 +30,7 @@ var AllViewboxes = _objectSpread(_objectSpread(_objectSpread({}, _seedsIcons.Ext
 var Icon = function Icon(_ref) {
   var name = _ref.name,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'small' : _ref$size,
+    size = _ref$size === void 0 ? "small" : _ref$size,
     _ref$fixedWidth = _ref.fixedWidth,
     fixedWidth = _ref$fixedWidth === void 0 ? false : _ref$fixedWidth,
     ariaLabel = _ref.ariaLabel,
@@ -39,11 +39,11 @@ var Icon = function Icon(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   if ((0, _utils.includes)(_logoNames.default, name)) {
     // Icon's "default" size is equivalent to PartnerLogo's "small" size
-    var logoSize = size === 'default' ? 'small' : size;
+    var logoSize = size === "default" ? "small" : size;
     var logoProps = {
       partnerName: name,
       size: logoSize,
-      logoType: 'symbol',
+      logoType: "symbol",
       svgProps: svgProps
     };
     return /*#__PURE__*/React.createElement(_PartnerLogo.default
@@ -52,10 +52,10 @@ var Icon = function Icon(_ref) {
       "aria-label": ariaLabel
     }, rest, logoProps));
   }
-  var defaultVariant = size === 'mini' ? 'solid' : 'outline';
+  var defaultVariant = size === "mini" ? "solid" : "outline";
   var iconName =
   // if not external and has no variant
-  !(name !== null && name !== void 0 && name.endsWith('-outline')) && !(name !== null && name !== void 0 && name.endsWith('-solid')) && !(0, _utils.includes)(_seedsIcons.ExternalIconNames, name) ? // then add default variant
+  !(name !== null && name !== void 0 && name.endsWith("-outline")) && !(name !== null && name !== void 0 && name.endsWith("-solid")) && !(0, _utils.includes)(_seedsIcons.ExternalIconNames, name) ? // then add default variant
   "".concat(name, "-").concat(defaultVariant) :
   // else use name as is
   name;
@@ -93,7 +93,7 @@ var IconToggle = function IconToggle(_ref2) {
     inactiveName = _ref2.inactiveName,
     isActive = _ref2.isActive,
     _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'small' : _ref2$size,
+    size = _ref2$size === void 0 ? "small" : _ref2$size,
     _ref2$fixedWidth = _ref2.fixedWidth,
     fixedWidth = _ref2$fixedWidth === void 0 ? false : _ref2$fixedWidth,
     ariaLabel = _ref2.ariaLabel,
@@ -118,7 +118,7 @@ var IconToggle = function IconToggle(_ref2) {
     "aria-hidden": isActive
   }));
 };
-IconToggle.displayName = 'Icon.Toggle';
+IconToggle.displayName = "Icon.Toggle";
 /**
  * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.
  *

package/commonjs/Icon/styles.js

@@ -11,19 +11,19 @@ var _systemProps = require("../utils/system-props");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var sizes = {
-  mini: '12px',
+  mini: "12px",
   /** TODO: deprecate default  in favor of small in future release */
-  default: '16px',
-  small: '16px',
-  medium: '24px',
-  large: '32px',
-  jumbo: '64px'
+  default: "16px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
 };
 var stylesForSize = function stylesForSize(iconActualSize, fixedWidth) {
   return (0, _styledComponents.css)(["line-height:", ";&,.Icon-svg{height:", ";fill:currentColor;}", ""], iconActualSize, iconActualSize, fixedWidth && "\n    &,\n    & .Icon-svg {\n      width: ".concat(iconActualSize, "\n    }\n  "));
 };
 var Container = _styledComponents.default.span.attrs({
-  className: 'Icon'
+  className: "Icon"
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-1v500hw-0"

package/commonjs/IllustrationViewBoxes.js

@@ -75,6 +75,7 @@ module.exports = {
   "planning": "0 0 251 277",
   "podium": "0 0 106 46",
   "pointer": "0 0 54 37",
+  "profile-groups": "0 0 360 195",
   "publish-assets": "0 0 336 263",
   "publish-links": "0 0 266 252",
   "publishing-notifications": "0 0 564 187",

package/commonjs/Image/Image.js

@@ -111,15 +111,15 @@ var Image = exports.default = /*#__PURE__*/function (_React$Component) {
         onLoad: this.onLoad,
         alt: alt,
         title: title,
-        "data-qa-image": title ? title : alt ? alt : '',
-        "data-qa-image-src": src || ''
+        "data-qa-image": title ? title : alt ? alt : "",
+        "data-qa-image-src": src || ""
       }, qa, rest));
     }
   }]);
   return Image;
 }(React.Component);
 _defineProperty(Image, "defaultProps", {
-  title: '',
+  title: "",
   onError: noop,
   onClick: noop,
   onLoad: noop

package/commonjs/Image/styles.js

@@ -10,7 +10,7 @@ var _systemProps = require("../utils/system-props");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ImageContainer = _styledComponents.default.img.attrs({
-  className: 'Image'
+  className: "Image"
 }).withConfig({
   displayName: "styles__ImageContainer",
   componentId: "sc-dngsi7-0"

package/commonjs/Indicator/Indicator.js

@@ -55,5 +55,5 @@ var Indicator = exports.default = /*#__PURE__*/function (_React$Component) {
   return Indicator;
 }(React.Component);
 _defineProperty(Indicator, "defaultProps", {
-  tooltip: ''
+  tooltip: ""
 });

package/commonjs/Indicator/styles.js

@@ -9,7 +9,7 @@ var _mixins = require("../utils/mixins");
 var _systemProps = require("../utils/system-props");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Container = _styledComponents.default.span.attrs({
-  className: 'Indicator'
+  className: "Indicator"
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-8xib7y-0"

package/commonjs/Input/Input.js

@@ -57,35 +57,35 @@ var ClearButton = function ClearButton() {
   // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
   if (!clearButtonLabel) {
     // eslint-disable-next-line no-console
-    console.warn('Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.');
+    console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.");
   }
 
   // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
   // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
-  var py = inputSize === 'small' ? 100 : undefined;
-  var px = inputSize === 'small' ? 200 : undefined;
-  var buttonSize = inputSize === 'small' ? 'default' : inputSize;
+  var py = inputSize === "small" ? 100 : undefined;
+  var px = inputSize === "small" ? 200 : undefined;
+  var buttonSize = inputSize === "small" ? "default" : inputSize;
   return /*#__PURE__*/React.createElement(StyledButton, {
     onClick: handleClear,
     size: buttonSize,
     py: py,
     px: px,
-    title: clearButtonLabel || 'Clear',
-    ariaLabel: clearButtonLabel || 'Clear',
+    title: clearButtonLabel || "Clear",
+    ariaLabel: clearButtonLabel || "Clear",
     color: "icon.base"
   }, /*#__PURE__*/React.createElement(_Icon.default, {
     name: "circle-x-outline",
     "aria-hidden": true
   }));
 };
-ClearButton.displayName = 'Input.ClearButton';
+ClearButton.displayName = "Input.ClearButton";
 
 // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
 // regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var isClearButton = function isClearButton(elem) {
   if (elem !== null && elem !== void 0 && elem.type) {
-    return elem.type.displayName === 'Input.ClearButton';
+    return elem.type.displayName === "Input.ClearButton";
   }
   return false;
 };
@@ -107,9 +107,9 @@ var Input = /*#__PURE__*/function (_React$Component) {
       if (input) {
         var _Object$getOwnPropert, _this$props$onClear, _this$props2;
         // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
-        var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
-        nativeInputValueSetter === null || nativeInputValueSetter === void 0 || nativeInputValueSetter.call(input, '');
-        var inputEvent = new Event('input', {
+        var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
+        nativeInputValueSetter === null || nativeInputValueSetter === void 0 || nativeInputValueSetter.call(input, "");
+        var inputEvent = new Event("input", {
           bubbles: true
         });
         input.dispatchEvent(inputEvent);
@@ -146,7 +146,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return (_this$props$onPaste = (_this$props7 = _this.props).onPaste) === null || _this$props$onPaste === void 0 ? void 0 : _this$props$onPaste.call(_this$props7, e, e.currentTarget.value);
     });
     _defineProperty(_assertThisInitialized(_this), "updateState", function (inputValue) {
-      var hasValue = inputValue !== '';
+      var hasValue = inputValue !== "";
       var previousHasValue = _this.state.hasValue;
 
       // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
@@ -170,7 +170,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
       // Update hasValue state whenever props value changes
       var value = this.props.value;
       if (value !== prevValue) {
-        this.updateState(value || '');
+        this.updateState(value || "");
       }
     }
   }, {
@@ -214,18 +214,18 @@ var Input = /*#__PURE__*/function (_React$Component) {
       // Convert autoComplete from a boolean prop to a string value.
       var autoCompleteValue;
       if (autoComplete !== undefined) {
-        autoCompleteValue = autoComplete ? 'on' : 'off';
+        autoCompleteValue = autoComplete ? "on" : "off";
       }
 
       // Add default elemBefore and elemAfter elements if type is search.
-      var elementBefore = type === 'search' && !elemBefore ? /*#__PURE__*/React.createElement(_Icon.default, {
+      var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(_Icon.default, {
         name: "magnifying-glass-outline",
         "aria-hidden": true,
         color: "icon.base"
       }) : elemBefore;
 
       // Do not add a ClearButton if an elemAfter prop was passed.
-      var elementAfter = type === 'search' && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
+      var elementAfter = type === "search" && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
       return /*#__PURE__*/React.createElement(_styles.default, _extends({
         hasBeforeElement: !!elementBefore,
         hasAfterElement: !!elementAfter,
@@ -265,7 +265,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
         onKeyUp: this.handleKeyUp,
         onPaste: this.handlePaste,
         ref: (0, _utils.mergeRefs)([innerRef !== null && innerRef !== void 0 ? innerRef : null, this.inputRef]),
-        "data-qa-input": name || '',
+        "data-qa-input": name || "",
         "data-qa-input-isdisabled": disabled === true,
         "data-qa-input-isrequired": required === true
       }, qa, inputProps)), elementAfter && /*#__PURE__*/React.createElement(_styles.Accessory, {
@@ -279,9 +279,9 @@ var Input = /*#__PURE__*/function (_React$Component) {
 _defineProperty(Input, "defaultProps", {
   autoFocus: false,
   disabled: false,
-  type: 'text',
-  size: 'default',
-  appearance: 'primary'
+  type: "text",
+  size: "default",
+  appearance: "primary"
 });
 _defineProperty(Input, "ClearButton", ClearButton);
 var _default = exports.default = Input;

package/commonjs/Input/styles.js

@@ -33,33 +33,33 @@ var Container = _styledComponents.default.div.withConfig({
   return props.theme.fontWeights.normal;
 }, function (props) {
   switch (props.size) {
-    case 'large':
+    case "large":
       return "".concat(props.theme.space[350], " ").concat(props.theme.space[400]);
-    case 'small':
+    case "small":
       return props.theme.space[200];
-    case 'default':
+    case "default":
     default:
       return props.theme.space[300];
   }
 }, function (props) {
   switch (props.size) {
-    case 'large':
+    case "large":
       return props.theme.typography[300].fontSize;
-    case 'small':
-    case 'default':
+    case "small":
+    case "default":
     default:
       return props.theme.typography[200].fontSize;
   }
 }, function (props) {
   switch (props.size) {
-    case 'large':
+    case "large":
       return props.theme.typography[300].lineHeight;
 
     /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */
-    case 'small':
-    case 'default':
+    case "small":
+    case "default":
     default:
-      return '16px';
+      return "16px";
   }
 }, _mixins.focusRing, function (props) {
   return props.theme.colors.form.placeholder.base;
@@ -70,7 +70,7 @@ var Container = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.disabled && (0, _styledComponents.css)(["opacity:0.4;input{cursor:not-allowed;}"]);
 }, function (props) {
-  return props.appearance === 'primary' && (0, _styledComponents.css)(["input{border:1px solid ", ";}"], function (props) {
+  return props.appearance === "primary" && (0, _styledComponents.css)(["input{border:1px solid ", ";}"], function (props) {
     return props.theme.colors.form.border.base;
   });
 }, function (props) {
@@ -92,6 +92,6 @@ var Accessory = exports.Accessory = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.after && (0, _styledComponents.css)(["right:", ";"], props.isClearButton ? 0 : props.theme.space[300]);
 });
-Container.displayName = 'InputContainer';
-Accessory.displayName = 'InputAccessory';
+Container.displayName = "InputContainer";
+Accessory.displayName = "InputAccessory";
 var _default = exports.default = Container;

package/commonjs/Label/Label.js

@@ -29,7 +29,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 var LabelBase = function LabelBase(_ref) {
   var _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'label' : _ref$as,
+    as = _ref$as === void 0 ? "label" : _ref$as,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_Text.default, _extends({}, rest, {
     as: as

package/commonjs/Link/Link.js

@@ -28,14 +28,14 @@ var Link = function Link(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   if (!href && external) {
     // eslint-disable-next-line no-console
-    console.warn('Warning: external prop cannot be set without a href declaration');
+    console.warn("Warning: external prop cannot be set without a href declaration");
   }
-  var type = as || (href ? 'a' : 'button');
+  var type = as || (href ? "a" : "button");
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
     href: href,
-    target: external ? '_blank' : undefined,
-    type: type === 'button' ? 'button' : undefined,
-    rel: external ? 'noopener noreferrer' : undefined,
+    target: external ? "_blank" : undefined,
+    type: type === "button" ? "button" : undefined,
+    rel: external ? "noopener noreferrer" : undefined,
     forwardedAs: type,
     "aria-disabled": disabled ? disabled : undefined,
     disabled: disabled,

package/commonjs/Link/constants.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _seedsColor = require("@sproutsocial/seeds-color");
 var defaultLink = {
-  color: 'link',
-  hoverColor: 'link.hover',
+  color: "link",
+  hoverColor: "link.hover",
   activeColor: _seedsColor.COLOR_BLUE_900,
-  fontWeight: 'semibold'
+  fontWeight: "semibold"
 };
 var linkTheme = {
   default: defaultLink

package/commonjs/Link/styles.js

@@ -18,7 +18,7 @@ var Container = (0, _styledComponents.default)(_Text.default).withConfig({
 })(["border:0;font-family:", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", " ", ""], function (props) {
   return props.theme.fontFamily;
 }, function (props) {
-  return props.underline ? 'underline' : 'none';
+  return props.underline ? "underline" : "none";
 }, function (props) {
   return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {

package/commonjs/Listbox/Listbox.js

@@ -50,7 +50,7 @@ var ListboxButtonContainer = exports.ListboxButtonContainer = (0, _styledCompone
 }, function (props) {
   return props.theme.colors.text.body;
 }, function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
+  return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
@@ -65,20 +65,20 @@ var ListboxButtonContainer = exports.ListboxButtonContainer = (0, _styledCompone
   return props.theme.fontWeights.normal;
 }, function (props) {
   switch (props.size) {
-    case 'large':
+    case "large":
       return "".concat(props.theme.space[400], " ").concat(props.theme.space[600], " ").concat(props.theme.space[400], " ").concat(props.theme.space[400]);
-    case 'small':
+    case "small":
       return "".concat(props.theme.space[200], " ").concat(props.theme.space[500], " ").concat(props.theme.space[200], " ").concat(props.theme.space[200]);
-    case 'default':
+    case "default":
     default:
       return "".concat(props.theme.space[300], " ").concat(props.theme.space[500], " ").concat(props.theme.space[300], " ").concat(props.theme.space[300]);
   }
 }, function (props) {
   switch (props.size) {
-    case 'large':
+    case "large":
       return props.theme.typography[300].fontSize;
-    case 'small':
-    case 'default':
+    case "small":
+    case "default":
     default:
       return props.theme.typography[200].fontSize;
   }
@@ -94,7 +94,7 @@ var ListboxButton = exports.ListboxButton = function ListboxButton(_ref2) {
     restProps = _objectWithoutProperties(_ref2, _excluded2);
   return /*#__PURE__*/React.createElement(ListboxButtonContainer, _extends({}, restProps, {
     popoutProps: _objectSpread({
-      placement: 'bottom-start'
+      placement: "bottom-start"
     }, restProps.popoutProps || {})
   }), children, /*#__PURE__*/React.createElement(_styles.Arrow, {
     size: restProps.size

package/commonjs/Loader/Loader.js

@@ -43,18 +43,18 @@ var Loader = exports.default = /*#__PURE__*/function (_React$Component) {
         qa = _this$props.qa,
         rest = _objectWithoutProperties(_this$props, _excluded);
       return /*#__PURE__*/React.createElement(_styles.default, _extends({
-        small: size === 'small',
-        dark: color === 'dark',
+        small: size === "small",
+        dark: color === "dark",
         delay: delay,
         "data-qa-loader": ""
-      }, qa, rest), /*#__PURE__*/React.createElement(_styles.Text, null, text || 'Loading'));
+      }, qa, rest), /*#__PURE__*/React.createElement(_styles.Text, null, text || "Loading"));
     }
   }]);
   return Loader;
 }(React.Component);
 _defineProperty(Loader, "defaultProps", {
-  size: 'large',
-  text: '',
+  size: "large",
+  text: "",
   delay: true,
-  color: 'dark'
+  color: "dark"
 });

package/commonjs/Loader/styles.js

@@ -21,12 +21,12 @@ var getSize = function getSize(size) {
 var spin = (0, _styledComponents.keyframes)(["from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}"]);
 var delayAnimation = (0, _styledComponents.keyframes)(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
 var Container = _styledComponents.default.div.attrs({
-  className: 'Loader'
+  className: "Loader"
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-1edimrk-0"
-})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:'';transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (props) {
-  return props.delay ? (0, _styledComponents.css)(["", " 2s 1;"], delayAnimation) : 'none';
+})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:\"\";transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (props) {
+  return props.delay ? (0, _styledComponents.css)(["", " 2s 1;"], delayAnimation) : "none";
 }, function (_ref2) {
   var theme = _ref2.theme;
   return "".concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[600], " ").concat(theme.colors.neutral[600]);

package/commonjs/LoaderButton/LoaderButton.js

@@ -26,13 +26,13 @@ var StyledLoaderButton = (0, _styledComponents.default)(_Button.default).withCon
     appearance = _ref.appearance,
     disabled = _ref.disabled;
   var buttonBackgroundColor = (_theme$colors$button = theme.colors.button[appearance]) === null || _theme$colors$button === void 0 || (_theme$colors$button = _theme$colors$button.background) === null || _theme$colors$button === void 0 ? void 0 : _theme$colors$button.base;
-  var isBackgroundColorTransparent = buttonBackgroundColor === 'transparent';
+  var isBackgroundColorTransparent = buttonBackgroundColor === "transparent";
 
   // If the button is disabled we want to check what the buttonBackgroundColor is, if it is transparent we want to return transparent, otherwise we want to return the buttonBackgroundColor with an opacity of 0.4. If the button is not disabled we want to return the buttonBackgroundColor.
-  return disabled ? isBackgroundColorTransparent ? 'transparent' : "".concat(buttonBackgroundColor, "66") : buttonBackgroundColor;
+  return disabled ? isBackgroundColorTransparent ? "transparent" : "".concat(buttonBackgroundColor, "66") : buttonBackgroundColor;
 }, function (_ref2) {
   var disabled = _ref2.disabled;
-  return disabled && 'opacity: 1;';
+  return disabled && "opacity: 1;";
 });
 var LoaderButton = exports.LoaderButton = function LoaderButton(_ref3) {
   var _ref3$isLoading = _ref3.isLoading,
@@ -41,7 +41,7 @@ var LoaderButton = exports.LoaderButton = function LoaderButton(_ref3) {
     loaderLabel = _ref3.loaderLabel,
     children = _ref3.children,
     _ref3$appearance = _ref3.appearance,
-    appearance = _ref3$appearance === void 0 ? 'unstyled' : _ref3$appearance,
+    appearance = _ref3$appearance === void 0 ? "unstyled" : _ref3$appearance,
     rest = _objectWithoutProperties(_ref3, _excluded);
   return /*#__PURE__*/React.createElement(StyledLoaderButton, _extends({
     disabled: disabled || isLoading,