@sproutsocial/racine 20.16.0 → 20.17.0

package/lib/Input/Input.js

@@ -16,8 +16,8 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Objec
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import * as React from 'react';
-import styled from 'styled-components';
+import * as React from "react";
+import styled from "styled-components";
 import { useInteractiveColor } from "../utils/useInteractiveColor";
 import { mergeRefs } from "../utils";
 import Button from "../Button";
@@ -49,35 +49,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, {
     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;
 };
@@ -99,9 +99,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);
@@ -138,7 +138,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.
@@ -162,7 +162,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 || "");
       }
     }
   }, {
@@ -206,18 +206,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, {
+      var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(Icon, {
         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(Container, _extends({
         hasBeforeElement: !!elementBefore,
         hasAfterElement: !!elementAfter,
@@ -257,7 +257,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
         onKeyUp: this.handleKeyUp,
         onPaste: this.handlePaste,
         ref: 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(Accessory, {
@@ -271,9 +271,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);
 export default Input;

package/lib/Input/styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
 import { focusRing } from "../utils/mixins";
 import { COMMON } from "../utils/system-props";
 var Container = styled.div.withConfig({
@@ -24,33 +24,33 @@ var Container = styled.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";
   }
 }, focusRing, function (props) {
   return props.theme.colors.form.placeholder.base;
@@ -61,7 +61,7 @@ var Container = styled.div.withConfig({
 }, function (props) {
   return props.disabled && css(["opacity:0.4;input{cursor:not-allowed;}"]);
 }, function (props) {
-  return props.appearance === 'primary' && css(["input{border:1px solid ", ";}"], function (props) {
+  return props.appearance === "primary" && css(["input{border:1px solid ", ";}"], function (props) {
     return props.theme.colors.form.border.base;
   });
 }, function (props) {
@@ -83,6 +83,6 @@ export var Accessory = styled.div.withConfig({
 }, function (props) {
   return props.after && css(["right:", ";"], props.isClearButton ? 0 : props.theme.space[300]);
 });
-Container.displayName = 'InputContainer';
-Accessory.displayName = 'InputAccessory';
+Container.displayName = "InputContainer";
+Accessory.displayName = "InputAccessory";
 export default Container;

package/lib/KeyboardKey/KeyboardKey.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/KeyboardKey/KeyboardKey.js

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 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 * as React from "react";
 import Text from "../Text";
 import Container from "./styles";
 var KeyboardKey = /*#__PURE__*/function (_React$Component) {

package/lib/KeyboardKey/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 import { COMMON } from "../utils/system-props";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",

package/lib/Label/Label.flow.js

@@ -1,2 +1,2 @@
-import * as React from 'react';
+import * as React from "react";
 import Text from "../Text/index.flow";

package/lib/Label/Label.js

@@ -15,12 +15,12 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Objec
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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 styled from 'styled-components';
+import * as React from "react";
+import styled from "styled-components";
 import Text from "../Text";
 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, _extends({}, rest, {
     as: as

package/lib/Link/Link.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/Link/Link.js

@@ -2,7 +2,7 @@ var _excluded = ["href", "external", "children", "disabled", "onClick", "as", "u
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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 * as React from "react";
 import Container from "./styles";
 var Link = function Link(_ref) {
   var href = _ref.href,
@@ -18,14 +18,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(Container, _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/lib/Link/constants.js

@@ -1,9 +1,9 @@
-import { COLOR_BLUE_900 } from '@sproutsocial/seeds-color';
+import { COLOR_BLUE_900 } from "@sproutsocial/seeds-color";
 var defaultLink = {
-  color: 'link',
-  hoverColor: 'link.hover',
+  color: "link",
+  hoverColor: "link.hover",
   activeColor: COLOR_BLUE_900,
-  fontWeight: 'semibold'
+  fontWeight: "semibold"
 };
 var linkTheme = {
   default: defaultLink

package/lib/Link/styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
 import { focusRing, disabled } from "../utils/mixins";
 import { TYPOGRAPHY, COMMON, FLEXBOX } from "../utils/system-props";
 import Text from "../Text";
@@ -8,7 +8,7 @@ var Container = styled(Text).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 && css(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {

package/lib/Listbox/Listbox.flow.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 import Button from "../Button/index.flow";
 import Popout from "../Popout/index.flow";
 import Menu from "../Menu/index.flow";

package/lib/Listbox/Listbox.js

@@ -9,8 +9,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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 styled, { css } from 'styled-components';
+import * as React from "react";
+import styled, { css } from "styled-components";
 import { MENU_ROLES } from "../Menu/utils/constants";
 import { Arrow } from "../Select/styles";
 import Icon from "../Icon";
@@ -41,7 +41,7 @@ export var ListboxButtonContainer = styled(MenuButton).withConfig({
 }, 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) {
@@ -56,20 +56,20 @@ export var ListboxButtonContainer = styled(MenuButton).withConfig({
   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;
   }
@@ -85,7 +85,7 @@ export var 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(Arrow, {
     size: restProps.size

package/lib/Loader/Loader.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/Loader/Loader.js

@@ -16,7 +16,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Objec
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import * as React from 'react';
+import * as React from "react";
 import Container, { Text } from "./styles";
 var Loader = /*#__PURE__*/function (_React$Component) {
   _inherits(Loader, _React$Component);
@@ -35,19 +35,19 @@ var Loader = /*#__PURE__*/function (_React$Component) {
         qa = _this$props.qa,
         rest = _objectWithoutProperties(_this$props, _excluded);
       return /*#__PURE__*/React.createElement(Container, _extends({
-        small: size === 'small',
-        dark: color === 'dark',
+        small: size === "small",
+        dark: color === "dark",
         delay: delay,
         "data-qa-loader": ""
-      }, qa, rest), /*#__PURE__*/React.createElement(Text, null, text || 'Loading'));
+      }, qa, rest), /*#__PURE__*/React.createElement(Text, null, text || "Loading"));
     }
   }]);
   return Loader;
 }(React.Component);
 _defineProperty(Loader, "defaultProps", {
-  size: 'large',
-  text: '',
+  size: "large",
+  text: "",
   delay: true,
-  color: 'dark'
+  color: "dark"
 });
 export { Loader as default };

package/lib/Loader/styles.js

@@ -1,4 +1,4 @@
-import styled, { css, keyframes } from 'styled-components';
+import styled, { css, keyframes } from "styled-components";
 import { visuallyHidden } from "../utils/mixins";
 import { COMMON } from "../utils/system-props";
 var getSize = function getSize(size) {
@@ -12,12 +12,12 @@ var getSize = function getSize(size) {
 var spin = keyframes(["from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}"]);
 var delayAnimation = keyframes(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
 var Container = styled.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 ? 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 ? 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/lib/LoaderButton/LoaderButton.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/LoaderButton/LoaderButton.js

@@ -2,8 +2,8 @@ var _excluded = ["isLoading", "disabled", "loaderLabel", "children", "appearance
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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 styled from 'styled-components';
+import * as React from "react";
+import styled from "styled-components";
 import Box from "../Box";
 import Button from "../Button";
 import Loader from "../Loader";
@@ -16,13 +16,13 @@ var StyledLoaderButton = styled(Button).withConfig({
     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;";
 });
 export var LoaderButton = function LoaderButton(_ref3) {
   var _ref3$isLoading = _ref3.isLoading,
@@ -31,7 +31,7 @@ export var 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,

package/lib/Menu/Menu.flow.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 import Box from "../Box/index.flow";
 import Button from "../Button/index.flow";
 import Popout from "../Popout/index.flow";